Mercurial > addons > firefox-addons > feed-preview
annotate web_resources/style/feed-preview.css @ 8:c271192aac9d
Improve visual appearance
Make use of the built-in browser extension stylesheet.
Use semantic CSS variables.
author | Guido Berhoerster <guido+feed-preview@berhoerster.name> |
---|---|
date | Tue, 27 Nov 2018 11:11:15 +0100 |
parents | 1c31f4102408 |
children | fcd65cf3f634 |
rev | line source |
---|---|
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
1 /* |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
2 * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name> |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
3 * |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
4 * This Source Code Form is subject to the terms of the Mozilla Public |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
5 * License, v. 2.0. If a copy of the MPL was not distributed with this |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
6 * file, You can obtain one at http://mozilla.org/MPL/2.0/. |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
7 */ |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
8 |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
9 @import url("common.css"); |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
10 |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
11 :root { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
12 --default-background: var(--grey-10); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
13 --entry-background: var(--white-100); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
14 --secondary-color: var(--grey-50); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
15 --entry-content-border: 1px solid var(--grey-90-a10); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
16 --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
17 --font-display-20: 300 36px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
18 --font-title-40: 300 28px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
19 --font-title-30: 300 22px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
20 --font-title-20: 500 17px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
21 --font-title-10: 500 13px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
22 --font-body-20: 400 15px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
23 --font-body-10: 400 13px var(--font-family-default); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
24 --entry-shadow: 0 1px 4px var(--grey-90-a10); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
25 --entry-outline: var(--entry-shadow), 0 0 0 5px var(--grey-30); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
26 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
27 |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
28 body { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
29 padding: 16px; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
30 background-color: var(--default-background); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
31 background-image: none; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
32 background-repeat: no-repeat; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
33 background-origin: padding-box; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
34 background-position: bottom 0 left 0; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
35 background-attachment: fixed; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
36 height: 100%; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
37 font: var(--font-body-20); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
38 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
39 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
40 @media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
41 /* minimum background image size is 200px */ |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
42 body { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
43 background-image: url('../images/feed.svg'); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
44 background-size: calc((100vw - 80ch) / 2); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
45 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
46 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
47 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
48 @media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) and |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
49 (width > calc(80ch + 33vh)) { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
50 /* |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
51 * the background image should not be higher than three times the viewport |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
52 * height |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
53 */ |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
54 body { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
55 background-image: url('../images/feed.svg'); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
56 background-size: 33vh 33vh; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
57 } |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
58 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
59 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
60 #feed-header { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
61 width: 100%; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
62 max-width: 80ch; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
63 min-width: 40ch; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
64 padding: 16px; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
65 margin: 0 auto; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
66 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
67 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
68 #feed-logo { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
69 float: right; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
70 max-width: 188px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
71 max-height: 48px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
72 margin: 0 0 8px 8px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
73 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
74 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
75 #feed-title { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
76 font: var(--font-title-40); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
77 margin: 0; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
78 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
79 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
80 #feed-subtitle { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
81 font: var(--font-body-20); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
82 color: var(--secondary-color); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
83 margin: 6px 0 0 0; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
84 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
85 |
1
1c31f4102408
Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
0
diff
changeset
|
86 #no-entries-hint { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
87 color: var(--secondary-color); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
88 font: var(--font-display-20); |
1
1c31f4102408
Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
0
diff
changeset
|
89 } |
1c31f4102408
Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
0
diff
changeset
|
90 |
1c31f4102408
Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
0
diff
changeset
|
91 #no-entries-hint, |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
92 .entry { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
93 clear: both; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
94 margin: 16px auto 0 auto; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
95 padding: 16px; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
96 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
97 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
98 .entry { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
99 overflow: auto; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
100 max-width: 80ch; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
101 background: var(--entry-background); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
102 border-radius: 4px; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
103 box-shadow: var(--entry-shadow); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
104 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
105 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
106 #feed-header + article .entry { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
107 margin-top: 16px; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
108 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
109 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
110 .entry + .entry { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
111 margin-top: 8px; |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
112 } |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
113 |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
114 .entry:hover { |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
115 box-shadow: var(--entry-outline); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
116 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
117 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
118 details.entry > summary { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
119 display: flex; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
120 align-items: center; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
121 list-style-type: none; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
122 padding: 0 8px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
123 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
124 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
125 details.entry > summary:focus { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
126 outline: none; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
127 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
128 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
129 details.entry > summary::before { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
130 content: url('../images/arrow.svg'); |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
131 width: 16px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
132 height: 16px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
133 flex: 0 0 16px; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
134 transition: 100ms; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
135 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
136 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
137 details.entry[open] > summary { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
138 margin: 0 0 8px 0; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
139 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
140 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
141 details.entry[open] > summary::before { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
142 transform: rotate(90deg); |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
143 transition: 100ms; |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
144 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
145 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
146 .entry-header { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
147 margin: 0 0 0 8px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
148 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
149 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
150 .entry-title { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
151 font: var(--font-title-20); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
152 margin: 0 0 4px 0; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
153 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
154 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
155 .entry-date { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
156 color: var(--secondary-color); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
157 font: var(--font-body-10); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
158 margin: 0; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
159 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
160 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
161 .entry-content { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
162 width: 100%; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
163 height: 24em; |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
164 border: var(--entry-content-border); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
165 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
166 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
167 .entry-files { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
168 font: var(--font-body-10); |
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
169 color: var(--secondary-color); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
170 padding: 0 8px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
171 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
172 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
173 .entry-files-title { |
8
c271192aac9d
Improve visual appearance
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
1
diff
changeset
|
174 font: var(--font-title-10); |
0
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
175 margin: 0 0 4px 0; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
176 } |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
177 |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
178 .entry-files-list { |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
179 margin: 0; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
180 padding: 0 0 0 32px; |
bc5cc170163c
Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff
changeset
|
181 } |