SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: 🚚 move css into pluggable components

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-24 22:15:10 +02:00
parent 54b3304f2f
commit a98028b880
10 changed files with 702 additions and 688 deletions
Download patch file Download diff file Expand all files Collapse all files

2
eleventy.config.js
View file

@ -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);

29
src/components/head/page-head-base.webc Normal file
View file

@ -0,0 +1,29 @@
<style>
: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;
}
}
</style>

130
src/components/head/page-head-colors.webc Normal file
View file

@ -0,0 +1,130 @@
<style>
/* 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);
}
</style>

504
src/components/head/page-head-fonts.webc Normal file
View file

@ -0,0 +1,504 @@
<style>
/* 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;
}
</style>

32
src/components/head/page-head-style.webc Normal file
View file

@ -0,0 +1,32 @@
<style>
: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);
}
</style>

28
src/css/base.css
View file

@ -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;
}
}

128
src/css/colors.css
View file

@ -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);
}

497
src/css/fonts.css
View file

@ -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;
}

30
src/css/style.css
View file

@ -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);
}

10
src/layouts/base.webc
View file

@ -4,10 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character Ref</title>
<link rel="stylesheet" href="../css/base.css" />
<link rel="stylesheet" href="../css/fonts.css" />
<link rel="stylesheet" href="../css/colors.css" />
<link rel="stylesheet" href="../css/style.css" />
<template webc:is="page-head-base" webc:nokeep></template>
<template webc:is="page-head-fonts" webc:nokeep></template>
<template webc:is="page-head-colors" webc:nokeep></template>
<template webc:is="page-head-style" webc:nokeep></template>
<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
</head>