From a98028b880ceef65eaa3648d9bd2d476aca40843 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 24 Apr 2025 22:15:10 +0200 Subject: [PATCH 1/3] refactor: :truck: move css into pluggable components --- eleventy.config.js | 2 +- src/components/head/page-head-base.webc | 29 ++ src/components/head/page-head-colors.webc | 130 ++++++ src/components/head/page-head-fonts.webc | 504 ++++++++++++++++++++++ src/components/head/page-head-style.webc | 32 ++ src/css/base.css | 28 -- src/css/colors.css | 128 ------ src/css/fonts.css | 497 --------------------- src/css/style.css | 30 -- src/layouts/base.webc | 10 +- 10 files changed, 702 insertions(+), 688 deletions(-) create mode 100644 src/components/head/page-head-base.webc create mode 100644 src/components/head/page-head-colors.webc create mode 100644 src/components/head/page-head-fonts.webc create mode 100644 src/components/head/page-head-style.webc delete mode 100644 src/css/base.css delete mode 100644 src/css/colors.css delete mode 100644 src/css/fonts.css delete mode 100644 src/css/style.css diff --git a/eleventy.config.js b/eleventy.config.js index 2f4ceee..54f899c 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -32,7 +32,7 @@ export default async function (eleventyConfig) { ); eleventyConfig.addPlugin(eleventyPluginWebc, { - components: ['src/components/*.webc', 'npm:@11ty/eleventy-img/*.webc'] + components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc'] }); eleventyConfig.addPlugin(eleventyPluginNavigation); eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS); diff --git a/src/components/head/page-head-base.webc b/src/components/head/page-head-base.webc new file mode 100644 index 0000000..38d16c9 --- /dev/null +++ b/src/components/head/page-head-base.webc @@ -0,0 +1,29 @@ + diff --git a/src/components/head/page-head-colors.webc b/src/components/head/page-head-colors.webc new file mode 100644 index 0000000..e84b6e8 --- /dev/null +++ b/src/components/head/page-head-colors.webc @@ -0,0 +1,130 @@ + diff --git a/src/components/head/page-head-fonts.webc b/src/components/head/page-head-fonts.webc new file mode 100644 index 0000000..9402a11 --- /dev/null +++ b/src/components/head/page-head-fonts.webc @@ -0,0 +1,504 @@ + diff --git a/src/components/head/page-head-style.webc b/src/components/head/page-head-style.webc new file mode 100644 index 0000000..2a15fe5 --- /dev/null +++ b/src/components/head/page-head-style.webc @@ -0,0 +1,32 @@ + diff --git a/src/css/base.css b/src/css/base.css deleted file mode 100644 index 43144db..0000000 --- a/src/css/base.css +++ /dev/null @@ -1,28 +0,0 @@ -:root { - --font-size: 18px; - --font-family-headings: 'Sour Gummy', sans-serif; - --font-family-copy: 'Poppins', serif; - - --page-spacing: 1em; - - --container-spacing-top-safe: max(1rem, env(safe-area-inset-top)); - --container-spacing-right-safe: max(1rem, env(safe-area-inset-right)); - --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom)); - --container-spacing-left-safe: max(1rem, env(safe-area-inset-left)); - - --border-thin: 0.0625em; - --border-radius: 0.75em; - - - @media (min-height: 64em) { - --page-spacing: 3em; - } - - @media (min-width: 80em) { - --font-size: 20px; - } - - @media (min-width: 120em) { - --font-size: 24px; - } -} diff --git a/src/css/colors.css b/src/css/colors.css deleted file mode 100644 index ed43c56..0000000 --- a/src/css/colors.css +++ /dev/null @@ -1,128 +0,0 @@ -/* theme colors */ -:root { - --base-luminance: 20%; - --base-chroma: 0.01; - --base-hue: 275deg; - - --theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue)); - - --theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h); - --theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h); - --theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h); - --theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h); - --theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h); - --theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h); - --theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h); - --theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h); - --theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h); - --theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h); - --theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h); - --theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h); - --theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h); - --theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h); - --theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h); - --theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h); - --theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h); - --theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h); - --theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h); -} - -/* semantic color variables for this project */ -:root { - --clr-page-background: var(--theme-c-primary-100); - --clr-text: var(--theme-c-primary-900); - - --clr-nav-background: var(--theme-c-primary-200); - --clr-nav-border: var(--theme-c-primary-250); - --clr-nav-link-hover: var(--theme-c-primary-400); - - --clr-box-background: var(--theme-c-primary-150); - --clr-box-border: var(--theme-c-primary-250); - --clr-box-shadow: var(--theme-c-primary-200); - --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h); - --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h); - - --clr-color-box-background: var(--theme-c-primary-200); - - --clr-quick-info-bg-start: var(--theme-c-primary-100); - --clr-quick-info-bg-end: var(--theme-c-primary-150); - - @media (prefers-color-scheme: dark) { - --clr-page-background: var(--theme-c-primary-850); - --clr-text: var(--theme-c-primary-100); - - --clr-nav-background: var(--theme-c-primary-700); - --clr-nav-border: var(--theme-c-primary-650); - --clr-nav-link-hover: var(--theme-c-primary-500); - - --clr-box-background: var(--theme-c-primary-750); - --clr-box-border: var(--theme-c-primary-700); - --clr-box-shadow: var(--theme-c-primary-800); - - --clr-color-box-background: var(--theme-c-primary-700); - - --clr-quick-info-bg-start: var(--theme-c-primary-700); - --clr-quick-info-bg-end: var(--theme-c-primary-750); - } -} - -.sebin { - --clr-accent-1: oklch(58% 0.16 33deg); /* scales */ - --clr-accent-2: oklch(78% 0.13 68deg); /* chest */ - --clr-accent-3: oklch(49% 0.08 265deg); /* hair */ - --clr-accent-4: oklch(71% 0.23 141deg); /* eyes */ - --clr-accent-5: oklch(36% 0.01 17deg); /* horns */ - --clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */ - - --clr-selection: var(--clr-accent-1); - --clr-selection-text: var(--theme-c-primary-100); - --clr-nav-link-active: var(--clr-accent-1); - --clr-heading-underline: var(--clr-accent-1); - --clr-heading-data: var(--clr-accent-1); - --clr-link: var(--clr-accent-1); - --clr-link-underline: var(--clr-accent-1); - --clr-gallery-indicator: var(--clr-accent-1); -} - -.viktor { - --clr-accent-1: oklch(85% 0.04 56deg); /* front */ - --clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */ - --clr-accent-3: oklch(30% 0.04 22deg); /* back main */ - --clr-accent-4: oklch(26% 0.03 19deg); /* back spine */ - --clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */ - --clr-accent-6: oklch(95% 0.02 69deg); /* tail club */ - --clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */ - --clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */ - - --clr-selection: var(--clr-accent-8); - --clr-selection-text: var(--theme-c-primary-100); - --clr-nav-link-active: var(--clr-accent-8); - --clr-heading-underline: var(--clr-accent-8); - --clr-heading-data: var(--clr-accent-8); - --clr-link: var(--clr-accent-8); - --clr-link-underline: var(--clr-accent-8); - --clr-timeline-stroke: var(--clr-accent-8); - --clr-gallery-indicator: var(--clr-accent-8); - - @media (prefers-color-scheme: light) { - --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h); - } -} - -.jarek { - --clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */ - --clr-accent-2: oklch(56% 0.1 98deg); /* mane */ - --clr-accent-3: oklch(76% 0.03 112deg); /* eyes */ - --clr-accent-4: oklch(81% 0.07 74deg); /* horn */ - --clr-accent-5: oklch(84% 0.07 111deg); /* trii */ - --clr-accent-6: oklch(69% 0.12 95deg); /* naughty */ - - --clr-selection: var(--clr-accent-1); - --clr-selection-text: var(--theme-c-primary-100); - --clr-nav-link-active: var(--clr-accent-1); - --clr-heading-underline: var(--clr-accent-1); - --clr-heading-data: var(--clr-accent-1); - --clr-link: var(--clr-accent-1); - --clr-link-underline: var(--clr-accent-1); - --clr-gallery-indicator: var(--clr-accent-1); -} diff --git a/src/css/fonts.css b/src/css/fonts.css deleted file mode 100644 index 89b13ec..0000000 --- a/src/css/fonts.css +++ /dev/null @@ -1,497 +0,0 @@ -/* poppins-thin-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 100; - font-stretch: 100%; - src: local('Poppins Thin'), local('Poppins-Thin'), url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-thin-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 100; - font-stretch: 100%; - src: local('Poppins Thin'), local('Poppins-Thin'), - url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-light-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 300; - font-stretch: 100%; - src: local('Poppins Light'), local('Poppins-Light'), - url(../fonts/poppins/poppins-light-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-light-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 300; - font-stretch: 100%; - src: local('Poppins Light'), local('Poppins-Light'), - url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-medium-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 500; - font-stretch: 100%; - src: local('Poppins Medium'), local('Poppins-Medium'), - url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-medium-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 500; - font-stretch: 100%; - src: local('Poppins Medium'), local('Poppins-Medium'), - url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/poppins/poppins-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - src: local('Poppins Regular'), local('Poppins-Regular'), - url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-extralight-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 200; - font-stretch: 100%; - src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'), - url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-extralight-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 200; - font-stretch: 100%; - src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'), - url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-black-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 900; - font-stretch: 100%; - src: local('Poppins Black'), local('Poppins-Black'), - url(../fonts/poppins/poppins-black-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-black-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 900; - font-stretch: 100%; - src: local('Poppins Black'), local('Poppins-Black'), - url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-semibold-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-stretch: 100%; - src: local('Poppins SemiBold'), local('Poppins-SemiBold'), - url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-semibold-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-stretch: 100%; - src: local('Poppins SemiBold'), local('Poppins-SemiBold'), - url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-bold-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 700; - font-stretch: 100%; - src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-bold-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 700; - font-stretch: 100%; - src: local('Poppins Bold'), local('Poppins-Bold'), - url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-extrabold-latin */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 800; - font-stretch: 100%; - src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'), - url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-extrabold-latin-ext */ -@font-face { - font-family: Poppins; - font-style: normal; - font-weight: 800; - font-stretch: 100%; - src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'), - url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-thin-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 100; - font-stretch: 100%; - src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'), - url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-thin-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 100; - font-stretch: 100%; - src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'), - url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-extralight-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 200; - font-stretch: 100%; - src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'), - url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-extralight-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 200; - font-stretch: 100%; - src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'), - url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-light-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 300; - font-stretch: 100%; - src: local('Poppins Light Italic'), local('Poppins-LightItalic'), - url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-light-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 300; - font-stretch: 100%; - src: local('Poppins Light Italic'), local('Poppins-LightItalic'), - url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-medium-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 500; - font-stretch: 100%; - src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'), - url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-medium-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 500; - font-stretch: 100%; - src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'), - url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-semibold-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 600; - font-stretch: 100%; - src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'), - url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-semibold-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 600; - font-stretch: 100%; - src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'), - url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-bold-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 700; - font-stretch: 100%; - src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'), - url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-bold-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 700; - font-stretch: 100%; - src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'), - url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-extrabold-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 800; - font-stretch: 100%; - src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'), - url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-extrabold-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 800; - font-stretch: 100%; - src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'), - url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 400; - font-stretch: 100%; - src: local('Poppins Italic'), local('Poppins-Italic'), - url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 400; - font-stretch: 100%; - src: local('Poppins Italic'), local('Poppins-Italic'), - url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* poppins-black-italic-latin */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 900; - font-stretch: 100%; - src: local('Poppins Black Italic'), local('Poppins-BlackItalic'), - url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, - U+2074, U+20AC, U+2122, U+2212, U+2215; - font-display: swap; -} - -/* poppins-black-italic-latin-ext */ -@font-face { - font-family: Poppins; - font-style: italic; - font-weight: 900; - font-stretch: 100%; - src: local('Poppins Black Italic'), local('Poppins-BlackItalic'), - url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; - font-display: swap; -} - -/* latin-ext */ -@font-face { - font-family: 'Sour Gummy'; - font-style: italic; - font-weight: 100 900; - font-stretch: 100%; - font-display: swap; - src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2) - format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, - U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, - U+2C60-2C7F, U+A720-A7FF; -} - -/* latin */ -@font-face { - font-family: 'Sour Gummy'; - font-style: italic; - font-weight: 100 900; - font-stretch: 100%; - font-display: swap; - src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, - U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -/* latin-ext */ -@font-face { - font-family: 'Sour Gummy'; - font-style: normal; - font-weight: 100 900; - font-stretch: 100%; - font-display: swap; - src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2) format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, - U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, - U+2C60-2C7F, U+A720-A7FF; -} - -/* latin */ -@font-face { - font-family: 'Sour Gummy'; - font-style: normal; - font-weight: 100 900; - font-stretch: 100%; - font-display: swap; - src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, - U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index c0db3a8..0000000 --- a/src/css/style.css +++ /dev/null @@ -1,30 +0,0 @@ -:root { - font-family: var(--font-family-copy); - font-size: var(--font-size); -} - -* { - box-sizing: border-box; -} - -body { - background-color: var(--clr-page-background); - color: var(--clr-text); - - margin: 0; - min-height: 100dvh; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: var(--font-family-headings); -} - -::selection { - color: var(--clr-selection-text); - background-color: var(--clr-selection); -} diff --git a/src/layouts/base.webc b/src/layouts/base.webc index 4a3f038..99198b5 100644 --- a/src/layouts/base.webc +++ b/src/layouts/base.webc @@ -4,10 +4,12 @@ Character Ref - - - - + + + + + + From c0b42b82d040dece87c8f01c09a108b7f272c376 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 24 Apr 2025 23:40:45 +0200 Subject: [PATCH 2/3] fix: :bug: make end detection more robust Smooth scrolling messes with the detection of isAtEnd. Introduce a debounce to delay updateActiveStates until scroll has actually finished. --- src/components/ref-gallery.webc | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/ref-gallery.webc b/src/components/ref-gallery.webc index 7e139b4..e9999c2 100644 --- a/src/components/ref-gallery.webc +++ b/src/components/ref-gallery.webc @@ -8,6 +8,20 @@ const TOLERANCE = 2; + const debounce = (fn, delay = 300) => { + let timer = 0; + const debounced = (...args) => { + if (!args) args = []; + clearTimeout(timer); + + timer = setTimeout(() => { + fn.apply(fn, args); + }, delay); + }; + + return debounced; + }; + const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE; const isAtEnd = () => { const { scrollLeft, offsetWidth, scrollWidth } = track; @@ -41,12 +55,7 @@ const prev = () => scrollToIndex(currentIndex - 1); const next = () => scrollToIndex(currentIndex + 1); - const resizeObserver = new ResizeObserver(() => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - scrollToIndex(currentIndex); - }, 100); - }); + const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex))); resizeObserver.observe(track); const galleryObserver = new IntersectionObserver( @@ -89,6 +98,7 @@ images.forEach((el) => galleryObserver.observe(el)); prevButton.addEventListener('click', prev); nextButton.addEventListener('click', next); + track.addEventListener('scroll', () => debounce(updateActiveStates(currentIndex))); document.addEventListener('DOMContentLoaded', () => initializeGallery()); From aa410f916a15e897be9531652f61cfff644005f0 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Fri, 25 Apr 2025 00:15:50 +0200 Subject: [PATCH 3/3] refactor: :recycle: use more of the webc feature set proper --- src/components/abilities.webc | 73 +++++----- src/components/card.webc | 100 +++++++------ src/components/colors.webc | 107 +++++++------- src/components/navigation.webc | 178 +++++++++++----------- src/components/page-content.webc | 94 ++++++------ src/components/profile.webc | 79 +++++----- src/components/quick-info.webc | 42 +++--- src/components/ref-gallery.webc | 243 +++++++++++++++---------------- src/components/ref-img.webc | 43 +++--- src/components/timeline.webc | 110 +++++++------- src/components/traits.webc | 100 ++++++------- src/index.webc | 2 +- src/jarek/anatomy.md | 2 +- src/layouts/character.webc | 6 +- src/sebin/abilities.md | 6 +- src/sebin/anatomy.md | 131 +++++++---------- src/sebin/clothing.md | 13 +- src/sebin/overdrive.md | 27 ++-- src/viktor/anatomy.md | 39 ++--- src/viktor/career.md | 2 +- src/viktor/index.md | 4 +- 21 files changed, 678 insertions(+), 723 deletions(-) diff --git a/src/components/abilities.webc b/src/components/abilities.webc index 8635535..2aa9fcd 100644 --- a/src/components/abilities.webc +++ b/src/components/abilities.webc @@ -1,4 +1,4 @@ -
+
Here you would see an illustration… If I had one… -
-

-

+
+

+

- diff --git a/src/components/card.webc b/src/components/card.webc index 7330557..0d63978 100644 --- a/src/components/card.webc +++ b/src/components/card.webc @@ -1,4 +1,4 @@ - +
@@ -8,8 +8,8 @@
- diff --git a/src/components/colors.webc b/src/components/colors.webc index e2cbe73..30b81de 100644 --- a/src/components/colors.webc +++ b/src/components/colors.webc @@ -1,4 +1,4 @@ -
    +
    • @@ -6,8 +6,8 @@
    - diff --git a/src/components/navigation.webc b/src/components/navigation.webc index d5e40b6..668f0e6 100644 --- a/src/components/navigation.webc +++ b/src/components/navigation.webc @@ -1,28 +1,28 @@ -