about summary refs log tree commit diff stats
diff options
context:
space:
mode:
authorCase Duckworth2022-07-25 09:49:12 -0500
committerCase Duckworth2022-07-25 09:49:12 -0500
commit39640a916645d74cf93f3efe42ca7d91be1c689b (patch)
treeb95153ad79bed6e18d55bf9ddaee675e78c7fb76
parentFix spacing (diff)
downloadsfeed-39640a916645d74cf93f3efe42ca7d91be1c689b.tar.gz
sfeed-39640a916645d74cf93f3efe42ca7d91be1c689b.zip
Color extra links; prettier
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
>.