annotate web_resources/style/feed-preview.css @ 5:341a0f4b7ce0

Handle feed entry content normalization with a setter
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Sun, 04 Nov 2018 10:03:05 +0100
parents 1c31f4102408
children c271192aac9d
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
1 @import url("common.css");
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
2
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
3 html,
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
4 body {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
5 padding: 16px 32px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
6 background: var(--grey-10);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
7 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
8
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
9 #feed-header {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
10 max-width: 80ch;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
11 margin: 0 auto;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
12 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
13
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
14 #feed-logo {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
15 float: right;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
16 max-width: 188px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
17 max-height: 48px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
18 margin: 0 0 8px 8px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
19 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
20
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
21 #feed-title {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
22 font-size: 1.777em;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
23 margin: 0 0 4px 0;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
24 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
25
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
26 #feed-subtitle {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
27 color: var(--grey-50);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
28 margin: 0 0 16px 0;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
29 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
30
1
1c31f4102408 Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents: 0
diff changeset
31 #no-entries-hint {
1c31f4102408 Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents: 0
diff changeset
32 color: var(--grey-50);
1c31f4102408 Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents: 0
diff changeset
33 }
1c31f4102408 Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents: 0
diff changeset
34
1c31f4102408 Show a hint if the feed has no entries
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents: 0
diff changeset
35 #no-entries-hint,
0
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
36 .entry {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
37 clear: both;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
38 margin: 16px auto;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
39 padding: 16px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
40 max-width: 80ch;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
41 background: var(--white-100);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
42 border-radius: 4px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
43 box-shadow: 0 1px 2px var(--grey-90-a40);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
44 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
45
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
46 details.entry > summary {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
47 display: flex;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
48 align-items: center;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
49 list-style-type: none;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
50 padding: 0 8px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
51 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
52
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
53 details.entry > summary:focus {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
54 outline: none;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
55 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
56
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
57 details.entry > summary::before {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
58 content: url('../images/arrow.svg');
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
59 width: 16px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
60 height: 16px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
61 flex: 0 0 16px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
62 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
63
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
64 details.entry[open] > summary {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
65 margin: 0 0 8px 0;
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 details.entry[open] > summary::before {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
69 transform: rotate(90deg);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
70 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
71
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
72 .entry-header {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
73 margin: 0 0 0 8px;
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
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
76 .entry-title {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
77 font-size: 1.333em;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
78 margin: 0 0 4px 0;
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
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
81 .entry-date {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
82 color: var(--grey-50);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
83 margin: 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
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
86 .entry-content {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
87 width: 100%;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
88 height: 24em;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
89 border: 1px solid var(--grey-90-a10);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
90 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
91
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
92 .entry-files {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
93 padding: 0 8px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
94 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
95
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
96 .entry-files-title {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
97 font-size: 1em;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
98 margin: 0 0 4px 0;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
99 }
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
100
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
101 .entry-files-list {
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
102 margin: 0;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
103 padding: 0 0 0 32px;
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
104 color: var(--grey-50);
bc5cc170163c Initial revision
Guido Berhoerster <guido+feed-preview@berhoerster.name>
parents:
diff changeset
105 }