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