From 523a364fa9c55fc0be15f24c6c17351a06ecd959 Mon Sep 17 00:00:00 2001 From: liquidev Date: Tue, 29 Oct 2024 18:14:01 +0100 Subject: [PATCH] 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 --- content/index.tree | 109 +++++---- crates/treehouse/src/html/tree.rs | 14 +- static/css/base.css | 61 +++++ static/css/main.css | 362 ++++++++++++++++-------------- static/css/page/index.css | 83 +++++-- static/css/tree.css | 106 +++++---- static/svg/object/logo.svg | 5 + template/_tree.hbs | 19 +- template/components/_head.hbs | 1 + template/components/_header.hbs | 16 ++ template/components/_nav.hbs | 36 ++- template/sandbox.hbs | 2 +- 12 files changed, 487 insertions(+), 327 deletions(-) create mode 100644 static/css/base.css create mode 100644 static/svg/object/logo.svg create mode 100644 template/components/_header.hbs diff --git a/content/index.tree b/content/index.tree index cb78dfb..1a73cdf 100644 --- a/content/index.tree +++ b/content/index.tree @@ -1,50 +1,35 @@ %% title = "liquidex's treehouse" styles = ["page/index.css"] -% id = "treehouse" -- # liquidex's treehouse +% id = "01H8V556P1PND8DQ73XBTZZJH7" +- welcome! make yourself at home. = --w-- = -::: oops-you-seem-to-have-gotten-stuck -*achievement unlocked:* _I don't want anything to do with this bullshit_\ -...either that, or you folded the entire tree by accident.\ -feel free to go back at any time by clicking here. -::: +% id = "01H8VWEHX501SNYQTE61WX7YJC" +- :folder: [_"owo, what's this?"_][page:kuroneko]{.secret} - % id = "01H8V556P1PND8DQ73XBTZZJH7" - - welcome! make yourself at home. = --w-- = + % id = "about" + content.link = "about" + + ## about me - % id = "01H8VWEHX501SNYQTE61WX7YJC" - - :folder: [_"owo, what's this?"_][page:kuroneko]{.secret} + % id = "about-treehouse" + content.link = "about-treehouse" + + ## about this - % id = "about" - content.link = "about" - + ## about me +% id = "01H8V556P1GRAA3717VH3QJFMV" + classes.branch_children = "index:hobby-corners" +- :folder: hobby corners - % id = "about-treehouse" - content.link = "about-treehouse" - + ## about this - - % id = "01H8V556P1GRAA3717VH3QJFMV" - classes.branch_children = "index:hobby-corners" - - :folder: hobby corners - - % id = "programming" - content.link = "programming" - + ## programming - ``` =html - +``` =html + + + - - ``` + - % id = "design" - content.link = "design" - + ## design - ``` =html - + @@ -53,25 +38,15 @@ feel free to go back at any time by clicking here. - - ``` + - % id = "music" - content.link = "music" - + ## music - ``` =html - + - - ``` + - % id = "games" - content.link = "games" - + ## games - ``` =html - + @@ -81,16 +56,34 @@ feel free to go back at any time by clicking here. - - ``` + + + +``` - % id = "01HFYZKREWE2AM61ZRW3R501H6" - - :folder: /var + % id = "programming" + content.link = "programming" + + ## ``{=html}programming - % id = "short-thoughts" - content.link = "short-thoughts" - + ## [sh](https://www.youtube.com/watch?v=rFL2VOdb944){.secret}ort thoughts + % id = "design" + content.link = "design" + + ## ``{=html}design - % id = "philosophy" - content.link = "philosophy" - + ## philosophy and worldview + % id = "music" + content.link = "music" + + ## ``{=html}music + + % id = "games" + content.link = "games" + + ## ``{=html}games + +% id = "01HFYZKREWE2AM61ZRW3R501H6" +- :folder: /var + + % id = "short-thoughts" + content.link = "short-thoughts" + + ## [sh](https://www.youtube.com/watch?v=rFL2VOdb944){.secret}ort thoughts + + % id = "philosophy" + content.link = "philosophy" + + ## philosophy and worldview diff --git a/crates/treehouse/src/html/tree.rs b/crates/treehouse/src/html/tree.rs index 5d1c612..07da10d 100644 --- a/crates/treehouse/src/html/tree.rs +++ b/crates/treehouse/src/html/tree.rs @@ -220,14 +220,14 @@ pub fn branch_to_html( EscapeAttribute(link), ) .unwrap(); + } else { + write!( + s, + "", + EscapeAttribute(&branch.named_id) + ) + .unwrap(); } - - write!( - s, - "", - EscapeAttribute(&branch.named_id) - ) - .unwrap(); } s.push_str(""); diff --git a/static/css/base.css b/static/css/base.css new file mode 100644 index 0000000..b7eb4e4 --- /dev/null +++ b/static/css/base.css @@ -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; +} diff --git a/static/css/main.css b/static/css/main.css index e23f9eb..d584c28 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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); } diff --git a/static/css/page/index.css b/static/css/page/index.css index ac77e5a..632d329 100644 --- a/static/css/page/index.css +++ b/static/css/page/index.css @@ -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; } diff --git a/static/css/tree.css b/static/css/tree.css index 15a4dba..898d1c7 100644 --- a/static/css/tree.css +++ b/static/css/tree.css @@ -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
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; } - } /* 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 
s in  have scrollbars proper. */
     &:has(pre, th-literate-program) {
@@ -213,9 +238,8 @@ th-bc {
 /* NOTE: Linked branches have a slightly different structure (extra