From a98028b880ceef65eaa3648d9bd2d476aca40843 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 24 Apr 2025 22:15:10 +0200 Subject: [PATCH] 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 - - - - + + + + + +