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