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
61
static/css/base.css
Normal file
61
static/css/base.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
/* Reset things to more sensible sizing rules */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +1,75 @@
|
|||
.index\:hobby-corners {
|
||||
&>li {
|
||||
margin: var(--8px) 0px;
|
||||
h1.page-title {
|
||||
--recursive-wght: 900;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
&>details {
|
||||
border-top: var(--4px) solid var(--section-color);
|
||||
@media (hover: none) {
|
||||
h1.page-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
body {
|
||||
--top-min-spacing: 40px;
|
||||
}
|
||||
|
||||
nav#nav-logo {
|
||||
display: block;
|
||||
|
||||
& .logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 75vw;
|
||||
height: 75vw;
|
||||
transform: translate(-25%, -20%);
|
||||
pointer-events: none;
|
||||
opacity: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>details>summary {
|
||||
position: relative;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
#index\:treehouse {
|
||||
& > details > summary {
|
||||
padding-left: 1rem;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
& > th-bp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>th-bb>.icon {
|
||||
opacity: 100%;
|
||||
}
|
||||
.index\:hobby-corners {
|
||||
/* Optical text offset to make the icons look less misaligned.
|
||||
This is adjusted per each hobby corner to fit the icons.
|
||||
|
||||
Although the icons may be aligned in terms of bounds, optically they do not look
|
||||
very good next to the text, having awkward blank space to the right.
|
||||
|
||||
This aims to improve the readability of that a bit without being too noticable. */
|
||||
--section-text-offset: 0em;
|
||||
|
||||
& .background-icon {
|
||||
position: absolute;
|
||||
right: calc(var(--button-bar-icon-size) * 2);
|
||||
bottom: 0;
|
||||
color: var(--text-color);
|
||||
opacity: 40%;
|
||||
& > li {
|
||||
& > details > summary {
|
||||
text-decoration: 4px underline var(--section-color);
|
||||
text-underline-offset: 4px;
|
||||
|
||||
width: 6.85rem;
|
||||
height: auto;
|
||||
& > th-bc .hobby-icon {
|
||||
width: auto;
|
||||
height: 48px;
|
||||
|
||||
pointer-events: none;
|
||||
margin-right: calc(0.2em + var(--section-text-offset));
|
||||
|
||||
vertical-align: -38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#index\:programming {
|
||||
--section-color: var(--liquidex-brand-red);
|
||||
--section-text-offset: -0.1em;
|
||||
}
|
||||
|
||||
#index\:design {
|
||||
|
|
@ -45,8 +78,10 @@
|
|||
|
||||
#index\:music {
|
||||
--section-color: var(--liquidex-brand-green);
|
||||
--section-text-offset: -0.05em;
|
||||
}
|
||||
|
||||
#index\:games {
|
||||
--section-color: var(--liquidex-brand-blue);
|
||||
--section-text-offset: 0.05em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.breadcrumb::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
||||
background-image: var(--icon-breadcrumb);
|
||||
|
|
@ -40,8 +40,9 @@
|
|||
}
|
||||
|
||||
.breadcrumb a {
|
||||
--recursive-mono: 1.0;
|
||||
--recursive-mono: 1;
|
||||
--recursive-wght: 500;
|
||||
--recursive-casl: 0;
|
||||
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
|
|
@ -51,6 +52,29 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumbs > .root-breadcrumb {
|
||||
display: none; /* only when main logo is hidden */
|
||||
margin-right: -8px;
|
||||
|
||||
& a,
|
||||
& svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 8px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.breadcrumbs > .root-breadcrumb {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Tree ***/
|
||||
|
||||
.tree {
|
||||
|
|
@ -72,7 +96,11 @@
|
|||
|
||||
/* Use an indent level appropriate for the viewport. */
|
||||
.tree ul {
|
||||
--tree-responsive-indent-width: clamp(var(--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);
|
||||
|
|
@ -82,21 +110,19 @@
|
|||
transition: border-left-color var(--transition-duration);
|
||||
}
|
||||
|
||||
.tree details:has(.branch-container:hover)>ul {
|
||||
.tree details:has(.branch-container:hover) > ul {
|
||||
border-left-color: var(--tree-indent-guide-highlighted);
|
||||
}
|
||||
|
||||
|
||||
/* Top level should not have an indent or a border. */
|
||||
.tree>ul {
|
||||
.tree > ul {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tree details {
|
||||
|
||||
/* Disable the rightwards chevron in <details> elements */
|
||||
&>summary {
|
||||
& > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -112,13 +138,13 @@
|
|||
list-style: none;
|
||||
|
||||
/* Stretch branch content to the full width of the page */
|
||||
&>div,
|
||||
&>details {
|
||||
& > div,
|
||||
& > details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Add an underline for leaf branches */
|
||||
&>div {
|
||||
& > div {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-bottom: calc(- var(--1px));
|
||||
|
|
@ -130,18 +156,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&>div,
|
||||
&>details>summary {
|
||||
& > div,
|
||||
& > details > summary {
|
||||
/* Child elements are laid out horizontally in a flexbox. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* <summary> is used for the visual content of branches with children. It's the large horizontal bar
|
||||
and notably *excludes* children. */
|
||||
.tree details>summary {
|
||||
.tree details > summary {
|
||||
/* Slightly round for elegance */
|
||||
border-radius: var(--8px);
|
||||
|
||||
|
|
@ -156,13 +181,12 @@
|
|||
|
||||
/* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
|
||||
@media (hover: none) {
|
||||
|
||||
.tree li>div:first-child,
|
||||
.tree li>details>summary:first-child {
|
||||
.tree li > div:first-child,
|
||||
.tree li > details > summary:first-child {
|
||||
border-bottom: var(--1px) solid var(--border-1);
|
||||
}
|
||||
|
||||
.tree details>summary {
|
||||
.tree details > summary {
|
||||
/* In that case summaries shall not be rounded. */
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -185,11 +209,11 @@ th-bp {
|
|||
}
|
||||
|
||||
/* Change image of th-bp if it has children and/or is collapsible */
|
||||
.tree details[open]>summary>th-bp {
|
||||
.tree details[open] > summary > th-bp {
|
||||
background-image: var(--icon-collapse);
|
||||
}
|
||||
|
||||
.tree details:not([open])>summary>th-bp {
|
||||
.tree details:not([open]) > summary > th-bp {
|
||||
background-image: var(--icon-expand);
|
||||
}
|
||||
|
||||
|
|
@ -199,8 +223,9 @@ th-bc {
|
|||
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;
|
||||
/* Lines that are too long get very hard to read. */
|
||||
width: 100%;
|
||||
max-width: 72em;
|
||||
|
||||
/* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
|
||||
&:has(pre, th-literate-program) {
|
||||
|
|
@ -213,9 +238,8 @@ th-bc {
|
|||
/* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
|
||||
:last-child does not work. */
|
||||
.tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
|
||||
|
||||
&::after {
|
||||
content: '\00A0';
|
||||
content: "\00A0";
|
||||
display: inline-block;
|
||||
|
||||
background-image: var(--icon-more);
|
||||
|
|
@ -234,10 +258,9 @@ th-bc {
|
|||
|
||||
/* Display a [draft] pill for branches that are drafts. */
|
||||
.tree li.draft {
|
||||
|
||||
&>details>summary>th-bc::before,
|
||||
&>div>th-bc::before {
|
||||
content: 'draft';
|
||||
& > details > summary > th-bc::before,
|
||||
& > div > th-bc::before {
|
||||
content: "draft";
|
||||
|
||||
display: block;
|
||||
width: min-content;
|
||||
|
|
@ -257,10 +280,12 @@ th-bb {
|
|||
|
||||
/* Should be displayed on the top of the branch rather than in the middle. */
|
||||
align-self: start;
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
|
||||
/* Keep the button bar invisible by default. */
|
||||
opacity: 0%;
|
||||
|
|
@ -268,7 +293,7 @@ th-bb {
|
|||
}
|
||||
|
||||
/* When the parent is hovered over, display the button bar. */
|
||||
.tree *:hover>th-bb {
|
||||
.tree *:hover > th-bb {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -335,14 +360,18 @@ th-bb .branch-date {
|
|||
to the element highlighted by ?. */
|
||||
.tree :target,
|
||||
.tree .target {
|
||||
|
||||
&>details>summary,
|
||||
&>div {
|
||||
& > details > summary,
|
||||
& > div {
|
||||
background-color: var(--shaded-background);
|
||||
background: linear-gradient(to right,
|
||||
transparent 12.5%, var(--shaded-background),
|
||||
transparent, var(--shaded-background),
|
||||
transparent, var(--shaded-background) 87.5%);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 12.5%,
|
||||
var(--shaded-background),
|
||||
transparent,
|
||||
var(--shaded-background),
|
||||
transparent,
|
||||
var(--shaded-background) 87.5%
|
||||
);
|
||||
background-size: 800% 100%;
|
||||
background-position-x: 100%;
|
||||
animation: hey-listen 2s linear;
|
||||
|
|
@ -383,12 +412,11 @@ ul.branch-quote {
|
|||
|
||||
position: relative;
|
||||
|
||||
|
||||
&::before {
|
||||
--recursive-wght: 900;
|
||||
--recursive-casl: 0;
|
||||
|
||||
content: '“';
|
||||
content: "“";
|
||||
position: absolute;
|
||||
right: var(--16px);
|
||||
top: var(--1px);
|
||||
|
|
|
|||
5
static/svg/object/logo.svg
Normal file
5
static/svg/object/logo.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg class="logo" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8 3H7H6V4V5H4V6H6V9V10H7H10V12H11V10H12H13V9V8V7H12H11H10V8V9H7V6H8H9V5V4V3H8ZM12 9H11V8H12V9ZM7 5V4H8V5H7ZM3 5H2V6H3V5ZM10 13H11V14H10V13Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
Loading…
Add table
Add a link
Reference in a new issue