switch the layout to a wider one that leans slightly to the left of the page
this is to make space on the right for a nice background in the future
This commit is contained in:
parent
1fdf65e7a3
commit
523a364fa9
12 changed files with 487 additions and 327 deletions
|
|
@ -1,115 +1,129 @@
|
|||
/* Color scheme. */
|
||||
|
||||
:root {
|
||||
/* naturally */
|
||||
--liquidex-brand-blue: #058ef0;
|
||||
/* but also: */
|
||||
--liquidex-brand-red: #eb134a;
|
||||
--liquidex-brand-yellow: #ffc31f;
|
||||
--liquidex-brand-green: #06ca4a;
|
||||
|
||||
--text-color-light: #55423e;
|
||||
--link-color-light: #004ec8;
|
||||
--link-color-visited-light: #6c2380;
|
||||
|
||||
--background-color: rgb(255, 253, 246);
|
||||
--background-color-tooltip: rgb(226, 223, 214);
|
||||
--text-color: #55423e;
|
||||
--link-color: #004ec8;
|
||||
--link-color-visited: #6c2380;
|
||||
|
||||
--shaded-background: rgba(0, 0, 0, 5%);
|
||||
--border-1: rgba(0, 0, 0, 15%);
|
||||
--border-2: rgba(0, 0, 0, 30%);
|
||||
--hover: rgba(0, 0, 0, 15%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: rgb(30, 40, 53);
|
||||
--background-color-tooltip: rgb(23, 31, 41);
|
||||
--text-color: #d7cdbf;
|
||||
--link-color: #93cce8;
|
||||
--link-color-visited: #f7afde;
|
||||
|
||||
--shaded-background: #f7e5df0c;
|
||||
--border-0: #f7e5df1a;
|
||||
--border-1: #f7e5df26;
|
||||
--border-1-and-a-half: #f7e5df3a;
|
||||
--border-2: #f7e5df4d;
|
||||
}
|
||||
}
|
||||
|
||||
: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 */
|
||||
/* Lay out the main containers. */
|
||||
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
--top-min-spacing: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[left] minmax(
|
||||
0,
|
||||
clamp(80px, calc(100vw - (1920px - 360px - 160px)), 160px)
|
||||
)
|
||||
[center] minmax(0, auto)
|
||||
[right] minmax(0, calc(100vw - (1920px - 360px)));
|
||||
grid-template-rows:
|
||||
[top] minmax(
|
||||
clamp(
|
||||
var(--top-min-spacing),
|
||||
calc(100vw - (1920px - 360px - 160px)),
|
||||
128px
|
||||
),
|
||||
min-content
|
||||
)
|
||||
[title] minmax(6rem, min-content)
|
||||
[main] 1fr
|
||||
[bottom] min-content;
|
||||
}
|
||||
|
||||
html {
|
||||
/* Try to always leave a bunch of empty space at the bottom, but don't overdo it.
|
||||
It's kind of awkward when you scroll to the bottom and your page just turns blank. */
|
||||
--virtual-space-ratio: 1.75;
|
||||
|
||||
height: calc(100% * var(--virtual-space-ratio));
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: calc(100% / var(--virtual-space-ratio));
|
||||
}
|
||||
|
||||
.noscript {
|
||||
grid-row: top;
|
||||
grid-column: center;
|
||||
}
|
||||
|
||||
#nav-logo {
|
||||
grid-row: title;
|
||||
grid-column: left;
|
||||
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
section.page-header {
|
||||
grid-row: title;
|
||||
grid-column: center;
|
||||
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 var(--16px);
|
||||
grid-row: main;
|
||||
grid-column: center / center;
|
||||
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
footer {
|
||||
grid-row: bottom;
|
||||
grid-column: center / center;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
main {
|
||||
padding: 0 var(--8px);
|
||||
grid-column: left / -1;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
body {
|
||||
--top-min-spacing: 0px;
|
||||
}
|
||||
|
||||
section.page-header {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
nav#nav-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Choose more pretty colors than vanilla HTML */
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-color: var(--border-2) var(--shaded-background);
|
||||
scrollbar-width: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
|
||||
}
|
||||
|
||||
body::selection {
|
||||
/* Even though this color doesn't yield the most readable text, browsers */
|
||||
background-color: var(--liquidex-brand-blue);
|
||||
}
|
||||
|
||||
/* Set up typography */
|
||||
|
||||
@font-face {
|
||||
font-family: 'RecVar';
|
||||
font-family: "RecVar";
|
||||
/* NOTE: I put the hash in here manually instead of adding the complexity of piping CSS through
|
||||
Handlebars because I don't really think it's worth it for this single asset.
|
||||
Other assets are referenced rarely enough that caching probably isn't gonna make too much of
|
||||
an impact.
|
||||
It's unlikely I'll ever update the font anyways, so eh, whatever. */
|
||||
src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
|
||||
src: url("../font/Recursive_VF_1.085.woff2?cache=b3-445487d5");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'RecVarMono';
|
||||
src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
|
||||
font-variation-settings: "MONO" 1.0;
|
||||
font-family: "RecVarMono";
|
||||
src: url("../font/Recursive_VF_1.085.woff2?cache=b3-445487d5");
|
||||
font-variation-settings: "MONO" 1;
|
||||
}
|
||||
|
||||
body,
|
||||
|
|
@ -117,7 +131,7 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
button {
|
||||
font-family: 'RecVar', sans-serif;
|
||||
font-family: "RecVar", sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -133,10 +147,10 @@ button {
|
|||
}
|
||||
|
||||
:root {
|
||||
--recursive-mono: 0.0;
|
||||
--recursive-casl: 1.0;
|
||||
--recursive-mono: 0;
|
||||
--recursive-casl: 1;
|
||||
--recursive-wght: 400;
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-crsv: 0.5;
|
||||
|
||||
--recursive-simplified-f: "ss03";
|
||||
|
|
@ -156,17 +170,14 @@ button {
|
|||
"slnt" var(--recursive-slnt),
|
||||
"CRSV" var(--recursive-crsv);
|
||||
|
||||
font-feature-settings:
|
||||
var(--recursive-simplified-f),
|
||||
var(--recursive-simplified-g),
|
||||
var(--recursive-simplified-l),
|
||||
var(--recursive-simplified-r),
|
||||
var(--recursive-no-serif-L-Z);
|
||||
font-feature-settings: var(--recursive-simplified-f),
|
||||
var(--recursive-simplified-g), var(--recursive-simplified-l),
|
||||
var(--recursive-simplified-r), var(--recursive-no-serif-L-Z);
|
||||
}
|
||||
|
||||
h1 {
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-casl: 0.0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-casl: 0;
|
||||
--recursive-wght: 900;
|
||||
|
||||
font-size: 3.5rem;
|
||||
|
|
@ -174,7 +185,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-casl: 0.5;
|
||||
--recursive-wght: 800;
|
||||
|
||||
|
|
@ -182,7 +193,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-casl: 0.5;
|
||||
--recursive-wght: 700;
|
||||
|
||||
|
|
@ -190,7 +201,7 @@ h3 {
|
|||
}
|
||||
|
||||
h4 {
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-casl: 0.5;
|
||||
--recursive-wght: 700;
|
||||
|
||||
|
|
@ -201,9 +212,9 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
th-literate-program {
|
||||
--recursive-mono: 1.0;
|
||||
--recursive-casl: 0.0;
|
||||
--recursive-slnt: 0.0;
|
||||
--recursive-mono: 1;
|
||||
--recursive-casl: 0;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-wght: 450;
|
||||
}
|
||||
|
||||
|
|
@ -214,10 +225,19 @@ strong {
|
|||
|
||||
i,
|
||||
em {
|
||||
--recursive-slnt: -16.0;
|
||||
--recursive-slnt: -16;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Lay out elements a bit more compactly */
|
||||
|
||||
p,
|
||||
|
|
@ -234,12 +254,6 @@ h6 {
|
|||
margin: var(--4px) 0;
|
||||
}
|
||||
|
||||
/* Lay out elements a little less compactly (actually just have some blank space past the end) */
|
||||
|
||||
body {
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
|
||||
/* Make code examples a little prettier by giving them visual separation from the rest of the page */
|
||||
|
||||
code,
|
||||
|
|
@ -271,7 +285,6 @@ th-literate-program {
|
|||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
||||
pre,
|
||||
th-literate-program {
|
||||
background-color: transparent;
|
||||
|
|
@ -279,8 +292,8 @@ th-literate-program {
|
|||
}
|
||||
}
|
||||
|
||||
pre>code,
|
||||
th-literate-program>code {
|
||||
pre > code,
|
||||
th-literate-program > code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
|
|
@ -314,29 +327,29 @@ img.pic {
|
|||
|
||||
/* Image hints for tweaking rendering */
|
||||
img {
|
||||
&[src*='+pixel'] {
|
||||
&[src*="+pixel"] {
|
||||
image-rendering: pixelated;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* TODO: These could be autogenerated! */
|
||||
|
||||
&[src*='+width72'] {
|
||||
&[src*="+width72"] {
|
||||
width: 72px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[src*='+width160'] {
|
||||
&[src*="+width160"] {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[src*='+width640'] {
|
||||
&[src*="+width640"] {
|
||||
width: 640px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[src*='+width752'] {
|
||||
&[src*="+width752"] {
|
||||
width: 752px;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -415,6 +428,12 @@ hr {
|
|||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.noscript:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noscript p {
|
||||
|
|
@ -434,48 +453,40 @@ hr {
|
|||
color: var(--link-color-visited-light);
|
||||
}
|
||||
|
||||
/* also, webkit. */
|
||||
#webkit-makes-me-go-insane {
|
||||
display: none;
|
||||
/* Navigation button */
|
||||
|
||||
#nav-logo {
|
||||
width: min-content;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
/* Style the navigation bar. */
|
||||
#nav-logo .logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav .nav-page {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Give the logo on the top some nicer looks */
|
||||
nav .logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 16px;
|
||||
display: block;
|
||||
opacity: 100%;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Style page titles */
|
||||
/* Navigation header (contains page title & breadcrumbs) */
|
||||
|
||||
h1.page-title {
|
||||
--recursive-wght: 800;
|
||||
--recursive-wght: 850;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 2.25rem;
|
||||
font-size: 1.25rem;
|
||||
font-size: 2.5rem;
|
||||
|
||||
& a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
|
||||
transition: var(--transition-duration) text-decoration-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -492,8 +503,6 @@ a[data-cast~="new"] {
|
|||
color: var(--text-color);
|
||||
opacity: 50%;
|
||||
|
||||
margin-right: var(--16px);
|
||||
|
||||
&.has-news {
|
||||
opacity: 100%;
|
||||
text-decoration: none;
|
||||
|
|
@ -513,7 +522,7 @@ a[data-cast~="new"] {
|
|||
span.badge {
|
||||
--recursive-wght: 800;
|
||||
--recursive-slnt: 0;
|
||||
--recursive-mono: 1.0;
|
||||
--recursive-mono: 1;
|
||||
--recursive-casl: 0;
|
||||
|
||||
border-radius: 999px;
|
||||
|
|
@ -536,10 +545,13 @@ span.badge {
|
|||
}
|
||||
|
||||
/* Style the footer */
|
||||
|
||||
footer {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
margin-top: 4rem;
|
||||
padding-right: 1.75rem;
|
||||
text-align: right;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -559,31 +571,38 @@ footer {
|
|||
justify-content: end;
|
||||
|
||||
opacity: 50%;
|
||||
padding-left: 1.75rem;
|
||||
transition: var(--transition-duration) opacity;
|
||||
|
||||
& .icon-history {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding-right: 1.75rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 0.5rem;
|
||||
background-image: var(--icon-history);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
|
||||
& > ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
list-style: none;
|
||||
opacity: 0%;
|
||||
transition: var(--transition-duration) opacity;
|
||||
}
|
||||
|
||||
&>ul>li:not(:first-child)::before {
|
||||
content: '·';
|
||||
& > ul > li {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > ul > li:not(:first-child)::before {
|
||||
content: "·";
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-left: 0.75em;
|
||||
|
|
@ -595,28 +614,32 @@ footer {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&:hover>ul {
|
||||
&:hover > ul {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& #footer-icon {
|
||||
display: flex;
|
||||
padding-right: 1.75rem;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
& > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&>a>svg {
|
||||
display: flex;
|
||||
& > a > svg {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
opacity: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
footer > #version-info {
|
||||
& > ul {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Style emojis to be readable */
|
||||
|
||||
img[data-cast~="emoji"] {
|
||||
|
|
@ -655,7 +678,7 @@ th-emoji-tooltip {
|
|||
th-emoji-tooltip.transitioned-in {
|
||||
opacity: 100%;
|
||||
filter: blur(0);
|
||||
transform: translateX(-50%) scale(1.0);
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
th-emoji-tooltip img {
|
||||
|
|
@ -701,7 +724,10 @@ th-emoji-tooltip p {
|
|||
opacity: 0%;
|
||||
}
|
||||
|
||||
#index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
|
||||
#index\:treehouse
|
||||
> details:not([open])
|
||||
> summary
|
||||
.oops-you-seem-to-have-gotten-stuck {
|
||||
display: inline;
|
||||
animation: 4s hello-there forwards;
|
||||
}
|
||||
|
|
@ -759,7 +785,7 @@ th-literate-program[data-mode="output"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
& pre>code {
|
||||
& pre > code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -772,7 +798,7 @@ th-literate-program[data-mode="output"] {
|
|||
}
|
||||
|
||||
&::after {
|
||||
content: 'Error';
|
||||
content: "Error";
|
||||
|
||||
padding: var(--8px);
|
||||
|
||||
|
|
@ -796,7 +822,7 @@ th-literate-program[data-mode="output"] {
|
|||
}
|
||||
|
||||
&::after {
|
||||
content: 'Console';
|
||||
content: "Console";
|
||||
|
||||
padding: var(--8px);
|
||||
|
||||
|
|
@ -840,7 +866,7 @@ th-literate-program[data-mode="output"] {
|
|||
|
||||
.th-syntax-highlighting span {
|
||||
&.comment {
|
||||
--recursive-slnt: -16.0;
|
||||
--recursive-slnt: -16;
|
||||
color: var(--syntax-comment);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue