about summary refs log tree commit diff stats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--style.css282
1 files changed, 141 insertions, 141 deletions
diff --git a/style.css b/style.css index 9f6e4e2..8e6c8eb 100644 --- a/style.css +++ b/style.css
@@ -1,270 +1,270 @@
1:root { 1:root {
2 --main-background: white; 2 --main-background: white;
3 --main-foreground: black; 3 --main-foreground: black;
4 --alt-background: #eee; 4 --alt-background: #eee;
5 --alt-foreground: black; 5 --alt-foreground: black;
6 --fresh-background: inherit; 6 --fresh-background: inherit;
7 --fresh-foreground: inherit; 7 --fresh-foreground: inherit;
8 --stale-background: inherit; 8 --stale-background: inherit;
9 --stale-foreground: inherit; 9 --stale-foreground: inherit;
10 --hover-background: yellow; 10 --hover-background: yellow;
11 --hover-foreground: inherit; 11 --hover-foreground: inherit;
12 --active-background: cyan; 12 --active-background: cyan;
13 --active-foreground: inherit; 13 --active-foreground: inherit;
14 --extra-foreground: blue; 14 --extra-foreground: blue;
15} 15}
16 16
17body { 17body {
18 background: var(--main-background); 18 background: var(--main-background);
19 color: var(--main-foreground); 19 color: var(--main-foreground);
20 font: 16px/1.2 sans-serif; 20 font: 16px/1.2 sans-serif;
21 margin: auto; 21 margin: auto;
22 max-width: 150ch; 22 max-width: 150ch;
23} 23}
24 24
25main { 25main {
26 display: flex; 26 display: flex;
27 flex-flow: row nowrap; 27 flex-flow: row nowrap;
28 justify-content: space-around; 28 justify-content: space-around;
29} 29}
30 30
31main section { 31main section {
32 max-width: 100ch; 32 max-width: 100ch;
33} 33}
34 34
35section.feed { 35section.feed {
36 padding: 4px; 36 padding: 4px;
37} 37}
38 38
39section.feed:target { 39section.feed:target {
40 border: 1px solid; 40 border: 1px solid;
41} 41}
42 42
43main aside { 43main aside {
44 flex-grow: 1; 44 flex-grow: 1;
45 text-align: right; 45 text-align: right;
46 max-width: 40ch; 46 max-width: 40ch;
47} 47}
48 48
49#page-header, 49#page-header,
50#page-nav { 50#page-nav {
51 margin: 1ch; 51 margin: 1ch;
52} 52}
53 53
54header { 54header {
55 display: flex; 55 display: flex;
56 flex-flow: row wrap; 56 flex-flow: row wrap;
57 align-items: baseline; 57 align-items: baseline;
58 justify-content: space-between; 58 justify-content: space-between;
59 margin: 1ch 0; 59 margin: 1ch 0;
60} 60}
61 61
62h2 { 62h2 {
63 margin: 0; 63 margin: 0;
64} 64}
65 65
66time { 66time {
67 font-family: monospace; 67 font-family: monospace;
68} 68}
69 69
70#page-nav { 70#page-nav {
71 border-bottom: 1px solid; 71 border-bottom: 1px solid;
72 padding-bottom: 4px; 72 padding-bottom: 4px;
73} 73}
74 74
75#last-updated, 75#last-updated,
76nav, 76nav,
77footer { 77footer {
78 font-size: 80%; 78 font-size: 80%;
79 text-align: right; 79 text-align: right;
80} 80}
81 81
82#last-update, 82#last-update,
83footer { 83footer {
84 flex-grow: 1; 84 flex-grow: 1;
85} 85}
86 86
87footer { 87footer {
88 border-top: 1px solid; 88 border-top: 1px solid;
89 margin: 1ch 0; 89 margin: 1ch 0;
90 padding: 1ch 0; 90 padding: 1ch 0;
91} 91}
92 92
93table, 93table,
94.entry-title { 94.entry-title {
95 width: 100%; 95 width: 100%;
96 border-collapse: collapse; 96 border-collapse: collapse;
97} 97}
98 98
99td.entry-timestamp { 99td.entry-timestamp {
100 font: 50%/1.1 monospace; 100 font: 50%/1.1 monospace;
101 text-align: right; 101 text-align: right;
102 padding: 4px; 102 padding: 4px;
103} 103}
104 104
105td.entry-extra { 105td.entry-extra {
106 font-family: monospace; 106 font-family: monospace;
107 text-align: right; 107 text-align: right;
108 white-space: nowrap; 108 white-space: nowrap;
109} 109}
110 110
111td.entry-extra a { 111td.entry-extra a {
112 color: var(--extra-foreground); 112 color: var(--extra-foreground);
113} 113}
114 114
115td.entry-extra a, 115td.entry-extra a,
116nav.flinks a { 116nav.flinks a {
117 display: inline-block; 117 display: inline-block;
118} 118}
119 119
120td { 120td {
121 margin: 0; 121 margin: 0;
122 padding: 0; 122 padding: 0;
123} 123}
124 124
125tr:nth-child(even), 125tr:nth-child(even),
126#feedlist li:nth-child(even) { 126#feedlist li:nth-child(even) {
127 background: var(--main-background); 127 background: var(--main-background);
128} 128}
129 129
130tr:nth-child(even):last-child { 130tr:nth-child(even):last-child {
131 border-bottom: 1px solid var(--alt-background); 131 border-bottom: 1px solid var(--alt-background);
132} 132}
133 133
134tr:nth-child(odd), 134tr:nth-child(odd),
135#feedlist li:nth-child(odd) { 135#feedlist li:nth-child(odd) {
136 background: var(--alt-background); 136 background: var(--alt-background);
137} 137}
138 138
139aside li { 139aside li {
140 list-style: none; 140 list-style: none;
141} 141}
142 142
143.fresh { 143.fresh {
144 font-weight: bold; 144 font-weight: bold;
145 background: var(--fresh-background); 145 background: var(--fresh-background);
146 color: var(--fresh-foreground); 146 color: var(--fresh-foreground);
147} 147}
148.fresh nav, 148.fresh nav,
149.stale { 149.stale {
150 font-weight: normal; 150 font-weight: normal;
151 background: var(--stale-background); 151 background: var(--stale-background);
152 color: var(--stale-foreground); 152 color: var(--stale-foreground);
153} 153}
154 154
155a { 155a {
156 display: block; 156 display: block;
157 padding: 4px 8px; 157 padding: 4px 8px;
158 color: inherit; 158 color: inherit;
159} 159}
160 160
161a:link { 161a:link {
162 text-decoration: none; 162 text-decoration: none;
163} 163}
164 164
165a:visited { 165a:visited {
166 color: inherit; 166 color: inherit;
167} 167}
168 168
169a:hover { 169a:hover {
170 background: var(--hover-background); 170 background: var(--hover-background);
171 color: var(--hover-foreground); 171 color: var(--hover-foreground);
172} 172}
173 173
174a:active { 174a:active {
175 background: var(--active-background); 175 background: var(--active-background);
176 color: var(--active-foreground); 176 color: var(--active-foreground);
177} 177}
178 178
179.yt a { 179.yt a {
180 color: #ff0000; 180 color: #ff0000;
181} 181}
182.youtube { 182.youtube {
183 border-left: 1px solid #ff0000; 183 border-left: 1px solid #ff0000;
184} 184}
185.reddit { 185.reddit {
186 border-left: 3px double #ff3000; 186 border-left: 3px double #ff3000;
187} 187}
188.twitter { 188.twitter {
189 border-left: 1px solid #179cf0; 189 border-left: 1px solid #179cf0;
190} 190}
191.facebook { 191.facebook {
192 border-left: 3px double #4267b2; 192 border-left: 3px double #4267b2;
193} 193}
194 194
195a#logo, 195a#logo,
196a.anchor, 196a.anchor,
197footer a, 197footer a,
198#page-nav a { 198#page-nav a {
199 padding: 0; 199 padding: 0;
200 display: inline; 200 display: inline;
201} 201}
202 202
203footer a:link { 203footer a:link {
204 text-decoration: underline; 204 text-decoration: underline;
205} 205}
206 206
207@media screen and (max-width: 720px) { 207@media screen and (max-width: 720px) {
208 * { 208 * {
209 border: none; 209 border: none;
210 padding: 0; 210 padding: 0;
211 margin: 0; 211 margin: 0;
212 } 212 }
213 .entries, 213 .entries,
214 .entry-title { 214 .entry-title {
215 width: 100%; 215 width: 100%;
216 } 216 }
217 main, 217 main,
218 header { 218 header {
219 flex-flow: row wrap; 219 flex-flow: row wrap;
220 } 220 }
221 #page-nav { 221 #page-nav {
222 text-align: left; 222 text-align: left;
223 } 223 }
224 main aside { 224 main aside {
225 padding: 2ch; 225 padding: 2ch;
226 order: 1; 226 order: 1;
227 border-bottom: 1px solid; 227 border-bottom: 1px solid;
228 text-align: left; 228 text-align: left;
229 max-width: none; 229 max-width: none;
230 } 230 }
231 main aside li { 231 main aside li {
232 display: inline; 232 display: inline;
233 background: inherit !important; 233 background: inherit !important;
234 } 234 }
235 main aside li::after { 235 main aside li::after {
236 content: " //"; 236 content: " //";
237 background: inherit; 237 background: inherit;
238 font-weight: normal; 238 font-weight: normal;
239 } 239 }
240 main aside a { 240 main aside a {
241 display: inline; 241 display: inline;
242 } 242 }
243 main aside li:last-child::after { 243 main aside li:last-child::after {
244 content: ""; 244 content: "";
245 } 245 }
246 #list { 246 #list {
247 order: 2; 247 order: 2;
248 } 248 }
249 .entry-timestamp { 249 .entry-timestamp {
250 display: none; 250 display: none;
251 } 251 }
252} 252}
253 253
254@media screen and (prefers-color-scheme: dark) { 254@media screen and (prefers-color-scheme: dark) {
255 :root { 255 :root {
256 --main-background: black; 256 --main-background: black;
257 --main-foreground: white; 257 --main-foreground: white;
258 --alt-background: #222; 258 --alt-background: #222;
259 --alt-foreground: white; 259 --alt-foreground: white;
260 --fresh-background: inherit; 260 --fresh-background: inherit;
261 --fresh-foreground: inherit; 261 --fresh-foreground: inherit;
262 --stale-background: inherit; 262 --stale-background: inherit;
263 --stale-foreground: inherit; 263 --stale-foreground: inherit;
264 --hover-background: inherit; 264 --hover-background: inherit;
265 --hover-foreground: yellow; 265 --hover-foreground: yellow;
266 --active-background: inherit; 266 --active-background: inherit;
267 --active-foreground: cyan; 267 --active-foreground: cyan;
268 --extra-foreground: cyan; 268 --extra-foreground: cyan;
269 } 269 }
270} 270}
© 2022 C. Duckworth. generated by cgit. comments, issues, and patches welcome at < git at acdw dot net >.