1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
...
410
411
412
413
414
415
416
417
418
419
420
421
|
$color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
@function tone($pct) { @return adjust-color($color, $lightness: $pct) }
body {
@extend %sans;
background-color: adjust-color($color, $lightness: -55%);
color: adjust-color($color, $lightness: 25%);
font-size: 14pt;
margin: 0;
padding: 0;
}
a[href] {
color: adjust-color($color, $lightness: 10%);
&:hover {
color: white;
text-shadow: 0 0 15px adjust-color($color, $lightness: 20%);
}
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
&:hover::after {
color: black;
................................................................................
padding: 0.1in;
&:hover { font-weight: bold; }
}
}
code {
@extend %teletype;
background: adjust-color($color, $lightness: -50%);
border: 1px solid adjust-color($color, $lightness: -20%);
padding: 2px 6px;
text-shadow: 2px 2px black;
}
|
|
|
|
>
|
>
|
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
...
412
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
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
|
$color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
@function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
body {
@extend %sans;
background-color: tone(-55%);
color: tone(25%);
font-size: 14pt;
margin: 0;
padding: 0;
}
a[href] {
color: tone(10%);
text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.5);
&:hover {
color: white;
text-shadow: 0 0 15px tone(20%);
text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.1);
}
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
&:hover::after {
color: black;
................................................................................
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;
padding: 0.1in;
padding-left: 0.15in;
>.nym { font-weight: bold; }
color: tone(0%,-0.4);
> span.nym { color: tone(10%) }
> span.handle { color: tone(-5%) }
background: linear-gradient(to right, tone(-55%), transparent);
}
>.content {
grid-column: 2/4; grid-row: 1/2;
padding: 0.2in;
@extend %serif;
font-size: 110%;
}
> a[href].permalink {
display: block;
grid-column: 3/4; grid-row: 2/3;
font-size: 80%;
text-align: right;
padding: 0.1in;
padding-right: 0.15in;
font-style: italic;
background: linear-gradient(to left, tone(-55%,-0.5), transparent);
}
}
a[href].rawlink {
@extend %teletype;
}
|