|
124
|
1 @import 'blog.css'; /* needed for comments */ |
|
|
2 |
|
|
3 .album { |
|
|
4 display: flex; |
|
|
5 flex-wrap: wrap; |
|
|
6 } |
|
|
7 |
|
|
8 .album__item { |
|
|
9 width: 400px; |
|
|
10 margin: 0 0.1em 2em 0.1em; |
|
|
11 } |
|
|
12 |
|
|
13 .album__vignette { |
|
|
14 background-color: #444; |
|
|
15 height: 300px; |
|
|
16 position: relative; |
|
|
17 } |
|
|
18 |
|
|
19 .album__thumbnail { |
|
|
20 height: 100%; |
|
|
21 display: block; |
|
|
22 margin: 0 auto; |
|
|
23 } |
|
|
24 |
|
|
25 .album__comments-bar { |
|
|
26 display: block; |
|
|
27 font-size: 0.8em; |
|
|
28 color: black; |
|
|
29 text-align: right; |
|
|
30 cursor: pointer; |
|
|
31 } |
|
|
32 |
|
|
33 .album__comments-bar:hover { |
|
|
34 background-color: #ddd; |
|
|
35 font-weight: bold; |
|
|
36 } |
|
|
37 |
|
|
38 .comments__count { |
|
|
39 font-weight: bold; |
|
|
40 } |
|
|
41 |
|
|
42 .panel-drawer { |
|
|
43 max-height: 0; |
|
|
44 opacity: 0; |
|
|
45 transition: max-height 1s, opacity 2s; |
|
|
46 overflow: hidden; |
|
|
47 } |
|
|
48 |
|
|
49 .panel-drawer.clicked { |
|
|
50 opacity: 1; |
|
|
51 } |
