feat: ✨ add base styling and colors
This commit is contained in:
Sebin Nyshkim
parent
46312cdd1c
commit
a0d2589d97
4 changed files with 642 additions and 0 deletions
34
src/css/base.css
Normal file
34
src/css/base.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
:root {
|
||||
--font-size: 18px;
|
||||
--font-family-headings: 'Sour Gummy', sans-serif;
|
||||
--font-family-copy: 'Poppins', serif;
|
||||
--text-line-height: 1.5;
|
||||
|
||||
--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;
|
||||
|
||||
--textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
|
||||
|
||||
--refimage-max-width: 50rem;
|
||||
|
||||
--transition-color: color 0.5s, background-color 0.5s;
|
||||
|
||||
@media (min-height: 64em) {
|
||||
--page-spacing: 3em;
|
||||
}
|
||||
|
||||
@media (min-width: 80em) {
|
||||
--font-size: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 120em) {
|
||||
--font-size: 24px;
|
||||
}
|
||||
}
|
||||
84
src/css/colors.css
Normal file
84
src/css/colors.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* theme colors */
|
||||
:root {
|
||||
--theme-c-night: oklch(0.19 0.0081 274.48);
|
||||
--theme-c-eerie-black: oklch(0.23 0.0116 274.38);
|
||||
--theme-c-raisin-black: oklch(0.27 0.0148 274.31);
|
||||
--theme-c-gunmetal: oklch(0.31 0.0179 274.27);
|
||||
--theme-c-onyx: oklch(0.35 0.0209 274.23);
|
||||
|
||||
--theme-c-text-light: oklch(0.26 0.0381 19.99);
|
||||
--theme-c-text-dark: oklch(0.95 0.0234 69.6);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--clr-page-background: oklch(from var(--theme-c-night) calc(l * 4.75) c h);
|
||||
--clr-text: var(--theme-c-text-light);
|
||||
|
||||
--clr-nav-background: oklch(from var(--theme-c-raisin-black) calc(l * 2.75) c h);
|
||||
|
||||
--clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
|
||||
--clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
|
||||
|
||||
--clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--clr-page-background: var(--theme-c-night);
|
||||
--clr-text: var(--theme-c-text-dark);
|
||||
|
||||
--clr-nav-background: var(--theme-c-raisin-black);
|
||||
|
||||
--clr-box-background: var(--theme-c-eerie-black);
|
||||
--clr-box-border: var(--theme-c-onyx);
|
||||
|
||||
--clr-color-box-background: var(--theme-c-gunmetal);
|
||||
}
|
||||
}
|
||||
|
||||
.sebin {
|
||||
--clr-accent-1: oklch(0.58 0.1607 32.69); /* scales */
|
||||
--clr-accent-2: oklch(0.78 0.1261 68.88); /* chest */
|
||||
--clr-accent-3: oklch(0.49 0.08 265.23); /* hair */
|
||||
--clr-accent-4: oklch(0.71 0.2289 141.29); /* eyes */
|
||||
--clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
|
||||
--clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */
|
||||
|
||||
--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);
|
||||
}
|
||||
|
||||
.viktor {
|
||||
--clr-accent-1: oklch(0.95 0.0234 69.6);
|
||||
--clr-accent-2: oklch(0.85 0.0471 56.52);
|
||||
--clr-accent-3: oklch(0.35 0.0365 50.88);
|
||||
--clr-accent-4: oklch(0.3 0.0477 22.3);
|
||||
--clr-accent-5: oklch(0.26 0.0381 19.99);
|
||||
--clr-accent-6: oklch(0.9 0.0705 199.31);
|
||||
--clr-accent-7: oklch(0.75 0.0912 228.1);
|
||||
--clr-accent-8: oklch(0.71 0.0848 236.58);
|
||||
--clr-accent-9: oklch(0.4 0.0437 228.49);
|
||||
|
||||
--clr-nav-link-active: var(--clr-accent-7);
|
||||
--clr-heading-underline: var(--clr-accent-7);
|
||||
--clr-heading-data: var(--clr-accent-7);
|
||||
--clr-link: var(--clr-accent-7);
|
||||
--clr-link-underline: var(--clr-accent-7);
|
||||
--clr-timeline-stroke: var(--clr-accent-7);
|
||||
}
|
||||
|
||||
.jarek {
|
||||
--clr-accent-1: oklch(0.69 0.11 71.52);
|
||||
--clr-accent-2: oklch(0.56 0.1 98.83);
|
||||
--clr-accent-3: oklch(0.76 0.03 112.98);
|
||||
--clr-accent-4: oklch(0.81 0.07 74.77);
|
||||
--clr-accent-5: oklch(0.69 0.12 95.34);
|
||||
|
||||
--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);
|
||||
}
|
||||
497
src/css/fonts.css
Normal file
497
src/css/fonts.css
Normal file
|
|
@ -0,0 +1,497 @@
|
|||
/* 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;
|
||||
}
|
||||
27
src/css/style.css
Normal file
27
src/css/style.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
: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;
|
||||
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-family-headings);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue