diff --git a/eleventy.config.js b/eleventy.config.js index dbae1b0..d3c1b8b 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -42,7 +42,7 @@ const figoptions = { const markdownItAnchorOptions = { permalink: true, permalinkClass: "deeplink", - permalinkSymbol: "→", + permalinkSymbol: "↳", level: [2, 3, 4], slugify: function (s) { return slugify(s); @@ -105,10 +105,10 @@ const markdownItAnchorOptions = { // insert the wrapper opening before the heading state.tokens.splice(idx, 0, headingWrapperTokenOpen); // insert the anchor link tokens after the wrapper opening and the 3 tokens of the heading - state.tokens.splice(idx + 3 + 1, 0, ...anchorTokens); + state.tokens.splice(idx + 2, 0, ...anchorTokens); // insert the wrapper closing after all these state.tokens.splice( - idx + 3 + 1 + anchorTokens.length, + idx + 2 + 1 + anchorTokens.length, 0, headingWrapperTokenClose, ); @@ -277,7 +277,10 @@ export default function (eleventyConfig) { }, }); - eleventyConfig.addPlugin(pluginTOC); + eleventyConfig.addPlugin(pluginTOC, { + tags: ["h2", "h3"], + flat: true, + }); eleventyConfig.addFilter("removeDeepLinks", function (source) { return source.replace(/(.*?)<\/a>/g, ""); @@ -462,8 +465,68 @@ export default function (eleventyConfig) { return arr.slice(0, limit); }); + eleventyConfig.addFilter("currentYearWriting", function (array, currentYear) { + // Filter any items that don't have a data.published value + array = array.filter((item) => { + return "published" in item.data; + }); + + // The data.published value is a string in the format "YYYY/MM/DD" + return array.filter((post) => { + const publishedDate = new Date(post.data.published); + return publishedDate.getFullYear() === currentYear; + }); + }); + + eleventyConfig.addFilter("groupWritingByMonth", function (array) { + const grouped = array.reduce((acc, post) => { + const publishedDate = new Date(post.data.published); + const month = publishedDate.toLocaleString("default", { month: "long" }); + if (!acc[month]) { + acc[month] = []; + } + acc[month].push(post); + return acc; + }, {}); + return grouped; + }); + + eleventyConfig.addFilter( + "currentYearProjects", + function (array, currentYear) { + return array.filter((project) => { + return project.activeYears.includes(currentYear); + }); + }, + ); + + eleventyConfig.addFilter("currentYearTalks", function (array, currentYear) { + // Filter any items that don't have a data.published value + array = array.filter((item) => { + return "date" in item; + }); + + // The data.published value is a string in the format "YYYY/MM/DD" + return array.filter((talk) => { + const talkDate = new Date(talk.date); + return talkDate.getFullYear() === currentYear; + }); + }); + + eleventyConfig.addFilter("currentYearImages", function (array, currentYear) { + // The data.published value is a string in the format "YYYY/MM/DD" + return array.filter((image) => { + const imageDate = new Date(image.shortDate); + return imageDate.getFullYear() === currentYear; + }); + }); + eleventyConfig.setLibrary("md", mdLib); + eleventyConfig.setServerOptions({ + showAllHosts: true, + }); + return { dir: { input: "src", diff --git a/package-lock.json b/package-lock.json index 23c3ff1..a72e4d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fershad.com", - "version": "7.0.0", + "version": "8.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "fershad.com", - "version": "7.0.0", + "version": "8.0.0", "license": "ISC", "dependencies": { "@11ty/eleventy-fetch": "^5.1.0", @@ -15,6 +15,7 @@ }, "devDependencies": { "@11ty/eleventy": "^3.0.0", + "@11ty/eleventy-dev-server": "^2.0.8", "@11ty/eleventy-img": "^5.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@shikijs/transformers": "^1.24.0", @@ -127,25 +128,24 @@ } }, "node_modules/@11ty/eleventy-dev-server": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.4.tgz", - "integrity": "sha512-d0CuufX6yPtVz+RW0oJZg1pVoxo1jOrPmpXYacoiKLJm0MMC9MkPQOCXlimguHVaceHejFo5+aZB9/aGB2RR0A==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz", + "integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==", "dev": true, "license": "MIT", "dependencies": { - "@11ty/eleventy-utils": "^1.0.3", + "@11ty/eleventy-utils": "^2.0.1", "chokidar": "^3.6.0", - "debug": "^4.3.7", - "dev-ip": "^1.0.1", - "finalhandler": "^1.3.0", + "debug": "^4.4.0", + "finalhandler": "^1.3.1", "mime": "^3.0.0", "minimist": "^1.2.8", "morphdom": "^2.7.4", "please-upgrade-node": "^3.2.0", - "send": "^0.19.0", + "send": "^1.1.0", "ssri": "^11.0.0", "urlpattern-polyfill": "^10.0.0", - "ws": "^8.18.0" + "ws": "^8.18.1" }, "bin": { "eleventy-dev-server": "cmd.js" @@ -158,6 +158,20 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-dev-server/node_modules/@11ty/eleventy-utils": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz", + "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-fetch": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.0.tgz", @@ -1879,17 +1893,6 @@ "node": ">=6" } }, - "node_modules/destroy": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", - "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8", - "npm": "1.2.8000 || >= 1.4.16" - } - }, "node_modules/detect-libc": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", @@ -1900,18 +1903,6 @@ "node": ">=8" } }, - "node_modules/dev-ip": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", - "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==", - "dev": true, - "bin": { - "dev-ip": "lib/dev-ip.js" - }, - "engines": { - "node": ">= 0.8.0" - } - }, "node_modules/devlop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", @@ -2517,13 +2508,13 @@ } }, "node_modules/fresh": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", - "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", + "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==", "dev": true, "license": "MIT", "engines": { - "node": ">= 0.6" + "node": ">= 0.8" } }, "node_modules/fs.realpath": { @@ -2880,18 +2871,32 @@ } }, "node_modules/http-errors": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", - "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", "dev": true, "license": "MIT", "dependencies": { - "depd": "2.0.0", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "toidentifier": "1.0.1" + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/http-errors/node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -3590,6 +3595,33 @@ "node": ">=10.0.0" } }, + "node_modules/mime-db": { + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz", + "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz", + "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "^1.54.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -4544,58 +4576,26 @@ "license": "MIT" }, "node_modules/send": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/send/-/send-0.19.1.tgz", - "integrity": "sha512-p4rRk4f23ynFEfcD9LA0xRYngj+IyGiEYyqqOak8kaN0TvNmuxC2dcVeBn62GpCeR2CpWqyHCNScTP91QbAVFg==", - "dev": true, - "license": "MIT", - "dependencies": { - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "encodeurl": "~2.0.0", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", - "mime": "1.6.0", - "ms": "2.1.3", - "on-finished": "2.4.1", - "range-parser": "~1.2.1", - "statuses": "2.0.1" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/send/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz", + "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==", "dev": true, "license": "MIT", "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/send/node_modules/debug/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true, - "license": "MIT" - }, - "node_modules/send/node_modules/mime": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", - "dev": true, - "license": "MIT", - "bin": { - "mime": "cli.js" + "debug": "^4.3.5", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "etag": "^1.8.1", + "fresh": "^2.0.0", + "http-errors": "^2.0.0", + "mime-types": "^3.0.1", + "ms": "^2.1.3", + "on-finished": "^2.4.1", + "range-parser": "^1.2.1", + "statuses": "^2.0.1" }, "engines": { - "node": ">=4" + "node": ">= 18" } }, "node_modules/set-function-length": { @@ -5378,9 +5378,9 @@ "license": "ISC" }, "node_modules/ws": { - "version": "8.18.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", - "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "version": "8.18.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", + "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index f22b7fb..88e1193 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "fershad.com", - "version": "7.0.0", + "version": "8.0.0", "main": "index.js", "scripts": { - "start": "eleventy --serve", + "start": "eleventy --serve --incremental", "build": "eleventy" }, "keywords": [], @@ -13,6 +13,7 @@ "type": "module", "devDependencies": { "@11ty/eleventy": "^3.0.0", + "@11ty/eleventy-dev-server": "^2.0.8", "@11ty/eleventy-img": "^5.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@shikijs/transformers": "^1.24.0", diff --git a/src/_data/currently.js b/src/_data/currently.js deleted file mode 100644 index f17e306..0000000 --- a/src/_data/currently.js +++ /dev/null @@ -1,34 +0,0 @@ -import _projects from './projects.js'; - -export const blurb = "Right now I'm coaching Touch at a local high school, and working on a few active projects with the Green Web Foundation." - -const bits = { - "home": { - "status": "🇹🇼 In Taiwan.", - }, - "workTravel": { - "status": "👨‍💻 Traveling for work.", - }, - "sportTravel": { - "status": "🏉 Traveling for sports.", - }, - "vacation": { - "status": "🏖️ On vacation." - }, -} - -export const key = "home"; - -export const current = bits[key]; - -export const status = current.status; - -const projectsList = [ - "grid-aware-websites", - "co2.js", - "are-my-third-parties-green" -] - -export const projects = projectsList.map(slug => { - return _projects.find(project => project.slug === slug); -}); \ No newline at end of file diff --git a/src/_data/film.js b/src/_data/film.js index deb2bb3..b0cb58d 100644 --- a/src/_data/film.js +++ b/src/_data/film.js @@ -1,18 +1,12 @@ import Fetch from "@11ty/eleventy-fetch"; export default async function () { - let url = "https://film.fershad.com/all.json?v=2.0"; + let url = "https://film.fershad.com/all.json?v=202512052326"; let json = await Fetch(url, { - duration: "90d", // 3 months caching + duration: "30d", // 3 months caching type: "json", // we’ll parse JSON for you }); - // Filter the images that don't have descriptions - json.images = json.images.filter( - (image) => image.description && image.portrait === "true", - ); - const random = json.images[Math.floor(Math.random() * json.images.length)]; - - return random; + return json.images.sort(() => Math.random() - 0.5); } diff --git a/src/_data/projects.js b/src/_data/projects.js index edef794..28a44ce 100644 --- a/src/_data/projects.js +++ b/src/_data/projects.js @@ -5,6 +5,7 @@ export default [ slug: "grid-aware-websites-component", title: "Grid-aware websites web component", url: "https://github.com/thegreenwebfoundation/gaw-web-component", + activeYears: [2025], media: `./public/img/grid-aware-websites.jpg`, media_alt: "", shortContent: @@ -25,6 +26,7 @@ export default [ { slug: "grid-aware-websites", title: "Grid-aware websites", + activeYears: [2025, 2024], url: "https://github.com/thegreenwebfoundation/grid-aware-websites", media: `./public/img/grid-aware-websites.jpg`, media_alt: "", @@ -50,6 +52,7 @@ export default [ { slug: "green-web-tracker", title: "Green Web Tracker", + activeYears: [2025], url: "https://tracker.greenweb.org", media_alt: "", shortContent: @@ -74,6 +77,7 @@ export default [ { slug: "co2.js", title: "CO2.js", + activeYears: [2025, 2024, 2023, 2022], url: "https://github.com/thegreenwebfoundation/co2.js", media: `./public/img/co2-js.png`, media_alt: "", @@ -98,6 +102,7 @@ export default [ }, { title: "CO2 estimates in Firefox Profiler", + activeYears: [2023, 2022], media: `./public/img/firefox-profiler.jpg`, media_alt: "", content: "Presenting CO2 estimates in the Firefox DevTools Profiler.", @@ -111,6 +116,7 @@ export default [ { title: "Carbon-aware website", media: `./public/img/carbon-aware-site.jpg`, + activeYears: [2023, 2024], archived: true, media_alt: "", content: @@ -133,6 +139,7 @@ export default [ { title: "Eleventy Plugin: Green Links", media: `./public/img/eleventy-plugin-green-links.png`, + activeYears: [2023], media_alt: "", content: "An Eleventy plugin which checks if links on a website are hosted on verified green hosting providers from The Green Web Foundation's Green Web dataset.", @@ -153,6 +160,7 @@ export default [ }, { title: "ReqCheck", + activeYears: [2022], media: `./public/img/reqcheck.png`, media_alt: "", content: @@ -171,6 +179,7 @@ export default [ { title: "Are my third parties green?", slug: "are-my-third-parties-green", + activeYears: [2025, 2024, 2023, 2022], media: `./public/img/amtpg.jpg`, shortContent: "A tool to show if the third-party resources on a website are hosted on green infrastructure.", @@ -183,7 +192,7 @@ export default [ url: "https://fershad.com/writing/building-are-my-third-parties-green/", }, { - text: "Building the Directory", + text: "Directory", url: "https://fershad.com/writing/adding-a-directory-and-api-to-are-my-third-parties-green/", }, { @@ -195,6 +204,7 @@ export default [ { title: "Flowty", media: `./public/img/flowty.jpg`, + activeYears: [2022], archived: true, media_alt: "", content: diff --git a/src/_data/readwise.js b/src/_data/readwise.js deleted file mode 100644 index 38b41a3..0000000 --- a/src/_data/readwise.js +++ /dev/null @@ -1,84 +0,0 @@ -import Fetch from "@11ty/eleventy-fetch"; -import fs from 'fs'; -import path from 'path'; -import { fileURLToPath } from 'url'; - -const dev = process.env.ELEVENTY_RUN_MODE === "serve" ? true : false; - -const token = process.env.READWISE_TOKEN; -const currentDate = new Date() -const updated = currentDate.toUTCString(); - -currentDate.setDate(currentDate.getDate() - 30); -const isoDate = currentDate.toISOString(); - -const writeArticlesToFile = async (articles) => { - const __dirname = path.dirname(fileURLToPath(import.meta.url)); - const outputDir = path.join(__dirname, '../../functions/api/readwise'); - const outputFile = path.join(outputDir, 'articles.json'); - - // Ensure directory exists - if (!fs.existsSync(outputDir)) { - fs.mkdirSync(outputDir, { recursive: true }); - } - - // Write the file - fs.writeFileSync(outputFile, JSON.stringify(articles, null, 2)); -}; - -export default async function () { - if (dev) { - // Get the content of the articles.json file in ../functions/api/readwise - const __dirname = path.dirname(fileURLToPath(import.meta.url)); - const outputFile = path.join(__dirname, '../../functions/api/readwise/articles.json'); - const articles = JSON.parse(fs.readFileSync(outputFile, 'utf8')); - return { - updated, - reader: articles.slice(0, 5), - list: articles, - blogroll: [] - }; - } - - let url = `https://readwise.io/api/v3/list/?location=archive&updatedAfter=${isoDate}`; - - let json = await Fetch(url, { - duration: "5d", // 1 day caching - type: "json", // we’ll parse JSON for you - fetchOptions: { - headers: { - Authorization: `Token ${token}`, - } - }}); - - // NOTE: The original JSON does include other things like notes & highlights. Maybe some that can be used later? - - const list = json.results.filter(result => !result.parent_id).slice(0, 30); - // Write articles to file - await writeArticlesToFile(list); - // Limit to 5 items - json = json.results.filter(result => !result.parent_id).slice(0, 5); - - const blogroll = [] - - await list.map(async (item) => { - const origin = new URL(item.source_url).origin; - const blogrollIndex = blogroll.findIndex(({url}) => url === origin); - if (blogrollIndex === -1) { - blogroll.push({url: origin, name: item.site_name}); - } - // if (item.source_url && blogroll.findIndex({url: origin, name: item.site_name}) === -1) { - // blogroll.push({url: origin, name: item.site_name}); - // } - }); - - - - - return { - updated, - reader: json, - list, - blogroll - }; -}; \ No newline at end of file diff --git a/src/_data/talks.js b/src/_data/talks.js index aa11947..a74cecd 100644 --- a/src/_data/talks.js +++ b/src/_data/talks.js @@ -1,73 +1,71 @@ - -const upcoming = [ - -] - -const past = [ +export default [ { - event: 'Green IO Conference Singapore', - url: 'https://greenio.tech/conference/2/singapore-2024-greenit-digital-sustainability', - slides: 'https://www.thegreenwebfoundation.org/slides/greenio-singapore-2024', - title: 'The nuance of quantifying digital carbon emissions', - date: '2024-04-18' + event: "Green IO Conference Singapore", + url: "https://greenio.tech/conference/2/singapore-2024-greenit-digital-sustainability", + slides: + "https://www.thegreenwebfoundation.org/slides/greenio-singapore-2024", + title: "The nuance of quantifying digital carbon emissions", + date: "2024-04-18", }, { - event: 'Digital Sustainability Summit, Taipei', - url: 'https://dss.ithome.com.tw/', - slides: 'https://www.thegreenwebfoundation.org/twdss24', - title: 'Thinking differently about digital sustainability', - date: '2024-03-29' + event: "Digital Sustainability Summit, Taipei", + url: "https://dss.ithome.com.tw/", + slides: "https://www.thegreenwebfoundation.org/twdss24", + title: "Thinking differently about digital sustainability", + date: "2024-03-29", }, { - event: 'Digital Ethics Forum', - url: 'https://www.digitalethicsforum.com/def-23/', - title: 'Calculating website emissions in the Italian context', - date: '2023-11-23', - video: 'https://www.thegreenwebfoundation.org/news/estimating-website-emissions-in-the-italian-context-sitigreen-co2-js/' + event: "Digital Ethics Forum", + url: "https://www.digitalethicsforum.com/def-23/", + title: "Calculating website emissions in the Italian context", + date: "2023-11-23", + video: + "https://www.thegreenwebfoundation.org/news/estimating-website-emissions-in-the-italian-context-sitigreen-co2-js/", }, { - event: 'Environment Variables Podcast', - url: 'https://podcasts.bcast.fm/e/vnwrxy28-the-week-in-green-software-open-data-with-fershad-irani', - title: 'The Week in Green Software: Open Data with Fershad Irani', - episode: 'https://podcasts.bcast.fm/e/vnwrxy28-the-week-in-green-software-open-data-with-fershad-irani', - date: '2022-07-19' + event: "Environment Variables Podcast", + url: "https://podcasts.bcast.fm/e/vnwrxy28-the-week-in-green-software-open-data-with-fershad-irani", + title: "The Week in Green Software: Open Data with Fershad Irani", + episode: + "https://podcasts.bcast.fm/e/vnwrxy28-the-week-in-green-software-open-data-with-fershad-irani", + date: "2022-07-19", }, { - event: 'Web Directions Lazy Load', - url: 'https://webdirections.org/lazyload/', - title: 'Web Performance and the Planet', - date: '2022-06-10' + event: "Web Directions Lazy Load", + url: "https://webdirections.org/lazyload/", + title: "Web Performance and the Planet", + date: "2022-06-10", }, { - event: 'Startup Taiwan', - url: 'https://www.youtube.com/channel/UCj6eq6QSnUsrYXktcp0Zp2w', - title: 'Leaving a tech job in Taiwan to be a web performance consultant', - video: 'https://www.youtube.com/watch?v=cXCMq6nBr6A', - date: '2022-03-11' + event: "Startup Taiwan", + url: "https://www.youtube.com/channel/UCj6eq6QSnUsrYXktcp0Zp2w", + title: "Leaving a tech job in Taiwan to be a web performance consultant", + video: "https://www.youtube.com/watch?v=cXCMq6nBr6A", + date: "2022-03-11", }, { - event: 'Green I/O Podcast', - url: 'https://gaelduez.com/blog/2-greenio-1-Fershad-Irani-web-performance-sustainability', - title: 'Episode #1 with Fershad Irani - Using website performance to green the web', - episode: 'https://anchor.fm/greenio/episodes/Fershad-Irani---Using-website-performance-to-green-the-web-e1f6179', - date: '2022-03-03' + event: "Green I/O Podcast", + url: "https://gaelduez.com/blog/2-greenio-1-Fershad-Irani-web-performance-sustainability", + title: + "Episode #1 with Fershad Irani - Using website performance to green the web", + episode: + "https://anchor.fm/greenio/episodes/Fershad-Irani---Using-website-performance-to-green-the-web-e1f6179", + date: "2022-03-03", }, { - event: 'Taiwan Code Camp', - url: 'https://www.eventbrite.com/e/making-websites-run-faster-environmentally-friendly-tickets-232071551257', - video: 'https://www.youtube.com/watch?v=G5UE9LBA8aY', - slides: '/files/tw-code-camp-feb-2022.pdf', - title: 'Making websites run faster & environmentally-friendly', - date: '2022-02-17' + event: "Taiwan Code Camp", + url: "https://www.eventbrite.com/e/making-websites-run-faster-environmentally-friendly-tickets-232071551257", + video: "https://www.youtube.com/watch?v=G5UE9LBA8aY", + slides: "/files/tw-code-camp-feb-2022.pdf", + title: "Making websites run faster & environmentally-friendly", + date: "2022-02-17", }, { - event: 'Toronto Web Perf', - url: 'https://www.meetup.com/Toronto-Web-Performance-Group/events/283332963/', - video: 'https://youtu.be/LD8HiUGdsX0', - slides: '/files/torwebperf_feb_2022.pdf', - title: 'Web Performance and the Planet', - date: '2022-02-07' + event: "Toronto Web Perf", + url: "https://www.meetup.com/Toronto-Web-Performance-Group/events/283332963/", + video: "https://youtu.be/LD8HiUGdsX0", + slides: "/files/torwebperf_feb_2022.pdf", + title: "Web Performance and the Planet", + date: "2022-02-07", }, -] - -export default { upcoming, past } +]; diff --git a/src/_data/years.js b/src/_data/years.js new file mode 100644 index 0000000..a6f04a2 --- /dev/null +++ b/src/_data/years.js @@ -0,0 +1,8 @@ +export const currentYear = new Date().getFullYear(); +const startYear = 2019; + +export const blogYears = []; + +for (let i = startYear; i <= currentYear; i++) { + blogYears.push(i); +} diff --git a/src/_includes/css/font.css b/src/_includes/css/font.css index a5a46d7..313718a 100644 --- a/src/_includes/css/font.css +++ b/src/_includes/css/font.css @@ -8,21 +8,6 @@ font-display: swap; } -:where(html) { +/*:where(.year-nav, .table-of-contents, .info) { font-family: "Departure Mono", var(--font-monospace-code), monospace; -} - -h1, -h2, -h3, -h4, -h5, -h6, -.heading { - position: relative; - font-family: "Departure Mono", var(--font-monospace-slab-serif), monospace; -} - -blockquote { - font-family: "Departure Mono", var(--font-monospace-slab-serif), monospace; -} +}*/ diff --git a/src/_includes/css/glitch.css b/src/_includes/css/glitch.css deleted file mode 100644 index 2243841..0000000 --- a/src/_includes/css/glitch.css +++ /dev/null @@ -1,420 +0,0 @@ -/* Homepage */ - -#intro picture::before, -#film picture::before { - filter: saturate(2); -} - -#intro picture::after, -#film picture::after { - opacity: 0.5; - z-index: 2; - filter: hue-rotate(160deg); -} - -#intro picture:hover::before, -#intro picture:hover::after, -#intro:hover picture::before, -#intro:hover picture::after, -#intro:has(.glitch-wrapper:hover) picture::before, -#intro:has(.glitch-wrapper:hover) picture::after, -#film picture:hover::before, -#film picture:hover::after { - display: block; -} - -@media (prefers-reduced-motion: reduce) { - .banner.outline::before, - .button.outline::before, - .banner.outline::after, - .button.outline::after, - header::before, - header::after, - footer::before, - footer::after, - a::before, - a::after, - article h2::before, - article h3::before, - article h4::before, - article h2::after, - article h3::after, - article h4::after, - picture::before, - picture::after, - figure::before, - figure::after, - blockquote::before, - blockquote::after, - td::before, - td::after, - th::before, - th::after, - .gh-edit::before, - .gh-edit::after, - .gaw-banner::before, - .gaw-banner::after { - display: none; - animation: none !important; - transition: none !important; - } - - .glitch-wrapper h1 { - animation: none !important; - transition: none !important; - } -} - -/*Keyframes*/ - -@keyframes text-glitch1 { - 0% { - transform: none; - opacity: 1; - } - 7% { - transform: skew(-0.5deg, -0.9deg); - opacity: 0.85; - } - 10% { - transform: none; - opacity: 1; - } - 27% { - transform: none; - opacity: 1; - } - 30% { - transform: skew(0.8deg, -0.1deg); - opacity: 0.85; - } - 35% { - transform: none; - opacity: 1; - } - 52% { - transform: none; - opacity: 1; - } - 55% { - transform: skew(-1deg, 0.2deg); - opacity: 0.85; - } - 50% { - transform: none; - opacity: 1; - } - 72% { - transform: none; - opacity: 1; - } - 75% { - transform: skew(0.4deg, 1deg); - opacity: 0.85; - } - 80% { - transform: none; - opacity: 1; - } - 100% { - transform: none; - opacity: 1; - } -} - -@keyframes text-glitch2 { - 0% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 7% { - transform: translate(-2px, -3px); - opacity: 0.6; - } - 10% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 27% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 30% { - transform: translate(-5px, -2px); - opacity: 0.6; - } - 35% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 52% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 55% { - transform: translate(-5px, -1px); - opacity: 0.6; - } - 50% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 72% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 75% { - transform: translate(-2px, -6px); - opacity: 0.6; - } - 80% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 100% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } -} - -@keyframes text-glitch3 { - 0% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 7% { - transform: translate(2px, 3px); - opacity: 0.6; - } - 10% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 27% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 30% { - transform: translate(5px, 2px); - opacity: 0.6; - } - 35% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 52% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 55% { - transform: translate(5px, 1px); - opacity: 0.6; - } - 50% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 72% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 75% { - transform: translate(2px, 6px); - opacity: 0.6; - } - 80% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 100% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } -} - -@keyframes list-glitch1 { - 0% { - transform: none; - opacity: 1; - } - 7% { - transform: translate(0.5px, 0.9px); - opacity: 0.85; - } - 10% { - transform: none; - opacity: 1; - } - 27% { - transform: none; - opacity: 1; - } - 30% { - transform: translate(0.8px, -0.1px); - opacity: 0.85; - } - 35% { - transform: none; - opacity: 1; - } - 52% { - transform: none; - opacity: 1; - } - 55% { - transform: translate(-1px, 0.2px); - opacity: 0.85; - } - 50% { - transform: none; - opacity: 1; - } - 72% { - transform: none; - opacity: 1; - } - 75% { - transform: translate(0.4px, 1px); - opacity: 0.85; - } - 80% { - transform: none; - opacity: 1; - } - 100% { - transform: none; - opacity: 1; - } -} - -@keyframes list-glitch2 { - 0% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 7% { - transform: translate(-1px, -1.5px); - opacity: 0.6; - } - 10% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 27% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 30% { - transform: translate(-2.5px, -1px); - opacity: 0.6; - } - 35% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 52% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 55% { - transform: translate(-2.5px, -0.5px); - opacity: 0.6; - } - 50% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 72% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 75% { - transform: translate(-1px, -3px); - opacity: 0.6; - } - 80% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } - 100% { - transform: none; - opacity: var(--custom-glitch-opacity, 0.35); - } -} - -@keyframes link-glitch { - 0% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 7% { - transform: skew(-0.5deg, -0.9deg) scale(1.02); - text-shadow: 3px -3px 4px rgba(103, 243, 218, 0.76), - -3px 3px 2px rgba(241, 111, 111, 1); - opacity: 0.85; - } - 10% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 27% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 30% { - transform: skew(0.8deg, -0.1deg) scale(0.98); - text-shadow: 3px -3px 4px rgba(103, 243, 218, 0.76), - -3px 3px 2px rgba(241, 111, 111, 1); - opacity: 0.85; - } - 35% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 52% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 55% { - transform: skew(-1deg, 0.2deg) scale(1.03); - text-shadow: 3px -3px 4px rgba(103, 243, 218, 0.76), - -3px 3px 2px rgba(241, 111, 111, 1); - opacity: 0.85; - } - 50% { - transform: none; - text-shadow: 2px -2px 3px rgba(103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 72% { - transform: none; - text-shadow: 2px -2px 3pxrgba (103, 243, 218, 0.76), - -2px 2px 3px rgba(241, 111, 111, 1); - opacity: 1; - } - 75% { - transform: skew(0.4deg, 1deg) scale(0.97); - text-shadow: 3px -3px 4px rgba(103, 243, 218, 0.76), - -3px 3px 2px rgba(241, 111, 111, 1); - opacity: 0.85; - } - 80% { - transform: none; - opacity: 1; - } - 100% { - transform: none; - opacity: 1; - } -} diff --git a/src/_includes/css/home.css b/src/_includes/css/home.css index 7c70a7b..ccc158c 100644 --- a/src/_includes/css/home.css +++ b/src/_includes/css/home.css @@ -19,169 +19,228 @@ max-width: 15rem; } -#film picture { +#intro { + gap: 1.5rem; + display: grid; + grid-template-columns: 15rem 1fr; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + grid-rows: 1; +} + +.filmstrip { + display: grid; + grid-template-columns: repeat(8, minmax(15rem, 1fr)); + gap: 1.5rem; + padding: 0; position: relative; - width: fit-content; + grid-template-rows: 1fr; + overflow: auto; + scroll-snap-type: x mandatory; + padding-inline: 1rem; + padding-block: 0.6rem 0.8rem; + /* Create View Timeline */ + view-timeline-name: --revealing-image; + view-timeline-axis: block; + + /* Attach animation, linked to the View Timeline */ + animation: linear reveal both; + animation-timeline: --revealing-image; + + /* Tweak range when effect should run*/ + animation-range: entry 10% cover 30%; } -#intro picture::before, -#intro picture::after, -#film picture::before, -#film picture::after { - content: ""; - display: none; - height: 100%; - width: 100%; +nav > .year-nav { + background: light-dark(var(--text), var(--background)); position: absolute; - top: 0; - left: 0; - background: var(--glitch-img-src) no-repeat; - z-index: 1; - opacity: 0.5; - background-size: cover; - background-position: center; - object-fit: cover; + margin-inline: auto; + z-index: 10; + left: 50%; + transform: translateX(-50%); } -#intro:has(.glitch-wrapper:hover) picture::before, -#intro:hover picture::before, -#film picture:hover::before { - animation: text-glitch1 4.5s infinite; +.year-nav ul li { + margin-block: 0 !important; } -#intro:has(.glitch-wrapper:hover) picture::after, -#intro:hover picture::after, -#film picture:hover::after { - animation: text-glitch2 4.5s infinite; +.year-nav .seppa { + margin: 0; } -#intro:hover .outline-box:before, -#intro:hover .outline-box:after { - animation: none; - display: none; +summary { + display: inline; } -#intro { - gap: 1.5rem; - display: grid; - grid-template-columns: 15rem 1fr; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - grid-rows: 1; +.year-nav span:not([class]) { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: min-content; + margin: 0 auto; + border: 6px solid yellowgreen; + border-radius: 6px; + padding-inline: 0.5rem; + aspect-ratio: 1; + width: 8ch; + height: auto; } -#intro::after, -#current::after { - inline-size: 80%; - block-size: var(--line-thickness); - inset-inline-start: 10%; - inset-block-start: calc(var(--line-offset) * -1); - top: calc(100% + var(--gap) / 2); +.year-nav[open] summary { + border: none; } -#intro::before { - inline-size: var(--line-thickness); - block-size: 80%; - inset-block-start: 10%; - inset-inline-start: calc(var(--line-offset) * -1); - left: calc(100%); +.year-nav[open] + .page-nav { + opacity: 0; } -#current::after { +nav > .page-nav { + padding-block-start: 0.75rem; + margin-block-start: 3rem; + display: block; } -#other { - display: grid; - grid-template-columns: 1fr 1fr 1fr; +nav > .page-nav ul, +nav > .page-nav li { + display: inline-block; } -#projects, -#writing, -#reading { - display: grid; - grid-template-columns: 20rem 1fr; - gap: 1.5rem; - padding: 0; +nav > nav:last-of-type { + padding-block-end: 0.75rem; } -#projects > ul > li, -#writing > ul > li, -#reading > ul > li { - max-width: 100%; +.current-year { + font-size: var(--font-size-4); + font-weight: 900; } -#projects > div, -#writing > div, -#reading > div { - padding: 1.5rem; +.year-nav[open] .current-year { + border-bottom: 2px solid transparent; } -.last-updated { - display: flex; - flex-direction: column; - gap: 0.75rem; +aside:has(.filmstrip) { + position: relative; + /*max-width: 100vw;*/ + /*max-width: 100vw;*/ + width: 100vw; + margin-left: calc((-100vw + 100%) / 2); + margin-right: calc((-100vw + 100%) / 2); + z-index: 3; + background: light-dark(var(--text), var(--background)); + padding-block: 1.75rem; +} + +@keyframes reveal { + from { + opacity: 0; + clip-path: inset(0% 50% 0% 50%); + } + to { + opacity: 1; + clip-path: inset(0% 0% 0% 0%); + } +} + +aside:has(.filmstrip) h3 { max-width: 100%; } -.lead-box { - padding: 0 3rem 0 0; +aside:has(.filmstrip):before, +aside:has(.filmstrip):after { + content: ""; + display: block; + position: absolute; + left: 0; + width: 100vw; + height: 6rem; + border-radius: 20px; + background: linear-gradient( + 180deg, + transparent 0, + light-dark(var(--text), var(--background)) 100% + ); } -#film { - display: grid; - grid-template-columns: 20rem 1fr; - gap: 1.5rem; +aside:has(.filmstrip):before { + top: -6rem; } -#film .img-holder { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; +aside:has(.filmstrip):after { + bottom: -6rem; + transform: rotate(180deg); } -.img-holder .img-desc, -#words > * { - display: flex; - flex-direction: column; - gap: 1rem; +.filmstrip > .image-content { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + scroll-snap-align: center; } -#words { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; +.filmstrip > .image-content img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 1; + background-color: light-dark(var(--background), var(--text)); +} + +#yearly-content { + --flow-gap: 5rem; } -#projects::after, -#words::after { - inline-size: 80%; - block-size: var(--line-thickness); - inset-inline-start: 10%; - inset-block-start: calc(var(--line-offset) * -1); - top: calc(100% + var(--gap) / 2); +#yearly-content > section { + scroll-margin-block-start: 7.75rem; } -#words > * { - padding: 1.5rem; - justify-content: space-between; +#yearly-content > * > * { + --flow-gap: 3rem; } -#words div:has(small) + .banner { - margin-top: 1.5rem; +.splitview ul li { + scroll-margin-block: 9rem; } @media (max-width: 768px) { - #intro, - #projects, - #writing, - #reading, - #film, - #film .img-holder { + #intro { grid-template-columns: 1fr; } #intro img { max-width: 100%; } + + .year-nav ul { + flex-direction: column; + } + + .year-nav .seppa { + display: none; + } + + main:has(.year-nav[open]) > * > *:not(nav:not([class]), .year-nav) { + opacity: 0.5; + pointer-events: none; + } + + .year-nav[open] { + border: 2px solid var(--line-color); + max-width: fit-content; + opacity: 1 !important; + } + + .year-nav[open] + .page-nav { + opacity: 0.5; + pointer-events: none; + } + + .year-nav { + padding: 0.25rem 0.5rem; + border: 2px solid transparent; + left: 50%; + transform: translateX(-50%); + } } diff --git a/src/_includes/css/index.css b/src/_includes/css/index.css index 17f1375..4d25cfa 100644 --- a/src/_includes/css/index.css +++ b/src/_includes/css/index.css @@ -202,7 +202,7 @@ textarea:not([rows]) { --camo-10: rgb(93, 84, 17); --jungle-10: rgb(101, 128, 6); - --text: var(--stone-1); + --text: var(--stone-0); --background: var(--stone-11); } @@ -351,17 +351,24 @@ textarea:not([rows]) { max-inline-size: var(--size-content-1); } -@font-face { +/*@font-face { font-family: "Maple Mono"; font-style: normal; font-weight: 400; src: url("/fonts/MapleMonoVF-subset.woff2") format("woff2"); font-display: swap; -} +}*/ :where(html) { - font-family: "Maple Mono", var(--font-monospace-code), monospace; - font-variation-settings: "wght" 400; + font-family: "Noto Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + font-variation-settings: "wdth" 100; +} + +:root { + interpolate-size: allow-keywords; } /* NOTE: General stuff */ @@ -369,20 +376,14 @@ textarea:not([rows]) { navigation: auto; } -/*header { - view-transition-name: header; -} -footer { - view-transition-name: footer; -}*/ - main:not(:has(article)) { view-transition-name: main; } html { - background: var(--background); - color: var(--text); + color: light-dark(var(--background), var(--text)); + background-color: light-dark(var(--text), var(--background)); + color-scheme: light dark; } body:not(.rainbow) a:not([class]) { @@ -392,10 +393,7 @@ body:not(.rainbow) a:not([class]) { body { margin: 0; color-scheme: light dark; -} - -body.deglitch { - --glitch-off-color: var(--blue-4); + overflow-x: hidden; } .skip-link { @@ -430,11 +428,15 @@ main { --line-offset: calc(var(--gap) / 2); --line-thickness: 2px; --line-color: var(--blue-2); - max-width: var(--size-lg); + max-width: var(--size-xl); padding: 1rem; margin: 0 auto; } +main:has(article) { + max-width: var(--size-lg); +} + .wrapper > * { position: relative; padding: 1.5rem; @@ -446,9 +448,9 @@ main { body { color: light-dark(var(--background), var(--text)); background-color: light-dark(var(--text), var(--background)); + --sticky-background: light-dark(var(--text), var(--background)); --header-background: light-dark(var(--stone-0), var(--stone-10)); --callout-background: light-dark(var(--stone-2), var(--stone-11)); - --glitch-lightest-opacity: light-dark(0.95, 0.85); --inline-code-background: light-dark(var(--blue-12), var(--blue-0)); --inline-code-color: light-dark(var(--stone-0), var(--stone-12)); } @@ -461,47 +463,6 @@ body:not(.dark) { color-scheme: light !important; } -.heading-underline { - position: relative; - text-align: center; - margin-block-end: 2.5rem; -} - -* + .heading-underline { - margin-block-start: 2.5rem; -} - -.heading-underline::before { - content: ""; - display: block; - position: absolute; - border-bottom: 1px solid var(--line-color); - margin: 1rem 0; - inline-size: 40%; - block-size: var(--line-thickness); - inset-inline-start: 30%; - inset-block-start: calc(var(--line-offset) * -1); - top: 100%; -} - -.underline { - position: relative; - margin-block-end: 2.5rem; -} - -.underline::before { - content: ""; - display: block; - position: absolute; - border-bottom: 2px solid var(--line-color); - margin: 1rem 0; - inline-size: 70%; - block-size: var(--line-thickness); - inset-inline-start: 0; - inset-block-start: calc(var(--line-offset) * -1); - top: 100%; -} - h1, h2, h3, @@ -509,8 +470,8 @@ h4, h5, h6, .heading { - font-family: "Maple Mono", var(--font-monospace-code), monospace; - font-variation-settings: "wght" 600; + font-family: "Noto Sans", var(--font-monospace-code), monospace; + /*font-variation-settings: "wght" 600;*/ } .heading { @@ -533,72 +494,10 @@ h6, justify-content: center; } -.glitch-wrapper.center-align > [data-glitch]::before, -.glitch-wrapper.center-align > [data-glitch]::after { - text-align: center; - margin-inline: auto; - width: 100%; -} - -small .button { - padding: 0.25rem; -} - -.button { - padding: 0.5rem 1rem; -} - -.banner.outline, -.button.outline { - position: relative; - /* --banner-line-color: var(--blue-12); */ - background: transparent; - --banner-line-color: var(--blue-4); - --banner-text-color: currentColor; - border: 2px solid var(--banner-line-color, var(--blue-12)); - color: var(--banner-text-color, var(--blue-12)); - /* animation: flicker-in 1.35s 1; */ -} - -.banner.outline::before, -.banner.outline::after, -.button.outline::before, -.button.outline::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.banner.outline:hover::before, -.button.outline:hover::before { - border-color: var(--glitch-off-color, #f16f6f); - animation: text-glitch1 1.5s infinite; - border: 1px solid; -} - -.banner.outline:hover::after, -.button.button:hover::after { - border-color: var(--glitch-off-color, #67f3da); - animation: text-glitch2 1.5s infinite; - animation-delay: 0.5s; - border: 1px solid; -} - -h2 + small, -h3 + small, -h4 + small { - display: block; - width: 100%; - margin-block-start: 1.25rem; - max-width: 100%; -} - ul { list-style: none; padding: 0; + display: inline; } ol, @@ -607,153 +506,17 @@ ol li { padding: 0; } -:not(nav) > ul li:not(:last-of-type) { - margin-block-end: 2rem; -} - -ul:not([class]) li { - position: relative; - padding-left: 2.25rem; -} - -ul:not([class]) li::before, -ul:not([class]) li::after { - content: ""; - position: absolute; - left: 1ch; - top: 1ex; - height: 1ex; - width: 1ex; - border: 2px solid var(--marker-color, var(--blue-4)); - transition: all 0.2s; -} - -ul:not([class]) li:hover::before, -ul:not([class]) li:hover::after { - /* animation: none; */ - animation-direction: alternate-reverse; - animation-duration: 0.75s; - height: 100%; +nav:not(nav > nav, .toc, .breadcrumb) { + margin-block-start: 0 !important; + position: sticky !important; + padding-block: 0.5rem !important; top: 0; - /* --marker-color: var(--blue-4); */ -} - -ul:not([class]) li::before { - /* transition: all 0.2s; */ - --marker-color: var(--glitch-off-color, #f16f6f); - animation: list-glitch1 5.5s infinite; - animation-delay: var(--local-delay, 0); - animation-direction: var(--local-direction, alternate-reverse); -} - -ul:not([class]) li::after { - --marker-color: var(--glitch-off-color, #67f3da); - animation: list-glitch2 5.5s infinite; - animation-delay: var(--local-delay, 0); - animation-direction: var(--local-direction, alternate-reverse); -} - -header, -footer { + z-index: 2; + background: light-dark(var(--text), var(--background)); + text-align: center; --line-color: var(--blue-2); - width: 100%; - padding: 3rem 2rem; - background: var(--header-background); - position: relative; - overflow: hidden; -} - -header { border-bottom: 2px solid var(--line-color); - display: flex; - justify-content: space-between; -} - -header::before, -header::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - border-bottom: 2px solid; - top: 0; - left: 0; - overflow: hidden; -} - -header::before { - border-color: var(--glitch-off-color, #f16f6f); - animation: list-glitch1 3.5s infinite; -} - -header::after { - border-color: var(--glitch-off-color, #67f3da); - animation: list-glitch2 2.5s infinite; - animation-delay: 0.5s; -} - -footer::before, -footer::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - border-top: 2px solid; - top: 0; - left: 0; -} - -footer::before { - border-color: var(--glitch-off-color, #f16f6f); - animation: list-glitch1 3.5s infinite; -} - -footer::after { - border-color: var(--glitch-off-color, #67f3da); - animation: list-glitch2 2.5s infinite; - animation-delay: 0.5s; -} - -header > div { - width: var(--size-lg); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - margin-inline: auto; -} - -footer > nav { - max-width: var(--size-xl); - margin-inline: auto; -} - -footer { - border-top: 2px solid var(--line-color); - justify-content: center; -} - -footer nav ul li { - /* margin-block-start: 2rem; */ -} - -header nav ul, -footer nav ul { - display: flex; - gap: 1rem; - flex-direction: row; - flex-wrap: wrap; -} - -header nav ul li, -footer nav ul li { - margin-block-end: 0; -} - -footer nav ul { - justify-content: center; - align-items: center; - margin: 0; + /*border-top: 2px solid var(--line-color);*/ } a { @@ -764,34 +527,6 @@ a { font-weight: 700; } -a::after { - content: attr(data-glitch); - text-transform: capitalize; - position: absolute; - top: 0; - left: 0; - opacity: 0; -} - -a::before { - content: attr(data-glitch); - text-transform: capitalize; - position: absolute; - top: 0; - left: 0; - opacity: 0; -} - -a:hover::before { - animation: text-glitch3 3.5s infinite; - color: var(--glitch-off-color, #f16f6f); -} - -a:hover::after { - animation: text-glitch2 3.5s infinite; - color: var(--glitch-off-color, #67f3da); -} - a:hover { text-decoration: none; } @@ -812,106 +547,6 @@ a:hover { margin-block-start: var(--flow-gap, 2rem); } -*::before, -*::after { - pointer-events: none; -} - -/* Glitch effect from */ -.glitch-wrapper h1, -.glitch-wrapper p, -.glitch-wrapper small, -article h2, -article h3, -article h4 { - position: relative; -} - -.glitch-wrapper h1 { - --custom-glitch-opacity: 0.15; -} - -article h2::before, -article h3::before, -article h4::before, -article h2::after, -article h3::after, -article h4::after, -.glitch-wrapper small::before, -.glitch-wrapper small::after { - margin-left: 1.35ch; -} - -.glitch-wrapper h1::before, -.glitch-wrapper p:not(.no-glitch)::before, -article h2::before, -article h3::before, -article h4::before, -.glitch-wrapper h1::after, -.glitch-wrapper p:not(.no-glitch)::after, -article h2::after, -article h3::after, -article h4::after, -.glitch-wrapper small::before, -.glitch-wrapper small::after { - content: attr(data-glitch); - position: absolute; - top: 0; - left: 0; - opacity: 0; - /* animation: glitch3 2.5s infinite; */ -} - -.glitch-wrapper:hover > h1, -.glitch-wrapper:hover > p:not(.no-glitch), -article h2:hover, -article h3:hover, -article h4:hover, -.glitch-wrapper:hover > small { - animation: text-glitch1 3.5s infinite alternate; -} - -.glitch-wrapper:hover > h1::before, -.glitch-wrapper:hover > p:not(.no-glitch)::before, -article h2:hover::before, -article h3:hover::before, -article h4:hover::before, -.glitch-wrapper:hover > small::before { - animation: text-glitch2 3.5s infinite alternate; - color: var(--glitch-off-color, #67f3da); -} - -.glitch-wrapper:hover > h1::after, -.glitch-wrapper:hover > p:not(.no-glitch)::after, -article h2:hover::after, -article h3:hover::after, -article h4:hover::after, -.glitch-wrapper:hover > small::after { - color: var(--glitch-off-color, #f16f6f); - animation: text-glitch3 3.5s infinite alternate; -} - -.callout:hover::before, -.callout:hover::after, -.callout:hover .title::before, -.callout:hover .title::after { - animation: none; - display: none; -} - -.callout::before { - border-color: var(--glitch-off-color, #f16f6f); - animation: text-glitch1 1.5s infinite; - border: 1px solid; -} - -.callout::after { - border-color: var(--glitch-off-color, #67f3da); - animation: text-glitch2 1.5s infinite; - animation-delay: 0.5s; - border: 1px solid; -} - .callout p { max-inline-size: 100%; } @@ -927,41 +562,6 @@ article h4:hover::after, position: relative; } -[data-gaw-remove] + .gaw-banner { - display: none; -} - -.gaw-banner > small { - max-width: var(--size-lg); -} - -.gaw-banner { - background: var(--callout-background); - margin-top: 0; - padding-block: 0.5rem; - width: 100%; - position: relative; - --line-color: var(--blue-2); - border-bottom: 2px solid var(--line-color); -} - -.gaw-banner::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - overflow: hidden; -} - -.gaw-banner::after { - border-bottom: 2px solid; - border-color: var(--glitch-off-color, #f16f6f); - animation: list-glitch2 2.5s infinite; - animation-delay: 0.5s; -} - :root { --form-control-color: var(--blue-4); } @@ -995,56 +595,12 @@ input[type="checkbox"] { animation: list-glitch1 2.5s infinite; } -input[type="radio"]::after, -input[type="checkbox"]::after { - content: ""; - width: calc(100% + 0.3em); - height: calc(100% + 0.3em); - top: -0.15em; - position: absolute; - /* border-radius: 50%; */ - /* transform: scale(0); */ - transition: 120ms height ease-in-out; - animation: list-glitch2 2.5s infinite; - border: 0.15em solid var(--glitch-off-color, #f16f6f); - left: -0.15em; -} - -input[type="radio"]::before, -input[type="checkbox"]::before { - content: ""; - width: 0.65em; - height: 0em; - top: 0; - position: absolute; - /* border-radius: 50%; */ - /* transform: scale(0); */ - transition: 120ms height ease-in-out; - box-shadow: inset 1em 1em var(--form-control-color); - animation: text-glitch2 2.5s infinite; -} - input[type="radio"]:checked, input[type="checkbox"]:checked { animation: none; background-color: #fff; } -input[type="radio"]:checked::before, -input[type="checkbox"]:checked::before { - /* transform: scale(1); */ - height: 100%; - animation: none; -} - -input[type="radio"]:checked::after, -input[type="checkbox"]:checked::after { - /* transform: scale(1); */ - /* height: 100%; */ - display: none; - animation: none; -} - #filters, .controls > small:first-of-type, .controls { @@ -1088,83 +644,227 @@ input[type="checkbox"]:checked::after { grid-column: 1; } - footer { - padding-inline: 0.25rem; - } - - footer nav ul { - flex-wrap: wrap; - width: 100%; - max-width: 100vw; - justify-content: flex-start; - } - main { padding: 0.5rem; } - header nav ul li:first-of-type::before, - header nav ul li:first-of-type::after { - left: 0; - } - - header nav ul li:first-of-type { - padding-inline-start: calc(2.25rem - 1ch); - } - .wrapper > * { padding: 0.75rem; max-inline-size: 100%; } - .gaw-banner { - padding-inline-end: 0.75rem; + label[for="favicon-toggle"] { + display: none; } +} + +.toggles { + display: flex; + column-gap: 1rem; + row-gap: 1.25rem; + max-width: 100%; + flex-wrap: wrap; +} + +.splitview { + display: grid; + grid-template-columns: 20rem 1fr; + gap: 5rem; + padding: 0; + position: relative; +} - header { - padding-block-end: 2rem; +.splitview > .lead-box:after { + content: ""; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -1rem; + height: 50%; + width: 2px; + background-color: var(--blue-2); +} + +.splitview > .lead-box { + position: sticky; + top: 7.5rem; + bottom: 2rem; + align-self: start; + padding-block: 3rem; + padding-inline-end: 3rem; +} + +.lead-box + ul { + padding-block: 1.5rem; +} + +@media (max-width: 768px) { + .splitview { + grid-template-columns: 1fr; } - label[for="favicon-toggle"] { + .splitview > .lead-box { + position: relative; + top: 0; + bottom: 0; + padding-block-end: 0; + align-self: center; + } + + .splitview > .lead-box:after { display: none; } + + .splitview ul li { + scroll-margin-block: 10rem; + } +} + +/* JR Redesign */ +:root { + interpolate-size: allow-keywords; +} + +.jr-box { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: min-content; + border: 6px solid yellowgreen; + border-radius: 6px; + padding-inline: 0.35rem; + aspect-ratio: 1; + width: 6ch; + height: auto; + position: relative; + gap: 0.3ex; + padding-block-start: 0.2ex; + background: light-dark(var(--text), var(--background)); +} + +.jr-box-wrapped > span:first-of-type { + color: light-dark(var(--text), var(--background)); +} + +.jr-box-wrapped { + background: light-dark(var(--background), var(--text)); + text-align: center; + display: inline-block; + padding: 3px; + border-radius: 9px; + font-size: smaller; +} + +small .jr-box { + width: max-content; + border-width: 3px; +} + +small .current-year { + font-size: var(--font-size-2); +} + +.jr-box:not(.no-tail)::after { + content: ""; + position: absolute; + top: calc(100% + 12px); + width: 100%; + height: calc(100% + 6px); + background-color: yellowgreen; +} + +.lead-box { + display: grid; + grid-template-columns: 6ch 1fr; + justify-content: flex-start; + align-items: flex-start; + column-gap: 0.75rem; +} + +.lead-box h2 { + font-size: var(--font-size-7); + font-weight: 600; + text-box: trim-both cap alphabetic; + margin-block-start: 0.1ex; +} + +.lead-box > .section-info > p { + font-weight: 400; + text-box: trim-start cap alphabetic; + padding-block-end: 2rem; } -body.deglitch .banner.outline::before, -body.deglitch .button.outline::before, -body.deglitch .banner.outline::after, -body.deglitch .button.outline::after, -body.deglitch header::before, -body.deglitch header::after, -body.deglitch footer::before, -body.deglitch footer::after, -body.deglitch a::before, -body.deglitch a::after, -body.deglitch article h2::before, -body.deglitch article h3::before, -body.deglitch article h4::before, -body.deglitch article h2::after, -body.deglitch article h3::after, -body.deglitch article h4::after, -body.deglitch picture::before, -body.deglitch picture::after, -body.deglitch figure::before, -body.deglitch figure::after, -body.deglitch blockquote::before, -body.deglitch blockquote::after, -body.deglitch td::before, -body.deglitch td::after, -body.deglitch th::before, -body.deglitch th::after, -body.deglitch .gh-edit::before, -body.deglitch .gh-edit::after, -body.deglitch .gaw-banner::before, -body.deglitch .gaw-banner::after { - display: none; - animation: none !important; - transition: none !important; -} - -gaw-info-bar { +.jr-banner { + width: calc(100% - 12px); + height: -webkit-fill-available; + height: stretch; + margin-block-start: 12px; + background-color: yellowgreen; margin-inline: auto; } + +.jr-content { + margin-block-start: 12px; + width: 100%; +} + +.content-months { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + margin-block-start: 0.5ex; + gap: 0.75rem; +} + +.content-months > * { + position: relative; +} + +.current-year { + text-box: trim-start cap alphabetic; +} + +details { + background: light-dark(var(--text), var(--background)); + border-radius: 0.25rem; + overflow: hidden; +} +details::details-content { + block-size: 0; + transition: + block-size 1s, + content-visibility 1s; + transition-behavior: allow-discrete; +} + +details:open::details-content { + block-size: auto; +} + +.jr-content .post-title { + display: flex; + flex-direction: row; + align-items: center; + gap: calc(0.75rem + 6px); + left: calc(-0.75rem - 6px - 4ch); + position: relative; +} + +.post-title .title { + display: inline-block; + max-width: max-content; + font-size: var(--font-size-4); +} + +/*.post-title .title a { + text-decoration: none; +}*/ + +.jr-content ul { + --flow-gap: 4rem; +} +.jr-content ul li { + max-inline-size: max-content; +} diff --git a/src/_includes/css/listPage.css b/src/_includes/css/listPage.css index cf70f19..e71ac33 100644 --- a/src/_includes/css/listPage.css +++ b/src/_includes/css/listPage.css @@ -15,7 +15,7 @@ width: 100%; max-width: 100vw; display: grid; - grid-template-columns: 1fr 20ch; + grid-template-columns: 1fr; grid-gap: 2rem; grid-template-rows: auto; min-height: 10rem; @@ -40,25 +40,20 @@ } .links { - grid-column: 2; - grid-row: span 2; + grid-column: 1; display: flex; - flex-direction: column; + flex-direction: row; justify-content: flex-start; align-items: flex-end; height: 100%; gap: 0.75rem; } -.talk > .links { - grid-row: 1; -} - ul:not([class]) li { max-inline-size: 100%; } -:not(nav) > ul > * + * { +:not(nav > nav) > ul > * + * { margin-top: 2.15rem; } @@ -96,37 +91,6 @@ li.note { margin: 0; } -li.note:before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 2px solid var(--blue-4); - animation: list-glitch2 2.5s infinite; - transition: all 0.25s ease; -} - -li.note:after { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 2px solid var(--glitch-off-color, #67f3da); - animation: list-glitch3 2.5s infinite; - transition: all 0.25s ease; -} - -li.note:hover:before, -li.note:hover:after { - height: calc(100% + 2px); -} - ul:has(.note) { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); @@ -139,70 +103,7 @@ ul:has(.note) li:not(.note) { ul:has(.note) li.note { grid-column: span 1; -} - -span.count-posts { - position: relative; - display: inline-block; - padding-left: 1rem; -} - -span.count-posts:before { - content: ""; - position: absolute; - position: absolute; - left: 0ch; - top: 0.75ex; - height: 1ex; - width: 1ex; - border: 2px solid var(--marker-color, var(--blue-4)); -} - -span.count-notes { - position: relative; - display: inline-block; - padding-inline: 0.25rem; -} - -span.count-notes:before { - content: ""; - position: absolute; - border-left: 2px solid; - border-bottom: 2px solid; - border-right: 2px solid; - border-top: 2px solid; - left: 0; - width: 100%; - height: 100%; - transition: all 0.25s ease; - border-color: var(--blue-4); -} - -ul.no-marker li:not(:last-of-type) { - position: relative; -} - -ul.no-marker li:not(:last-of-type)::before, -ul.no-marker li:not(:last-of-type)::after { - content: ""; - position: absolute; - width: 100%; - height: 2px; - border-bottom: 2px solid; - top: calc(100% + 1rem); - left: 0; - overflow: hidden; -} - -ul.no-marker li:not(:last-of-type)::before { - border-color: var(--glitch-off-color, #f16f6f); - animation: list-glitch1 3.5s infinite; -} - -ul.no-marker li:not(:last-of-type)::after { - border-color: var(--glitch-off-color, #67f3da); - animation: list-glitch2 2.5s infinite; - animation-delay: 0.5s; + margin-block-end: 0; } .onecol:has(.toggle:only-child) { @@ -244,40 +145,6 @@ ul.no-marker li:not(:last-of-type)::after { padding: 0; } -li.new { - transition: - height 0.5s ease, - color 2.5s ease; - /* transform: translate3d(0, 0, 0); */ - height: 100%; - color: inherit; - @starting-style { - height: 0; - color: transparent; - /* transform: translate3d(-10rem, 0, 0); */ - } -} - -@media (prefers-reduced-motion: reduce) { - li.new { - transition: background-color 0.75s ease; - background-color: transparent; - @starting-style { - transform: none; - background-color: var(--blue-0); - } - } -} - li:has(article) { margin-block-end: 6rem !important; } - -li:has(article)::before, -li:has(article)::after { - top: calc(100% + 3rem) !important; - height: 0.5px !important; - width: 100% !important; - border: 2px solid var(--marker-color, var(--blue-4)) !important; - transition: 0.2s !important; -} diff --git a/src/_includes/css/post.css b/src/_includes/css/post.css index ff7d06c..ca6bc56 100644 --- a/src/_includes/css/post.css +++ b/src/_includes/css/post.css @@ -43,11 +43,11 @@ section pre { max-inline-size: 80ch; } -.table-of-contents { - margin-block-start: 2.15rem; - padding-block: 1.5rem; - border-top: 2px solid currentColor; - border-bottom: 2px solid currentColor; +.info { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + row-gap: 1rem; } .toc ul > li, @@ -55,12 +55,54 @@ section pre { margin-block-start: 0.5rem; } +:is(.toc, .breadcrumb) ol li { + list-style-type: none; +} + +.toc ol:not(ol ol) { + padding-inline: 0; +} + +.toc ol ol { + font-size: smaller; + padding-block: 0.75rem; +} + +.toc ol > li::before { + content: "↳"; + margin-right: 0.5rem; +} + +.breadcrumb > ol > li { + font-size: var(--font-size-1) !important; +} + +.breadcrumb ol { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + align-items: baseline; + /*gap: 0.5rem;*/ +} + +.breadcrumb ol li { + width: fit-content; +} + +.breadcrumb li:not(:last-child)::after { + display: inline; + margin: 0 0.25rem; + content: "→"; +} + section h2, section h3, section h4 { line-height: 1.35; margin-block: 1.25rem; - max-inline-size: 40ch; + max-inline-size: 60ch; overflow-wrap: anywhere; font-weight: bold; } @@ -71,10 +113,12 @@ section h4[id] { margin-left: -1.5ch; padding-left: 1.5ch; position: relative; + display: inline-block; } .heading-wrapper { position: relative; + display: block; } .heading-wrapper:has(h2, h3) { @@ -86,17 +130,12 @@ section h4[id] { } .heading-wrapper .deeplink { - position: absolute; - inset-inline-start: -1.5ch; - top: -0.65ex; + /*top: -0.65ex;*/ font-size: var(--deeplink-size); color: var(--blue-7); text-decoration: none; + padding-inline-end: 0.5ch; /*opacity: 0.2;*/ - transform: scale(1.2); - transition: - opacity 0.2s, - transform 0.2s; } .heading-wrapper:has(h2[id]) { @@ -112,10 +151,12 @@ section h4[id] { } .heading-wrapper:has(h2[id], h3[id], h4[id]):hover .deeplink { - opacity: 1; + /*opacity: 1; display: block; transform: rotate(90deg) scale(1.5); - top: -0.25ex; + top: -0.25ex;*/ + text-decoration: underline; + cursor: pointer; } @media (prefers-reduced-motion: reduce) { @@ -513,15 +554,14 @@ image-compare img { image-compare:has(+ figcaption:not([data-gaw-remove])) > [slot="image-2"] { border-top: 1.25rem solid var(--blue-7); } - +/* .webmentions { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 2rem; - width: 100%; align-items: center; -} +}*/ .webmentions a { text-decoration: none; @@ -529,12 +569,12 @@ image-compare:has(+ figcaption:not([data-gaw-remove])) > [slot="image-2"] { white-space: initial; } -.webmentions > div { +/*.webmentions > div { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; -} +}*/ .webmentions p { margin-block-start: 0; @@ -628,14 +668,101 @@ p.enlarge { font-size: var(--font-size-4); } +.post-body { + grid-column: 1/-1; + padding-block: calc(3rem); +} + +.pagetitle { + grid-column: -1/1; + animation: fade-title linear both; + animation-timeline: scroll(); + animation-range: 0 150px; +} + +.pagetitle h1 { + max-width: 100%; +} + +.splitview { + row-gap: 1rem; +} + +.lead-box { + padding-block-start: 0 !important; +} + +nav > .table-of-contents { + background: light-dark(var(--text), var(--background)); + position: absolute; + /*margin-inline: auto;*/ + z-index: 10; + /*left: 50%;*/ + /*transform: translateX(-50%);*/ +} + +.table-of-contents ul li { + margin-block: 0 !important; +} + +.table-of-contents .seppa { + margin: 0; +} + +.table-of-contents summary { + display: flex; + align-items: center; + gap: 1ch; + justify-content: center; + flex-direction: row; + border: 2px solid var(--line-color); + width: min-content; + /*margin: 0 auto;*/ + padding: 0.25rem 0.5rem; + font-size: var(--font-size-3); +} + +.table-of-contents[open] summary { + border: none; +} + +.post-body { + transition: + opacity 0.75s, + filter 0.95s; +} + +.splitview:has(.table-of-contents[open]) .post-body { + opacity: 0.5; + filter: blur(3px); + pointer-events: none; +} + +.table-of-contents[open] { + border: 2px solid var(--line-color); + max-width: fit-content; + opacity: 1 !important; + box-shadow: 0 0 10px light-dark(var(--text), var(--background)); +} + +.table-of-contents { + /*padding: 0.25rem 0.5rem;*/ + border: 2px solid transparent; + /*left: 50%; + transform: translateX(-50%);*/ +} + +.table-of-contents nav { + padding-inline: 0.5rem; +} + @media (max-width: 768px) { blockquote { transform: skew(-2deg); } - .heading-wrapper a.deeplink { - top: -2.15ex; - inset-inline-start: 0; + .post-body { + max-width: calc(100vw - 1rem); } .gh-edit { @@ -646,4 +773,23 @@ p.enlarge { .table-wrapper { overflow-x: auto; } + + .table-of-contents[open] { + border: 2px solid var(--line-color); + max-width: fit-content; + opacity: 1 !important; + } + + .table-of-contents { + padding: 0.25rem 0.5rem; + border: 2px solid transparent; + /*left: 50%; + transform: translateX(-50%);*/ + } +} + +@keyframes fade-title { + to { + /*height: 0;*/ + } } diff --git a/src/_includes/layouts/base.liquid b/src/_includes/layouts/base.liquid index e9f87ab..958c7b7 100644 --- a/src/_includes/layouts/base.liquid +++ b/src/_includes/layouts/base.liquid @@ -19,10 +19,6 @@ - - + + + - + + {% comment %} {% include 'partials/header.liquid' %} -
- - - - - - - -
+ {% endcomment %} - - -
- This website is grid-aware, some functionality has changed based on your local energy grid. - Find out more. -
-
{{ content }}
+ {% comment %} {% include 'partials/footer.liquid' %} + {% endcomment %} diff --git a/src/_includes/layouts/post.liquid b/src/_includes/layouts/post.liquid index 91def13..654e915 100644 --- a/src/_includes/layouts/post.liquid +++ b/src/_includes/layouts/post.liquid @@ -3,7 +3,22 @@ layout: layouts/base.liquid css: /css/post.css --- + {% assign date = published %} +{% assign year = date | date: '%Y' %} +{% assign currentYear = "now" | date: '%Y' %} +{% assign month = date | date: '%B' %} +{% assign day = date | date: '%d' %} +{% capture yearPath %} +{% if year == currentYear %} +/ +{% else %} +/{{ year }}/ +{% endif %} +{% endcapture %} +{% assign isNote = tags | find: "note" %} +{% capture type %}{% if isNote == 'note' %}notes{% else %}posts{% endif %}{% endcapture %} + {% unless isPage %} {% unless date %} @@ -18,74 +33,71 @@ css: /css/post.css {% endunless %} {% endunless %} -
- {% if title %} -
- {% unless isPage == true %} - {% assign isNote = tags | find: "note" %} - - {%- if isNote == "note" -%}Note{%- else -%}Post{%- endif -%} - - {% endunless %} -

- {{ title }} -

- {% if date %} -

Published: - -

- {% endif %} +
+
+ {% if title %} + {% unless isPage == true %} +
+ + {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %} + {% if mentions.mentionCount > 0 %} + {% include 'partials/webmentions.liquid' %} + {% endif %} +
+ {% endunless %} +

+ {{ title }} +

+ + + {% endif %} +
- {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %} - {% if mentions.mentionCount > 0 %} - {% include 'partials/webmentions.liquid' %} - {% endif %} - {% capture tableOfContent %} - {{ content | toc }} - {% endcapture %} - {% if tableOfContent %} -
- Table of Contents - {{ content | toc }} -
- {% endif %} -
- {% endif %} -
+
{{ content }} - {% if mentions.comments.size > 0 %} -

Comments

-
- {% for item in mentions.comments %} -
- photo of the author of one of the webmentions for this page -
-
-

{{ item.content }}

- {{ item.author.name }} - {{ item.published | date_to_long_string }} -

-
-
-
- {% endfor %} -
- - {% endif %} + {% unless isPage == true %} + + {% endunless %}
- - {% unless isPage == true %} -
- -
- {% endunless %}
+ + diff --git a/src/_includes/layouts/yearly.liquid b/src/_includes/layouts/yearly.liquid new file mode 100644 index 0000000..f3955af --- /dev/null +++ b/src/_includes/layouts/yearly.liquid @@ -0,0 +1,221 @@ +--- +layout: layouts/base.liquid +css: +- /css/home.css +- /css/listPage.css +--- + + + +
+ + {{ content }} + + {% assign blogYears = years.blogYears | reverse %} + {% assign currentYearPosts = collections.post | sortByPublishedDate | filterOnlyTag: "post", "note"| currentYearWriting: currentYear %} + {% assign currentYearNotes = collections.post | sortByPublishedDate | filterOnlyTag: "note"| currentYearWriting: currentYear %} + {% assign currentYearProjects = projects | currentYearProjects: currentYear %} + {% assign currentYearTalks = talks | currentYearTalks: currentYear %} + {% assign currentYearImages = film | currentYearImages: currentYear %} + + + +
+ +{% if currentYearPosts.size > 0 %} + {% assign sectionId = 'posts' %} + {% assign sectionTitle = 'Posts' %} + {% assign sectionIntro = 'Longer content mostly about digital sustainability.' %} + {% assign sectionExtra = '' %} + + + {% capture sectionContent %} +
    + {% assign postslist = currentYearPosts %} + {% include 'partials/writingList.liquid' %} +
+ {% endcapture %} + {% include 'partials/yearlySection.liquid' %} + {% if currentYearImages.size > 0 %} + {% assign completeRow = currentYearImages.size | minus: 8 %} + {% if completeRow > 8 %} + {% include 'partials/filmstrip.liquid', filmSection: 1 %} + {% endif %} + {% endif %} + {% endif %} + +{% if currentYearNotes.size > 0 %} + {% assign sectionId = 'notes' %} + {% assign sectionTitle = 'Notes' %} + {% assign sectionIntro = 'Short(ish) thoughts and reflections on a variety of topics.' %} + {% assign sectionExtra = '' %} + + {% capture sectionContent %} +
    + {% assign postslist = currentYearNotes %} + {% include 'partials/writingList.liquid' %} +
+ {% endcapture %} + + {% include 'partials/yearlySection.liquid' %} + + {% if currentYearImages.size > 0 %} + {% assign completeRow = currentYearImages.size | minus: 16 %} + {% if completeRow > 8 %} + {% include 'partials/filmstrip.liquid', filmSection: 2 %} + {% endif %} + {% endif %} +{% endif %} + + + + {% if currentYearProjects.size > 0 %} + {% assign sectionId = "projects" %} + {% assign sectionTitle = "Active projects" %} + {% assign sectionIntro = "Projects that I've worked on at one time or another through the year." %} + {% assign sectionExtra = '' %} + {% capture sectionContent %} +
    + {% for project in currentYearProjects %} +
  • + {% if project.archived %} +
    +

    {{ project.title }}

    + + Archived + +
    + {% else %} +

    {{ project.title }}

    + {% endif %} +

    {{ project.shortContent }}

    +
    + {% for link in project.links %} + {{ link.text }} > + {% endfor %} +
    +
    • + {% endfor %} +
+ {% endcapture %} + {% include 'partials/yearlySection.liquid' %} + {% if currentYearImages.size > 0 %} + {% assign completeRow = currentYearImages.size | minus: 24 %} + {% if completeRow > 8 %} + {% include 'partials/filmstrip.liquid', filmSection: 3 %} + {% endif %} + {% endif %} +{% endif %} + + {% if currentYearTalks.size > 0 %} + {% assign sectionId = "talks" %} + {% assign sectionTitle = "Talks" %} + {% assign sectionIntro = "Presentations and talks mostly on the topic of digital sustainability." %} + {% assign sectionExtra = '' %} + {% capture sectionContent %} +
    + {% for item in currentYearTalks %} +
  • +
    +

    {{ item.title }}

    + {{ item.date | date_to_string }} @ {{ item.event }} +
    +

    +
    + {% if item.slides %} + View slides > + {% endif %} + {% if item.video %} + Watch online > + {% endif %} + {% if item.episode %} + Listen online > + {% endif %} +
    +
    • + {% endfor %} +
+ {% endcapture %} + {% include 'partials/yearlySection.liquid' %} + + {% if currentYearImages.size > 0 %} + {% assign completeRow = currentYearImages.size | minus: 32 %} + {% if completeRow > 8 %} + {% include 'partials/filmstrip.liquid', filmSection: 3 %} + {% endif %} + {% endif %} + + {% endif %} + +
+
+ + diff --git a/src/_includes/partials/filmstrip.liquid b/src/_includes/partials/filmstrip.liquid new file mode 100644 index 0000000..96bcfa9 --- /dev/null +++ b/src/_includes/partials/filmstrip.liquid @@ -0,0 +1,21 @@ +{% assign offset = filmSection | minus: 1 | times: 8 %} + + diff --git a/src/_includes/partials/footer.liquid b/src/_includes/partials/footer.liquid index 4028d77..2176b25 100644 --- a/src/_includes/partials/footer.liquid +++ b/src/_includes/partials/footer.liquid @@ -9,24 +9,11 @@
  • Home
    • -
  • - Writing -
    • -
  • - Reading -
    • +
  • Links
    • -
  • - Speaking -
    • -
  • - Projects -
    • -
  • - Grid-aware -
    • +
  • About
    • diff --git a/src/_includes/partials/header.liquid b/src/_includes/partials/header.liquid index 4e54aa5..2b8d1a6 100644 --- a/src/_includes/partials/header.liquid +++ b/src/_includes/partials/header.liquid @@ -1,26 +1,44 @@
    - {% comment %} {% unless title == "Home" %} {% endcomment %}
    -

    Fershad Irani

    +

    Fershad Irani

    Digital Sustainability Consultant
    - {% comment %} {% endunless %} {% endcomment %} - + + + + + +
    diff --git a/src/_includes/partials/webmentions.liquid b/src/_includes/partials/webmentions.liquid index 12cd2ab..318492a 100644 --- a/src/_includes/partials/webmentions.liquid +++ b/src/_includes/partials/webmentions.liquid @@ -1,65 +1,11 @@
    {% if mentions.likes.size > 0 %} - + {{ mentions.likes | size }} Likes{% if mentions.reposts.size > 0 or mentions.mentions.size > 0 %}, {% endif %} {% endif %} - {% if mentions.reposts.size > 0 %} -
    -

    Reposts ({{ mentions.reposts | size }})

    - -
    + {{ mentions.reposts | size }} Reposts{% if mentions.mentions.size > 0 %}, {% endif %} {% endif %} - {% if mentions.mentions.size > 0 %} -
    -

    Mentioned in {{ mentions.mentions | size }} - {% if mentions.mentions.size > 1 %} - posts - {% else %} - post - {% endif %} -

    - -
    - {% endif %} + {{ mentions.mentions | size }} Mentions + {% endif %} since {{ date | date: "%b %d, %Y" }}
    -
    - -
    - - diff --git a/src/_includes/partials/writingList.liquid b/src/_includes/partials/writingList.liquid new file mode 100644 index 0000000..a1720e1 --- /dev/null +++ b/src/_includes/partials/writingList.liquid @@ -0,0 +1,37 @@ +{% for post in postslist %} +{% assign thisPostMonth = post.data.published | date: "%B" %} +{% assign previousPostMonth = post.previous.data.published | date: "%B" %} + + {% assign tags = post.data.tags %} + {% assign isNote = tags | find: "note" %} +
  • +
    + + + {% if post.data.archived %} + + | Archived + + {% endif %} + +

    + {{ post.data.title }} +

    +
    + {% unless post.data.archived %} + {% if post.data.summary %} +

    {{ post.data.summary }}

    + {% endif %} + {% else %} +

    + This post is archived. + {{ post.data.archiveNote }}

    + {% endunless %} +
    • +{% endfor %} diff --git a/src/_includes/partials/yearlySection.liquid b/src/_includes/partials/yearlySection.liquid new file mode 100644 index 0000000..6840ac6 --- /dev/null +++ b/src/_includes/partials/yearlySection.liquid @@ -0,0 +1,33 @@ + + +
    + +
    +
    + 20{{ currentYear | slice: 2,3}} +
    +
    +

    {{ sectionTitle }}

    +

    {{ sectionIntro }}

    +
    +
    +     +
    + +
    + {{ sectionExtra }} + {{ sectionContent }} +
    +
    +
    diff --git a/src/css/glitch.liquid b/src/css/glitch.liquid deleted file mode 100644 index af49af1..0000000 --- a/src/css/glitch.liquid +++ /dev/null @@ -1,6 +0,0 @@ ---- -date: Last Modified -permalink: /css/glitch.css ---- - -{% include "css/glitch.css" %} \ No newline at end of file diff --git a/src/index.liquid b/src/index.liquid deleted file mode 100644 index 1c8fe8a..0000000 --- a/src/index.liquid +++ /dev/null @@ -1,229 +0,0 @@ ---- -layout: layouts/base.liquid -title: Home -description: "Hey, I'm Fershad. I am a digital sustainability consultant working with the Green Web Foundation towards a fossil free internet by 2030." -css: /css/home.css ---- - -
    -
    - Black and white image of a man in a bucket hat and large glasses, his head slightly tilted up with a skeptical look on his face. He appears casual, with sunglasses hanging on the shirt around his neck. -
    -
    -

    Hey, I'm Fershad

    -

    - Hey, I'm Fershad. I am a digital sustainability consultant working with the Green Web Foundation towards - a fossil free internet by 2030. -

    -
    - -
    -
    - -
    -
    -
    -

    Projects

    -

    A few of the best projects I've worked on.

    -
    -
    - - More projects > - -
    -
    -
      - {% for project in currently.projects %} -
    • -

      - {{ project.title }} - - {{ project.shortContent }}

      -
      • - {% endfor %} -
    -
    - -
    - {% assign postslist = collections.post | sortByPublishedDate | slice: 0, 5 %} -
    -
    -

    Writing

    -

    Notes and ideas mostly related to digital sustainability, occasionally other topics.

    -
    - {% if postslist.size > 0 %} -
    - More writing > -
    - {% endif %} -
    -
      - {% for post in postslist %} -
    • - {{ post.data.title }} -
      - {{ post.date | date: "%Y-%m-%d" }} -
      -
      • - {% else %} -
    • -

      There are no posts.

      -
      • - {% endfor %} -
    -
    -
    -
    -
    -

    Reading

    -

    Here's a list of articles I've recently read.

    -
    -
    - - Last updated:
    {{ readwise.updated | date_to_rfc822 }}     -
    - -
    -     -
    -
    - More reading > -
    -
    -
      - {% for article in readwise.reader %} -
    • - {{ article.title }} -
      - {{ article.site_name }} -
      -
      • - {% else %} -
    • -

      There are no articles.

      -
      • - {% endfor %} -
    -
    - -
    -
    - -

    Film

    - I do a bit of film photography while I'm out and about. -     -
    - Get random image > -
    -
    - See more @ film.fershad.com -
    -
    -
    - {{ film.altText }} -
    - -

    {{ film.title }}

    - {{ film.collection }} | {{ film.shortDate | date: "%Y-%m" }} -     -

    {{ film.description | url_decode }}

    - -
    -
    -
    -
    - - - diff --git a/src/projects.liquid b/src/projects.liquid deleted file mode 100644 index b8f9b61..0000000 --- a/src/projects.liquid +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: layouts/list.liquid -title: Projects -description: A few of the projects I'm working on currently, or have released into the wild. ---- -
    -

    Projects

    -

    Below are a few of the projects that I have built, worked on, or released out into the world. You can visit the projects themselves, or check out the links to find out more about each project.

    -
    - -
    - -
    \ No newline at end of file diff --git a/src/reading.liquid b/src/reading.liquid deleted file mode 100644 index 624e9db..0000000 --- a/src/reading.liquid +++ /dev/null @@ -1,88 +0,0 @@ ---- -layout: layouts/list.liquid -title: Reading -description: A list of articles, books, and other resources I've read recently. ---- -
    -

    Reading

    -

    In the recent past, I've tried to be more regular with the amount of reading I get through. Things change fast in tech & sustainability, and whatever knowledge I might posses stands on the blogs of giants way more well informed than me.

    -

    I use - Readwise Reader - to save articles to read, make highlights, and take notes.

    -
    - -
    -

    Articles

    -

    Below is a list of the last 30 articles I've read.

    -
    - - Last updated: {{ readwise.updated | date_to_rfc822 }} - -
    -
    - - -
    - -
      - {% for article in readwise.list %} -
    • - -

      {{ article.title }}

      -       - {{ article.site_name }} | Read on: {{ article.last_opened_at | date_to_string }} -

      {{ article.summary | limitWords }}

      -
      • - {% else %} -
    • -

      There are no articles.

      -
      • - {% endfor %} -
    -
    - - \ No newline at end of file diff --git a/src/talks.liquid b/src/talks.liquid deleted file mode 100644 index bba60dc..0000000 --- a/src/talks.liquid +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: layouts/list.liquid -title: Conferences & podcasts -description: A few of the projects I'm working on currently, or have released into the wild. -permalink: /speaking/index.html ---- -
    -

    Conferences & podcasts

    -

    I enjoy sharing what I've learned about web performance and sustainability. Below are some of the events I'll be at in the near future, as well as previous events I've spoken at or podcasts I've been on.

    -
    - -
    - {% if talks.upcoming.size > 0 %} -

    Upcoming events

    -
      - {% for item in talks.upcoming %} -
    • -
      -

      {{ item.event }}

      - {{ item.date | date_to_string }} -
      - {% if title %} -

      Talk title: {{ item.title }}

      - {% else %} -

      {{ item.description }}

      - {% endif %} -
      - {% if item.url %} - Event website > - {% endif %} -
      -
      • - {% endfor %} -
    - {% endif %} -
    -
    -

    Past events & podcasts

    - {% if talks.past.size > 0 %} -
      - {% for item in talks.past %} -
    • -
      -

      {{ item.title }}

      - {{ item.date | date_to_string }} @ {{ item.event }} -
      -
      - {% if item.slides %} - View slides > - {% endif %} - {% if item.video %} - Watch online > - {% endif %} - {% if item.episode %} - Listen online > - {% endif %} -
      -
      • - {% endfor %} -
    - {% else %} -

    No past events.

    - {% endif %} - \ No newline at end of file diff --git a/src/writing.liquid b/src/writing.liquid deleted file mode 100644 index 70d0aff..0000000 --- a/src/writing.liquid +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Writing -layout: layouts/list.liquid -eleventyExcludeFromCollections: true ---- -
    -
    -

    Writing

    -

    A collection of ideas, inspirations, notes, and blog posts.

    -

    I also keep a list of recent articles I've read over on the - - /reading - -  page of this website.

    -
    - - -
    - - -{% comment %} {% endcomment %} - -
    - - - {% assign postslist = collections.post | sortByPublishedDate %} -
      - {% for post in postslist %} - {% assign tags = post.data.tags %} - {% assign isNote = tags | find: "note" %} -
    • -
      - - {% if isNote == "note" %} - Note - {% else %} - Post - {% endif %} - -
      -

      - {{ post.data.title }} -

      - - - {% assign mentions = webmentions.mentions | webmentionsByUrl: post.url %} - {% if mentions.mentionCount > 0 %} - {% include 'partials/webmentions-mini.liquid' %} - {% endif %} - {% if post.data.archived %} - | - - Archived - - {% endif %} - - {% unless post.data.archived %} - {% if post.data.summary %} -

      {{ post.data.summary }}

      - {% endif %} - {% else %} -

      - This post is archived. - {{ post.data.archiveNote }}

      - {% endunless %} -
      • - {% endfor %} -
    -
    - - diff --git a/src/yearly/index.liquid b/src/yearly/index.liquid new file mode 100644 index 0000000..ecfc546 --- /dev/null +++ b/src/yearly/index.liquid @@ -0,0 +1,32 @@ +--- +pagination: + data: years.blogYears + size: 1 + alias: currentYear +permalink: "{% unless currentYear == years.currentYear %}/{{ currentYear }}/index.html{% else %}/index.html{% endunless %}" +eleventyComputed: + title: "{% unless currentYear == years.currentYear %}{{ currentYear }}{% else %}Home{% endunless %}" + description: "{% unless currentYear == years.currentYear %}An archive of writing and other items from {{ currentYear }}{% else %}Hey, I'm Fershad. I am a digital sustainability consultant working with the Green Web Foundation towards a fossil free internet by 2030.{% endunless %}" +--- + +{% assign currentYear = currentYear %} + +
    + Black and white image of a man in a bucket hat and large glasses, his head slightly tilted up with a skeptical look on his face. He appears casual, with sunglasses hanging on the shirt around his neck. +
    +
    +

    Hey, I'm Fershad

    +

    + A digital sustainability consultant based in 🇹🇼 Taipei, Taiwan. I work with the Green Web Foundation towards + a fossil free internet by 2030. +

    +
    +
    +
    diff --git a/src/yearly/yearly.json b/src/yearly/yearly.json new file mode 100644 index 0000000..e40413c --- /dev/null +++ b/src/yearly/yearly.json @@ -0,0 +1,6 @@ +{ + "layout": "layouts/yearly.liquid", + "hasTOC": false, + "ghEdit": false, + "addAllPagesToCollections": true +}