From 05460f6c693f65a2065abb00a4ff6439cc273369 Mon Sep 17 00:00:00 2001 From: lqdev Date: Thu, 13 Jun 2024 21:50:09 +0200 Subject: [PATCH] new accessible metrics --- static/css/components/chat.css | 17 +++--- static/css/main.css | 108 ++++++++++++++++++--------------- static/css/new.css | 14 ++--- static/css/page/index.css | 6 +- static/css/page/tairu.css | 5 +- static/css/tree.css | 58 +++++++++--------- 6 files changed, 109 insertions(+), 99 deletions(-) diff --git a/static/css/components/chat.css b/static/css/components/chat.css index bd2f13e..966c5e3 100644 --- a/static/css/components/chat.css +++ b/static/css/components/chat.css @@ -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; } diff --git a/static/css/main.css b/static/css/main.css index 8f9de33..70ea907 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -26,6 +26,7 @@ /* Hack to enable theme-matching scrollbars in 
 */
     --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;
diff --git a/static/css/new.css b/static/css/new.css
index 1df466c..e7feec1 100644
--- a/static/css/new.css
+++ b/static/css/new.css
@@ -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;
diff --git a/static/css/page/index.css b/static/css/page/index.css
index ed4e7b9..ac77e5a 100644
--- a/static/css/page/index.css
+++ b/static/css/page/index.css
@@ -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;
diff --git a/static/css/page/tairu.css b/static/css/page/tairu.css
index 1cbce86..a69cdd7 100644
--- a/static/css/page/tairu.css
+++ b/static/css/page/tairu.css
@@ -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;
 
diff --git a/static/css/tree.css b/static/css/tree.css
index da60263..ecdf37e 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -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 {
 
 /*