Update CSS Pipeline #4
59 changed files with 344 additions and 1996 deletions
13
config/bundles/css.js
Normal file
13
config/bundles/css.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import postcss from "postcss";
|
||||||
|
import postcssImport from "postcss-import";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
transforms: [
|
||||||
|
async function (content) {
|
||||||
|
const css = await postcss([postcssImport])
|
||||||
|
.process(content, { from: "src/includes/css/styles.css" })
|
||||||
|
.then((result) => result.css);
|
||||||
|
return css;
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
5
config/bundles/index.js
Normal file
5
config/bundles/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import css from "./css.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
css,
|
||||||
|
};
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export const ASSETS_FONTS_PATH = "/assets/fonts";
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
export default {
|
|
||||||
light: {
|
|
||||||
primary: "oklch(0.6 0.1025 212.16)",
|
|
||||||
secondary: "oklch(0.61 0.2232 31.48)",
|
|
||||||
background: "oklch(0.98 0 0)",
|
|
||||||
surface: "oklch(0.96 0.0078 207.9)",
|
|
||||||
border: "oklch(0.87 0.045077 207.8465)",
|
|
||||||
text: "oklch(0.15 0 0)",
|
|
||||||
fadeText: "oklch(0.45 0.0214 207.84)",
|
|
||||||
shadow: "oklch(0.39 0.0688 212.35)",
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
primary: "oklch(0.57 0.0991 213.4)",
|
|
||||||
secondary: "oklch(0.55 0.1982 31.52)",
|
|
||||||
background: "oklch(0.2 0 0)",
|
|
||||||
surface: "oklch(0.26 0.0106 233.21)",
|
|
||||||
border: "oklch(0.27 0.0238 245.26)",
|
|
||||||
text: "oklch(0.98 0 0)",
|
|
||||||
fadeText: "oklch(0.78 0.018 207.85)",
|
|
||||||
shadow: "oklch(0.39 0.0688 212.35)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
export default {
|
|
||||||
display: {
|
|
||||||
family: "Atikinson Hyperlegible Next",
|
|
||||||
format: "woff2",
|
|
||||||
styles: {
|
|
||||||
Regular: {
|
|
||||||
path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "125 950",
|
|
||||||
fontStretch: "75% 125%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
body: {
|
|
||||||
family: "Atikinson Hyperlegible Next",
|
|
||||||
format: "woff2",
|
|
||||||
styles: {
|
|
||||||
Regular: {
|
|
||||||
path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "125 950",
|
|
||||||
fontStretch: "75% 125%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
monospace: {
|
|
||||||
family: "Atikinson Hyperlegible Mono",
|
|
||||||
format: "woff2",
|
|
||||||
styles: {
|
|
||||||
Regular: {
|
|
||||||
path: "/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "125 950",
|
|
||||||
fontStretch: "75% 125%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
export default {
|
|
||||||
0: 0,
|
|
||||||
0.25: 4,
|
|
||||||
0.5: 8,
|
|
||||||
1: 16,
|
|
||||||
1.5: 24,
|
|
||||||
2: 32,
|
|
||||||
3: 48,
|
|
||||||
4: 64,
|
|
||||||
5: 80,
|
|
||||||
};
|
|
||||||
|
|
@ -1,29 +1,15 @@
|
||||||
import { JSDOM } from "jsdom";
|
|
||||||
|
|
||||||
// From coryd.dev
|
|
||||||
// https://www.coryd.dev/posts/2025/generating-absolute-urls-in-my-rss-feeds/
|
|
||||||
const convertRelativeLinks = (htmlContent, url) => {
|
const convertRelativeLinks = (htmlContent, url) => {
|
||||||
if (!htmlContent || !url) return htmlContent;
|
if (!htmlContent || !url) return htmlContent;
|
||||||
|
|
||||||
const dom = new JSDOM(htmlContent);
|
const baseUrl = url.replace(/\/$/, "");
|
||||||
const document = dom.window.document;
|
|
||||||
|
|
||||||
document.querySelectorAll("a[href]").forEach((link) => {
|
return htmlContent.replace(
|
||||||
let href = link.getAttribute("href");
|
/(href|src)=(['"])(?![a-z][a-z0-9+.-]*:|\/\/)([^'"]+)\2/gi,
|
||||||
|
(_, attr, quote, relUrl) => {
|
||||||
if (href.startsWith("#")) {
|
const clean = relUrl.replace(/^\//, "");
|
||||||
link.remove();
|
return `${attr}=${quote}${baseUrl}/${clean}${quote}`;
|
||||||
return;
|
},
|
||||||
}
|
);
|
||||||
|
|
||||||
if (!href.startsWith("http://") && !href.startsWith("https://"))
|
|
||||||
link.setAttribute(
|
|
||||||
"href",
|
|
||||||
`${url.replace(/\/$/, "")}/${href.replace(/^\/+/, "")}`,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return document.body.innerHTML;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import collection from "./collection.js";
|
||||||
import date from "./date.js";
|
import date from "./date.js";
|
||||||
import feed from "./feed.js";
|
import feed from "./feed.js";
|
||||||
import general from "./general.js";
|
import general from "./general.js";
|
||||||
import postcss from "./postcss/index.js";
|
|
||||||
import tag from "./tag.js";
|
import tag from "./tag.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -10,6 +9,5 @@ export default {
|
||||||
...date,
|
...date,
|
||||||
...feed,
|
...feed,
|
||||||
...general,
|
...general,
|
||||||
...postcss,
|
|
||||||
...tag,
|
...tag,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import postcss from "./postcss.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
...postcss,
|
|
||||||
};
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
/*
|
|
||||||
* Implementation sourced from eleventyone starter kit
|
|
||||||
* https://github.com/philhawksworth/eleventyone
|
|
||||||
* ---
|
|
||||||
* https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
|
|
||||||
*/
|
|
||||||
import { default as postcssBase } from "postcss";
|
|
||||||
import postcssImport from "postcss-import";
|
|
||||||
import postcssImportExtGlob from "postcss-import-ext-glob";
|
|
||||||
import autoprefixer from "autoprefixer";
|
|
||||||
import cssnano from "cssnano";
|
|
||||||
|
|
||||||
import colors from "./utils/colors.js";
|
|
||||||
import fontFamily from "./utils/font-family.js";
|
|
||||||
import fontVariables from "./utils/font-variables.js";
|
|
||||||
import spacing from "./utils/spacing.js";
|
|
||||||
|
|
||||||
const postcss = async (rawCss) => {
|
|
||||||
const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
|
|
||||||
return await postcssBase([
|
|
||||||
postcssImportExtGlob,
|
|
||||||
postcssImport,
|
|
||||||
autoprefixer,
|
|
||||||
cssnano,
|
|
||||||
])
|
|
||||||
.process(css, { from: "src/includes/css/styles.css" })
|
|
||||||
.then((result) => result.css);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
postcss,
|
|
||||||
};
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
import colorSchemes from "../../../design-tokens/colors.js";
|
|
||||||
import { helperClassesToCss } from "./helper-classes.js";
|
|
||||||
|
|
||||||
const lightScheme = colorSchemes.light;
|
|
||||||
const darkScheme = colorSchemes.dark;
|
|
||||||
|
|
||||||
const colorToCss = (key, value) => `--color-${key}: ${value};`;
|
|
||||||
|
|
||||||
const colorSchemeToCss = (scheme) =>
|
|
||||||
Object.entries(scheme).reduce(
|
|
||||||
(css, [key, value]) => css + colorToCss(key, value),
|
|
||||||
``,
|
|
||||||
);
|
|
||||||
|
|
||||||
const lightCss = colorSchemeToCss(lightScheme);
|
|
||||||
const darkCss = colorSchemeToCss(darkScheme);
|
|
||||||
|
|
||||||
const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
|
|
||||||
return Object.entries(scheme).reduce((css, [key]) => {
|
|
||||||
return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
||||||
const helperClasses = [
|
|
||||||
["text", ["color"]],
|
|
||||||
["bg", ["background-color"]],
|
|
||||||
];
|
|
||||||
|
|
||||||
const helperClassesCss = colorSchemeToHelperClassesCss(
|
|
||||||
lightScheme,
|
|
||||||
helperClasses,
|
|
||||||
);
|
|
||||||
|
|
||||||
export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
import fonts from "../../../design-tokens/fonts.js";
|
|
||||||
|
|
||||||
const getFontUrl = (src) => path.join("/assets/fonts", src);
|
|
||||||
|
|
||||||
const fontsToCss = (fonts) => {
|
|
||||||
return Object.entries(fonts).reduce((css, [, fontProperties]) => {
|
|
||||||
const family = fontProperties.family;
|
|
||||||
const format = fontProperties.format;
|
|
||||||
const styles = fontProperties.styles;
|
|
||||||
|
|
||||||
return (
|
|
||||||
css +
|
|
||||||
Object.entries(styles).reduce((css, [variant, fontFamily]) => {
|
|
||||||
const url = getFontUrl(fontFamily.path);
|
|
||||||
const style = fontFamily.fontStyle;
|
|
||||||
const weight = fontFamily.fontWeight;
|
|
||||||
const stretch = fontFamily.fontStretch;
|
|
||||||
const postScriptName = [family, variant].join("-").replaceAll(" ", "");
|
|
||||||
|
|
||||||
return (
|
|
||||||
css +
|
|
||||||
fontFamilyToCss(
|
|
||||||
family,
|
|
||||||
style,
|
|
||||||
weight,
|
|
||||||
stretch,
|
|
||||||
url,
|
|
||||||
family,
|
|
||||||
postScriptName,
|
|
||||||
format,
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}, ``)
|
|
||||||
);
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
||||||
const fontFamilyToCss = (
|
|
||||||
family,
|
|
||||||
style,
|
|
||||||
weight,
|
|
||||||
stretch,
|
|
||||||
url,
|
|
||||||
localName,
|
|
||||||
postScriptName,
|
|
||||||
format,
|
|
||||||
) => `@font-face {
|
|
||||||
font-family: ${family};
|
|
||||||
font-style: ${style};
|
|
||||||
font-weight: ${weight};
|
|
||||||
font-stretch: ${stretch};
|
|
||||||
font-display: swap;
|
|
||||||
src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
|
|
||||||
}\n`;
|
|
||||||
|
|
||||||
export default fontsToCss(fonts);
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
/*
|
|
||||||
* Fallbacks from Modern Font Stacks.
|
|
||||||
* https://modernfontstacks.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
import fonts from "../../../design-tokens/fonts.js";
|
|
||||||
|
|
||||||
const displayFallbacks = [
|
|
||||||
"ui-monospace",
|
|
||||||
"Cascadia Code",
|
|
||||||
"Source Code Pro",
|
|
||||||
"Menlo",
|
|
||||||
"Consolas",
|
|
||||||
"DejaVu Sans Mono",
|
|
||||||
"monospace",
|
|
||||||
];
|
|
||||||
|
|
||||||
const bodyFallbacks = [
|
|
||||||
"ui-monospace",
|
|
||||||
"Cascadia Code",
|
|
||||||
"Source Code Pro",
|
|
||||||
"Menlo",
|
|
||||||
"Consolas",
|
|
||||||
"DejaVu Sans Mono",
|
|
||||||
"monospace",
|
|
||||||
];
|
|
||||||
|
|
||||||
const monoFallbacks = [
|
|
||||||
"ui-monospace",
|
|
||||||
"Cascadia Code",
|
|
||||||
"Source Code Pro",
|
|
||||||
"Menlo",
|
|
||||||
"Consolas",
|
|
||||||
"DejaVu Sans Mono",
|
|
||||||
"monospace",
|
|
||||||
];
|
|
||||||
|
|
||||||
const fallbacks = {
|
|
||||||
display: displayFallbacks,
|
|
||||||
body: bodyFallbacks,
|
|
||||||
monospace: monoFallbacks,
|
|
||||||
};
|
|
||||||
|
|
||||||
const fontsToCss = (fonts) => {
|
|
||||||
return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
|
|
||||||
const family = fontProperties.family;
|
|
||||||
|
|
||||||
const fontTypeCss = fontFamilyToCss(fontType, family);
|
|
||||||
|
|
||||||
return css + fontTypeCss;
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
||||||
const fontFamilyToCss = (type, value) =>
|
|
||||||
`--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
|
|
||||||
|
|
||||||
export default `:root{${fontsToCss(fonts)}}`;
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
/**
|
|
||||||
* Given an array of CSS properties, output css properties
|
|
||||||
* with each property equal to `value`
|
|
||||||
*/
|
|
||||||
export const cssPropertiesToCss = (cssProperties, value) => {
|
|
||||||
return cssProperties.reduce((css, cssProp) => {
|
|
||||||
return css + `${cssProp}:${value};`;
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Given a helperClass (string) and array of cssProperties,
|
|
||||||
* will generate a css class named helperClass that has
|
|
||||||
* all cssProperties mapped to value.
|
|
||||||
*/
|
|
||||||
export const helperClassToCss = (helperClass, cssProperties, value) => {
|
|
||||||
const cssProps = cssPropertiesToCss(cssProperties, value);
|
|
||||||
return `.${helperClass}{${cssProps}}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Given an array of helperClasses that map to cssProperties,
|
|
||||||
* output a string of CSS that maps the helperClass (with variant modifier)
|
|
||||||
* to the array of css properties with each css property equal to
|
|
||||||
* value
|
|
||||||
*
|
|
||||||
* e.g.
|
|
||||||
* helperClasses = [["text", ["color"]]],
|
|
||||||
* variant = "primary",
|
|
||||||
* value = "#000"
|
|
||||||
*
|
|
||||||
* Will output the following:
|
|
||||||
* .text-primary {
|
|
||||||
* color: #000;
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
export const helperClassesToCss = (helperClasses, variant, value) => {
|
|
||||||
return helperClasses.reduce((css, [helperClass, cssProperties]) => {
|
|
||||||
return (
|
|
||||||
css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
|
|
||||||
);
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
import spacing from "../../../design-tokens/spacing.js";
|
|
||||||
import { helperClassesToCss } from "./helper-classes.js";
|
|
||||||
|
|
||||||
const spacingToCss = (variant, value) =>
|
|
||||||
`--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
|
|
||||||
|
|
||||||
const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
|
|
||||||
return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
|
|
||||||
const variant = spacingVariant.replace(".", "\\.");
|
|
||||||
return (
|
|
||||||
css +
|
|
||||||
helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
|
|
||||||
);
|
|
||||||
}, ``);
|
|
||||||
};
|
|
||||||
|
|
||||||
const helperClasses = [
|
|
||||||
["m", ["margin"]],
|
|
||||||
["my", ["margin-block-start", "margin-block-end"]],
|
|
||||||
["mx", ["margin-inline-start", "margin-inline-end"]],
|
|
||||||
["ml", ["margin-inline-start"]],
|
|
||||||
["mr", ["margin-inline-start"]],
|
|
||||||
["mt", ["margin-block-start"]],
|
|
||||||
["mb", ["margin-block-end"]],
|
|
||||||
["p", ["padding"]],
|
|
||||||
["py", ["padding-block-start", "padding-block-end"]],
|
|
||||||
["px", ["padding-inline-start", "padding-inline-end"]],
|
|
||||||
["pl", ["padding-inline-start"]],
|
|
||||||
["pr", ["padding-inline-start"]],
|
|
||||||
["pt", ["padding-block-start"]],
|
|
||||||
["pb", ["padding-block-end"]],
|
|
||||||
["w", ["width"]],
|
|
||||||
["h", ["height"]],
|
|
||||||
["size", ["width", "height"]],
|
|
||||||
["radius", ["border-radius"]],
|
|
||||||
["gap", ["gap"]],
|
|
||||||
["row-gap", ["row-gap"]],
|
|
||||||
["column-gap", ["column-gap"]],
|
|
||||||
["flow-space", ["--flow-space"]],
|
|
||||||
];
|
|
||||||
|
|
||||||
const spacingVariablesCss = Object.entries(spacing).reduce(
|
|
||||||
(css, [variant, value]) => css + spacingToCss(variant, value),
|
|
||||||
``,
|
|
||||||
);
|
|
||||||
|
|
||||||
const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
|
|
||||||
|
|
||||||
const css = `:root{${spacingVariablesCss}}${helperCss}`;
|
|
||||||
|
|
||||||
export default css;
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import htmlConfigTransform from "./html-config.js";
|
import htmlConfigTransform from "./html-config.js";
|
||||||
import xmlConfigTransform from "./xml-config.js";
|
|
||||||
|
|
||||||
export default { htmlConfigTransform, xmlConfigTransform };
|
export default { htmlConfigTransform };
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import minifyXML from "minify-xml";
|
|
||||||
|
|
||||||
export default function (eleventyConfig) {
|
|
||||||
eleventyConfig.addTransform("xml-minify", (content, path) => {
|
|
||||||
if (path && path.endsWith(".xml")) {
|
|
||||||
return minifyXML(content, {
|
|
||||||
shortenNamespaces: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return content;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
|
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
|
||||||
|
|
||||||
import { collectionByTag } from "./config/collections/index.js";
|
import { collectionByTag } from "./config/collections/index.js";
|
||||||
|
import bundles from "./config/bundles/index.js";
|
||||||
import filters from "./config/filters/index.js";
|
import filters from "./config/filters/index.js";
|
||||||
import markdown from "./config/plugins/markdown.js";
|
import markdown from "./config/plugins/markdown.js";
|
||||||
import shortcodes from "./config/shortcodes/index.js";
|
import shortcodes from "./config/shortcodes/index.js";
|
||||||
import transforms from "./config/transforms/index.js";
|
import transforms from "./config/transforms/index.js";
|
||||||
|
|
||||||
export default function (eleventyConfig) {
|
export default function (eleventyConfig) {
|
||||||
// --------------------- Watch Targets -----------------------
|
|
||||||
eleventyConfig.addWatchTarget("./src/includes/css");
|
|
||||||
|
|
||||||
// --------------------- Passthrough File Copy -----------------------
|
// --------------------- Passthrough File Copy -----------------------
|
||||||
["src/assets/fonts/", "src/assets/images"].forEach((path) =>
|
["src/assets/fonts/", "src/assets/images"].forEach((path) =>
|
||||||
eleventyConfig.addPassthroughCopy(path),
|
eleventyConfig.addPassthroughCopy(path),
|
||||||
|
|
@ -18,6 +16,11 @@ export default function (eleventyConfig) {
|
||||||
// --------------------- Markdown -----------------------
|
// --------------------- Markdown -----------------------
|
||||||
eleventyConfig.setLibrary("md", markdown);
|
eleventyConfig.setLibrary("md", markdown);
|
||||||
|
|
||||||
|
// --------------------- Bundles -----------------------
|
||||||
|
Object.keys(bundles).forEach((bundleName) => {
|
||||||
|
eleventyConfig.addBundle(bundleName, bundles[bundleName]);
|
||||||
|
});
|
||||||
|
|
||||||
// --------------------- Collections -----------------------
|
// --------------------- Collections -----------------------
|
||||||
eleventyConfig.addCollection("postsByTag", (collection) =>
|
eleventyConfig.addCollection("postsByTag", (collection) =>
|
||||||
collectionByTag(collection, "post"),
|
collectionByTag(collection, "post"),
|
||||||
|
|
|
||||||
1185
package-lock.json
generated
1185
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -23,7 +23,6 @@
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"dotenv": "^16.4.5",
|
"dotenv": "^16.4.5",
|
||||||
"html-minifier-terser": "^7.2.0",
|
"html-minifier-terser": "^7.2.0",
|
||||||
"jsdom": "^26.0.0",
|
|
||||||
"markdown-it": "^14.0.0",
|
"markdown-it": "^14.0.0",
|
||||||
"markdown-it-abbr": "^2.0.0",
|
"markdown-it-abbr": "^2.0.0",
|
||||||
"markdown-it-anchor": "^8.6.7",
|
"markdown-it-anchor": "^8.6.7",
|
||||||
|
|
@ -31,11 +30,9 @@
|
||||||
"markdown-it-footnote": "^4.0.0",
|
"markdown-it-footnote": "^4.0.0",
|
||||||
"markdown-it-image-figures": "^2.1.1",
|
"markdown-it-image-figures": "^2.1.1",
|
||||||
"markdown-it-prism": "^2.3.0",
|
"markdown-it-prism": "^2.3.0",
|
||||||
"minify-xml": "^4.5.2",
|
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"postcss-import": "^16.1.0",
|
"postcss-import": "^16.1.0",
|
||||||
"postcss-import-ext-glob": "^2.1.1",
|
|
||||||
"upload-to-bunny": "^1.4.0"
|
"upload-to-bunny": "^1.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -296,7 +296,7 @@ module.exports = {
|
||||||
linkTitle: "View book details",
|
linkTitle: "View book details",
|
||||||
eleventyComputed: {
|
eleventyComputed: {
|
||||||
tertiary: (data) =>
|
tertiary: (data) =>
|
||||||
`<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
|
`<p class="[ flow-space-2 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
@ -476,7 +476,7 @@ box-shadow:
|
||||||
1px 1px 0px var(--color-shadow),
|
1px 1px 0px var(--color-shadow),
|
||||||
2px 2px 0 var(--color-shadow);
|
2px 2px 0 var(--color-shadow);
|
||||||
|
|
||||||
border-radius: var(--spacing-0\.25);
|
border-radius: var(--spacing-1);
|
||||||
border: 1px solid var(--color-shadow);
|
border: 1px solid var(--color-shadow);
|
||||||
|
|
||||||
transition:
|
transition:
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,12 @@
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
import { ASSETS_FONTS_PATH } from "../../config/constants/paths.js";
|
|
||||||
import fonts from "../../config/design-tokens/fonts.js";
|
|
||||||
|
|
||||||
const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
|
|
||||||
|
|
||||||
const preloads = [
|
const preloads = [
|
||||||
{
|
{
|
||||||
as: "font",
|
as: "font",
|
||||||
href: getFontUrl(fonts.display.styles.Regular.path),
|
href: "/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
|
||||||
crossorigin: true,
|
crossorigin: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
as: "font",
|
as: "font",
|
||||||
href: getFontUrl(fonts.body.styles.Regular.path),
|
href: "/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2",
|
||||||
crossorigin: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
as: "font",
|
|
||||||
href: getFontUrl(fonts.monospace.styles.Regular.path),
|
|
||||||
crossorigin: true,
|
crossorigin: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: var(--spacing-0\.5);
|
gap: var(--spacing-2);
|
||||||
padding: var(--spacing-0\.5) var(--spacing-1);
|
padding: var(--spacing-2) var(--spacing-4);
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: transform 0.3s var(--transition-bounce);
|
transition: transform 0.3s var(--transition-bounce);
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.card {
|
.card {
|
||||||
border: 1px solid var(--color-shadow);
|
border-radius: var(--spacing-2);
|
||||||
border-radius: var(--spacing-0\.5);
|
padding: var(--spacing-4);
|
||||||
padding: var(--spacing-1);
|
background-color: var(--color-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card--secondary {
|
.card--secondary {
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,30 @@
|
||||||
|
.media-metadata-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
|
||||||
|
@container (min-width: 48rem) {
|
||||||
|
grid-template-columns: 200px 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-metadata {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px 1fr;
|
||||||
|
row-gap: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
.media-image {
|
.media-image {
|
||||||
--aspect-ratio: 0.8;
|
--aspect-ratio: 0.8;
|
||||||
|
|
||||||
border: 1px solid var(--color-shadow);
|
|
||||||
border-radius: var(--spacing-0\.5);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
source,
|
source,
|
||||||
img {
|
img {
|
||||||
aspect-ratio: var(--aspect-ratio);
|
aspect-ratio: var(--aspect-ratio);
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
border-radius: var(--spacing-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-image--tall {
|
.media-image--tall {
|
||||||
--aspect-ratio: 0.67;
|
--aspect-ratio: 0.67;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-meta-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 225px 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-grid--full {
|
|
||||||
grid-column: 1/3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-meta {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
@container (max-width: 36rem) {
|
|
||||||
.media-meta-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
|
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
|
||||||
grid-gap: var(--spacing-0\.5);
|
grid-gap: var(--spacing-2);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border: 1px solid var(--color-shadow);
|
border: 1px solid var(--color-shadow);
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
|
|
||||||
picture {
|
picture {
|
||||||
|
border-radius: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
@ -62,7 +63,7 @@
|
||||||
|
|
||||||
.meta-text {
|
.meta-text {
|
||||||
transition-delay: 0.05s;
|
transition-delay: 0.05s;
|
||||||
transform: translateY(var(--spacing-1));
|
transform: translateY(var(--spacing-4));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
font-family: var(--font-family-body);
|
font-family: var(--font-family-body);
|
||||||
font-weight: var(--font-weight-body-regular);
|
font-weight: var(--font-weight-body-regular);
|
||||||
line-height: 0.8rem;
|
line-height: 0.8rem;
|
||||||
padding-inline: var(--spacing-0\.5);
|
padding-inline: var(--spacing-2);
|
||||||
padding-block: var(--spacing-0\.25);
|
padding-block: var(--spacing-1);
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@ spacing, regardless of their size
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.cluster {
|
.cluster {
|
||||||
--gap: var(--spacing-1);
|
--gap: var(--spacing-4);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--gap, --spacing-1);
|
gap: var(--gap, --spacing-4);
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ there is space in the viewport and stacks on small viewports
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-0\.5);
|
gap: var(--spacing-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.repel[data-nowrap] {
|
.repel[data-nowrap] {
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scrollbar-color: var(--color-primary) var(--color-surface);
|
scrollbar-color: var(--color-primary) var(--color-surface);
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -50,14 +52,14 @@ h2 {
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-normal);
|
||||||
letter-spacing: -0.05rem;
|
letter-spacing: -0.05rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-normal);
|
||||||
letter-spacing: -0.05rem;
|
letter-spacing: -0.05rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -103,9 +105,9 @@ blockquote {
|
||||||
border-inline-start: 2px solid var(--color-primary);
|
border-inline-start: 2px solid var(--color-primary);
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
padding: var(--spacing-1);
|
padding: var(--spacing-4);
|
||||||
background-color: var(--color-surface);
|
background-color: var(--color-surface);
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote > * + * {
|
blockquote > * + * {
|
||||||
|
|
@ -138,7 +140,7 @@ code {
|
||||||
|
|
||||||
:not(pre) > code {
|
:not(pre) > code {
|
||||||
background-color: var(--color-surface);
|
background-color: var(--color-surface);
|
||||||
border-radius: var(--spacing-0\.25);
|
border-radius: var(--spacing-1);
|
||||||
padding-block: 0.15em;
|
padding-block: 0.15em;
|
||||||
padding-inline: 0.25em;
|
padding-inline: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
@ -153,7 +155,7 @@ picture {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -172,20 +174,20 @@ picture img {
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
background-color: var(--color-surface);
|
background-color: var(--color-surface);
|
||||||
padding: var(--spacing-1);
|
padding: var(--spacing-4);
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
margin-inline: calc(-1 * var(--spacing-1));
|
margin-inline: calc(-1 * var(--spacing-4));
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
background-color: var(--color-border);
|
background-color: var(--color-border);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
padding-block: var(--spacing-0\.25);
|
padding-block: var(--spacing-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[href="#main"] {
|
[href="#main"] {
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
margin-inline: var(--spacing-1);
|
margin-inline: var(--spacing-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
[href="#main"]:not(:focus) {
|
[href="#main"]:not(:focus) {
|
||||||
|
|
@ -202,7 +204,7 @@ mark {
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -218,8 +220,8 @@ table thead th {
|
||||||
|
|
||||||
table th,
|
table th,
|
||||||
table td {
|
table td {
|
||||||
padding-block: var(--spacing-0\.5);
|
padding-block: var(--spacing-2);
|
||||||
padding-inline: var(--spacing-1);
|
padding-inline: var(--spacing-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
table tbody tr:first-child td {
|
table tbody tr:first-child td {
|
||||||
|
|
@ -230,6 +232,10 @@ table tbody tr:not(:last-child) td {
|
||||||
border-bottom: 1px solid var(--color-border);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Snippet from:
|
* Snippet from:
|
||||||
* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E
|
* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E
|
||||||
|
|
|
||||||
1
src/includes/css/global/lilypad.css
Normal file
1
src/includes/css/global/lilypad.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,22 @@
|
||||||
@import "global/reset.css";
|
@import "global/reset.css";
|
||||||
@import "global/variables.css";
|
@import "global/variables.css";
|
||||||
|
|
||||||
@import "global/global-styles.css";
|
@import "global/global-styles.css";
|
||||||
|
|
||||||
@import-glob "blocks/*.css";
|
@import "blocks/button.css";
|
||||||
@import-glob "compositions/*.css";
|
@import "blocks/card.css";
|
||||||
@import-glob "utilities/*.css";
|
@import "blocks/media-display.css";
|
||||||
|
@import "blocks/media-grid.css";
|
||||||
|
@import "blocks/pill.css";
|
||||||
|
@import "blocks/posts.css";
|
||||||
|
@import "blocks/prism.css";
|
||||||
|
@import "blocks/site-header.css";
|
||||||
|
@import "blocks/site-logo.css";
|
||||||
|
@import "blocks/stars.css";
|
||||||
|
|
||||||
|
@import "compositions/cluster.css";
|
||||||
|
@import "compositions/repel.css";
|
||||||
|
|
||||||
|
@import "utilities/fonts.css";
|
||||||
|
@import "utilities/image.css";
|
||||||
|
@import "utilities/table.css";
|
||||||
|
@import "utilities/wrapper.css";
|
||||||
|
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-col {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-end {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-1 {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
/*
|
|
||||||
* FLOW UTILITY
|
|
||||||
* Like the Every Layout stack: https://every-layout.dev/layouts/stack/
|
|
||||||
* Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
|
|
||||||
*/
|
|
||||||
.flow > * + * {
|
|
||||||
margin-block-start: var(--flow-space, 1em);
|
|
||||||
}
|
|
||||||
|
|
@ -2,22 +2,6 @@
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-size-m {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-size-l {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-size-xl {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-size-2xl {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-height-s {
|
.line-height-s {
|
||||||
line-height: 0.8rem;
|
line-height: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
@ -29,7 +13,3 @@
|
||||||
.line-height-l {
|
.line-height-l {
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-height-xl {
|
|
||||||
line-height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
.image-shrink {
|
.image-shrink {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-tiny {
|
.image-tiny {
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
border-radius: var(--spacing-0\.5);
|
border-radius: var(--spacing-2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
.list-none {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-disc {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-decimal {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
/*
|
|
||||||
* VISUALLY HIDDEN UTILITY
|
|
||||||
* Info: https://piccalil.li/quick-tip/visually-hidden/
|
|
||||||
*/
|
|
||||||
.visually-hidden {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
height: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
@ -20,12 +20,13 @@
|
||||||
<script type="module"
|
<script type="module"
|
||||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
|
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% set css %}
|
<style>{% include "css/global/lilypad.css" %}</style>
|
||||||
|
{% css %}
|
||||||
{% include "css/styles.css" %}
|
{% include "css/styles.css" %}
|
||||||
{% endset %}
|
{% endcss %}
|
||||||
<style>{{ css | postcss | safe }}</style>
|
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
|
||||||
</head>
|
</head>
|
||||||
<body class="flex-col">
|
<body class="flex flex-col">
|
||||||
{% include "partials/header.html" %}
|
{% include "partials/header.html" %}
|
||||||
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
|
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
|
||||||
|
|
@ -3,47 +3,43 @@ layout: "layouts/base"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% from "macros/date.njk" import format %}
|
{% from "macros/date.njk" import format %}
|
||||||
{% from "macros/utils.njk" import stars %}
|
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||||
{% from "macros/tags.njk" import tagList %}
|
{% from "macros/tags.njk" import tagList %}
|
||||||
<header class="flow flow-space-1">
|
<article class="flow">
|
||||||
{{ format(page.date) }}
|
<header class="flow">
|
||||||
<h1>{{ title }}</h1>
|
<div class="flow flow-space-1">
|
||||||
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
|
<h1>{{ title }}</h1>
|
||||||
</header>
|
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||||
{% if hasSpoilers %}
|
</div>
|
||||||
<section class="bg-surface radius-0.5 p-1">
|
{{ format(page.date) }}
|
||||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
</header>
|
||||||
<strong>Warning!</strong>
|
{% if hasSpoilers %}
|
||||||
The following may contain spoilers!
|
{{ spoilerWarning() }}
|
||||||
</section>
|
{% endif %}
|
||||||
{% endif %}
|
{% if content %}
|
||||||
{% if content %}
|
<section class="flow flow-space-default">
|
||||||
<section class="flow">
|
{{ content | safe }}
|
||||||
{{ content | safe }}
|
</section>
|
||||||
</section>
|
{% endif %}
|
||||||
{% endif %}
|
<footer class="card media-metadata-grid">
|
||||||
<hr class="my-2" />
|
<div class="media-image media-image--tall">
|
||||||
<footer class="media-meta-grid gap-1">
|
<img src="{{ image }}" alt="" />
|
||||||
<div class="media-image media-image--tall">
|
</div>
|
||||||
<img src="{{ image }}" alt="" />
|
<div class="flow flex flex-col justify-center flow-space-4">
|
||||||
</div>
|
<h2>{{ title }}</h2>
|
||||||
<div class="flow flex-col justify-center">
|
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||||
<h2>{{ title }}</h2>
|
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||||
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
|
<dl class="media-metadata">
|
||||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
{% if author %}
|
||||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
<dt><strong>Author</strong></dt>
|
||||||
{% if author %}
|
<dd>{{ author }}</dd>
|
||||||
<li class="flex-col">
|
{% endif %}
|
||||||
<strong>Author</strong><span>{{ author }}</span>
|
{% if year %}
|
||||||
</li>
|
<dt><strong>Published</strong></dt>
|
||||||
{% endif %}
|
<dd>{{ year }}</dd>
|
||||||
{% if year %}
|
{% endif %}
|
||||||
<li class="flex-col">
|
</dl>
|
||||||
<strong>Published</strong><span>{{ year }}</span>
|
</div>
|
||||||
</li>
|
</footer>
|
||||||
{% endif %}
|
{{ tagList(tags | filter("book") , "/books") }}
|
||||||
</ul>
|
</article>
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<hr class="my-2">
|
|
||||||
{{ tagList(tags | filter("book") , "/books") }}
|
|
||||||
|
|
|
||||||
|
|
@ -3,54 +3,46 @@ layout: "layouts/base"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% from "macros/date.njk" import format %}
|
{% from "macros/date.njk" import format %}
|
||||||
{% from "macros/utils.njk" import stars %}
|
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||||
{% from "macros/tags.njk" import tagList %}
|
{% from "macros/tags.njk" import tagList %}
|
||||||
<header class="flow flow-space-1">
|
<article class="flow">
|
||||||
{{ format(page.date) }}
|
<header class="flow">
|
||||||
<h1>{{ title }}</h1>
|
<div class="flow flow-space-1">
|
||||||
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
|
<h1>{{ title }}</h1>
|
||||||
</header>
|
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||||
{% if hasSpoilers %}
|
|
||||||
<section class="bg-surface radius-0.5 p-1">
|
|
||||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
|
||||||
<strong>Warning!</strong>
|
|
||||||
The following may contain spoilers!
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
{% if content %}
|
|
||||||
<section class="flow">
|
|
||||||
{{ content | safe }}
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
<hr class="my-2" />
|
|
||||||
<footer class="media-meta-grid gap-1">
|
|
||||||
<div class="media-image media-image--tall">
|
|
||||||
<img src="{{ image }}" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="flow flex-col justify-center">
|
|
||||||
<div class="flex items-center gap-0.5 flex-wrap">
|
|
||||||
<h2>{{ title }}</h2>
|
|
||||||
</div>
|
</div>
|
||||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
{{ format(page.date) }}
|
||||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
</header>
|
||||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
{% if hasSpoilers %}
|
||||||
{% if year %}
|
{{ spoilerWarning() }}
|
||||||
<li class="flex-col">
|
{% endif %}
|
||||||
<strong>Released</strong><span>{{ year }}</span>
|
{% if content %}
|
||||||
</li>
|
<section class="flow flow-space-default">
|
||||||
{% endif %}
|
{{ content | safe }}
|
||||||
{% if platform %}
|
</section>
|
||||||
<li class="flex-col">
|
{% endif %}
|
||||||
<strong>Platform</strong><span>{{ platform }}</span>
|
<footer class="card media-metadata-grid">
|
||||||
</li>
|
<div class="media-image media-image--tall">
|
||||||
{% endif %}
|
<img src="{{ image }}" alt="" />
|
||||||
{% if playtime %}
|
</div>
|
||||||
<li class="flex-col">
|
<div class="flow flex flex-col justify-center flow-space-4">
|
||||||
<strong>Playtime</strong><span>{{ playtime }}</span>
|
<h2>{{ title }}</h2>
|
||||||
</li>
|
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||||
{% endif %}
|
<dl class="media-metadata">
|
||||||
</ul>
|
{% if year %}
|
||||||
</div>
|
<dt><strong>Released</strong></dt>
|
||||||
</footer>
|
<dd>{{ year }}</dd>
|
||||||
<hr class="my-2">
|
{% endif %}
|
||||||
{{ tagList(tags | filter("game") , "/games") }}
|
{% if platform %}
|
||||||
|
<dt><strong>Platform</strong></dt>
|
||||||
|
<dd>{{ platform }}</dd>
|
||||||
|
{% endif %}
|
||||||
|
{% if playtime %}
|
||||||
|
<dt><strong>Playtime</strong></dt>
|
||||||
|
<dd>{{ playtime }}</dd>
|
||||||
|
{% endif %}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{{ tagList(tags | filter("game") , "/games") }}
|
||||||
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -3,66 +3,59 @@ layout: "layouts/base"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% from "macros/date.njk" import format %}
|
{% from "macros/date.njk" import format %}
|
||||||
{% from "macros/utils.njk" import stars %}
|
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||||
{% from "macros/tags.njk" import tagList %}
|
{% from "macros/tags.njk" import tagList %}
|
||||||
<header class="flow flow-space-1">
|
<article class="flow">
|
||||||
{{ format(page.date) }}
|
<header class="flow">
|
||||||
<h1>{{ title }}</h1>
|
<div class="flow flow-space-1">
|
||||||
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
|
<h1>{{ title }}</h1>
|
||||||
</header>
|
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||||
{% if hasSpoilers %}
|
|
||||||
<section class="bg-surface radius-0.5 p-1">
|
|
||||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
|
||||||
<strong>Warning!</strong>
|
|
||||||
The following may contain spoilers!
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
{% if watchHistory.length > 1 %}
|
|
||||||
<p>
|
|
||||||
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
|
|
||||||
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
{% if favourite or isFavourite %}
|
|
||||||
<p>
|
|
||||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
|
||||||
This is one of my favourite movies!
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
{% if content %}
|
|
||||||
<section class="flow">
|
|
||||||
{{ content | safe }}
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
<hr class="my-2" />
|
|
||||||
<footer class="media-meta-grid gap-1">
|
|
||||||
<div class="media-image media-image--tall">
|
|
||||||
<img src="{{ image }}" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="flow flex-col justify-center">
|
|
||||||
<div class="flex items-center gap-0.5 flex-wrap">
|
|
||||||
<h2>{{ title }}</h2>
|
|
||||||
</div>
|
</div>
|
||||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
{{ format(page.date) }}
|
||||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
</header>
|
||||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
{% if hasSpoilers %}
|
||||||
{% if year %}
|
{{ spoilerWarning() }}
|
||||||
<li class="flex-col">
|
{% endif %}
|
||||||
<strong>Released</strong><span>{{ year }}</span>
|
{% if watchHistory.length > 1 %}
|
||||||
</li>
|
<p>
|
||||||
{% endif %}
|
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
|
||||||
{% if director %}
|
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
|
||||||
<li class="flex-col">
|
</p>
|
||||||
<strong>Director</strong>{{ director }}
|
{% endif %}
|
||||||
</li>
|
{% if favourite or isFavourite %}
|
||||||
{% endif %}
|
<p>
|
||||||
{% if runtime %}
|
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||||
<li class="flex-col">
|
This is one of my favourite movies!
|
||||||
<strong>Runtime</strong><span>{{ runtime }} mins</span>
|
</p>
|
||||||
</li>
|
{% endif %}
|
||||||
{% endif %}
|
{% if content %}
|
||||||
</ul>
|
<section class="flow flow-space-default">
|
||||||
</div>
|
{{ content | safe }}
|
||||||
</footer>
|
</section>
|
||||||
<hr class="my-2">
|
{% endif %}
|
||||||
{{ tagList(tags | filter("movie") , "/watching/movies") }}
|
<footer class="card media-metadata-grid">
|
||||||
|
<div class="media-image media-image--tall">
|
||||||
|
<img src="{{ image }}" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="flow flex flex-col justify-center flow-space-4">
|
||||||
|
<h2>{{ title }}</h2>
|
||||||
|
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||||
|
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||||
|
<dl class="media-metadata">
|
||||||
|
{% if year %}
|
||||||
|
<dt><strong>Released</strong></dt>
|
||||||
|
<dd>{{ year }}</dd>
|
||||||
|
{% endif %}
|
||||||
|
{% if director %}
|
||||||
|
<dt><strong>Director</strong></dt>
|
||||||
|
<dd>{{ director }}</dd>
|
||||||
|
{% endif %}
|
||||||
|
{% if runtime %}
|
||||||
|
<dt><strong>Runtime</strong></dt>
|
||||||
|
<dd>{{ runtime }} minutes</dd>
|
||||||
|
{% endif %}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{{ tagList(tags | filter("movie") , "/watching/movies") }}
|
||||||
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -3,20 +3,17 @@ layout: "layouts/base"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% from "macros/date.njk" import format %}
|
{% from "macros/date.njk" import format %}
|
||||||
|
{% from "macros/tags.njk" import tagList %}
|
||||||
<article class="flow">
|
<article class="flow">
|
||||||
<header class="flow flow-space-1 mb-2">
|
<header class="flow">
|
||||||
|
<div class="flow flow-space-1">
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<h3 class="text-fadeText">{{ excerpt }}</h3>
|
||||||
|
</div>
|
||||||
{{ format(page.date) }}
|
{{ format(page.date) }}
|
||||||
<h1>{{ title }}</h1>
|
|
||||||
<p class="text-fadeText flow-space-0.25">{{ excerpt }}</p>
|
|
||||||
<ul class="categories cluster list-none p-0 flow-space-2 line-height-m">
|
|
||||||
{% for tag in tags | filter(["post"]) %}
|
|
||||||
<li>
|
|
||||||
<a class="button" href="/tags/{{ tag | slugify }}">
|
|
||||||
{% include "svgs/frame.svg" %}
|
|
||||||
{{ tag }}</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</header>
|
</header>
|
||||||
{{ content | safe }}
|
<section class="flow flow-space-default">
|
||||||
|
{{ content | safe }}
|
||||||
|
</section>
|
||||||
|
{{ tagList(tags | filter("post") , "/posts") }}
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -3,61 +3,50 @@ layout: "layouts/base"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% from "macros/date.njk" import format %}
|
{% from "macros/date.njk" import format %}
|
||||||
{% from "macros/utils.njk" import stars %}
|
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||||
{% from "macros/tags.njk" import tagList %}
|
{% from "macros/tags.njk" import tagList %}
|
||||||
<header class="flow flow-space-1">
|
<article class="flow">
|
||||||
{{ format(page.date) }}
|
<header class="flow">
|
||||||
<h1>{{ title }}</h1>
|
<div class="flow flow-space-1">
|
||||||
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
|
<h1>{{ title }}</h1>
|
||||||
</header>
|
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||||
{% if hasSpoilers %}
|
|
||||||
<section class="bg-surface radius-0.5 p-1">
|
|
||||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
|
||||||
<strong>Warning!</strong>
|
|
||||||
The following may contain spoilers!
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
{% if content %}
|
|
||||||
<section class="flow">
|
|
||||||
{{ content | safe }}
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
{% if favourite or isFavourite %}
|
|
||||||
<p>
|
|
||||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
|
||||||
This is one of my favourite shows!
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
<hr class="my-2" />
|
|
||||||
<footer class="media-meta-grid gap-1">
|
|
||||||
<div class="media-image media-image--tall">
|
|
||||||
<img src="{{ image }}" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="flow flex-col justify-center">
|
|
||||||
<div class="flex items-center gap-0.5 flex-wrap">
|
|
||||||
<h2>{{ title }}</h2>
|
|
||||||
</div>
|
</div>
|
||||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
{{ format(page.date) }}
|
||||||
{% if director %}
|
</header>
|
||||||
<p class="flex gap-0.5">
|
{% if hasSpoilers %}
|
||||||
<span class="text-fadeText">Directed by</span>{{ director }}
|
{{ spoilerWarning() }}
|
||||||
</p>
|
{% endif %}
|
||||||
{% endif %}
|
{% if content %}
|
||||||
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
|
<section class="flow flow-space-default">
|
||||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
{{ content | safe }}
|
||||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
</section>
|
||||||
{% if year %}
|
{% endif %}
|
||||||
<li class="flex-col">
|
{% if favourite or isFavourite %}
|
||||||
<strong>Released</strong><span>{{ year }}</span>
|
<p>
|
||||||
</li>
|
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||||
{% endif %}
|
This is one of my favourite shows!
|
||||||
{% if runtime %}
|
</p>
|
||||||
<li class="flex-col">
|
{% endif %}
|
||||||
<strong>Runtime</strong><span>{{ runtime }} mins</span>
|
<footer class="card media-metadata-grid">
|
||||||
</li>
|
<div class="media-image media-image--tall">
|
||||||
{% endif %}
|
<img src="{{ image }}" alt="" />
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div class="flow flex flex-col justify-center flow-space-4">
|
||||||
</footer>
|
<h2>{{ title }}</h2>
|
||||||
<hr class="my-2">
|
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||||
{{ tagList(tags | filter("tv") , "/watching/shows") }}
|
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||||
|
{% if watchHistory %}<p class="flow-space-1">{{ format(watchHistory | last) }}</p>{% endif %}
|
||||||
|
<dl class="media-metadata">
|
||||||
|
{% if year %}
|
||||||
|
<dt><strong>Released</strong></dt>
|
||||||
|
<dd>{{ year }}</dd>
|
||||||
|
{% endif %}
|
||||||
|
{% if runtime %}
|
||||||
|
<dt><strong>Runtime</strong></dt>
|
||||||
|
<dd>{{ runtime }} minutes</dd>
|
||||||
|
{% endif %}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{{ tagList(tags | filter("tv") , "/watching/shows") }}
|
||||||
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{% macro format(dateString) %}
|
{% macro format(dateString) %}
|
||||||
<time class="date flex items-center gap-0.5 text-fadeText"
|
<time class="date flex items-center gap-2 text-fadeText"
|
||||||
datetime="{{ dateString }}">
|
datetime="{{ dateString }}">
|
||||||
<span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
|
<span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
|
||||||
</time>
|
</time>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
{% macro grid(data, shape = "vertical") %}
|
{% macro grid(data, shape = "vertical") %}
|
||||||
<ul class="media-grid {{ shape }} list-none p-0">
|
<ul class="media-grid {{ shape }} list-none p-0">
|
||||||
{% for item in data %}
|
{% for item in data %}
|
||||||
<li class="radius-0.5">
|
<li class="radius-2">
|
||||||
<a href="{{ item.url }}">
|
<a href="{{ item.url }}">
|
||||||
{% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
|
{% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
|
||||||
<div class="meta font-size-s line-height-s flex items-end px-0.5 pb-0.5">
|
<div class="meta font-size-s line-height-s flex items-end px-2 pb-2">
|
||||||
<span class="meta-text">{{ item.data.title }}</span>
|
<span class="meta-text">{{ item.data.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro list(posts, format = "MM/DD") %}
|
{% macro list(posts, format = "MM/DD") %}
|
||||||
<ol class="flow p-0" role="list">
|
<ol class="flow p-0" role="list">
|
||||||
{% for post in posts %}<li class="flow-space-0.5">{{ one(post, format) }}</li>{% endfor %}
|
{% for post in posts %}<li class="flow-space-2">{{ one(post, format) }}</li>{% endfor %}
|
||||||
</ol>
|
</ol>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro yearList(posts, year, format = "MM/DD") %}
|
{% macro yearList(posts, year, format = "MM/DD") %}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{% macro tagList(tags, urlPrefix) %}
|
{% macro tagList(tags, urlPrefix) %}
|
||||||
<ul class="categories cluster list-none p-0 line-height-m">
|
<ul class="categories cluster list-none p-0 line-height-m flow-space-default">
|
||||||
{% for tag in tags %}
|
{% for tag in tags %}
|
||||||
<li>
|
<li>
|
||||||
<a class="button" href="{{ urlPrefix }}/tag/{{ tag | slugify }}">
|
<a class="button" href="{{ urlPrefix }}/tag/{{ tag | slugify }}">
|
||||||
|
|
|
||||||
|
|
@ -11,3 +11,11 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro spoilerWarning() %}
|
||||||
|
<section class="bg-surface radius-1 p-4 flow-space-default">
|
||||||
|
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||||
|
<strong>Warning!</strong>
|
||||||
|
The following may contain spoilers!
|
||||||
|
</section>
|
||||||
|
{% endmacro %}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<footer class="bg-surface mt-1.5 py-1.5">
|
<footer class="bg-surface mt-8 py-4">
|
||||||
<div class="wrapper flow">
|
<div class="wrapper flow">
|
||||||
<div class="repel">
|
<div class="repel">
|
||||||
<p>© {{ meta.author }} 2018 - 2025.</p>
|
<p>© {{ meta.author }} 2018 - 2025.</p>
|
||||||
|
|
@ -13,8 +13,8 @@
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="repel">
|
<div class="repel">
|
||||||
<nav class="flow-space-0.5">
|
<nav class="flow-space-2">
|
||||||
<ul class="cluster p-0 m-0 gap-0.5" role="list">
|
<ul class="cluster p-0 m-0 gap-1" role="list">
|
||||||
<li>
|
<li>
|
||||||
<a href="/feeds"
|
<a href="/feeds"
|
||||||
class="button button--alt"
|
class="button button--alt"
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<header class="navbar py-1 mb-2">
|
<header class="navbar py-4 mb-8">
|
||||||
<a href="#main">Skip to content</a>
|
<a href="#main">Skip to content</a>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<nav class="repel">
|
<nav class="repel">
|
||||||
<div class="site-logo flex items-center gap-0.5">
|
<div class="site-logo flex items-center gap-2">
|
||||||
<a class="logo flex items-center justify-center"
|
<a class="logo flex items-center justify-center"
|
||||||
aria-label="Go to index"
|
aria-label="Go to index"
|
||||||
href="{{ meta.url }}">
|
href="{{ meta.url }}">
|
||||||
|
|
|
||||||
|
|
@ -12,27 +12,27 @@ permalink: /
|
||||||
<p>
|
<p>
|
||||||
I like to <a href="/posts">write</a> about <a href="/games">games</a>, <a href="/books">books</a>, and <a href="/watching/movies/recent">movies</a> to name a few things. There's a lot to explore, and I hope you have fun!
|
I like to <a href="/posts">write</a> about <a href="/games">games</a>, <a href="/books">books</a>, and <a href="/watching/movies/recent">movies</a> to name a few things. There's a lot to explore, and I hope you have fun!
|
||||||
</p>
|
</p>
|
||||||
<section class="flow-space-2">
|
<section class="flow-space-8">
|
||||||
<header class="flow">
|
<header class="flow">
|
||||||
<h2>Favourite posts</h2>
|
<h2>Favourite posts</h2>
|
||||||
<p class="flow-space-0.25">Hand-picked, curated selection of my favourite posts!</p>
|
<p class="flow-space-1">Hand-picked, curated selection of my favourite posts!</p>
|
||||||
</header>
|
</header>
|
||||||
{% set favouritePosts = collections.post | filterFavourites | reverse %}
|
{% set favouritePosts = collections.post | filterFavourites | reverse %}
|
||||||
{{ list(favouritePosts, "MM/DD/YYYY") }}
|
{{ list(favouritePosts, "MM/DD/YYYY") }}
|
||||||
</section>
|
</section>
|
||||||
<section class="flow-space-2">
|
<section class="flow-space-8">
|
||||||
<header>
|
<header>
|
||||||
<h2>Recent posts</h2>
|
<h2>Recent posts</h2>
|
||||||
</header>
|
</header>
|
||||||
{% set recentPosts = collections.post | reverse | limit(5) %}
|
{% set recentPosts = collections.post | reverse | limit(5) %}
|
||||||
{{ list(recentPosts, "MM/DD/YYYY") }}
|
{{ list(recentPosts, "MM/DD/YYYY") }}
|
||||||
</section>
|
</section>
|
||||||
<section class="flow-space-2">
|
<section class="flow-space-8">
|
||||||
<header class="flow">
|
<header class="flow">
|
||||||
<h2>Other pages</h2>
|
<h2>Other pages</h2>
|
||||||
<p class="flow-space-0.25">Some of my other pages you can check out!</p>
|
<p class="flow-space-1">Some of my other pages you can check out!</p>
|
||||||
</header>
|
</header>
|
||||||
<ul class="cluster p-0 gap-0.5 list-none" role="list">
|
<ul class="cluster p-0 list-none" role="list">
|
||||||
<li>
|
<li>
|
||||||
<a href="/about" class="button">About</a>
|
<a href="/about" class="button">About</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ permalink: "books/tag/{{ tag | slugify }}/index.html"
|
||||||
|
|
||||||
{% from "macros/media-grid.njk" import grid %}
|
{% from "macros/media-grid.njk" import grid %}
|
||||||
{% set data = collections.booksByTag[tag] | reverse %}
|
{% set data = collections.booksByTag[tag] | reverse %}
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Books</h1>
|
<h1>Books</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
|
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
|
||||||
</header>
|
</header>
|
||||||
{{ grid(data) }}
|
{{ grid(data) }}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,10 @@ All the changes that are fit to read!
|
||||||
|
|
||||||
If preferred, the [commit log is available here][commits].
|
If preferred, the [commit log is available here][commits].
|
||||||
|
|
||||||
|
## May 29th, 2025
|
||||||
|
|
||||||
|
- I updated my CSS pipeline! [My PR](https://git.cloud.haska.me/wonderfulfrog/wonderfulfrog.com/pulls/4) has more information, if you're curious. tl;dr: I decreased my build times!
|
||||||
|
|
||||||
## May 27th, 2025
|
## May 27th, 2025
|
||||||
|
|
||||||
- Updated Eleventy to `3.1.0`
|
- Updated Eleventy to `3.1.0`
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@ description: Various ways to get in touch.
|
||||||
permalink: "/contact/index.html"
|
permalink: "/contact/index.html"
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Contact</h1>
|
<h1>Contact</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Various ways to get in touch with me on the internet.</p>
|
<p class="text-fadeText flow-space-1">Various ways to get in touch with me on the internet.</p>
|
||||||
</header>
|
</header>
|
||||||
<section class="flow">
|
<section class="flow">
|
||||||
<p>Below are my primary methods of contact. They are the ones I monitor most and likely to respond!</p>
|
<p>Below are my primary methods of contact. They are the ones I monitor most and likely to respond!</p>
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ permalink: "games/tag/{{ tag | slugify }}/index.html"
|
||||||
|
|
||||||
{% from "macros/media-grid.njk" import grid %}
|
{% from "macros/media-grid.njk" import grid %}
|
||||||
{% set data = collections.gamesByTag[tag] %}
|
{% set data = collections.gamesByTag[tag] %}
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Games</h1>
|
<h1>Games</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
|
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
|
||||||
</header>
|
</header>
|
||||||
{{ grid(data) }}
|
{{ grid(data) }}
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,9 @@ permalink: "podroll/index.html"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% set data = collections.podcast | reverse %}
|
{% set data = collections.podcast | reverse %}
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Podroll</h1>
|
<h1>Podroll</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Some podcasts that I enjoy!</p>
|
<p class="text-fadeText flow-space-1">Some podcasts that I enjoy!</p>
|
||||||
</header>
|
</header>
|
||||||
<section class="flow">
|
<section class="flow">
|
||||||
{% for item in data %}
|
{% for item in data %}
|
||||||
|
|
@ -16,7 +16,7 @@ permalink: "podroll/index.html"
|
||||||
<h2>{{ item.data.title }}</h2>
|
<h2>{{ item.data.title }}</h2>
|
||||||
{% if item.data.isCompleted %}<span class="pill">Completed</span>{% endif %}
|
{% if item.data.isCompleted %}<span class="pill">Completed</span>{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<p class="flow-space-0.5">{{ item.data.description }}</p>
|
<p class="flow-space-2">{{ item.data.description }}</p>
|
||||||
<div class="flex gap-0.5">
|
<div class="flex gap-0.5">
|
||||||
{% if item.data.url %}<a href="{{ item.data.url }}" target="_blank">Website</a>{% endif %}
|
{% if item.data.url %}<a href="{{ item.data.url }}" target="_blank">Website</a>{% endif %}
|
||||||
{% if item.data.rss %}<a href="{{ item.data.rss }}" target="_blank">RSS</a>{% endif %}
|
{% if item.data.rss %}<a href="{{ item.data.rss }}" target="_blank">RSS</a>{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ permalink: "watching/movies/tag/{{ tag | slugify }}/index.html"
|
||||||
|
|
||||||
{% from "macros/media-grid.njk" import grid %}
|
{% from "macros/media-grid.njk" import grid %}
|
||||||
{% set data = collections.moviesByTag[tag] | reverse %}
|
{% set data = collections.moviesByTag[tag] | reverse %}
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Movies</h1>
|
<h1>Movies</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
|
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
|
||||||
</header>
|
</header>
|
||||||
{{ grid(data) }}
|
{{ grid(data) }}
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ permalink: "watching/shows/tag/{{ tag | slugify }}/index.html"
|
||||||
|
|
||||||
{% from "macros/media-grid.njk" import grid %}
|
{% from "macros/media-grid.njk" import grid %}
|
||||||
{% set data = collections.showsByTag[tag] | reverse %}
|
{% set data = collections.showsByTag[tag] | reverse %}
|
||||||
<header class="flow flow-space-1">
|
<header class="flow flow-space-4">
|
||||||
<h1>Shows</h1>
|
<h1>Shows</h1>
|
||||||
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
|
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
|
||||||
</header>
|
</header>
|
||||||
{{ grid(data) }}
|
{{ grid(data) }}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue