about summary refs log tree commit diff stats
path: root/style.css
diff options
context:
space:
mode:
authorCase Duckworth2022-07-23 22:50:35 -0500
committerCase Duckworth2022-07-23 22:50:35 -0500
commit76c0225bca16df875dbdfd02ee49d3cee5fdd9a7 (patch)
treedc48bfe4c0854ee5edc34861e5f9c79bf7124349 /style.css
parentConvert sfeed_html.sh to sfeed_html.awk (diff)
downloadsfeed-76c0225bca16df875dbdfd02ee49d3cee5fdd9a7.tar.gz
sfeed-76c0225bca16df875dbdfd02ee49d3cee5fdd9a7.zip
Move style.js to its own file; clean up theme
Diffstat (limited to 'style.css')
-rw-r--r--style.css246


1 files changed, 100 insertions, 146 deletions
diff --git a/style.css b/style.css
index 4291171..975d177 100644
--- a/style.css
+++ b/style.css

@@ -1,219 +1,173 @@

1body {
1body {

2    background: #888;
2    font: 16px/1.2 sans-serif;

3}
3}

4
4

5main {
5main {

6    position: relative;


7    display: flex;
6    display: flex;

8    flex: column nowrap;
7    flex-flow: row nowrap;

9}
8}

10
9

11#items {
10#items {

12    max-width: 70ch;
11    max-width: 70ch;

13}
12}

14
13

15.entries tr {
14header {

16    vertical-align: baseline;
15    display: flex;


16    flex-flow: row wrap;


17    align-items: baseline;


18    justify-content: space-between;

17}
19}

18
20

19.fresh {
21time {

20    font-weight: bold;
22    font-family: monospace;

21}
23}

22
24

23td a { padding: 6px; }
25#page-nav {


26    border-bottom: 1px solid;


27    padding-bottom: 4px;


28}

24
29

25.entry-timestamp {
30#last-updated,

26    font: 0.9em monospace;
31nav,

27    padding: 4px;
32footer {

28    min-width: 10em;
33    font-size: 80%;


34    text-align: right;

29}
35}

30
36

31#list {
37footer {

32    padding: 2ch;
38    border-top: 1px solid;


39    margin: 1ch 0;


40    padding: 1ch 0;

33}
41}

34
42

35aside {
43table, .entry-title {

36    flex-grow: 1;
44    width: 100%;


45    border-collapse: collapse;

37}
46}

38
47

39aside li {
48td.entry-timestamp {

40    list-style: none;
49    font: 50%/1.1 monospace;

41    text-align: right;
50    text-align: right;


51    padding: 4px;

42}
52}

43
53

44aside li:nth-child(even),
54td.entry-extra {

45tr:nth-child(even)
55    font-family: monospace;

46{
56    text-align: right;

47    background: inherit;
57    white-space: nowrap;

48}
58}

49
59

50aside li:nth-child(odd),
60td.entry-extra a,

51tr:nth-child(odd)
61nav.flinks a {

52{
62    display: inline-block;

53    background: #aaa;


54}
63}

55
64

56aside a {
65td {

57    padding: 2px;
66    margin: 0; padding: 0;

58}
67}

59
68

60a { display: block; }
69tr:nth-child(even),

61
70#feedlist li:nth-child(even)

62a:link {
71{

63    text-decoration: none;
72    background: white;

64    color: black;


65}


66a:visited {


67    color: inherit;


68}


69aside a:visited { font-style: normal; }


70a:hover {


71    background: yellow;


72}
73}

73a:active{
74tr:nth-child(odd),

74    background: cyan;
75#feedlist li:nth-child(odd)


76{


77    background: #eee;

75}
78}

76
79

77header {
80aside li {

78    display: flex;
81    list-style: none;

79    flex: row wrap;


80    margin: 1ch 0;


81    align-items: baseline;


82    justify-content: space-between;


83}


84header h2, header h1 {


85    margin: 0;


86}
82}

87header h2 a { display: inline; }
83

88header .flinks {
84.fresh table,

89    font-size: 80%;
85aside .fresh {

90    text-align: right;
86    font-weight: bold;

91    flex-grow: 1;


92}
87}

93
88

94body>nav {
89a {

95    border-bottom: 1px solid;
90    display: block;

96    margin-top: 0;
91    padding: 4px 8px;

97    text-align: right;
92    color: inherit;

98}
93}

99body>nav a { display: inline; }


100
94

101.last-updated {
95a:link {

102    font-style: italic;
96    text-decoration: none;

103    font-size: 80%;


104    text-align: right;


105}
97}

106
98

107.entries { border-collapse: collapse; }
99a:visited { color: inherit; }

108
100

109.entries, .entry-title { width: 100%; }
101a:hover {


102    background: yellow;


103}


104


105a:active {


106    background: cyan;


107}

110
108

111.entry-extra a { color: blue; display: inline; font-family: monospace; }
109.yt a { color: #ff0000; }


110.youtube { border-left: 1px solid #ff0000; }


111.reddit { border-left: 3px double #ff3000; }


112.twitter { border-left: 1px solid #179cf0; }


113.facebook { border-left: 3px double #4267b2; }

112
114

113.entry-title, .entry-timestamp, .entry-extra {
115a#logo,

114    padding: 0; margin: 0; border: none;
116a.anchor,


117footer a,


118#page-nav a {


119    padding: 0;


120    display: inline;

115}
121}

116
122

117header a { display: inline; }
123footer a:link {


124    text-decoration: underline;


125}

118
126

119@media screen and (max-width: 720px) {
127@media screen and (max-width: 720px) {


128    * { border: none; padding: 0; margin: 0; }


129    .entries, .entry-title { width: 100%; }

120    main, header {
130    main, header {

121        flex-flow: row wrap;
131        flex-flow: row wrap;

122        padding:0; margin: 0;


123    }
132    }

124    * { border: none; }
133    header, nav { padding: 4px; }

125    .entries, .entry-title { width: 100%; }


126    html, body, #list, #items { padding: 0; margin: 0; max-width: 100%; }


127    header h2, header p { margin: 4px; }


128    aside a { display: inline; }


129    aside {
134    aside {

130        padding: 2ch;
135        padding: 2ch;

131        order: 1;
136        order: 1;

132        border-bottom: 1px solid;
137        border-bottom: 1px solid;

133    }
138    }

134    aside ul { margin: 0; padding: 0; }


135    #list { order: 2; }


136    aside li {
139    aside li {

137        display: inline;
140        display: inline;

138        background: inherit !important;
141        background: inherit !important;

139    }
142    }

140    aside li::after {
143    aside li::after {


144        content: " //";

141        background: inherit;
145        background: inherit;

142        font-weight: normal;
146        font-weight: normal;

143        content: " //";


144    }
147    }


148     aside a { display: inline; }

145    aside li:last-child::after {
149    aside li:last-child::after {

146        content: "";
150        content: "";

147    }
151    }


152    #list { order: 2; }

148    .entry-timestamp {
153    .entry-timestamp {

149        display: none;
154        display: none;

150    }
155    }

151}
156}

152
157

153@media (prefers-color-scheme: light) {
158@media screen and (prefers-color-scheme: dark) {

154    body { background: white; color: black; }
159    body {background: black; color: white; }

155    aside li:nth-child(even),
160    tr:nth-child(even),

156    tr:nth-child(even) { background: white; }
161    #feedlist li:nth-child(even)

157    aside li:nth-child(odd),
162    {

158    tr:nth-child(odd) { background: #eee; }
163        background: black;

159    a:link { color: black; }
164    }

160    a:hover { background: yellow; }
165    tr:nth-child(odd),

161    a:active { background: cyan; }
166    #feedlist li:nth-child(odd)

162    .entry-extra a { color: blue; }
167    {

163}
168        background: #222;

164
169    }

165@media (prefers-color-scheme: dark) {
170    a:hover {color: yellow; background: inherit;}

166    body { background: black; color: white; }
171    a:active {color: cyan; background: inherit;}

167    aside li:nth-child(even),
172    .entry-extra a {color: cyan;}

168    tr:nth-child(even) { background: black; }


169    aside li:nth-child(odd),


170    tr:nth-child(odd) { background: #222; }


171    a:link { color: white; }


172    a:hover { color: yellow; background: inherit; }


173    a:active { color: cyan; background: inherit; }


174    .entry-extra a { color: cyan; }


175}


176


177@media screen and (max-width: 720px) and (prefers-color-scheme: dark) {


178    aside li { background: black !important; }


179}


180


181@media screen and (max-width: 720px) and (prefers-color-scheme: light) {


182    aside li { background: white !important; }


183}


184


185footer {


186    font-size: 80%;


187    font-style: italic;


188    text-align: right;


189}


190


191footer {


192    border-top: 1px solid;


193    padding: 1ch 0;


194}


195


196footer a:link {


197    display: inline;


198    text-decoration: underline;


199}


200


201.yt a {


202    color: #ff0000;


203}


204


205.youtube {


206    border-left: 1px solid #ff0000;


207}


208


209.reddit {


210    border-left: 3px double #ff3000;


211}


212


213.facebook {


214    border-left: 3px double #4267b2;


215}


216


217.twitter {


218    border-left: 1px solid #179cf0;


219}
173}
 


© 2022 C. Duckworth.
generated by
cgit.
comments, issues, and patches welcome at
<
git at acdw dot net
>.