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

change units in CSS to properly scaled rem

Browse source 
yeah I should've done that from the start should have I
This commit is contained in:
liquidex 2024-12-10 23:21:36 +01:00
parent 6d3037791a
commit ae9273cdff
6 changed files with 138 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/css/base.css
View file

@ -40,20 +40,6 @@
} }
} }
: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;
}
/* Reset things to more sensible sizing rules */ /* Reset things to more sensible sizing rules */
* { * {

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

@ -1,10 +1,10 @@
:root { :root {
--icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo='); --icon-choose: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo='); --icon-choose: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
} }
} }
@ -18,19 +18,19 @@ th-chat-said {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: var(--1px) solid var(--border-1); border: 0.1rem solid var(--border-1);
padding: var(--12px) var(--16px); padding: 1.2rem 1.6rem;
margin: var(--8px) 0; margin: 0.8rem 0;
border-radius: var(--8px); border-radius: 0.8rem;
max-width: 60%; max-width: 60%;
&>.picture { & > .picture {
padding-right: var(--16px); padding-right: 1.6rem;
align-self: baseline; align-self: baseline;
} }
&>.text-container { & > .text-container {
display: inline-block; display: inline-block;
} }
} }
@ -39,7 +39,7 @@ th-chat-asked {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
&>button { & > button {
/* Reset <button> */ /* Reset <button> */
border: none; border: none;
background: none; background: none;
@ -74,10 +74,10 @@ th-chat-asked {
} }
&::before { &::before {
content: ''; content: "";
display: inline-block; display: inline-block;
width: var(--16px); width: 1.6rem;
height: var(--16px); height: 1.6rem;
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%;
@ -85,7 +85,9 @@ th-chat-asked {
opacity: 0%; opacity: 0%;
vertical-align: middle; vertical-align: middle;
translate: -1em 0; translate: -1em 0;
transition: opacity var(--transition-duration), translate var(--transition-duration); transition:
opacity var(--transition-duration),
translate var(--transition-duration);
} }
&:hover::before, &:hover::before,

145
static/css/main.css
View file

@ -22,7 +22,7 @@ body {
), ),
min-content min-content
) )
[title] minmax(6rem, min-content) [title] minmax(9.6rem, min-content)
[main] 1fr [main] 1fr
[bottom] min-content; [bottom] min-content;
} }
@ -63,7 +63,7 @@ main {
grid-row: main; grid-row: main;
grid-column: center / center; grid-column: center / center;
margin-right: 8px; margin-right: 0.8rem;
} }
footer { footer {
@ -109,8 +109,8 @@ body {
} }
:focus-visible { :focus-visible {
outline: 1px solid var(--liquidex-brand-blue); outline: 0.1rem solid var(--liquidex-brand-blue);
outline-offset: 2px; outline-offset: 0.2rem;
} }
/* Set up typography */ /* Set up typography */
@ -144,8 +144,12 @@ dfn {
line-height: 1.5; line-height: 1.5;
} }
html {
font-size: 62.5%;
}
body { body {
font-size: 87.5%; font-size: 1.4rem;
} }
pre, pre,
@ -190,7 +194,7 @@ h1 {
--recursive-casl: 0; --recursive-casl: 0;
--recursive-wght: 900; --recursive-wght: 900;
font-size: 3.5rem; font-size: 5.6rem;
font-feature-settings: var(--recursive-simplified-r) 0; font-feature-settings: var(--recursive-simplified-r) 0;
} }
@ -198,21 +202,21 @@ h2 {
--recursive-casl: 0.5; --recursive-casl: 0.5;
--recursive-wght: 800; --recursive-wght: 800;
font-size: 2rem; font-size: 3.2rem;
} }
h3 { h3 {
--recursive-casl: 0.5; --recursive-casl: 0.5;
--recursive-wght: 700; --recursive-wght: 700;
font-size: 1.5rem; font-size: 2.4rem;
} }
h4 { h4 {
--recursive-casl: 0.5; --recursive-casl: 0.5;
--recursive-wght: 700; --recursive-wght: 700;
font-size: 1rem; font-size: 1.6rem;
} }
pre, pre,
@ -261,16 +265,16 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: var(--4px) 0; margin: 0.4rem 0;
} }
/* Make code examples a little prettier by giving them visual separation from the rest of the page */ /* Make code examples a little prettier by giving them visual separation from the rest of the page */
code, code,
th-literate-program { th-literate-program {
padding: var(--3px) var(--4px); padding: 0.3rem 0.4rem;
background-color: var(--shaded-background); background-color: var(--shaded-background);
border-radius: 0.4em; border-radius: 0.4rem;
} }
th-literate-program, th-literate-program,
@ -279,15 +283,15 @@ th-literate-output {
} }
kbd { kbd {
padding: var(--3px) var(--6px); padding: 0.3rem 0.6rem;
border: var(--1px) solid var(--border-1); border: 0.1rem solid var(--border-1);
border-radius: 0.4em; border-radius: 0.4rem;
} }
pre, pre,
th-literate-program { th-literate-program {
padding: var(--8px) var(--12px); padding: 0.8rem 1.2rem;
margin: var(--12px) 0; margin: 1.2rem 0;
background-color: var(--shaded-background); background-color: var(--shaded-background);
border-radius: 0.5em; border-radius: 0.5em;
@ -298,7 +302,7 @@ th-literate-program {
pre, pre,
th-literate-program { th-literate-program {
background-color: transparent; background-color: transparent;
border: var(--1px) solid var(--border-1); border: 0.1rem solid var(--border-1);
} }
} }
@ -331,8 +335,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: var(--6px); border-radius: 0.6rem;
margin: var(--8px) 0; margin: 0.8rem 0;
} }
/* Image hints for tweaking rendering */ /* Image hints for tweaking rendering */
@ -345,22 +349,22 @@ img {
/* TODO: These could be autogenerated! */ /* TODO: These could be autogenerated! */
&[src*="+width72"] { &[src*="+width72"] {
width: 72px; width: 7.2rem;
height: auto; height: auto;
} }
&[src*="+width160"] { &[src*="+width160"] {
width: 160px; width: 16rem;
height: auto; height: auto;
} }
&[src*="+width640"] { &[src*="+width640"] {
width: 640px; width: 64rem;
height: auto; height: auto;
} }
&[src*="+width752"] { &[src*="+width752"] {
width: 752px; width: 75.2rem;
height: auto; height: auto;
} }
@ -391,23 +395,23 @@ a.secret {
blockquote { blockquote {
margin: 0; margin: 0;
padding: var(--4px) var(--12px); padding: 0.4rem 1.2rem;
margin: var(--4px) 0; margin: 0.4rem 0;
border-left: var(--4px) solid var(--border-1); border-left: 0.4rem solid var(--border-1);
} }
/* And tables. */ /* And tables. */
table { table {
margin: var(--8px) 0; margin: 0.8rem 0;
} }
table, table,
th, th,
td { td {
border: var(--1px) solid var(--border-2); border: 0.1rem solid var(--border-2);
border-collapse: collapse; border-collapse: collapse;
padding: var(--4px) var(--10px); padding: 0.4rem 1rem;
} }
th { th {
@ -422,7 +426,7 @@ th {
hr { hr {
width: 100%; width: 100%;
border: none; border: none;
border-top: var(--1px) solid var(--border-1); border-top: 0.1rem solid var(--border-1);
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -430,16 +434,16 @@ hr {
/* Style the noscript box a little more prettily. */ /* Style the noscript box a little more prettily. */
.noscript { .noscript {
padding: var(--16px); padding: 1.6rem;
background-color: #fde748; background-color: #fde748;
color: var(--text-color-light); color: var(--text-color-light);
border: var(--1px) solid #6c581c; border: 0.1rem solid #6c581c;
border-radius: var(--8px); border-radius: 0.8rem;
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 16px; margin-top: 1.6rem;
margin-bottom: 16px; margin-bottom: 1.6rem;
} }
.noscript:empty { .noscript:empty {
@ -448,7 +452,7 @@ hr {
.noscript p { .noscript p {
margin-top: 0; margin-top: 0;
margin-bottom: var(--16px); margin-bottom: 1.6rem;
} }
.noscript p:last-child { .noscript p:last-child {
@ -471,6 +475,7 @@ hr {
} }
#nav-logo .logo { #nav-logo .logo {
/* NOTE: Measurements in px for pixel perfection */
width: 64px; width: 64px;
height: 64px; height: 64px;
@ -484,10 +489,10 @@ hr {
h1.page-title { h1.page-title {
--recursive-wght: 850; --recursive-wght: 850;
margin-top: 0.2rem; margin-top: 0.32rem;
margin-bottom: 0.2rem; margin-bottom: 0.32rem;
margin-left: 2.25rem; margin-left: 3.6rem;
font-size: 2.5rem; font-size: 4rem;
& a { & a {
color: var(--text-color); color: var(--text-color);
@ -514,8 +519,8 @@ span.badge {
--recursive-mono: 1; --recursive-mono: 1;
--recursive-casl: 0; --recursive-casl: 0;
border-radius: 999px; border-radius: 100rem;
padding: var(--2px) var(--6px); padding: 0.2rem 0.6rem;
font-size: 0.9em; font-size: 0.9em;
&.red { &.red {
@ -529,18 +534,18 @@ span.badge {
} }
&.before-content { &.before-content {
margin-right: var(--6px); margin-right: 0.6rem;
} }
} }
/* Style the footer */ /* Style the footer */
footer { footer {
padding-left: 1rem; padding-left: 1.6rem;
padding-right: 1rem; padding-right: 1.6rem;
margin-top: 4rem; margin-top: 6.4rem;
padding-bottom: 4rem; padding-bottom: 6.4rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -564,8 +569,8 @@ footer {
} }
& #open-command-line { & #open-command-line {
width: 32px; width: 3.2rem;
height: 32px; height: 3.2rem;
background: none; background: none;
border: none; border: none;
@ -606,8 +611,8 @@ dialog[open] {
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color); background-color: var(--background-color);
border: 1px solid var(--border-1); border: 0.1rem solid var(--border-1);
border-radius: 12px; border-radius: 1.2rem;
} }
/* Style emojis to be readable */ /* Style emojis to be readable */
@ -632,16 +637,16 @@ th-emoji-tooltip {
z-index: 100; z-index: 100;
background-color: var(--background-color-tooltip); background-color: var(--background-color-tooltip);
padding: var(--8px); padding: 0.8rem;
margin-top: var(--8px); margin-top: 0.8rem;
border-radius: var(--6px); border-radius: 0.6rem;
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(var(--3px)); filter: blur(0.3rem);
pointer-events: none; pointer-events: none;
} }
@ -653,8 +658,8 @@ th-emoji-tooltip.transitioned-in {
th-emoji-tooltip img { th-emoji-tooltip img {
display: block; display: block;
max-width: 4.5rem; max-width: 7.2rem;
max-height: 4.5rem; max-height: 7.2rem;
} }
th-emoji-tooltip p { th-emoji-tooltip p {
@ -662,12 +667,12 @@ th-emoji-tooltip p {
color: var(--text-color); color: var(--text-color);
font-size: 0.9em; font-size: 0.9em;
margin: 0; margin: 0;
padding-top: 6px; padding-top: 0.6rem;
line-height: 1; line-height: 1;
} }
.th-emoji-unknown { .th-emoji-unknown {
text-decoration: 1px underline var(--error-color); text-decoration: 0.1rem underline var(--error-color);
cursor: help; cursor: help;
} }
@ -696,12 +701,12 @@ th-command-line {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 4px; padding: 0 0.4rem;
width: 100%; width: 100%;
&::before { &::before {
content: ":"; content: ":";
padding-right: 2px; padding-right: 0.2rem;
opacity: 50%; opacity: 50%;
} }
@ -711,7 +716,7 @@ th-command-line {
border: none; border: none;
flex-grow: 1; flex-grow: 1;
padding: 2px 0; padding: 0.2rem 0;
&:focus { &:focus {
outline: none; outline: none;
@ -732,7 +737,7 @@ th-command-line {
overflow: auto; overflow: auto;
& > li { & > li {
padding: 2px 8px; padding: 0.2rem 0.8rem;
cursor: default; cursor: default;
@ -758,7 +763,7 @@ th-command-line {
@media (hover: none) { @media (hover: none) {
th-command-line { th-command-line {
& > ul.suggestions > li { & > ul.suggestions > li {
border-bottom: 1px solid var(--border-1); border-bottom: 0.1rem solid var(--border-1);
} }
} }
} }
@ -766,11 +771,11 @@ th-command-line {
@media (pointer: coarse) { @media (pointer: coarse) {
th-command-line { th-command-line {
& > .input-wrapper > input { & > .input-wrapper > input {
padding: 8px 0; padding: 0.8rem 0;
} }
& > ul.suggestions > li { & > ul.suggestions > li {
padding: 8px 8px; padding: 0.8rem 0.8rem;
} }
} }
} }
@ -802,7 +807,7 @@ th-literate-program[data-mode="output"] {
& iframe, & iframe,
& img.placeholder-image { & img.placeholder-image {
border-style: none; border-style: none;
border-radius: 4px; border-radius: 0.4rem;
display: block; display: block;
} }
@ -843,7 +848,7 @@ th-literate-program[data-mode="output"] {
&::after { &::after {
content: "Error"; content: "Error";
padding: var(--8px); padding: 0.8rem;
position: absolute; position: absolute;
right: 0; right: 0;
@ -867,7 +872,7 @@ th-literate-program[data-mode="output"] {
&::after { &::after {
content: "Console"; content: "Console";
padding: var(--8px); padding: 0.8rem;
position: absolute; position: absolute;
right: 0; right: 0;

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

@ -1,6 +1,6 @@
h1.page-title { h1.page-title {
--recursive-wght: 900; --recursive-wght: 900;
font-size: 3.5rem; font-size: 5.6rem;
} }
@media (hover: none) { @media (hover: none) {

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

@ -1,6 +1,6 @@
.tileset-cardinal-directions-demo th-bc { .tileset-cardinal-directions-demo th-bc {
/* TODO djot: remove the first rule */ /* TODO djot: remove the first rule */
& .horizontal-tile-strip>p { & .horizontal-tile-strip > p {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -10,7 +10,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
&>span { & > span {
font-size: 12px; font-size: 12px;
} }
} }
@ -20,8 +20,8 @@
display: inline-block; display: inline-block;
width: 56px; width: 56px;
height: 56px; height: 56px;
margin: var(--8px); margin: 0.8rem;
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;
position: relative; position: relative;
@ -32,9 +32,9 @@
& .west, & .west,
& .north { & .north {
--recursive-wght: 900; --recursive-wght: 900;
--recursive-casl: 0.0; --recursive-casl: 0;
--recursive-slnt: 0.0; --recursive-slnt: 0;
--recursive-mono: 1.0; --recursive-mono: 1;
position: absolute; position: absolute;
color: #d3dce9; color: #d3dce9;
@ -110,9 +110,9 @@
.tileset-four-to-eight-demo th-bc { .tileset-four-to-eight-demo th-bc {
& .directions-square { & .directions-square {
--recursive-wght: 900; --recursive-wght: 900;
--recursive-casl: 0.0; --recursive-casl: 0;
--recursive-slnt: 0.0; --recursive-slnt: 0;
--recursive-mono: 1.0; --recursive-mono: 1;
color: #d3dce9; color: #d3dce9;
text-shadow: text-shadow:
1px 0 0 #1a2039, 1px 0 0 #1a2039,
@ -120,14 +120,14 @@
0 1px 0 #1a2039, 0 1px 0 #1a2039,
0 -1px 0 #1a2039; 0 -1px 0 #1a2039;
margin-block: var(--8px); margin-block: 0.8rem;
margin-left: 16px; margin-left: 16px;
padding-left: 0; padding-left: 0;
width: 72px; width: 72px;
height: 72px; height: 72px;
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%;
background-position: 100% 100%; background-position: 100% 100%;
image-rendering: pixelated; image-rendering: pixelated;
@ -135,14 +135,14 @@
position: relative; position: relative;
&.bend { &.bend {
background-image: url('../../pic/01HQ183RANGH4S7VZSG1ZGH0S5-the-tile+width72+pixel.png'); background-image: url("../../pic/01HQ183RANGH4S7VZSG1ZGH0S5-the-tile+width72+pixel.png");
background-size: 100%; background-size: 100%;
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&.notabend { &.notabend {
background-image: url('../../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png'); background-image: url("../../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png");
background-size: 100%; background-size: 100%;
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;

63
static/css/tree.css
View file

@ -1,9 +1,9 @@
/*** Variables ***/ /*** Variables ***/
:root { :root {
--tree-indent-width: 2rem; --tree-indent-width: 3.2rem;
--transition-duration: 0.15s; --transition-duration: 0.15s;
--button-bar-icon-size: 1.75rem; --button-bar-icon-size: 2.8rem;
} }
/*** Breadcrumbs ***/ /*** Breadcrumbs ***/
@ -33,8 +33,8 @@
background-position: 50% 50%; background-position: 50% 50%;
opacity: 70%; opacity: 70%;
width: 2.25rem; width: 3.6rem;
height: 1.2em; height: 1.7rem;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
@ -54,7 +54,7 @@
.breadcrumbs > .root-breadcrumb { .breadcrumbs > .root-breadcrumb {
display: none; /* only when main logo is hidden */ display: none; /* only when main logo is hidden */
margin-right: -8px; margin-right: -0.8rem;
& a, & a,
& svg { & svg {
@ -62,9 +62,10 @@
} }
& .logo { & .logo {
/* NOTE: px used for pixel perfection */
width: 48px; width: 48px;
height: 48px; height: 48px;
padding: 8px; padding: 0.8rem;
color: var(--text-color); color: var(--text-color);
} }
} }
@ -97,7 +98,7 @@
/* 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( --tree-responsive-indent-width: clamp(
var(--8px), 0.8rem,
2vw, 2vw,
var(--tree-indent-width) var(--tree-indent-width)
); );
@ -105,7 +106,7 @@
/* 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: var(--1px) solid var(--tree-indent-guide-dim); border-left: 0.1rem solid var(--tree-indent-guide-dim);
transition: border-left-color var(--transition-duration); transition: border-left-color var(--transition-duration);
} }
@ -147,8 +148,8 @@
& > div { & > div {
box-sizing: border-box; box-sizing: border-box;
margin-bottom: calc(- var(--1px)); margin-bottom: -0.1rem;
border-bottom: var(--1px) solid transparent; border-bottom: 0.1rem solid transparent;
transition: border-bottom-color var(--transition-duration); transition: border-bottom-color var(--transition-duration);
&:hover { &:hover {
@ -168,7 +169,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: var(--8px); border-radius: 0.8rem;
/* Give it a shaded background on hover */ /* Give it a shaded background on hover */
background-color: transparent; background-color: transparent;
@ -183,7 +184,7 @@
@media (hover: none) { @media (hover: none) {
.tree li > div:first-child, .tree li > div:first-child,
.tree li > details > summary:first-child { .tree li > details > summary:first-child {
border-bottom: var(--1px) solid var(--border-1); border-bottom: 0.1rem solid var(--border-1);
} }
.tree details > summary { .tree details > summary {
@ -198,7 +199,7 @@
th-bp { th-bp {
display: block; display: block;
width: var(--tree-indent-width); width: var(--tree-indent-width);
height: 1.75rem; height: 2.8rem;
background-image: var(--icon-leaf); background-image: var(--icon-leaf);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -220,8 +221,8 @@ th-bp {
/* bc - branch content */ /* bc - branch content */
th-bc { th-bc {
display: block; display: block;
padding-top: var(--6px); padding-top: 0.6rem;
padding-bottom: var(--6px); padding-bottom: 0.6rem;
/* Lines that are too long get very hard to read. */ /* Lines that are too long get very hard to read. */
width: 100%; width: 100%;
@ -246,7 +247,7 @@ th-bc {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
width: var(--16px); width: 1.6rem;
height: 1.2em; height: 1.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -267,16 +268,16 @@ th-bc {
background-color: #058ef0; background-color: #058ef0;
color: #ffffff; color: #ffffff;
padding: var(--4px) var(--12px); padding: 0.4rem 1.2rem;
margin-bottom: var(--4px); margin-bottom: 0.4rem;
border-radius: 100px; border-radius: 100rem;
} }
} }
/* bb - button bar */ /* bb - button bar */
th-bb { th-bb {
height: 100%; height: 100%;
margin: var(--4px); margin: 0.4rem;
/* 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;
@ -300,18 +301,18 @@ 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: 2.25rem; --button-bar-icon-size: 3.6rem;
} }
.tree th-bb { .tree th-bb {
opacity: 100%; opacity: 100%;
/* Replace margin with button size to make it easier to click. */ /* Replace margin with button size to make it easier to click. */
margin: 0px; margin: 0;
& a.icon { & a.icon {
width: 2.25rem; width: 3.6rem;
height: 2.25rem; height: 3.6rem;
} }
} }
} }
@ -399,16 +400,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: var(--8px); --vertical-margin: 0.8rem;
--padding: var(--8px); --padding: 0.8rem;
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: var(--1px) solid var(--border-1); border: 0.1rem solid var(--border-1);
border-radius: var(--8px); border-radius: 0.8rem;
position: relative; position: relative;
@ -418,9 +419,9 @@ ul.branch-quote {
content: "“"; content: "“";
position: absolute; position: absolute;
right: var(--16px); right: 1.6rem;
top: var(--1px); top: 0.1rem;
font-size: 3rem; font-size: 4.8rem;
opacity: 50%; opacity: 50%;
transition: opacity var(--transition-duration); transition: opacity var(--transition-duration);