From ae9273cdfff73003cb6ec79c7323fb3f061c7e59 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Tue, 10 Dec 2024 23:21:36 +0100
Subject: [PATCH] change units in CSS to properly scaled rem

yeah I should've done that from the start should have I
---
 static/css/base.css            |  14 ----
 static/css/components/chat.css |  30 +++----
 static/css/main.css            | 145 +++++++++++++++++----------------
 static/css/page/index.css      |   2 +-
 static/css/page/tairu.css      |  28 +++----
 static/css/tree.css            |  63 +++++++-------
 6 files changed, 138 insertions(+), 144 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index b7eb4e4..60c933e 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -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 */
 
 * {
diff --git a/static/css/components/chat.css b/static/css/components/chat.css
index 966c5e3..0c9e1e5 100644
--- a/static/css/components/chat.css
+++ b/static/css/components/chat.css
@@ -1,10 +1,10 @@
 :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) {
     :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;
     align-items: center;
 
-    border: var(--1px) solid var(--border-1);
-    padding: var(--12px) var(--16px);
-    margin: var(--8px) 0;
-    border-radius: var(--8px);
+    border: 0.1rem solid var(--border-1);
+    padding: 1.2rem 1.6rem;
+    margin: 0.8rem 0;
+    border-radius: 0.8rem;
 
     max-width: 60%;
 
-    &>.picture {
-        padding-right: var(--16px);
+    & > .picture {
+        padding-right: 1.6rem;
         align-self: baseline;
     }
 
-    &>.text-container {
+    & > .text-container {
         display: inline-block;
     }
 }
@@ -39,7 +39,7 @@ th-chat-asked {
     display: flex;
     flex-direction: row-reverse;
 
-    &>button {
+    & > button {
         /* Reset <button> */
         border: none;
         background: none;
@@ -74,10 +74,10 @@ th-chat-asked {
         }
 
         &::before {
-            content: '';
+            content: "";
             display: inline-block;
-            width: var(--16px);
-            height: var(--16px);
+            width: 1.6rem;
+            height: 1.6rem;
             margin-right: 0.5em;
             background-image: var(--icon-choose);
             background-position: 50% 50%;
@@ -85,7 +85,9 @@ th-chat-asked {
             opacity: 0%;
             vertical-align: middle;
             translate: -1em 0;
-            transition: opacity var(--transition-duration), translate var(--transition-duration);
+            transition:
+                opacity var(--transition-duration),
+                translate var(--transition-duration);
         }
 
         &:hover::before,
diff --git a/static/css/main.css b/static/css/main.css
index 2700236..e231f38 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -22,7 +22,7 @@ body {
             ),
             min-content
         )
-        [title] minmax(6rem, min-content)
+        [title] minmax(9.6rem, min-content)
         [main] 1fr
         [bottom] min-content;
 }
@@ -63,7 +63,7 @@ main {
     grid-row: main;
     grid-column: center / center;
 
-    margin-right: 8px;
+    margin-right: 0.8rem;
 }
 
 footer {
@@ -109,8 +109,8 @@ body {
 }
 
 :focus-visible {
-    outline: 1px solid var(--liquidex-brand-blue);
-    outline-offset: 2px;
+    outline: 0.1rem solid var(--liquidex-brand-blue);
+    outline-offset: 0.2rem;
 }
 
 /* Set up typography */
@@ -144,8 +144,12 @@ dfn {
     line-height: 1.5;
 }
 
+html {
+    font-size: 62.5%;
+}
+
 body {
-    font-size: 87.5%;
+    font-size: 1.4rem;
 }
 
 pre,
@@ -190,7 +194,7 @@ h1 {
     --recursive-casl: 0;
     --recursive-wght: 900;
 
-    font-size: 3.5rem;
+    font-size: 5.6rem;
     font-feature-settings: var(--recursive-simplified-r) 0;
 }
 
@@ -198,21 +202,21 @@ h2 {
     --recursive-casl: 0.5;
     --recursive-wght: 800;
 
-    font-size: 2rem;
+    font-size: 3.2rem;
 }
 
 h3 {
     --recursive-casl: 0.5;
     --recursive-wght: 700;
 
-    font-size: 1.5rem;
+    font-size: 2.4rem;
 }
 
 h4 {
     --recursive-casl: 0.5;
     --recursive-wght: 700;
 
-    font-size: 1rem;
+    font-size: 1.6rem;
 }
 
 pre,
@@ -261,16 +265,16 @@ h3,
 h4,
 h5,
 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 */
 
 code,
 th-literate-program {
-    padding: var(--3px) var(--4px);
+    padding: 0.3rem 0.4rem;
     background-color: var(--shaded-background);
-    border-radius: 0.4em;
+    border-radius: 0.4rem;
 }
 
 th-literate-program,
@@ -279,15 +283,15 @@ th-literate-output {
 }
 
 kbd {
-    padding: var(--3px) var(--6px);
-    border: var(--1px) solid var(--border-1);
-    border-radius: 0.4em;
+    padding: 0.3rem 0.6rem;
+    border: 0.1rem solid var(--border-1);
+    border-radius: 0.4rem;
 }
 
 pre,
 th-literate-program {
-    padding: var(--8px) var(--12px);
-    margin: var(--12px) 0;
+    padding: 0.8rem 1.2rem;
+    margin: 1.2rem 0;
     background-color: var(--shaded-background);
     border-radius: 0.5em;
 
@@ -298,7 +302,7 @@ th-literate-program {
     pre,
     th-literate-program {
         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 */
 
 img.pic {
-    border-radius: var(--6px);
-    margin: var(--8px) 0;
+    border-radius: 0.6rem;
+    margin: 0.8rem 0;
 }
 
 /* Image hints for tweaking rendering */
@@ -345,22 +349,22 @@ img {
     /* TODO: These could be autogenerated! */
 
     &[src*="+width72"] {
-        width: 72px;
+        width: 7.2rem;
         height: auto;
     }
 
     &[src*="+width160"] {
-        width: 160px;
+        width: 16rem;
         height: auto;
     }
 
     &[src*="+width640"] {
-        width: 640px;
+        width: 64rem;
         height: auto;
     }
 
     &[src*="+width752"] {
-        width: 752px;
+        width: 75.2rem;
         height: auto;
     }
 
@@ -391,23 +395,23 @@ a.secret {
 
 blockquote {
     margin: 0;
-    padding: var(--4px) var(--12px);
-    margin: var(--4px) 0;
-    border-left: var(--4px) solid var(--border-1);
+    padding: 0.4rem 1.2rem;
+    margin: 0.4rem 0;
+    border-left: 0.4rem solid var(--border-1);
 }
 
 /* And tables. */
 
 table {
-    margin: var(--8px) 0;
+    margin: 0.8rem 0;
 }
 
 table,
 th,
 td {
-    border: var(--1px) solid var(--border-2);
+    border: 0.1rem solid var(--border-2);
     border-collapse: collapse;
-    padding: var(--4px) var(--10px);
+    padding: 0.4rem 1rem;
 }
 
 th {
@@ -422,7 +426,7 @@ th {
 hr {
     width: 100%;
     border: none;
-    border-top: var(--1px) solid var(--border-1);
+    border-top: 0.1rem solid var(--border-1);
     margin-top: 2em;
     margin-bottom: 2em;
 }
@@ -430,16 +434,16 @@ hr {
 /* Style the noscript box a little more prettily. */
 
 .noscript {
-    padding: var(--16px);
+    padding: 1.6rem;
     background-color: #fde748;
     color: var(--text-color-light);
-    border: var(--1px) solid #6c581c;
-    border-radius: var(--8px);
+    border: 0.1rem solid #6c581c;
+    border-radius: 0.8rem;
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-top: 1.6rem;
+    margin-bottom: 1.6rem;
 }
 
 .noscript:empty {
@@ -448,7 +452,7 @@ hr {
 
 .noscript p {
     margin-top: 0;
-    margin-bottom: var(--16px);
+    margin-bottom: 1.6rem;
 }
 
 .noscript p:last-child {
@@ -471,6 +475,7 @@ hr {
 }
 
 #nav-logo .logo {
+    /* NOTE: Measurements in px for pixel perfection */
     width: 64px;
     height: 64px;
 
@@ -484,10 +489,10 @@ hr {
 h1.page-title {
     --recursive-wght: 850;
 
-    margin-top: 0.2rem;
-    margin-bottom: 0.2rem;
-    margin-left: 2.25rem;
-    font-size: 2.5rem;
+    margin-top: 0.32rem;
+    margin-bottom: 0.32rem;
+    margin-left: 3.6rem;
+    font-size: 4rem;
 
     & a {
         color: var(--text-color);
@@ -514,8 +519,8 @@ span.badge {
     --recursive-mono: 1;
     --recursive-casl: 0;
 
-    border-radius: 999px;
-    padding: var(--2px) var(--6px);
+    border-radius: 100rem;
+    padding: 0.2rem 0.6rem;
     font-size: 0.9em;
 
     &.red {
@@ -529,18 +534,18 @@ span.badge {
     }
 
     &.before-content {
-        margin-right: var(--6px);
+        margin-right: 0.6rem;
     }
 }
 
 /* Style the footer */
 
 footer {
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-left: 1.6rem;
+    padding-right: 1.6rem;
 
-    margin-top: 4rem;
-    padding-bottom: 4rem;
+    margin-top: 6.4rem;
+    padding-bottom: 6.4rem;
 
     display: flex;
     flex-direction: row;
@@ -564,8 +569,8 @@ footer {
     }
 
     & #open-command-line {
-        width: 32px;
-        height: 32px;
+        width: 3.2rem;
+        height: 3.2rem;
 
         background: none;
         border: none;
@@ -606,8 +611,8 @@ dialog[open] {
 
     color: var(--text-color);
     background-color: var(--background-color);
-    border: 1px solid var(--border-1);
-    border-radius: 12px;
+    border: 0.1rem solid var(--border-1);
+    border-radius: 1.2rem;
 }
 
 /* Style emojis to be readable */
@@ -632,16 +637,16 @@ th-emoji-tooltip {
     z-index: 100;
 
     background-color: var(--background-color-tooltip);
-    padding: var(--8px);
-    margin-top: var(--8px);
-    border-radius: var(--6px);
+    padding: 0.8rem;
+    margin-top: 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(var(--3px));
+    filter: blur(0.3rem);
     pointer-events: none;
 }
 
@@ -653,8 +658,8 @@ th-emoji-tooltip.transitioned-in {
 
 th-emoji-tooltip img {
     display: block;
-    max-width: 4.5rem;
-    max-height: 4.5rem;
+    max-width: 7.2rem;
+    max-height: 7.2rem;
 }
 
 th-emoji-tooltip p {
@@ -662,12 +667,12 @@ th-emoji-tooltip p {
     color: var(--text-color);
     font-size: 0.9em;
     margin: 0;
-    padding-top: 6px;
+    padding-top: 0.6rem;
     line-height: 1;
 }
 
 .th-emoji-unknown {
-    text-decoration: 1px underline var(--error-color);
+    text-decoration: 0.1rem underline var(--error-color);
     cursor: help;
 }
 
@@ -696,12 +701,12 @@ th-command-line {
         flex-direction: row;
         align-items: center;
 
-        padding: 0 4px;
+        padding: 0 0.4rem;
         width: 100%;
 
         &::before {
             content: ":";
-            padding-right: 2px;
+            padding-right: 0.2rem;
             opacity: 50%;
         }
 
@@ -711,7 +716,7 @@ th-command-line {
             border: none;
             flex-grow: 1;
 
-            padding: 2px 0;
+            padding: 0.2rem 0;
 
             &:focus {
                 outline: none;
@@ -732,7 +737,7 @@ th-command-line {
         overflow: auto;
 
         & > li {
-            padding: 2px 8px;
+            padding: 0.2rem 0.8rem;
 
             cursor: default;
 
@@ -758,7 +763,7 @@ th-command-line {
 @media (hover: none) {
     th-command-line {
         & > 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) {
     th-command-line {
         & > .input-wrapper > input {
-            padding: 8px 0;
+            padding: 0.8rem 0;
         }
 
         & > ul.suggestions > li {
-            padding: 8px 8px;
+            padding: 0.8rem 0.8rem;
         }
     }
 }
@@ -802,7 +807,7 @@ th-literate-program[data-mode="output"] {
     & iframe,
     & img.placeholder-image {
         border-style: none;
-        border-radius: 4px;
+        border-radius: 0.4rem;
         display: block;
     }
 
@@ -843,7 +848,7 @@ th-literate-program[data-mode="output"] {
         &::after {
             content: "Error";
 
-            padding: var(--8px);
+            padding: 0.8rem;
 
             position: absolute;
             right: 0;
@@ -867,7 +872,7 @@ th-literate-program[data-mode="output"] {
         &::after {
             content: "Console";
 
-            padding: var(--8px);
+            padding: 0.8rem;
 
             position: absolute;
             right: 0;
diff --git a/static/css/page/index.css b/static/css/page/index.css
index 0f23a03..e731e94 100644
--- a/static/css/page/index.css
+++ b/static/css/page/index.css
@@ -1,6 +1,6 @@
 h1.page-title {
     --recursive-wght: 900;
-    font-size: 3.5rem;
+    font-size: 5.6rem;
 }
 
 @media (hover: none) {
diff --git a/static/css/page/tairu.css b/static/css/page/tairu.css
index fdf08ad..1b3cd01 100644
--- a/static/css/page/tairu.css
+++ b/static/css/page/tairu.css
@@ -1,6 +1,6 @@
 .tileset-cardinal-directions-demo th-bc {
     /* TODO djot: remove the first rule */
-    & .horizontal-tile-strip>p {
+    & .horizontal-tile-strip > p {
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -10,7 +10,7 @@
             width: 48px;
             height: 48px;
 
-            &>span {
+            & > span {
                 font-size: 12px;
             }
         }
@@ -20,8 +20,8 @@
         display: inline-block;
         width: 56px;
         height: 56px;
-        margin: var(--8px);
-        background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
+        margin: 0.8rem;
+        background-image: url("../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png");
         background-size: 400%;
         image-rendering: pixelated;
         position: relative;
@@ -32,9 +32,9 @@
     & .west,
     & .north {
         --recursive-wght: 900;
-        --recursive-casl: 0.0;
-        --recursive-slnt: 0.0;
-        --recursive-mono: 1.0;
+        --recursive-casl: 0;
+        --recursive-slnt: 0;
+        --recursive-mono: 1;
 
         position: absolute;
         color: #d3dce9;
@@ -110,9 +110,9 @@
 .tileset-four-to-eight-demo th-bc {
     & .directions-square {
         --recursive-wght: 900;
-        --recursive-casl: 0.0;
-        --recursive-slnt: 0.0;
-        --recursive-mono: 1.0;
+        --recursive-casl: 0;
+        --recursive-slnt: 0;
+        --recursive-mono: 1;
         color: #d3dce9;
         text-shadow:
             1px 0 0 #1a2039,
@@ -120,14 +120,14 @@
             0 1px 0 #1a2039,
             0 -1px 0 #1a2039;
 
-        margin-block: var(--8px);
+        margin-block: 0.8rem;
         margin-left: 16px;
         padding-left: 0;
 
         width: 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-position: 100% 100%;
         image-rendering: pixelated;
@@ -135,14 +135,14 @@
         position: relative;
 
         &.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-position: 0 0;
             background-repeat: no-repeat;
         }
 
         &.notabend {
-            background-image: url('../../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png');
+            background-image: url("../../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png");
             background-size: 100%;
             background-position: 0 0;
             background-repeat: no-repeat;
diff --git a/static/css/tree.css b/static/css/tree.css
index 898d1c7..c85d51d 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -1,9 +1,9 @@
 /*** Variables ***/
 
 :root {
-    --tree-indent-width: 2rem;
+    --tree-indent-width: 3.2rem;
     --transition-duration: 0.15s;
-    --button-bar-icon-size: 1.75rem;
+    --button-bar-icon-size: 2.8rem;
 }
 
 /*** Breadcrumbs ***/
@@ -33,8 +33,8 @@
     background-position: 50% 50%;
     opacity: 70%;
 
-    width: 2.25rem;
-    height: 1.2em;
+    width: 3.6rem;
+    height: 1.7rem;
 
     vertical-align: text-bottom;
 }
@@ -54,7 +54,7 @@
 
 .breadcrumbs > .root-breadcrumb {
     display: none; /* only when main logo is hidden */
-    margin-right: -8px;
+    margin-right: -0.8rem;
 
     & a,
     & svg {
@@ -62,9 +62,10 @@
     }
 
     & .logo {
+        /* NOTE: px used for pixel perfection */
         width: 48px;
         height: 48px;
-        padding: 8px;
+        padding: 0.8rem;
         color: var(--text-color);
     }
 }
@@ -97,7 +98,7 @@
 /* Use an indent level appropriate for the viewport. */
 .tree ul {
     --tree-responsive-indent-width: clamp(
-        var(--8px),
+        0.8rem,
         2vw,
         var(--tree-indent-width)
     );
@@ -105,7 +106,7 @@
     /* Draw indent guides. */
     padding-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);
 }
@@ -147,8 +148,8 @@
     & > div {
         box-sizing: border-box;
 
-        margin-bottom: calc(- var(--1px));
-        border-bottom: var(--1px) solid transparent;
+        margin-bottom: -0.1rem;
+        border-bottom: 0.1rem solid transparent;
         transition: border-bottom-color var(--transition-duration);
 
         &:hover {
@@ -168,7 +169,7 @@
     and notably *excludes* children. */
 .tree details > summary {
     /* Slightly round for elegance */
-    border-radius: var(--8px);
+    border-radius: 0.8rem;
 
     /* Give it a shaded background on hover */
     background-color: transparent;
@@ -183,7 +184,7 @@
 @media (hover: none) {
     .tree li > div: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 {
@@ -198,7 +199,7 @@
 th-bp {
     display: block;
     width: var(--tree-indent-width);
-    height: 1.75rem;
+    height: 2.8rem;
 
     background-image: var(--icon-leaf);
     background-repeat: no-repeat;
@@ -220,8 +221,8 @@ th-bp {
 /* bc - branch content */
 th-bc {
     display: block;
-    padding-top: var(--6px);
-    padding-bottom: var(--6px);
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
 
     /* Lines that are too long get very hard to read. */
     width: 100%;
@@ -246,7 +247,7 @@ th-bc {
         background-repeat: no-repeat;
         background-position: 50% 50%;
 
-        width: var(--16px);
+        width: 1.6rem;
         height: 1.2em;
 
         vertical-align: text-bottom;
@@ -267,16 +268,16 @@ th-bc {
 
         background-color: #058ef0;
         color: #ffffff;
-        padding: var(--4px) var(--12px);
-        margin-bottom: var(--4px);
-        border-radius: 100px;
+        padding: 0.4rem 1.2rem;
+        margin-bottom: 0.4rem;
+        border-radius: 100rem;
     }
 }
 
 /* bb - button bar */
 th-bb {
     height: 100%;
-    margin: var(--4px);
+    margin: 0.4rem;
 
     /* Should be displayed on the top of the branch rather than in the middle. */
     align-self: start;
@@ -300,18 +301,18 @@ th-bb {
 /* For media without hover functionality, th-bb should always be visible. */
 @media (hover: none) {
     :root {
-        --button-bar-icon-size: 2.25rem;
+        --button-bar-icon-size: 3.6rem;
     }
 
     .tree th-bb {
         opacity: 100%;
 
         /* Replace margin with button size to make it easier to click. */
-        margin: 0px;
+        margin: 0;
 
         & a.icon {
-            width: 2.25rem;
-            height: 2.25rem;
+            width: 3.6rem;
+            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
    stylistically such that it's interpretable as a form of block quote. */
 ul.branch-quote {
-    --vertical-margin: var(--8px);
-    --padding: var(--8px);
+    --vertical-margin: 0.8rem;
+    --padding: 0.8rem;
 
     margin-top: var(--vertical-margin);
     margin-bottom: var(--vertical-margin);
     padding-top: var(--padding);
     padding-bottom: var(--padding);
     padding-right: var(--padding);
-    border: var(--1px) solid var(--border-1);
-    border-radius: var(--8px);
+    border: 0.1rem solid var(--border-1);
+    border-radius: 0.8rem;
 
     position: relative;
 
@@ -418,9 +419,9 @@ ul.branch-quote {
 
         content: "“";
         position: absolute;
-        right: var(--16px);
-        top: var(--1px);
-        font-size: 3rem;
+        right: 1.6rem;
+        top: 0.1rem;
+        font-size: 4.8rem;
         opacity: 50%;
 
         transition: opacity var(--transition-duration);