new accessible metrics
This commit is contained in:
parent
d968da10a0
commit
05460f6c69
|
|
@ -18,15 +18,15 @@ th-chat-said {
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid var(--border-1);
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0;
|
||||
border-radius: 8px;
|
||||
border: var(--1px) solid var(--border-1);
|
||||
padding: var(--12px) var(--16px);
|
||||
margin: var(--8px) 0;
|
||||
border-radius: var(--8px);
|
||||
|
||||
max-width: 60%;
|
||||
|
||||
&>.picture {
|
||||
padding-right: 16px;
|
||||
padding-right: var(--16px);
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -76,8 +76,8 @@ th-chat-asked {
|
|||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: var(--16px);
|
||||
height: var(--16px);
|
||||
margin-right: 0.5em;
|
||||
background-image: var(--icon-choose);
|
||||
background-position: 50% 50%;
|
||||
|
|
@ -88,7 +88,8 @@ th-chat-asked {
|
|||
transition: opacity var(--transition-duration), translate var(--transition-duration);
|
||||
}
|
||||
|
||||
&:hover::before, &[disabled]::before {
|
||||
&:hover::before,
|
||||
&[disabled]::before {
|
||||
opacity: 50%;
|
||||
translate: 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
/* Hack to enable theme-matching scrollbars in <pre> */
|
||||
--shaded-against-background: #f2f0ea;
|
||||
--shaded-against-background-twice: #e6e4de;
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -47,10 +48,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Font size-responsive measurements. treehouse was designed against a font size of 14px;
|
||||
each of these sizes is (n / 14)rem where n is the number of pixels. */
|
||||
--1px: 0.07142857143rem;
|
||||
--2px: 0.1428571429rem;
|
||||
--3px: 0.2142857143rem;
|
||||
--4px: 0.2857142857rem;
|
||||
--6px: 0.4285714286rem;
|
||||
--8px: 0.5714285714rem;
|
||||
--10px: 0.7142857143rem;
|
||||
--12px: 0.8571428571rem;
|
||||
--16px: 1.142857143rem;
|
||||
}
|
||||
|
||||
/* Article-style layout. Center everything and give it a maximum width */
|
||||
|
||||
body {
|
||||
max-width: 1200px;
|
||||
max-width: 86rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
|
|
@ -59,12 +74,12 @@ body {
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 0 16px;
|
||||
padding: 0 var(--16px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
main {
|
||||
padding: 0 8px;
|
||||
padding: 0 var(--8px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,14 +115,9 @@ body::selection {
|
|||
font-variation-settings: "MONO" 1.0;
|
||||
}
|
||||
|
||||
|
||||
body,
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
button {
|
||||
body {
|
||||
font-family: 'RecVar', sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: 87.5%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -217,7 +227,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 4px 0;
|
||||
margin: var(--4px) 0;
|
||||
}
|
||||
|
||||
/* Lay out elements a little less compactly (actually just have some blank space past the end) */
|
||||
|
|
@ -230,9 +240,9 @@ body {
|
|||
|
||||
code,
|
||||
th-literate-program {
|
||||
padding: 3px 4px;
|
||||
padding: var(--3px) var(--4px);
|
||||
background-color: var(--shaded-background);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--4px);
|
||||
}
|
||||
|
||||
th-literate-program,
|
||||
|
|
@ -241,17 +251,17 @@ th-literate-output {
|
|||
}
|
||||
|
||||
kbd {
|
||||
padding: 3px 6px;
|
||||
border: 1px solid var(--border-1);
|
||||
border-radius: 6px;
|
||||
padding: var(--3px) var(--6px);
|
||||
border: var(--1px) solid var(--border-1);
|
||||
border-radius: var(--6px);
|
||||
}
|
||||
|
||||
pre,
|
||||
th-literate-program {
|
||||
padding: 8px 12px;
|
||||
margin: 12px 0;
|
||||
padding: var(--8px) var(--12px);
|
||||
margin: var(--12px) 0;
|
||||
background-color: var(--shaded-against-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--8px);
|
||||
|
||||
transition: background-color var(--transition-duration);
|
||||
}
|
||||
|
|
@ -261,7 +271,7 @@ th-literate-program {
|
|||
pre,
|
||||
th-literate-program {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-1);
|
||||
border: var(--1px) solid var(--border-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -280,7 +290,7 @@ pre>code,
|
|||
th-literate-program>code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th-literate-program {
|
||||
|
|
@ -305,8 +315,8 @@ img {
|
|||
/* Also regarding images - make them look a bit more pretty by default */
|
||||
|
||||
img.pic {
|
||||
border-radius: 6px;
|
||||
margin: 8px 0;
|
||||
border-radius: var(--6px);
|
||||
margin: var(--8px) 0;
|
||||
}
|
||||
|
||||
/* Image hints for tweaking rendering */
|
||||
|
|
@ -365,23 +375,23 @@ a.secret {
|
|||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
margin: 4px 0;
|
||||
border-left: 4px solid var(--border-1);
|
||||
padding: var(--4px) var(--12px);
|
||||
margin: var(--4px) 0;
|
||||
border-left: var(--4px) solid var(--border-1);
|
||||
}
|
||||
|
||||
/* And tables. */
|
||||
|
||||
table {
|
||||
margin: 8px 0;
|
||||
margin: var(--8px) 0;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--border-2);
|
||||
border: var(--1px) solid var(--border-2);
|
||||
border-collapse: collapse;
|
||||
padding: 4px 10px;
|
||||
padding: var(--4px) var(--10px);
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -396,7 +406,7 @@ th {
|
|||
hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-1);
|
||||
border-top: var(--1px) solid var(--border-1);
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
|
@ -404,11 +414,11 @@ hr {
|
|||
/* Style the noscript box a little more prettily. */
|
||||
|
||||
.noscript {
|
||||
padding: 16px;
|
||||
padding: var(--16px);
|
||||
background-color: #fde748;
|
||||
color: var(--text-color-light);
|
||||
border: 1px solid #6c581c;
|
||||
border-radius: 8px;
|
||||
border: var(--1px) solid #6c581c;
|
||||
border-radius: var(--8px);
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -416,7 +426,7 @@ hr {
|
|||
|
||||
.noscript p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--16px);
|
||||
}
|
||||
|
||||
.noscript p:last-child {
|
||||
|
|
@ -464,7 +474,7 @@ h1.page-title {
|
|||
--recursive-wght: 800;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 32px;
|
||||
margin-left: 2.25rem;
|
||||
font-size: 1.25rem;
|
||||
|
||||
& a {
|
||||
|
|
@ -489,7 +499,7 @@ a[data-cast~="new"] {
|
|||
color: var(--text-color);
|
||||
opacity: 50%;
|
||||
|
||||
margin-right: 16px;
|
||||
margin-right: var(--16px);
|
||||
|
||||
&.has-news {
|
||||
opacity: 100%;
|
||||
|
|
@ -501,7 +511,7 @@ a[data-cast~="new"] {
|
|||
}
|
||||
|
||||
& .badge {
|
||||
margin-left: 8px;
|
||||
margin-left: var(--8px);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -514,7 +524,7 @@ span.badge {
|
|||
--recursive-casl: 0;
|
||||
|
||||
border-radius: 999px;
|
||||
padding: 2px 6px;
|
||||
padding: var(--2px) var(--6px);
|
||||
font-size: 0.9em;
|
||||
|
||||
&.red {
|
||||
|
|
@ -528,7 +538,7 @@ span.badge {
|
|||
}
|
||||
|
||||
&.before-content {
|
||||
margin-right: 6px;
|
||||
margin-right: var(--6px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -540,7 +550,7 @@ footer {
|
|||
|
||||
& #footer-icon {
|
||||
color: var(--text-color);
|
||||
padding-right: 24px;
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -566,29 +576,29 @@ th-emoji-tooltip {
|
|||
z-index: 100;
|
||||
|
||||
background-color: var(--background-color-tooltip);
|
||||
padding: 8px;
|
||||
margin-top: 8px;
|
||||
border-radius: 6px;
|
||||
padding: var(--8px);
|
||||
margin-top: var(--8px);
|
||||
border-radius: var(--6px);
|
||||
|
||||
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(3px);
|
||||
filter: blur(var(--3px));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
th-emoji-tooltip.transitioned-in {
|
||||
opacity: 100%;
|
||||
filter: blur(0px);
|
||||
filter: blur(0);
|
||||
transform: translateX(-50%) scale(1.0);
|
||||
}
|
||||
|
||||
th-emoji-tooltip img {
|
||||
display: block;
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
max-width: 4.5rem;
|
||||
max-height: 4.5rem;
|
||||
}
|
||||
|
||||
th-emoji-tooltip p {
|
||||
|
|
@ -696,7 +706,7 @@ th-literate-program[data-mode="output"] {
|
|||
&::after {
|
||||
content: 'Error';
|
||||
|
||||
padding: 8px;
|
||||
padding: var(--8px);
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -720,7 +730,7 @@ th-literate-program[data-mode="output"] {
|
|||
&::after {
|
||||
content: 'Console';
|
||||
|
||||
padding: 8px;
|
||||
padding: var(--8px);
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ section {
|
|||
.tree th-bc>p:last-child {
|
||||
--transition-duration: 0.2s;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
margin-top: var(--8px);
|
||||
margin-bottom: var(--4px);
|
||||
|
||||
&>a {
|
||||
display: inline-block;
|
||||
|
|
@ -17,7 +17,7 @@ section {
|
|||
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-1);
|
||||
border: var(--1px) solid var(--border-1);
|
||||
border-radius: 2em;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 43rem) {
|
||||
.tree .branch-container {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
|
@ -107,13 +107,13 @@ section.settings {
|
|||
}
|
||||
|
||||
& p {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--8px);
|
||||
}
|
||||
|
||||
& button {
|
||||
border: 1px solid var(--border-1);
|
||||
border: var(--1px) solid var(--border-1);
|
||||
border-radius: 999px;
|
||||
padding: 4px 12px;
|
||||
padding: var(--4px) var(--12px);
|
||||
background: none;
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.index\:hobby-corners {
|
||||
&>li {
|
||||
margin: 8px 0px;
|
||||
margin: var(--8px) 0px;
|
||||
|
||||
&>details {
|
||||
border-top: 4px solid var(--section-color);
|
||||
border-top: var(--4px) solid var(--section-color);
|
||||
}
|
||||
|
||||
&>details>summary {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
color: var(--text-color);
|
||||
opacity: 40%;
|
||||
|
||||
width: 96px;
|
||||
width: 6.85rem;
|
||||
height: auto;
|
||||
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 8px;
|
||||
margin: var(--8px);
|
||||
background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
|
||||
background-size: 400%;
|
||||
image-rendering: pixelated;
|
||||
|
|
@ -35,7 +35,6 @@
|
|||
--recursive-slnt: 0.0;
|
||||
--recursive-mono: 1.0;
|
||||
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
color: #d3dce9;
|
||||
text-shadow:
|
||||
|
|
@ -120,7 +119,7 @@
|
|||
0 1px 0 #1a2039,
|
||||
0 -1px 0 #1a2039;
|
||||
|
||||
margin-block: 8px;
|
||||
margin-block: var(--8px);
|
||||
margin-left: 16px;
|
||||
padding-left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
/*** Variables ***/
|
||||
|
||||
:root {
|
||||
--tree-indent-width: 28px;
|
||||
--tree-indent-width: 2rem;
|
||||
--transition-duration: 0.15s;
|
||||
--button-bar-icon-size: 24px;
|
||||
--button-bar-icon-size: 1.75rem;
|
||||
}
|
||||
|
||||
/*** Breadcrumbs ***/
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
background-position: 50% 50%;
|
||||
opacity: 70%;
|
||||
|
||||
width: 32px;
|
||||
width: 2.25rem;
|
||||
height: 1.2em;
|
||||
|
||||
vertical-align: text-bottom;
|
||||
|
|
@ -96,12 +96,12 @@
|
|||
|
||||
/* Use an indent level appropriate for the viewport. */
|
||||
.tree ul {
|
||||
--tree-responsive-indent-width: clamp(8px, 2vw, var(--tree-indent-width));
|
||||
--tree-responsive-indent-width: clamp(var(--8px), 2vw, var(--tree-indent-width));
|
||||
|
||||
/* Draw indent guides. */
|
||||
padding-left: calc(var(--tree-responsive-indent-width) / 2);
|
||||
margin-left: calc(var(--tree-responsive-indent-width) / 2);
|
||||
border-left: 1px solid var(--tree-indent-guide-dim);
|
||||
border-left: var(--1px) solid var(--tree-indent-guide-dim);
|
||||
|
||||
transition: border-left-color var(--transition-duration);
|
||||
}
|
||||
|
|
@ -145,8 +145,8 @@
|
|||
&>div {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-bottom: -1px;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: calc(- var(--1px));
|
||||
border-bottom: var(--1px) solid transparent;
|
||||
transition: border-bottom-color var(--transition-duration);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
and notably *excludes* children. */
|
||||
.tree details>summary {
|
||||
/* Slightly round for elegance */
|
||||
border-radius: 8px;
|
||||
border-radius: var(--8px);
|
||||
|
||||
/* Give it a shaded background on hover */
|
||||
background-color: transparent;
|
||||
|
|
@ -183,12 +183,12 @@
|
|||
|
||||
.tree li>div:first-child,
|
||||
.tree li>details>summary:first-child {
|
||||
border-bottom: 1px solid var(--border-1);
|
||||
border-bottom: var(--1px) solid var(--border-1);
|
||||
}
|
||||
|
||||
.tree details>summary {
|
||||
/* In that case summaries shall not be rounded. */
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
th-bp {
|
||||
display: block;
|
||||
width: var(--tree-indent-width);
|
||||
height: 24px;
|
||||
height: 1.75rem;
|
||||
|
||||
background-image: var(--icon-leaf);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -220,8 +220,8 @@ th-bp {
|
|||
/* bc - branch content */
|
||||
th-bc {
|
||||
display: block;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: var(--6px);
|
||||
padding-bottom: var(--6px);
|
||||
|
||||
/* Grow to fill the entire available space. This pushes out th-bb to the far right. */
|
||||
flex-grow: 1;
|
||||
|
|
@ -246,13 +246,13 @@ th-bc {
|
|||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
|
||||
width: 16px;
|
||||
width: var(--16px);
|
||||
height: 1.2em;
|
||||
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 0.5em;
|
||||
|
||||
margin-right: -32px;
|
||||
margin-right: -2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -268,8 +268,8 @@ th-bc {
|
|||
|
||||
background-color: #058ef0;
|
||||
color: #ffffff;
|
||||
padding: 4px 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: var(--4px) var(--12px);
|
||||
margin-bottom: var(--4px);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -277,7 +277,7 @@ th-bc {
|
|||
/* bb - button bar */
|
||||
th-bb {
|
||||
height: 100%;
|
||||
margin: 4px;
|
||||
margin: var(--4px);
|
||||
|
||||
/* Should be displayed on the top of the branch rather than in the middle. */
|
||||
align-self: start;
|
||||
|
|
@ -299,7 +299,7 @@ th-bb {
|
|||
/* For media without hover functionality, th-bb should always be visible. */
|
||||
@media (hover: none) {
|
||||
:root {
|
||||
--button-bar-icon-size: 32px;
|
||||
--button-bar-icon-size: 2.25rem;
|
||||
}
|
||||
|
||||
.tree th-bb {
|
||||
|
|
@ -309,8 +309,8 @@ th-bb {
|
|||
margin: 0px;
|
||||
|
||||
& a.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -350,7 +350,7 @@ th-bb .branch-date {
|
|||
|
||||
/* Style the loading text to not be too attention grabbing. */
|
||||
.tree .link-loading {
|
||||
padding-left: 24px;
|
||||
padding-left: 1.75em;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -385,7 +385,7 @@ th-bb .branch-date {
|
|||
|
||||
/* <noscript> navigation links */
|
||||
.tree .navigate {
|
||||
padding-left: 24px;
|
||||
padding-left: 1.75em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0% 50%;
|
||||
opacity: 80%;
|
||||
|
|
@ -394,16 +394,16 @@ th-bb .branch-date {
|
|||
/* branch-quote class for "air quote branches"; used to separate a subtree from a parent tree
|
||||
stylistically such that it's interpretable as a form of block quote. */
|
||||
ul.branch-quote {
|
||||
--vertical-margin: 8px;
|
||||
--padding: 8px;
|
||||
--vertical-margin: var(--8px);
|
||||
--padding: var(--8px);
|
||||
|
||||
margin-top: var(--vertical-margin);
|
||||
margin-bottom: var(--vertical-margin);
|
||||
padding-top: var(--padding);
|
||||
padding-bottom: var(--padding);
|
||||
padding-right: var(--padding);
|
||||
border: 1px solid var(--border-1);
|
||||
border-radius: 8px;
|
||||
border: var(--1px) solid var(--border-1);
|
||||
border-radius: var(--8px);
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -414,8 +414,8 @@ ul.branch-quote {
|
|||
|
||||
content: '“';
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 1px;
|
||||
right: var(--16px);
|
||||
top: var(--1px);
|
||||
font-size: 3rem;
|
||||
opacity: 50%;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue