diff options
Diffstat (limited to 'docs/style.css')
-rw-r--r-- | docs/style.css | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/docs/style.css b/docs/style.css index cdcb2d0..70ce31e 100644 --- a/docs/style.css +++ b/docs/style.css | |||
@@ -168,16 +168,89 @@ pre > code { | |||
168 | color: var(--black); | 168 | color: var(--black); |
169 | } | 169 | } |
170 | 170 | ||
171 | /* art stuff */ | ||
172 | #photos { | ||
173 | -webkit-column-count: 3; | ||
174 | -webkit-column-gap: 12px; | ||
175 | -moz-column-count: 3; | ||
176 | -moz-column-gap: 12px; | ||
177 | column-count: 3; | ||
178 | column-gap: 12px; | ||
179 | } | ||
180 | |||
181 | #photos img { | ||
182 | /* Just in case there are inline attributes */ | ||
183 | width: 100% !important; | ||
184 | height: auto !important; | ||
185 | border: 0px; | ||
186 | border-radius: 0.4rem; | ||
187 | box-shadow: none; | ||
188 | } | ||
189 | |||
190 | .photo-container { | ||
191 | position: relative; | ||
192 | width: 100%; | ||
193 | margin-bottom: 12px; | ||
194 | } | ||
195 | |||
196 | .photo-overlay { | ||
197 | line-height: 0; | ||
198 | position: absolute; | ||
199 | top: 0; | ||
200 | bottom: 0; | ||
201 | left: 0; | ||
202 | right: 0; | ||
203 | width: 100% !important; | ||
204 | height: auto !important; | ||
205 | opacity: 0; | ||
206 | transition: .3s ease; | ||
207 | background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.0)); | ||
208 | border-radius: 0.4rem; | ||
209 | } | ||
210 | |||
211 | .photo-text { | ||
212 | line-height: 1; | ||
213 | padding: 12px; | ||
214 | color: white; | ||
215 | } | ||
216 | |||
217 | .photo-title { | ||
218 | font-size: 1rem; | ||
219 | color: white; | ||
220 | } | ||
221 | |||
222 | .photo-date { | ||
223 | margin-top: 0.2rem; | ||
224 | font-size: 0.6rem; | ||
225 | color: white; | ||
226 | } | ||
227 | |||
228 | .photo-container:hover .photo-overlay { | ||
229 | opacity: 1; | ||
230 | } | ||
231 | |||
232 | /* end of art stuff */ | ||
233 | |||
171 | @media only screen and (min-width: 1080px) { | 234 | @media only screen and (min-width: 1080px) { |
172 | .posts { | 235 | .posts { |
173 | max-width: 650px; | 236 | max-width: 650px; |
174 | } | 237 | } |
238 | #photos { | ||
239 | -moz-column-count: 3; | ||
240 | -webkit-column-count: 3; | ||
241 | column-count: 3; | ||
242 | } | ||
175 | } | 243 | } |
176 | 244 | ||
177 | @media only screen and (min-width: 1400px) { | 245 | @media only screen and (min-width: 1400px) { |
178 | .posts { | 246 | .posts { |
179 | max-width: 650px; | 247 | max-width: 650px; |
180 | } | 248 | } |
249 | #photos { | ||
250 | -moz-column-count: 3; | ||
251 | -webkit-column-count: 3; | ||
252 | column-count: 3; | ||
253 | } | ||
181 | } | 254 | } |
182 | 255 | ||
183 | .posts { | 256 | .posts { |