- commit
- e4ffd8f397e54b0fd8983c6c2428d7679de16b3e
- parent
- 1bca67214be6c9cac929241a3b515f3b3017e90d
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-02-27 06:57
css: flow-relative
Diffstat
| M | static/style.css | 73 | +++++++++++++++++++++++++++++++++---------------------------- |
1 files changed, 39 insertions, 34 deletions
diff --git a/static/style.css b/static/style.css
@@ -13,9 +13,11 @@ html {
13 13 }
14 14
15 15 body {
16 -1 max-width: 40em;
17 -1 margin: 0 auto;
18 -1 padding: 4em 0 1em;
-1 16 max-inline-size: 40em;
-1 17 margin-block: 0;
-1 18 margin-inline: auto;
-1 19 padding-block: 4em 1em;
-1 20 padding-inline: 0;
19 21 }
20 22
21 23 a {
@@ -25,7 +27,7 @@ a {
25 27 h1, h2, h3, h4, h5 {
26 28 line-height: 1.2;
27 29 font-weight: 500;
28 -1 margin: 0 0 0.3em;
-1 30 margin-block: 0 0.3em;
29 31 }
30 32
31 33 h1 a,
@@ -35,20 +37,20 @@ h2 a {
35 37 }
36 38
37 39 p {
38 -1 margin: 0 0 0.8em;
-1 40 margin-block: 0 0.8em;
39 41 }
40 42
41 43 blockquote {
42 44 font-style: italic;
43 45 font-size: small;
44 -1 padding-left: 0.5em;
45 -1 border-left: 0.4em solid var(--border-color);
46 -1 margin-left: 0;
-1 46 padding-inline-start: 0.5em;
-1 47 border-inline-start: 0.4em solid var(--border-color);
-1 48 margin-inline-start: 0;
47 49 }
48 50
49 51 hr {
50 52 border: 0;
51 -1 border-bottom: 1px solid var(--border-color);
-1 53 border-block-end: 1px solid var(--border-color);
52 54 }
53 55
54 56 input {
@@ -56,7 +58,8 @@ input {
56 58 color: inherit;
57 59 border: 1px solid var(--border-color);
58 60 border-radius: 4px;
59 -1 padding: 0.3em 0.75em;
-1 61 padding-block: 0.3em;
-1 62 padding-inline: 0.75em;
60 63 font-family: inherit;
61 64 font-size: inherit;
62 65 line-height: 1.8;
@@ -70,25 +73,26 @@ input:focus {
70 73 #header {
71 74 background: var(--bg-color);
72 75 z-index: 1;
73 -1 border-bottom: 1px solid var(--border-color);
-1 76 border-block-end: 1px solid var(--border-color);
74 77 position: absolute;
75 78 top: 0;
76 79 left: 0;
77 80 right: 0;
78 -1 padding: 0.4em 1em;
-1 81 padding-block: 0.4em;
-1 82 padding-inline: 1em;
79 83 display: flex;
80 84 justify-content: space-between;
81 85 align-items: center;
-1 86 gap: 1em;
82 87 }
83 88
84 89 #header input {
85 -1 width: 20em;
86 -1 max-width: 50vw;
-1 90 inline-size: 20em;
-1 91 max-inline-size: 50vi;
87 92 }
88 93
89 94 .brand {
90 95 display: block;
91 -1 margin-right: 1em;
92 96 color: inherit;
93 97 text-decoration: none;
94 98 font-size: 150%;
@@ -106,7 +110,7 @@ input:focus {
106 110 border-radius: 4px;
107 111 border: 1px solid var(--border-color);
108 112 padding: 0.5em;
109 -1 margin-bottom: 1em;
-1 113 margin-block-end: 1em;
110 114 }
111 115 .post::after {
112 116 content: "";
@@ -115,7 +119,7 @@ input:focus {
115 119 }
116 120
117 121 .post header {
118 -1 margin-bottom: 0.5em;
-1 122 margin-block-end: 0.5em;
119 123 font-size: small;
120 124 }
121 125
@@ -130,14 +134,12 @@ input:focus {
130 134 }
131 135
132 136 .post footer {
-1 137 display: flex;
-1 138 gap: 1em;
133 139 color: var(--fg-tint-color);
134 140 font-weight: bold;
135 141 font-size: small;
136 -1 margin-top: 0.5em;
137 -1 }
138 -1 .post footer > * {
139 -1 display: inline-block;
140 -1 margin-right: 1em;
-1 142 margin-block-start: 0.5em;
141 143 }
142 144 .post footer a {
143 145 color: inherit;
@@ -146,9 +148,9 @@ input:focus {
146 148
147 149 .poster {
148 150 display: block;
149 -1 margin: 0 -0.5em;
150 -1 width: calc(100% + 1em);
151 -1 max-height: 90vh;
-1 151 margin-inline: -0.5em;
-1 152 inline-size: calc(100% + 1em);
-1 153 max-block-size: 90vb;
152 154 object-fit: contain;
153 155 }
154 156
@@ -185,28 +187,32 @@ input:focus {
185 187 .comments {
186 188 margin: 0;
187 189 padding: 0;
188 -1 padding-left: 1.5em;
189 -1 border-left: 2px solid var(--border-color);
-1 190 padding-inline-start: 1.5em;
-1 191 border-inline-start: 2px solid var(--border-color);
190 192 }
191 193
192 194 .comment {
193 195 display: block;
194 196 position: relative;
195 -1 margin: 3em 0;
-1 197 margin-block: 3em;
196 198 }
197 199
198 200 .posts-sort {
-1 201 display: flex;
-1 202 gap: 1em;
199 203 font-weight: bold;
200 204 }
201 205
202 206 .comments-sort {
203 -1 margin-top: 4em;
-1 207 display: flex;
-1 208 gap: 1em;
-1 209 margin-block-start: 4em;
204 210 text-transform: uppercase;
205 211 font-size: x-small;
206 212 color: var(--fg-tint-color);
207 213 font-weight: bold;
208 -1 padding: 1em 0;
209 -1 border-bottom: 1px solid var(--border-color);
-1 214 padding-block: 1em;
-1 215 border-block-end: 1px solid var(--border-color);
210 216 }
211 217 .comments-replies {
212 218 color: var(--fg-tint-color);
@@ -217,18 +223,17 @@ input:focus {
217 223 .posts-sort a,
218 224 .comments-sort a {
219 225 text-decoration: none;
220 -1 margin-right: 1em;
221 226 }
222 227
223 228 .posts-sort svg {
224 -1 height: 1em;
-1 229 block-size: 1em;
225 230 color: inherit;
226 231 vertical-align: -0.1em;
227 232 }
228 233
229 234 .icon {
230 235 border-radius: 50%;
231 -1 height: 5em;
-1 236 block-size: 5em;
232 237 float: left;
233 238 margin-right: 0.5em;
234 239 }