annotate sat_templates/default/static/photo.css @ 155:954759f0e8fa

css: styles improvments + following a bit more BEM conventions
author Goffi <goffi@goffi.org>
date Thu, 21 Jun 2018 01:12:40 +0200
parents 33c7ce833d3f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
124
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 @import 'blog.css'; /* needed for comments */
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 .album {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 display: flex;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5 flex-wrap: wrap;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
6 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
8 .album__item {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
9 width: 400px;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
10 margin: 0 0.1em 2em 0.1em;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 .album__vignette {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 background-color: #444;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 height: 300px;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
16 position: relative;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19 .album__thumbnail {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
20 height: 100%;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 display: block;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22 margin: 0 auto;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
23 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
24
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 .album__comments-bar {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 display: block;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 font-size: 0.8em;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28 color: black;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
29 text-align: right;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
30 cursor: pointer;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
31 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
32
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
33 .album__comments-bar:hover {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
34 background-color: #ddd;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
35 font-weight: bold;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
36 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
37
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 .comments__count {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
39 font-weight: bold;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
40 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
42 .panel-drawer {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
43 max-height: 0;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
44 opacity: 0;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 transition: max-height 1s, opacity 2s;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
46 overflow: hidden;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
47 }
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
49 .panel-drawer.clicked {
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
50 opacity: 1;
11e729a7d8e9 photo: photos handling, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
51 }