change units in CSS to properly scaled rem
yeah I should've done that from the start should have I
This commit is contained in:
parent
6d3037791a
commit
ae9273cdff
|
|
@ -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 */
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -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,15 +18,15 @@ 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);
|
||||
padding-right: 1.6rem;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
h1.page-title {
|
||||
--recursive-wght: 900;
|
||||
font-size: 3.5rem;
|
||||
font-size: 5.6rem;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue