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);
--inset: calc(50vw - var(--content-width) / 2);
--scrollLengthPx: 0;
--cloudyHeaderBottom: max(35vh, 10rem);
}
@media (prefers-color-scheme: dark) {
@ -65,7 +66,10 @@ body {
.scene {
--durationSeconds: 120;
--duration: calc(var(--durationSeconds) * 1s);
--viewPointDelta: min(1px * var(--scrollLengthPx), 35vh);
--viewPointDelta: min(
1px * var(--scrollLengthPx),
var(--cloudyHeaderBottom)
);
--travelDistance: 90vh;
z-index: -2;
position: fixed;
@ -74,7 +78,7 @@ body {
right: 0;
height: 100lvh;
overflow: hidden;
perspective: 35vh;
perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta));
}
@ -85,16 +89,17 @@ body {
}
.cloud {
--height: 90vh;
pointer-events: none;
position: absolute;
left: -205vw;
right: -205vw;
top: calc(8vh - var(--viewPointDelta));
height: 90vh;
height: var(--height);
background-image: url("./cloud.png");
background-size: auto 100%;
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-duration: var(--duration);
animation-timing-function: steps(calc(var(--durationSeconds) * 30));
@ -121,7 +126,7 @@ body {
left: var(--inset);
right: var(--inset);
padding: 0.5rem;
bottom: -35vh;
bottom: calc(-1 * var(--cloudyHeaderBottom));
transform: translateY(calc(-1 * var(--viewPointDelta)));
will-change: translateY;
}
@ -166,7 +171,7 @@ body {
opacity: 0;
transform: translate3d(
0,
calc(-1 * var(--viewPointDelta)),
calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
calc(0.33333 * var(--travelDistance))
);
}
@ -265,7 +270,7 @@ label:focus-visible {
main {
@media screen {
margin-top: 35vh;
margin-top: var(--cloudyHeaderBottom);
}
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 mdFootnote = require("markdown-it-footnote");
const prettier = require("prettier");
const dayjs = require("dayjs")
const dayjs = require("dayjs");
const clean = require("eleventy-plugin-clean");
const site = require("./site/_data/site");
@ -74,13 +74,17 @@ module.exports = (config) => {
return new URL(url, site.baseUrl).href;
});
config.addFilter("toISOString", (dateString) => {
return new Date(dateString).toISOString()
return new Date(dateString).toISOString();
});
config.addFilter("formatDate", (date, format) => {
return dayjs(date).format(format);
});
clean.updateFileRecord("dist");
const buildTime = new Date().toISOString().replace(/[:.-]/g, "");
config.addGlobalData("buildTime", buildTime);
return {
dir: {
input: "site",

2
site/_includes/base.njk
View file

@ -7,7 +7,7 @@ title: Joshua's Homepage
<head>
<meta charset="UTF-8">
<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>
<meta property="og:title" content="{{ computedTitle }}" />
<meta property="og:type" content="{{ article }}" />