riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 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:
りき萌 2024-12-10 23:21:36 +01:00
parent 6d3037791a
commit ae9273cdff
6 changed files with 138 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

145
static/css/main.css
View file

@ -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;