joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adjust cloud scale, cache-bust css by build

Browse source
This commit is contained in:
Joshua Seigler 2025-05-08 10:27:40 -04:00
parent 8d3482cb4d
commit f8c35f7f91
4 changed files with 19 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/cloud.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 213 KiB

Before After
Before After

19
assets/site.css
View file

@ -34,6 +34,7 @@
--content-width: clamp(75vw, 40rem, 100vw - 3rem); --content-width: clamp(75vw, 40rem, 100vw - 3rem);
--inset: calc(50vw - var(--content-width) / 2); --inset: calc(50vw - var(--content-width) / 2);
--scrollLengthPx: 0; --scrollLengthPx: 0;
--cloudyHeaderBottom: max(35vh, 10rem);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -65,7 +66,10 @@ body {
.scene { .scene {
--durationSeconds: 120; --durationSeconds: 120;
--duration: calc(var(--durationSeconds) * 1s); --duration: calc(var(--durationSeconds) * 1s);
--viewPointDelta: min(1px * var(--scrollLengthPx), 35vh); --viewPointDelta: min(
1px * var(--scrollLengthPx),
var(--cloudyHeaderBottom)
);
--travelDistance: 90vh; --travelDistance: 90vh;
z-index: -2; z-index: -2;
position: fixed; position: fixed;
@ -74,7 +78,7 @@ body {
right: 0; right: 0;
height: 100lvh; height: 100lvh;
overflow: hidden; overflow: hidden;
perspective: 35vh; perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta)); perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta));
} }
@ -85,16 +89,17 @@ body {
} }
.cloud { .cloud {
--height: 90vh;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
left: -205vw; left: -205vw;
right: -205vw; right: -205vw;
top: calc(8vh - var(--viewPointDelta)); top: calc(8vh - var(--viewPointDelta));
height: 90vh; height: var(--height);
background-image: url("./cloud.png"); background-image: url("./cloud.png");
background-size: auto 100%; background-size: auto 100%;
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: calc(50% + cos(190 * var(--n)) * 100vh) 50%; background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
animation-name: zoom; animation-name: zoom;
animation-duration: var(--duration); animation-duration: var(--duration);
animation-timing-function: steps(calc(var(--durationSeconds) * 30)); animation-timing-function: steps(calc(var(--durationSeconds) * 30));
@ -121,7 +126,7 @@ body {
left: var(--inset); left: var(--inset);
right: var(--inset); right: var(--inset);
padding: 0.5rem; padding: 0.5rem;
bottom: -35vh; bottom: calc(-1 * var(--cloudyHeaderBottom));
transform: translateY(calc(-1 * var(--viewPointDelta))); transform: translateY(calc(-1 * var(--viewPointDelta)));
will-change: translateY; will-change: translateY;
} }
@ -166,7 +171,7 @@ body {
opacity: 0; opacity: 0;
transform: translate3d( transform: translate3d(
0, 0,
calc(-1 * var(--viewPointDelta)), calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
calc(0.33333 * var(--travelDistance)) calc(0.33333 * var(--travelDistance))
); );
} }
@ -265,7 +270,7 @@ label:focus-visible {
main { main {
@media screen { @media screen {
margin-top: 35vh; margin-top: var(--cloudyHeaderBottom);
} }
margin-bottom: 4rem; margin-bottom: 4rem;
} }

8
eleventy.config.js
View file

@ -4,7 +4,7 @@ const md = require("markdown-it");
const mdAnchor = require("markdown-it-anchor"); const mdAnchor = require("markdown-it-anchor");
const mdFootnote = require("markdown-it-footnote"); const mdFootnote = require("markdown-it-footnote");
const prettier = require("prettier"); const prettier = require("prettier");
const dayjs = require("dayjs") const dayjs = require("dayjs");
const clean = require("eleventy-plugin-clean"); const clean = require("eleventy-plugin-clean");
const site = require("./site/_data/site"); const site = require("./site/_data/site");
@ -74,13 +74,17 @@ module.exports = (config) => {
return new URL(url, site.baseUrl).href; return new URL(url, site.baseUrl).href;
}); });
config.addFilter("toISOString", (dateString) => { config.addFilter("toISOString", (dateString) => {
return new Date(dateString).toISOString() return new Date(dateString).toISOString();
}); });
config.addFilter("formatDate", (date, format) => { config.addFilter("formatDate", (date, format) => {
return dayjs(date).format(format); return dayjs(date).format(format);
}); });
clean.updateFileRecord("dist"); clean.updateFileRecord("dist");
const buildTime = new Date().toISOString().replace(/[:.-]/g, "");
config.addGlobalData("buildTime", buildTime);
return { return {
dir: { dir: {
input: "site", input: "site",

2
site/_includes/base.njk
View file

@ -7,7 +7,7 @@ title: Joshua's Homepage
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ "/site.css" | url }}?v2"/> <link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/>
<title>{{ computedTitle }} - {{ site.title }}</title> <title>{{ computedTitle }} - {{ site.title }}</title>
<meta property="og:title" content="{{ computedTitle }}" /> <meta property="og:title" content="{{ computedTitle }}" />
<meta property="og:type" content="{{ article }}" /> <meta property="og:type" content="{{ article }}" />