Differences From
Artifact [9520b92c84]:
157 157 background-color: adjust-color($color, $lightness: -53%, $alpha: -0.7);
158 158 }
159 159 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
160 160 background-color: adjust-color($color, $lightness: -53%, $alpha: -0.1);
161 161 }
162 162 }
163 163
164 +h1 { margin-top: 0 }
165 +
164 166 header {
165 167 position: fixed;
166 168 height: min-content;
167 169 width: 100vw;
168 170 margin: 0;
169 171 padding: 0;
170 172 border-bottom: 1px solid black;
................................................................................
191 193 all: unset;
192 194 display: flex;
193 195 justify-content: flex-end;
194 196 align-items: center;
195 197 grid-column: 2/3; grid-row: 1/2;
196 198 > a[href] {
197 199 display: block;
198 - padding: 0.25in 0.15in;
200 + padding: 0.25in 0.10in;
199 201 //padding: calc((25% - 1em)/2) 0.15in;
200 202 &, &::after { transition: 0.3s; }
201 203 text-shadow: 1px 1px 1px black;
202 204 &:hover{
203 205 transform: scale(120%);
204 206 }
205 207 }
................................................................................
221 223 border: {
222 224 left: 1px solid black;
223 225 right: 1px solid black;
224 226 }
225 227 }
226 228
227 229 div.profile {
228 - @extend %box;
229 230 padding: 0.1in;
230 231 position: relative;
231 232 display: grid;
233 + margin-bottom: 0.4in;
232 234 grid-template-columns: 2fr 1fr;
233 - grid-template-rows: 1fr 1fr;
235 + grid-template-rows: max-content 1fr;
234 236 width: 100%;
235 237 > .banner {
236 238 grid-column: 1 / 3;
237 239 grid-row: 1 / 2;
238 240 display: grid;
239 241 grid-template-columns: 1.1in 1fr;
240 - grid-template-rows: 0.3in 1fr;
242 + grid-template-rows: max-content 1fr;
241 243 > .avatar {
242 244 display: block;
243 245 width: 1in; height: 1in;
244 246 grid-column: 1 / 2;
245 247 grid-row: 1 / 3;
246 248 border: 1px solid black;
247 249 }
................................................................................
265 267 }
266 268 }
267 269 > .stats {
268 270 grid-column: 3 / 4;
269 271 grid-row: 1 / 3;
270 272 }
271 273 > .menu {
272 - grid-column: 1 / 3;
273 - grid-row: 2 / 3;
274 + grid-column: 1 / 3; grid-row: 2 / 3;
275 + padding-top: 0.075in;
276 + flex-wrap: wrap;
274 277 display: flex;
275 278 justify-content: center;
276 279 align-items: center;
277 280 > a[href] {
278 281 @extend %button;
279 282 display: block;
280 - margin: 0 0.05in;
283 + margin: 0.025in 0.05in;
281 284 }
282 285 > hr {
283 286 all: unset;
284 287 display: block;
285 288 height: 0.3in;
286 289 width: 1px;
287 290 border-left: 1px solid rgba(0,0,0,0.6);
................................................................................
413 416 padding: 0.1in;
414 417 &:hover { font-weight: bold; }
415 418 }
416 419 }
417 420
418 421 code {
419 422 @extend %teletype;
420 - background: tone(-50%);
421 - border: 1px solid tone(-20%);
423 + background: tone(-55%);
424 + border: 1px inset tone(-20%);
422 425 padding: 2px 6px;
423 - text-shadow: 2px 2px black;
426 + font-size: 1.5ex !important;
427 + letter-spacing: 1.3px;
428 + padding-bottom: 3px;
429 + border-radius: 2px;
430 + vertical-align: baseline;
431 + box-shadow: 1px 1px 1px black;
424 432 }
425 433
426 434 div.post {
427 435 @extend %box;
428 436 display: grid;
429 437 grid-template-columns: 1in 1fr max-content;
430 - grid-template-rows: 1fr max-content;
438 + grid-template-rows: min-content max-content;
431 439 margin-bottom: 0.1in;
432 440 >.avatar {
433 441 grid-column: 1/2; grid-row: 1/2;
434 - width: 1in;
442 + img { display: block; width: 1in; margin:0; }
443 + background: linear-gradient(to bottom, tone(-53%), tone(-57%));
435 444 }
436 445 >a[href].username {
437 446 display: block;
438 447 grid-column: 1/3;
439 448 grid-row: 2/3;
440 449 text-align: left;
441 450 text-decoration: none;
................................................................................
469 478 @extend %teletype;
470 479 }
471 480
472 481 body.doc main {
473 482 @extend %serif;
474 483 li { margin-top: 0.05in; }
475 484 li:first-child { margin-top: 0; }
485 + h1, h2, h3, h4, h5, h6 {
486 + background: linear-gradient(to right, tone(-50%), transparent);
487 + margin-left: -0.4in;
488 + padding-left: 0.2in;
489 + text-shadow: 0 2px 0 black;
490 + }
476 491 }