riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 14 Activity

CSS cleanups and preparations

Browse source
This commit is contained in:
りき萌 2025-10-03 16:01:58 +02:00
parent 72bddf3c9f
commit 0269ed5c60
18 changed files with 66 additions and 529 deletions
Download patch file Download diff file Expand all files Collapse all files

2
content/philosophy/responsibility.tree
View file

@ -16,7 +16,7 @@ tags = ["all", "shower"]
why do we, as a society, fear sillyness?
% id = "01JDJ0RH4DF8MQ3ZE7C7CYAE92"
+ this is not even something our company can fix, no matter how much it portrays to be rebellious or how big, red and bold we make the "*[WE BREAK RULES, WE MAKE RULES]{style="--recursive-casl: 0; --recursive-wght: 800;"}*" text on our website.
+ this is not even something our company can fix, no matter how much it portrays to be rebellious or how big, red and bold we make the "*[WE BREAK RULES, WE MAKE RULES]{style="--recursive-casl: 0; font-weight: 800;"}*" text on our website.
% id = "01JDJ0RH4DHHD4QRNPCXNEWVSD"
- which I find ironic considering we make games for mainstreamers.

2
content/treehouse/changelog.tree
View file

@ -356,7 +356,7 @@ visibility = "Private"
- this page will show you all the updates that have been happening since your last visit
% id = "01HQ94FDZKXFRMCH5NXXAB146E"
+ it will also lightly nag you whenever there are new posts with a [1]{.badge .red} badge
+ it will also lightly nag you whenever there are new posts with a *1* badge
% id = "01HQ94FDZK5TJDM3CMNKQKES6Z"
- if that's too annoying for you, it's easy to disable - scroll down on the [news page][page:treehouse/new] and there's a (collapsed by default) settings section for the page

2
src/html/djot.rs
View file

@ -592,7 +592,7 @@ impl<'a> Writer<'a> {
// TODO: this could do with better alt text
write!(
out,
r#"<img data-cast="emoji" title=":{sym}:" alt="{sym}" src=""#
r#"<img class="emoji" title=":{sym}:" alt="{sym}" src=""#
)?;
write_attr(&url, out);
out.push('"');

4
static/css/components/chat.css
View file

@ -49,7 +49,7 @@ th-chat-asked {
padding: 0.5em 0;
margin-right: 2rem;
--recursive-wght: 500;
font-weight: 500;
text-decoration: underline;
text-align: right;
opacity: 80%;
@ -63,7 +63,7 @@ th-chat-asked {
}
&[disabled] {
--recursive-wght: 600;
font-weight: 600;
cursor: default;
opacity: 100%;
text-decoration: none;

6
static/css/doc.css
View file

@ -100,7 +100,7 @@ main.doc {
padding: 0.8rem var(--code-block-h-padding);
& code {
--recursive-wght: 500;
font-weight: 500;
--recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */
font-size: 95%;
tab-size: 3ch;
@ -198,7 +198,7 @@ main.doc {
flex-direction: row;
align-items: center;
--recursive-wght: 600;
font-weight: 600;
border-bottom: 1px solid var(--border-1);
cursor: pointer;
@ -320,7 +320,7 @@ main.doc {
border-right: none;
& code {
--recursive-wght: 520;
font-weight: 520;
font-size: 90%;
tab-size: 2ch;
}

30
static/css/history.css
View file

@ -1,30 +0,0 @@
.version-history {
& > .commit-count {
margin-left: 2rem;
}
& > ul.commits {
--recursive-mono: 1;
list-style: none;
padding-left: 0;
& > li {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
display: grid;
grid-template-columns: 4em min-content auto;
align-items: start;
gap: 0.5em;
& > .revision-number {
justify-self: end;
}
details > summary {
cursor: pointer;
}
}
}
}

252
static/css/main.css → static/css/noncritical.css
View file

@ -106,6 +106,14 @@ body {
/* Set up typography */
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
body,
pre,
code,
@ -120,14 +128,6 @@ dfn {
text-size-adjust: none;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
pre,
code,
kbd,
@ -138,17 +138,11 @@ input {
}
:root {
font-weight: 450;
font-style: normal;
--recursive-mono: 0;
--recursive-casl: 0;
--recursive-wght: 450;
--recursive-slnt: 0;
--recursive-crsv: 0.5;
--recursive-simplified-f: "ss03";
--recursive-simplified-g: "ss04";
--recursive-simplified-l: "ss05";
--recursive-simplified-r: "ss06";
--recursive-no-serif-L-Z: "ss08";
}
*,
@ -157,37 +151,31 @@ input {
font-variation-settings:
"MONO" var(--recursive-mono),
"CASL" var(--recursive-casl),
"wght" var(--recursive-wght),
"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: "ss03", "ss04", "ss05", "ss06", "ss08";
}
h1 {
--recursive-wght: 900;
font-weight: 900;
font-size: 4.8rem;
font-feature-settings: var(--recursive-simplified-r) 0;
}
h2 {
--recursive-wght: 850;
font-weight: 850;
font-size: 3.2rem;
}
h3 {
--recursive-wght: 850;
font-weight: 850;
font-size: 2.4rem;
}
h4 {
--recursive-wght: 800;
font-weight: 800;
font-size: 1.6rem;
}
@ -201,23 +189,23 @@ pre code,
kbd,
th-literate-program {
--recursive-mono: 1;
--recursive-wght: 450;
font-weight: 450;
tab-size: 4;
}
strong code {
--recursive-wght: 800;
font-weight: 800;
}
b,
strong {
--recursive-wght: 700;
font-weight: 700;
}
i,
em {
--recursive-slnt: -16;
font-style: normal;
--recursive-crsv: 1;
font-style: italic;
}
h1,
@ -437,7 +425,7 @@ td {
th {
background-color: var(--shaded-background);
--recursive-wght: 700;
font-weight: 700;
}
/* Horizontal rules */
@ -490,42 +478,6 @@ button.push {
}
}
/* Style the noscript box a little more prettily. */
.noscript {
padding: 1.6rem;
background-color: #fde748;
color: #55423e;
border: 0.1rem solid #6c581c;
border-radius: 0.8rem;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.noscript:empty {
display: none;
}
.noscript p {
margin-top: 0;
margin-bottom: 1.6rem;
}
.noscript p:last-child {
margin-bottom: 0;
}
.noscript a {
color: #004ec8;
}
.noscript a:visited {
color: #6c2380;
}
/* Feeds */
section.feed {
@ -550,14 +502,14 @@ section.feed {
}
& h1 {
--recursive-wght: 800;
font-weight: 800;
font-size: 125%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
& h2 {
--recursive-wght: 600;
font-weight: 600;
font-size: 100%;
padding: 0;
}
@ -639,7 +591,7 @@ header.floof {
line-height: 1;
width: min-content;
--recursive-wght: 900;
font-weight: 900;
font-size: 5.6rem;
text-align: right;
@ -652,16 +604,6 @@ header.floof {
padding: 0.1em;
--shadow-color: var(--accent-pink);
box-shadow:
0.5px 0.5px 0 var(--shadow-color),
1px 1px 0 var(--shadow-color),
1.5px 1.5px 0 var(--shadow-color),
2px 2px 0 var(--shadow-color),
2.5px 2.5px 0 var(--shadow-color),
3px 3px 0 var(--shadow-color),
3.5px 3.5px 0 var(--shadow-color),
4px 4px 0 var(--shadow-color);
/*
import math
@ -701,11 +643,7 @@ header.floof {
12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625),
14.0px 14.0px 12.25px rgba(from var(--shadow-color) r g b / 0.001953125),
14.5px 14.5px 13.140625px rgba(from var(--shadow-color) r g b / 0.000823974609375),
15.0px 15.0px 14.0625px rgba(from var(--shadow-color) r g b / 0.000244140625),
15.5px 15.5px 15.015625px rgba(from var(--shadow-color) r g b / 3.0517578125e-05)
13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625)
;
}
@ -726,7 +664,7 @@ header.floof {
color: var(--text-color);
& .adjectives {
--recursive-wght: 800;
font-weight: 800;
font-size: 1.6rem;
padding-top: 0.6rem;
}
@ -742,27 +680,11 @@ header.floof {
/* Navigation header (contains page title & breadcrumbs) */
h1.page-title {
--recursive-wght: 900;
font-weight: 900;
line-height: 1.2;
padding-top: 0.5lh;
padding-bottom: 0.5lh;
& a {
color: var(--text-color);
text-decoration: underline;
text-decoration-color: transparent;
&:hover {
text-decoration-color: var(--text-color);
}
}
}
@media (hover: none) {
h1.page-title a {
text-decoration: underline;
}
}
@media (max-width: 700px) {
@ -771,29 +693,6 @@ h1.page-title {
}
}
span.badge {
--recursive-wght: 800;
--recursive-mono: 1;
border-radius: 100rem;
padding: 0.2rem 0.6rem;
font-size: 0.9em;
&.red {
color: white;
background-color: #d01243;
}
&.blue {
color: white;
background-color: #058ef0;
}
&.before-content {
margin-right: 0.6rem;
}
}
/* Style the footer */
footer {
@ -889,7 +788,7 @@ footer.pink-space {
background: none;
border: none;
--recursive-wght: 700;
font-weight: 700;
line-height: 1.3;
font-size: 75%;
opacity: 25%;
@ -914,94 +813,13 @@ dialog[open] {
/* Style emojis to be readable */
img[data-cast~="emoji"] {
img.emoji {
max-width: 1.3125em;
max-height: 1.3125em;
vertical-align: text-bottom;
object-fit: contain;
}
/* Tooltips */
th-overlays {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
th-tooltip {
display: block;
position: fixed;
width: max-content;
z-index: 100;
background-color: var(--background-color-tooltip);
padding: 0.4rem 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(0.3rem);
pointer-events: none;
font-size: 0.9em;
&[th-side="bottom"] {
transform: translateX(-50%) translateY(-10%) scale(0.8);
&.transitioned-in {
transform: translateX(-50%) scale(1);
}
}
&[th-side="left"] {
transform: translateX(-90%) translateY(-50%) scale(0.8);
&.transitioned-in {
transform: translateX(-100%) translateY(-50%);
}
}
}
th-tooltip.transitioned-in {
opacity: 100%;
filter: blur(0);
}
th-tooltip.tooltip-emoji {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem;
margin-top: 0.8rem;
& > img {
display: block;
max-width: 7.2rem;
max-height: 7.2rem;
}
& > p {
color: var(--text-color);
margin: 0;
padding-top: 0.6rem;
line-height: 1;
}
}
.th-emoji-unknown {
text-decoration: 0.1rem underline var(--error-color);
cursor: help;
}
/* Command line */
th-command-line {
@ -1068,7 +886,7 @@ th-command-line {
& > dfn {
--recursive-crsv: 0;
--recursive-wght: 700;
font-weight: 700;
margin-right: 2ch;
}
@ -1239,7 +1057,7 @@ th-literate-program[data-mode="output"] {
.th-syntax-highlighting span {
&.comment {
--recursive-slnt: -8;
font-style: oblique 8deg;
color: var(--syntax-comment);
}
@ -1310,11 +1128,3 @@ th-literate-program[data-mode="output"] {
}
}
}
/* Style settings sections */
section[data-cast~="settings"] {
/* Don't display settings when JavaScript is disabled.
JS overrides this value on the element itself. */
display: none;
}

8
static/css/page/tairu.css
View file

@ -31,8 +31,8 @@
& .south,
& .west,
& .north {
--recursive-wght: 900;
--recursive-slnt: 0;
font-weight: 900;
font-style: normal;
--recursive-mono: 1;
position: absolute;
@ -108,9 +108,9 @@
.tileset-four-to-eight-demo th-bc {
& .directions-square {
--recursive-wght: 900;
font-weight: 900;
font-style: normal;
--recursive-casl: 0;
--recursive-slnt: 0;
--recursive-mono: 1;
color: #d3dce9;
text-shadow:

1
static/css/page/treehouse/issues.css
View file

@ -2,6 +2,7 @@
/* Make issue titles bold */
& > li > details > summary > th-bc,
& > li > div > th-bc {
font-weight: 600;
--recursive-wght: 600;
}
}

4
static/css/tree.css
View file

@ -42,7 +42,7 @@
.breadcrumb a {
--recursive-mono: 1;
--recursive-wght: 500;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
@ -452,7 +452,7 @@ ul.branch-quote {
position: relative;
&::before {
--recursive-wght: 900;
font-weight: 900;
content: "“";
position: absolute;

31
static/js/emoji.js
View file

@ -1,31 +0,0 @@
// Emoji zoom-in functionality.
import { addSpell } from "treehouse/spells.js";
import { attachTooltip, Tooltip } from "treehouse/overlay.js";
function createEmojiTooltip(emoji, element) {
let tooltip = new Tooltip(element, "bottom");
tooltip.classList.add("tooltip-emoji");
let img = tooltip.appendChild(new Image());
img.src = element.src;
let description = tooltip.appendChild(document.createElement("p"));
description.textContent = emoji.emojiName;
return tooltip;
}
class Emoji {
constructor(element) {
this.emojiName = element.title;
// title makes the browser add a tooltip. We replace browser tooltips with our own,
// so remove the title.
element.title = "";
attachTooltip(element, () => createEmojiTooltip(this, element)).showOnHover();
}
}
addSpell("emoji", Emoji);

116
static/js/overlay.js
View file

@ -1,116 +0,0 @@
export class Overlay extends HTMLElement {}
/** @type Overlays */
export let overlays = null;
export class Overlays extends HTMLElement {
overlays = new Set();
connectedCallback() {
overlays = this;
}
disconnectedCallback() {
overlays = null;
}
open(overlay) {
this.appendChild(overlay);
this.overlays.add(overlay);
return overlay;
}
close(overlay) {
this.removeChild(overlay);
this.overlays.delete(overlay);
}
}
customElements.define("th-overlays", Overlays);
export class Tooltip extends Overlay {
constructor(element, side) {
super();
this.element = element;
this.side = side;
}
connectedCallback() {
this.role = "tooltip";
this.setAttribute("th-side", this.side);
let bb = this.element.getBoundingClientRect();
switch (this.side) {
// NOTE: The elements are positioned directly at (width / 2) or (height / 2), because
// they are transformed to the centre over on the CSS side.
case "bottom":
this.style.left = `${bb.left + bb.width / 2}px`;
this.style.top = `${bb.bottom}px`;
break;
case "left":
this.style.left = `${bb.left}px`;
this.style.top = `${bb.top + bb.height / 2}px`;
break;
default:
console.error(`th-tooltip: unknown attachment side ${this.side}`);
break;
}
this.addEventListener("transitionend", (event) => {
if (event.propertyName == "opacity") {
let style = getComputedStyle(this);
if (style.opacity < 0.01) {
this.dispatchEvent(new Event(".close"));
}
}
});
// Timeout is zero because we just want to execute this later, to be definitely sure
// the transition plays out.
setTimeout(() => this.classList.add("transitioned-in"), 0);
}
close() {
this.classList.remove("transitioned-in");
// NOTE: In case there is no transition, we may need to trigger the close event immediately.
let style = getComputedStyle(this);
if (style.opacity < 0.01) {
this.dispatchEvent(new Event(".close"));
}
}
}
customElements.define("th-tooltip", Tooltip);
export function attachTooltip(element, makeTooltip) {
let show = () => {
let tooltip = overlays.open(makeTooltip(element));
let abortController = new AbortController();
tooltip.addEventListener(".close", () => {
overlays.close(tooltip);
abortController.abort();
console.log("closing tooltip");
});
window.addEventListener("wheel", () => tooltip.close(), {
signal: abortController.signal,
passive: true,
});
element.addEventListener("mouseleave", () => tooltip.close(), {
signal: abortController.signal,
});
};
return {
show,
showOnHover() {
element.addEventListener("mouseenter", show);
return this;
},
};
}

29
static/js/settings.js
View file

@ -1,29 +0,0 @@
import { addSpell } from "treehouse/spells.js";
const settingsKey = "treehouse.settings";
const settings = JSON.parse(localStorage.getItem(settingsKey)) || {};
const defaultSettingValues = {
showNewPostIndicator: true,
};
function saveSettings() {
localStorage.setItem(settingsKey, JSON.stringify(settings));
}
export function getSettingValue(setting) {
return settings[setting] ?? defaultSettingValues[setting];
}
class SettingCheckbox {
constructor(element) {
element.checked = getSettingValue(element.id);
element.addEventListener("change", () => {
settings[element.id] = element.checked;
saveSettings();
});
}
}
addSpell("setting-checkbox", SettingCheckbox);

9
static/js/usability.js
View file

@ -1,9 +0,0 @@
// Bits and pieces to make the treehouse just a bit more easy to explore.
// We want to let the user have a selection on collapsible blocks without collapsing them when
// the user finishes marking their selection.
document.addEventListener("click", event => {
if (getSelection().type == "Range") {
event.preventDefault();
}
})

43
template/_history.hbs
View file

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
{{> components/_head.hbs }}
<link rel="stylesheet" href="{{ asset 'css/history.css' }}">
</head>
<body>
<span></span>
{{> components/_noscript.hbs }}
{{> components/_nav.hbs }}
{{> components/_header.hbs }}
<main class="version-history">
<p class="commit-count">{{ len page.commits }} commits</p>
<ul class="commits">
{{#each page.commits}}
<li>
<a class="revision-number" href="{{ ../config.site }}/{{ ../page.tree_path }}@{{ revision_number }}">#{{ revision_number }}</a>
<a href="{{ ../config.commit_base_url }}/{{ hash }}/content/{{ ../page.tree_path }}.tree"><code>{{ hash_short }}</code></a>
{{#if body}}
<details>
<summary class="summary">{{ summary }}</summary>
{{ body }}
</details>
{{else}}
<span class="summary">{{ summary }}</span>
{{/if}}
</li>
{{/each}}
</ul>
</main>
{{> components/_footer.hbs }}
</body>
</html>

13
template/_tree.hbs
View file

@ -11,7 +11,18 @@
<link rel="stylesheet" href="{{ asset (cat 'css/' this) }}">
{{/each}}
<script type="module">
<script type="module" async>
import "treehouse/spells.js";
import "treehouse/tree.js";
import "treehouse/ulid.js";
// We want to let the user have a selection on collapsible blocks without collapsing them when
// the user finishes marking their selection.
document.addEventListener("click", event => {
if (getSelection().type == "Range") {
event.preventDefault();
}
{{!-- Go through the import map for each script. --}}
{{#each page.scripts}}
import "{{ this }}";

11
template/components/_head.hbs
View file

@ -7,11 +7,11 @@
<style>
@font-face {
font-family: "RecVar";
src: url("{{ asset 'font/Recursive_VF_1.085.woff2' }}");
src: url("{{{ asset 'font/Recursive_VF_1.085.woff2' }}}");
}
</style>
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
<link rel="stylesheet" href="{{ asset 'css/main.css' }}">
<link rel="stylesheet" href="{{ asset 'css/noncritical.css' }}">
<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
{{!--
@ -42,13 +42,6 @@ clever to do while browser vendors figure that out, we'll just have to do a cach
</script>
<script type="module" async>
import "treehouse/command-line.js";
import "treehouse/emoji.js";
import "treehouse/overlay.js";
import "treehouse/settings.js";
import "treehouse/spells.js";
import "treehouse/tree.js";
import "treehouse/ulid.js";
import "treehouse/usability.js";
</script>
<meta property="og:site_name" content="{{ config.user.title }}">

20
template/components/_noscript.hbs
View file

@ -1,20 +0,0 @@
<noscript>
<div class="noscript" role="note">
<p>hey! looks like you have <strong>JavaScript disabled.</strong><br>
I respect that decision, but you may find the experience of browsing the treehouse… not great.<br>
for example, links to branches may not work properly. I cannot do anything about this; it's due to how
the <code>&lt;details&gt;</code> element works.<br>
(a <code>&lt;details&gt;</code> will not expand itself automatically to reveal the linked element to
you.)<br>
I did my best to at least keep the site readable in this state, but you can only do so much with plain
HTML and CSS.</p>
<p><strong>Pinky promise this website does not contain any malicious code such as trackers or cryptocurrency
miners.</strong><br>
if you don't believe me, you're free to inspect the source yourself! all the scripts are written
lovingly in vanilla JS (not minified!) by yours truly ❤️</p>
<small>and if this box is annoying, feel free to block it with uBlock Origin or something. I have no
way of remembering you closed it, and don't wanna add a database to this website. simplicity
rules!</small>
</div>
</noscript>