liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 31 Activity

new accessible metrics

Browse source
This commit is contained in:
liquidex 2024-06-13 21:50:09 +02:00
parent d968da10a0
commit 05460f6c69
6 changed files with 109 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
static/css/components/chat.css
View file

@ -18,15 +18,15 @@ th-chat-said {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: 1px solid var(--border-1); border: var(--1px) solid var(--border-1);
padding: 12px 16px; padding: var(--12px) var(--16px);
margin: 8px 0; margin: var(--8px) 0;
border-radius: 8px; border-radius: var(--8px);
max-width: 60%; max-width: 60%;
&>.picture { &>.picture {
padding-right: 16px; padding-right: var(--16px);
align-self: baseline; align-self: baseline;
} }
@ -76,8 +76,8 @@ th-chat-asked {
&::before { &::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 16px; width: var(--16px);
height: 16px; height: var(--16px);
margin-right: 0.5em; margin-right: 0.5em;
background-image: var(--icon-choose); background-image: var(--icon-choose);
background-position: 50% 50%; background-position: 50% 50%;
@ -88,7 +88,8 @@ th-chat-asked {
transition: opacity var(--transition-duration), translate var(--transition-duration); transition: opacity var(--transition-duration), translate var(--transition-duration);
} }
&:hover::before, &[disabled]::before { &:hover::before,
&[disabled]::before {
opacity: 50%; opacity: 50%;
translate: 0 0; translate: 0 0;
} }

108
static/css/main.css
View file

@ -26,6 +26,7 @@
/* Hack to enable theme-matching scrollbars in <pre> */ /* Hack to enable theme-matching scrollbars in <pre> */
--shaded-against-background: #f2f0ea; --shaded-against-background: #f2f0ea;
--shaded-against-background-twice: #e6e4de; --shaded-against-background-twice: #e6e4de;
} }
@media (prefers-color-scheme: dark) { @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 */ /* Article-style layout. Center everything and give it a maximum width */
body { body {
max-width: 1200px; max-width: 86rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -59,12 +74,12 @@ body {
} }
main { main {
padding: 0 16px; padding: 0 var(--16px);
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
main { main {
padding: 0 8px; padding: 0 var(--8px);
} }
} }
@ -100,14 +115,9 @@ body::selection {
font-variation-settings: "MONO" 1.0; font-variation-settings: "MONO" 1.0;
} }
body {
body,
pre,
code,
kbd,
button {
font-family: 'RecVar', sans-serif; font-family: 'RecVar', sans-serif;
font-size: 14px; font-size: 87.5%;
line-height: 1.5; line-height: 1.5;
} }
@ -217,7 +227,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 4px 0; margin: var(--4px) 0;
} }
/* Lay out elements a little less compactly (actually just have some blank space past the end) */ /* Lay out elements a little less compactly (actually just have some blank space past the end) */
@ -230,9 +240,9 @@ body {
code, code,
th-literate-program { th-literate-program {
padding: 3px 4px; padding: var(--3px) var(--4px);
background-color: var(--shaded-background); background-color: var(--shaded-background);
border-radius: 4px; border-radius: var(--4px);
} }
th-literate-program, th-literate-program,
@ -241,17 +251,17 @@ th-literate-output {
} }
kbd { kbd {
padding: 3px 6px; padding: var(--3px) var(--6px);
border: 1px solid var(--border-1); border: var(--1px) solid var(--border-1);
border-radius: 6px; border-radius: var(--6px);
} }
pre, pre,
th-literate-program { th-literate-program {
padding: 8px 12px; padding: var(--8px) var(--12px);
margin: 12px 0; margin: var(--12px) 0;
background-color: var(--shaded-against-background); background-color: var(--shaded-against-background);
border-radius: 8px; border-radius: var(--8px);
transition: background-color var(--transition-duration); transition: background-color var(--transition-duration);
} }
@ -261,7 +271,7 @@ th-literate-program {
pre, pre,
th-literate-program { th-literate-program {
background-color: transparent; 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 { th-literate-program>code {
padding: 0; padding: 0;
background: none; background: none;
border-radius: 0px; border-radius: 0;
} }
th-literate-program { th-literate-program {
@ -305,8 +315,8 @@ img {
/* Also regarding images - make them look a bit more pretty by default */ /* Also regarding images - make them look a bit more pretty by default */
img.pic { img.pic {
border-radius: 6px; border-radius: var(--6px);
margin: 8px 0; margin: var(--8px) 0;
} }
/* Image hints for tweaking rendering */ /* Image hints for tweaking rendering */
@ -365,23 +375,23 @@ a.secret {
blockquote { blockquote {
margin: 0; margin: 0;
padding: 4px 12px; padding: var(--4px) var(--12px);
margin: 4px 0; margin: var(--4px) 0;
border-left: 4px solid var(--border-1); border-left: var(--4px) solid var(--border-1);
} }
/* And tables. */ /* And tables. */
table { table {
margin: 8px 0; margin: var(--8px) 0;
} }
table, table,
th, th,
td { td {
border: 1px solid var(--border-2); border: var(--1px) solid var(--border-2);
border-collapse: collapse; border-collapse: collapse;
padding: 4px 10px; padding: var(--4px) var(--10px);
} }
th { th {
@ -396,7 +406,7 @@ th {
hr { hr {
width: 100%; width: 100%;
border: none; border: none;
border-top: 1px solid var(--border-1); border-top: var(--1px) solid var(--border-1);
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -404,11 +414,11 @@ hr {
/* Style the noscript box a little more prettily. */ /* Style the noscript box a little more prettily. */
.noscript { .noscript {
padding: 16px; padding: var(--16px);
background-color: #fde748; background-color: #fde748;
color: var(--text-color-light); color: var(--text-color-light);
border: 1px solid #6c581c; border: var(--1px) solid #6c581c;
border-radius: 8px; border-radius: var(--8px);
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -416,7 +426,7 @@ hr {
.noscript p { .noscript p {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: var(--16px);
} }
.noscript p:last-child { .noscript p:last-child {
@ -464,7 +474,7 @@ h1.page-title {
--recursive-wght: 800; --recursive-wght: 800;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
margin-left: 32px; margin-left: 2.25rem;
font-size: 1.25rem; font-size: 1.25rem;
& a { & a {
@ -489,7 +499,7 @@ a[data-cast~="new"] {
color: var(--text-color); color: var(--text-color);
opacity: 50%; opacity: 50%;
margin-right: 16px; margin-right: var(--16px);
&.has-news { &.has-news {
opacity: 100%; opacity: 100%;
@ -501,7 +511,7 @@ a[data-cast~="new"] {
} }
& .badge { & .badge {
margin-left: 8px; margin-left: var(--8px);
text-decoration: none; text-decoration: none;
} }
} }
@ -514,7 +524,7 @@ span.badge {
--recursive-casl: 0; --recursive-casl: 0;
border-radius: 999px; border-radius: 999px;
padding: 2px 6px; padding: var(--2px) var(--6px);
font-size: 0.9em; font-size: 0.9em;
&.red { &.red {
@ -528,7 +538,7 @@ span.badge {
} }
&.before-content { &.before-content {
margin-right: 6px; margin-right: var(--6px);
} }
} }
@ -540,7 +550,7 @@ footer {
& #footer-icon { & #footer-icon {
color: var(--text-color); color: var(--text-color);
padding-right: 24px; padding-right: 1.75rem;
} }
} }
@ -566,29 +576,29 @@ th-emoji-tooltip {
z-index: 100; z-index: 100;
background-color: var(--background-color-tooltip); background-color: var(--background-color-tooltip);
padding: 8px; padding: var(--8px);
margin-top: 8px; margin-top: var(--8px);
border-radius: 6px; border-radius: var(--6px);
transition: transition:
opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
filter 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); transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0%; opacity: 0%;
filter: blur(3px); filter: blur(var(--3px));
pointer-events: none; pointer-events: none;
} }
th-emoji-tooltip.transitioned-in { th-emoji-tooltip.transitioned-in {
opacity: 100%; opacity: 100%;
filter: blur(0px); filter: blur(0);
transform: translateX(-50%) scale(1.0); transform: translateX(-50%) scale(1.0);
} }
th-emoji-tooltip img { th-emoji-tooltip img {
display: block; display: block;
max-width: 64px; max-width: 4.5rem;
max-height: 64px; max-height: 4.5rem;
} }
th-emoji-tooltip p { th-emoji-tooltip p {
@ -696,7 +706,7 @@ th-literate-program[data-mode="output"] {
&::after { &::after {
content: 'Error'; content: 'Error';
padding: 8px; padding: var(--8px);
position: absolute; position: absolute;
right: 0; right: 0;
@ -720,7 +730,7 @@ th-literate-program[data-mode="output"] {
&::after { &::after {
content: 'Console'; content: 'Console';
padding: 8px; padding: var(--8px);
position: absolute; position: absolute;
right: 0; right: 0;

14
static/css/new.css
View file

@ -7,8 +7,8 @@ section {
.tree th-bc>p:last-child { .tree th-bc>p:last-child {
--transition-duration: 0.2s; --transition-duration: 0.2s;
margin-top: 8px; margin-top: var(--8px);
margin-bottom: 4px; margin-bottom: var(--4px);
&>a { &>a {
display: inline-block; display: inline-block;
@ -17,7 +17,7 @@ section {
color: var(--text-color); color: var(--text-color);
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-1); border: var(--1px) solid var(--border-1);
border-radius: 2em; border-radius: 2em;
text-decoration: none; text-decoration: none;
@ -58,7 +58,7 @@ section {
} }
} }
@media (max-width: 600px) { @media (max-width: 43rem) {
.tree .branch-container { .tree .branch-container {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -107,13 +107,13 @@ section.settings {
} }
& p { & p {
margin-bottom: 8px; margin-bottom: var(--8px);
} }
& button { & button {
border: 1px solid var(--border-1); border: var(--1px) solid var(--border-1);
border-radius: 999px; border-radius: 999px;
padding: 4px 12px; padding: var(--4px) var(--12px);
background: none; background: none;
color: var(--text-color); color: var(--text-color);
font-size: 1rem; font-size: 1rem;

6
static/css/page/index.css
View file

@ -1,9 +1,9 @@
.index\:hobby-corners { .index\:hobby-corners {
&>li { &>li {
margin: 8px 0px; margin: var(--8px) 0px;
&>details { &>details {
border-top: 4px solid var(--section-color); border-top: var(--4px) solid var(--section-color);
} }
&>details>summary { &>details>summary {
@ -25,7 +25,7 @@
color: var(--text-color); color: var(--text-color);
opacity: 40%; opacity: 40%;
width: 96px; width: 6.85rem;
height: auto; height: auto;
pointer-events: none; pointer-events: none;

5
static/css/page/tairu.css
View file

@ -19,7 +19,7 @@
display: inline-block; display: inline-block;
width: 56px; width: 56px;
height: 56px; height: 56px;
margin: 8px; margin: var(--8px);
background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png'); background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
background-size: 400%; background-size: 400%;
image-rendering: pixelated; image-rendering: pixelated;
@ -35,7 +35,6 @@
--recursive-slnt: 0.0; --recursive-slnt: 0.0;
--recursive-mono: 1.0; --recursive-mono: 1.0;
font-size: 14px;
position: absolute; position: absolute;
color: #d3dce9; color: #d3dce9;
text-shadow: text-shadow:
@ -120,7 +119,7 @@
0 1px 0 #1a2039, 0 1px 0 #1a2039,
0 -1px 0 #1a2039; 0 -1px 0 #1a2039;
margin-block: 8px; margin-block: var(--8px);
margin-left: 16px; margin-left: 16px;
padding-left: 0; padding-left: 0;

58
static/css/tree.css
View file

@ -25,9 +25,9 @@
/*** Variables ***/ /*** Variables ***/
:root { :root {
--tree-indent-width: 28px; --tree-indent-width: 2rem;
--transition-duration: 0.15s; --transition-duration: 0.15s;
--button-bar-icon-size: 24px; --button-bar-icon-size: 1.75rem;
} }
/*** Breadcrumbs ***/ /*** Breadcrumbs ***/
@ -57,7 +57,7 @@
background-position: 50% 50%; background-position: 50% 50%;
opacity: 70%; opacity: 70%;
width: 32px; width: 2.25rem;
height: 1.2em; height: 1.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -96,12 +96,12 @@
/* Use an indent level appropriate for the viewport. */ /* Use an indent level appropriate for the viewport. */
.tree ul { .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. */ /* Draw indent guides. */
padding-left: calc(var(--tree-responsive-indent-width) / 2); padding-left: calc(var(--tree-responsive-indent-width) / 2);
margin-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); transition: border-left-color var(--transition-duration);
} }
@ -145,8 +145,8 @@
&>div { &>div {
box-sizing: border-box; box-sizing: border-box;
margin-bottom: -1px; margin-bottom: calc(- var(--1px));
border-bottom: 1px solid transparent; border-bottom: var(--1px) solid transparent;
transition: border-bottom-color var(--transition-duration); transition: border-bottom-color var(--transition-duration);
&:hover { &:hover {
@ -167,7 +167,7 @@
and notably *excludes* children. */ and notably *excludes* children. */
.tree details>summary { .tree details>summary {
/* Slightly round for elegance */ /* Slightly round for elegance */
border-radius: 8px; border-radius: var(--8px);
/* Give it a shaded background on hover */ /* Give it a shaded background on hover */
background-color: transparent; background-color: transparent;
@ -183,12 +183,12 @@
.tree li>div:first-child, .tree li>div:first-child,
.tree li>details>summary: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 { .tree details>summary {
/* In that case summaries shall not be rounded. */ /* In that case summaries shall not be rounded. */
border-radius: 0px; border-radius: 0;
} }
} }
@ -198,7 +198,7 @@
th-bp { th-bp {
display: block; display: block;
width: var(--tree-indent-width); width: var(--tree-indent-width);
height: 24px; height: 1.75rem;
background-image: var(--icon-leaf); background-image: var(--icon-leaf);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -220,8 +220,8 @@ th-bp {
/* bc - branch content */ /* bc - branch content */
th-bc { th-bc {
display: block; display: block;
padding-top: 6px; padding-top: var(--6px);
padding-bottom: 6px; padding-bottom: var(--6px);
/* Grow to fill the entire available space. This pushes out th-bb to the far right. */ /* Grow to fill the entire available space. This pushes out th-bb to the far right. */
flex-grow: 1; flex-grow: 1;
@ -246,13 +246,13 @@ th-bc {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
width: 16px; width: var(--16px);
height: 1.2em; height: 1.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
margin-left: 0.5em; margin-left: 0.5em;
margin-right: -32px; margin-right: -2.25rem;
} }
} }
@ -268,8 +268,8 @@ th-bc {
background-color: #058ef0; background-color: #058ef0;
color: #ffffff; color: #ffffff;
padding: 4px 12px; padding: var(--4px) var(--12px);
margin-bottom: 4px; margin-bottom: var(--4px);
border-radius: 100px; border-radius: 100px;
} }
} }
@ -277,7 +277,7 @@ th-bc {
/* bb - button bar */ /* bb - button bar */
th-bb { th-bb {
height: 100%; height: 100%;
margin: 4px; margin: var(--4px);
/* Should be displayed on the top of the branch rather than in the middle. */ /* Should be displayed on the top of the branch rather than in the middle. */
align-self: start; align-self: start;
@ -299,7 +299,7 @@ th-bb {
/* For media without hover functionality, th-bb should always be visible. */ /* For media without hover functionality, th-bb should always be visible. */
@media (hover: none) { @media (hover: none) {
:root { :root {
--button-bar-icon-size: 32px; --button-bar-icon-size: 2.25rem;
} }
.tree th-bb { .tree th-bb {
@ -309,8 +309,8 @@ th-bb {
margin: 0px; margin: 0px;
& a.icon { & a.icon {
width: 32px; width: 2.25rem;
height: 32px; height: 2.25rem;
} }
} }
} }
@ -350,7 +350,7 @@ th-bb .branch-date {
/* Style the loading text to not be too attention grabbing. */ /* Style the loading text to not be too attention grabbing. */
.tree .link-loading { .tree .link-loading {
padding-left: 24px; padding-left: 1.75em;
opacity: 50%; opacity: 50%;
} }
@ -385,7 +385,7 @@ th-bb .branch-date {
/* <noscript> navigation links */ /* <noscript> navigation links */
.tree .navigate { .tree .navigate {
padding-left: 24px; padding-left: 1.75em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0% 50%; background-position: 0% 50%;
opacity: 80%; 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 /* 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. */ stylistically such that it's interpretable as a form of block quote. */
ul.branch-quote { ul.branch-quote {
--vertical-margin: 8px; --vertical-margin: var(--8px);
--padding: 8px; --padding: var(--8px);
margin-top: var(--vertical-margin); margin-top: var(--vertical-margin);
margin-bottom: var(--vertical-margin); margin-bottom: var(--vertical-margin);
padding-top: var(--padding); padding-top: var(--padding);
padding-bottom: var(--padding); padding-bottom: var(--padding);
padding-right: var(--padding); padding-right: var(--padding);
border: 1px solid var(--border-1); border: var(--1px) solid var(--border-1);
border-radius: 8px; border-radius: var(--8px);
position: relative; position: relative;
@ -414,8 +414,8 @@ ul.branch-quote {
content: '“'; content: '“';
position: absolute; position: absolute;
right: 16px; right: var(--16px);
top: 1px; top: var(--1px);
font-size: 3rem; font-size: 3rem;
opacity: 50%; opacity: 50%;