-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
183 lines (157 loc) · 4.95 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Permanent+Marker&display=swap');
:root {
--white: #FFF;
--black: #000;
--purple: #3a068c;
--bgColor: #f5f5f5;
--fontColor: #000;
--messageBgColor: rgba(255, 255, 255, 0.8);
--defaultShadowColor: rgba(0, 0, 0, 0.2);
}
html,
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Permanent Marker, sans-serif;
color: var(--fontColor);
background-color: var(--bgColor);
background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%233a068c' fill-opacity='0.31' fill-rule='evenodd'/%3E%3C/svg%3E");
}
h1 {
position: fixed;
top: 0;
width: 100%;
padding: 18px 30px;
margin: 0;
margin-bottom: 15px;
font-size: 32px;
background-color: var(--messageBgColor);
box-shadow: 0 7px 7px 7px var(defaultShadowColor);
z-index: 1000;
transition: all 0.4s linear 0.5s;
}
.minimized {
font-size: 18px;
padding: 10px 30px;
box-shadow: 0 5px 5px 5px var(defaultShadowColor);
color: var(--purple);
opacity: 0.5;
}
.loader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--messageBgColor);
}
.loader img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.error-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 25px 30px;
font-size: 28px;
color: var(--purple);
background-color: var(--messageBgColor);
}
/* Image Container */
.image-container {
isolation: isolate;
margin: 150px 30%;
}
.image-container a {
text-decoration: none;
}
.image-container img {
width: 100%;
margin-top: 10px;
box-shadow: 0 10px 10px 10px var(defaultShadowColor);
transition: all 0.4s linear;
}
.image-container a:hover img {
transform: scale(107%) translateY(-7%);
}
.image-container .text-container {
position: relative;
top: -80px;
min-height: 80px;
width: 100%;
background-color: var(--white);
padding: 18px 25px;
margin: 0;
color: var(--black);
font-family: Permanent Marker, sans-serif;
font-size: 1.35rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
transition: all 0.4s linear;
box-shadow: 0 10px 10px 10px var(--defaultShadowColor);
}
.image-container .text-container span.photographer {
font-size: 1.5rem;
}
.image-container a:hover .text-container {
transform: translateY(25%) scaleX(107%);
}
.image-container .text-container .like-container {
position: absolute;
top: 48%;
right: 0;
opacity: 0.45;
}
.like-container i {
color: var(--purple);
font-size: 2.5rem;
}
.like-container .likes-count {
position: relative;
top: -10px;
left: -50%;
color: var(--purple);
font-size: 1.2rem;
line-height: 1.4;
}
/* Media Query: Large Smartphone */
@media screen and (max-width: 600px) {
h1 {
font-size: 20px;
}
.image-container {
margin: 0 20px;
}
.image-container img {
margin-top: 5px;
}
.image-container .text-container {
font-size: 0.85rem;
}
.image-container .text-container span.photographer {
font-size: 0.9rem;
}
.image-container a:hover img,
.image-container a:hover .text-container {
transform: scale(103%) translateY(-3%);
}
}
@media screen and (max-width: 960px) {
.image-container .text-container {
font-size: 1rem;
}
.image-container .text-container span.photographer {
font-size: 1.15rem;
}
}