CSS cleanups and preparations
This commit is contained in:
parent
72bddf3c9f
commit
0269ed5c60
18 changed files with 66 additions and 529 deletions
|
|
@ -49,7 +49,7 @@ th-chat-asked {
|
|||
padding: 0.5em 0;
|
||||
margin-right: 2rem;
|
||||
|
||||
--recursive-wght: 500;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
opacity: 80%;
|
||||
|
|
@ -63,7 +63,7 @@ th-chat-asked {
|
|||
}
|
||||
|
||||
&[disabled] {
|
||||
--recursive-wght: 600;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
opacity: 100%;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ main.doc {
|
|||
padding: 0.8rem var(--code-block-h-padding);
|
||||
|
||||
& code {
|
||||
--recursive-wght: 500;
|
||||
font-weight: 500;
|
||||
--recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */
|
||||
font-size: 95%;
|
||||
tab-size: 3ch;
|
||||
|
|
@ -198,7 +198,7 @@ main.doc {
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
--recursive-wght: 600;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--border-1);
|
||||
|
||||
cursor: pointer;
|
||||
|
|
@ -320,7 +320,7 @@ main.doc {
|
|||
border-right: none;
|
||||
|
||||
& code {
|
||||
--recursive-wght: 520;
|
||||
font-weight: 520;
|
||||
font-size: 90%;
|
||||
tab-size: 2ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
.version-history {
|
||||
& > .commit-count {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
& > ul.commits {
|
||||
--recursive-mono: 1;
|
||||
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
& > li {
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 4em min-content auto;
|
||||
align-items: start;
|
||||
gap: 0.5em;
|
||||
|
||||
& > .revision-number {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,6 +106,14 @@ body {
|
|||
|
||||
/* Set up typography */
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
body,
|
||||
pre,
|
||||
code,
|
||||
|
|
@ -120,14 +128,6 @@ dfn {
|
|||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -138,17 +138,11 @@ input {
|
|||
}
|
||||
|
||||
:root {
|
||||
font-weight: 450;
|
||||
font-style: normal;
|
||||
--recursive-mono: 0;
|
||||
--recursive-casl: 0;
|
||||
--recursive-wght: 450;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-crsv: 0.5;
|
||||
|
||||
--recursive-simplified-f: "ss03";
|
||||
--recursive-simplified-g: "ss04";
|
||||
--recursive-simplified-l: "ss05";
|
||||
--recursive-simplified-r: "ss06";
|
||||
--recursive-no-serif-L-Z: "ss08";
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -157,37 +151,31 @@ input {
|
|||
font-variation-settings:
|
||||
"MONO" var(--recursive-mono),
|
||||
"CASL" var(--recursive-casl),
|
||||
"wght" var(--recursive-wght),
|
||||
"slnt" var(--recursive-slnt),
|
||||
"CRSV" var(--recursive-crsv);
|
||||
|
||||
font-feature-settings:
|
||||
var(--recursive-simplified-f), var(--recursive-simplified-g),
|
||||
var(--recursive-simplified-l), var(--recursive-simplified-r),
|
||||
var(--recursive-no-serif-L-Z);
|
||||
font-feature-settings: "ss03", "ss04", "ss05", "ss06", "ss08";
|
||||
}
|
||||
|
||||
h1 {
|
||||
--recursive-wght: 900;
|
||||
font-weight: 900;
|
||||
|
||||
font-size: 4.8rem;
|
||||
font-feature-settings: var(--recursive-simplified-r) 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--recursive-wght: 850;
|
||||
font-weight: 850;
|
||||
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--recursive-wght: 850;
|
||||
font-weight: 850;
|
||||
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--recursive-wght: 800;
|
||||
font-weight: 800;
|
||||
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
|
@ -201,23 +189,23 @@ pre code,
|
|||
kbd,
|
||||
th-literate-program {
|
||||
--recursive-mono: 1;
|
||||
--recursive-wght: 450;
|
||||
font-weight: 450;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
strong code {
|
||||
--recursive-wght: 800;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
--recursive-wght: 700;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
--recursive-slnt: -16;
|
||||
font-style: normal;
|
||||
--recursive-crsv: 1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -437,7 +425,7 @@ td {
|
|||
th {
|
||||
background-color: var(--shaded-background);
|
||||
|
||||
--recursive-wght: 700;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Horizontal rules */
|
||||
|
|
@ -490,42 +478,6 @@ button.push {
|
|||
}
|
||||
}
|
||||
|
||||
/* Style the noscript box a little more prettily. */
|
||||
|
||||
.noscript {
|
||||
padding: 1.6rem;
|
||||
background-color: #fde748;
|
||||
color: #55423e;
|
||||
border: 0.1rem solid #6c581c;
|
||||
border-radius: 0.8rem;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.noscript:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noscript p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.noscript p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.noscript a {
|
||||
color: #004ec8;
|
||||
}
|
||||
|
||||
.noscript a:visited {
|
||||
color: #6c2380;
|
||||
}
|
||||
|
||||
/* Feeds */
|
||||
|
||||
section.feed {
|
||||
|
|
@ -550,14 +502,14 @@ section.feed {
|
|||
}
|
||||
|
||||
& h1 {
|
||||
--recursive-wght: 800;
|
||||
font-weight: 800;
|
||||
font-size: 125%;
|
||||
padding-top: 1.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
--recursive-wght: 600;
|
||||
font-weight: 600;
|
||||
font-size: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -639,7 +591,7 @@ header.floof {
|
|||
line-height: 1;
|
||||
width: min-content;
|
||||
|
||||
--recursive-wght: 900;
|
||||
font-weight: 900;
|
||||
font-size: 5.6rem;
|
||||
text-align: right;
|
||||
|
||||
|
|
@ -652,16 +604,6 @@ header.floof {
|
|||
padding: 0.1em;
|
||||
|
||||
--shadow-color: var(--accent-pink);
|
||||
box-shadow:
|
||||
0.5px 0.5px 0 var(--shadow-color),
|
||||
1px 1px 0 var(--shadow-color),
|
||||
1.5px 1.5px 0 var(--shadow-color),
|
||||
2px 2px 0 var(--shadow-color),
|
||||
2.5px 2.5px 0 var(--shadow-color),
|
||||
3px 3px 0 var(--shadow-color),
|
||||
3.5px 3.5px 0 var(--shadow-color),
|
||||
4px 4px 0 var(--shadow-color);
|
||||
|
||||
/*
|
||||
import math
|
||||
|
||||
|
|
@ -701,11 +643,7 @@ header.floof {
|
|||
12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
|
||||
12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
|
||||
13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
|
||||
13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625),
|
||||
14.0px 14.0px 12.25px rgba(from var(--shadow-color) r g b / 0.001953125),
|
||||
14.5px 14.5px 13.140625px rgba(from var(--shadow-color) r g b / 0.000823974609375),
|
||||
15.0px 15.0px 14.0625px rgba(from var(--shadow-color) r g b / 0.000244140625),
|
||||
15.5px 15.5px 15.015625px rgba(from var(--shadow-color) r g b / 3.0517578125e-05)
|
||||
13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625)
|
||||
;
|
||||
}
|
||||
|
||||
|
|
@ -726,7 +664,7 @@ header.floof {
|
|||
color: var(--text-color);
|
||||
|
||||
& .adjectives {
|
||||
--recursive-wght: 800;
|
||||
font-weight: 800;
|
||||
font-size: 1.6rem;
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
|
@ -742,27 +680,11 @@ header.floof {
|
|||
/* Navigation header (contains page title & breadcrumbs) */
|
||||
|
||||
h1.page-title {
|
||||
--recursive-wght: 900;
|
||||
font-weight: 900;
|
||||
|
||||
line-height: 1.2;
|
||||
padding-top: 0.5lh;
|
||||
padding-bottom: 0.5lh;
|
||||
|
||||
& a {
|
||||
color: var(--text-color);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
h1.page-title a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
|
@ -771,29 +693,6 @@ h1.page-title {
|
|||
}
|
||||
}
|
||||
|
||||
span.badge {
|
||||
--recursive-wght: 800;
|
||||
--recursive-mono: 1;
|
||||
|
||||
border-radius: 100rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.9em;
|
||||
|
||||
&.red {
|
||||
color: white;
|
||||
background-color: #d01243;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: white;
|
||||
background-color: #058ef0;
|
||||
}
|
||||
|
||||
&.before-content {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style the footer */
|
||||
|
||||
footer {
|
||||
|
|
@ -889,7 +788,7 @@ footer.pink-space {
|
|||
background: none;
|
||||
border: none;
|
||||
|
||||
--recursive-wght: 700;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
font-size: 75%;
|
||||
opacity: 25%;
|
||||
|
|
@ -914,94 +813,13 @@ dialog[open] {
|
|||
|
||||
/* Style emojis to be readable */
|
||||
|
||||
img[data-cast~="emoji"] {
|
||||
img.emoji {
|
||||
max-width: 1.3125em;
|
||||
max-height: 1.3125em;
|
||||
vertical-align: text-bottom;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
|
||||
th-overlays {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
th-tooltip {
|
||||
display: block;
|
||||
|
||||
position: fixed;
|
||||
width: max-content;
|
||||
z-index: 100;
|
||||
|
||||
background-color: var(--background-color-tooltip);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
|
||||
transition:
|
||||
opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
|
||||
filter var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
|
||||
opacity: 0%;
|
||||
filter: blur(0.3rem);
|
||||
pointer-events: none;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
&[th-side="bottom"] {
|
||||
transform: translateX(-50%) translateY(-10%) scale(0.8);
|
||||
|
||||
&.transitioned-in {
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&[th-side="left"] {
|
||||
transform: translateX(-90%) translateY(-50%) scale(0.8);
|
||||
|
||||
&.transitioned-in {
|
||||
transform: translateX(-100%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th-tooltip.transitioned-in {
|
||||
opacity: 100%;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
th-tooltip.tooltip-emoji {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.8rem;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
max-width: 7.2rem;
|
||||
max-height: 7.2rem;
|
||||
}
|
||||
|
||||
& > p {
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding-top: 0.6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.th-emoji-unknown {
|
||||
text-decoration: 0.1rem underline var(--error-color);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Command line */
|
||||
|
||||
th-command-line {
|
||||
|
|
@ -1068,7 +886,7 @@ th-command-line {
|
|||
|
||||
& > dfn {
|
||||
--recursive-crsv: 0;
|
||||
--recursive-wght: 700;
|
||||
font-weight: 700;
|
||||
margin-right: 2ch;
|
||||
}
|
||||
|
||||
|
|
@ -1239,7 +1057,7 @@ th-literate-program[data-mode="output"] {
|
|||
|
||||
.th-syntax-highlighting span {
|
||||
&.comment {
|
||||
--recursive-slnt: -8;
|
||||
font-style: oblique 8deg;
|
||||
color: var(--syntax-comment);
|
||||
}
|
||||
|
||||
|
|
@ -1310,11 +1128,3 @@ th-literate-program[data-mode="output"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Style settings sections */
|
||||
|
||||
section[data-cast~="settings"] {
|
||||
/* Don't display settings when JavaScript is disabled.
|
||||
JS overrides this value on the element itself. */
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
& .south,
|
||||
& .west,
|
||||
& .north {
|
||||
--recursive-wght: 900;
|
||||
--recursive-slnt: 0;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
--recursive-mono: 1;
|
||||
|
||||
position: absolute;
|
||||
|
|
@ -108,9 +108,9 @@
|
|||
|
||||
.tileset-four-to-eight-demo th-bc {
|
||||
& .directions-square {
|
||||
--recursive-wght: 900;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
--recursive-casl: 0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-mono: 1;
|
||||
color: #d3dce9;
|
||||
text-shadow:
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
/* Make issue titles bold */
|
||||
& > li > details > summary > th-bc,
|
||||
& > li > div > th-bc {
|
||||
font-weight: 600;
|
||||
--recursive-wght: 600;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.breadcrumb a {
|
||||
--recursive-mono: 1;
|
||||
--recursive-wght: 500;
|
||||
font-weight: 500;
|
||||
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
|
|
@ -452,7 +452,7 @@ ul.branch-quote {
|
|||
position: relative;
|
||||
|
||||
&::before {
|
||||
--recursive-wght: 900;
|
||||
font-weight: 900;
|
||||
|
||||
content: "“";
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue