From e47029bd47e7cf58207b5f19839c52d16ee73d34 Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Mon, 18 Sep 2023 14:12:48 -0700 Subject: [PATCH] Update heading font from Poppins to Aeonik Pro --- src/app.html | 84 ++++++++++++++++++++++++++++ src/routes/+layout.svelte | 59 +++++++++++--------- static/fonts/main.css | 114 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 230 insertions(+), 27 deletions(-) diff --git a/src/app.html b/src/app.html index 6339817a5..293443c06 100644 --- a/src/app.html +++ b/src/app.html @@ -40,6 +40,90 @@ as="font" type="font/woff2" crossorigin /> + + + + + + + + + + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2e9936d85..825667421 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -106,17 +106,18 @@ $: { if (browser) { + const isCloudClass = isCloud ? 'is-cloud' : ''; if ($app.theme === 'auto') { const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)'); if (darkThemeMq.matches) { - document.body.setAttribute('class', `theme-dark`); + document.body.setAttribute('class', `theme-dark ${isCloudClass}`); $app.themeInUse = 'dark'; } else { - document.body.setAttribute('class', `theme-light`); + document.body.setAttribute('class', `theme-light ${isCloudClass}`); $app.themeInUse = 'light'; } } else { - document.body.setAttribute('class', `theme-${$app.theme}`); + document.body.setAttribute('class', `theme-${$app.theme} ${isCloudClass}`); $app.themeInUse = $app.theme; } } @@ -210,31 +211,31 @@ :root { /** Neutral **/ - --color-neutral-0-new: 0 0% 100%; /* #ffffff */ - --color-neutral-5-new: 240 11% 98%; /* #FAFAFB */ - --color-neutral-10-new: 240 9% 94%; /* #EDEDF0 */ - --color-neutral-15-new: 240 4% 85%; /* #D8D8DB */ - --color-neutral-20-new: 240 3% 77%; /* #C3C3C6 */ - - --color-neutral-50-new: 240 2% 52%; /* #818186 */ - --color-neutral-60-new: 240 2% 43%; /* #6C6C71 */ - --color-neutral-70-new: 240 3% 35%; /* #56565C */ - - --color-neutral-80-new: 240 4% 27%; /* #414146 */ - --color-neutral-85-new: 240 4% 18%; /* #2D2D31 */ - --color-neutral-90-new: 240 7% 12%; /* #1D1D21 */ - --color-neutral-100-new: 240 6% 10%; /* #19191C */ + --color-neutral-0-new: 0 0% 100%; /* #ffffff */ + --color-neutral-5-new: 240 11% 98%; /* #FAFAFB */ + --color-neutral-10-new: 240 9% 94%; /* #EDEDF0 */ + --color-neutral-15-new: 240 4% 85%; /* #D8D8DB */ + --color-neutral-20-new: 240 3% 77%; /* #C3C3C6 */ - --color-neutral-0: var(--color-neutral-0-new); - --color-neutral-5: var(--color-neutral-5-new); - --color-neutral-10: var(--color-neutral-10-new); - --color-neutral-30: var(--color-neutral-15-new); - --color-neutral-50: var(--color-neutral-20-new); - - --color-neutral-70: var(--color-neutral-50-new); + --color-neutral-50-new: 240 2% 52%; /* #818186 */ + --color-neutral-60-new: 240 2% 43%; /* #6C6C71 */ + --color-neutral-70-new: 240 3% 35%; /* #56565C */ + + --color-neutral-80-new: 240 4% 27%; /* #414146 */ + --color-neutral-85-new: 240 4% 18%; /* #2D2D31 */ + --color-neutral-90-new: 240 7% 12%; /* #1D1D21 */ + --color-neutral-100-new: 240 6% 10%; /* #19191C */ + + --color-neutral-0: var(--color-neutral-0-new); + --color-neutral-5: var(--color-neutral-5-new); + --color-neutral-10: var(--color-neutral-10-new); + --color-neutral-30: var(--color-neutral-15-new); + --color-neutral-50: var(--color-neutral-20-new); + + --color-neutral-70: var(--color-neutral-50-new); --color-neutral-100: var(--color-neutral-60-new); --color-neutral-120: var(--color-neutral-70-new); - + --color-neutral-150: var(--color-neutral-80-new); --color-neutral-200: var(--color-neutral-85-new); --color-neutral-300: var(--color-neutral-90-new); @@ -246,14 +247,18 @@ // --color-neutral-10: 240 9% 94%; /* #EDEDF0 */ // --color-neutral-15: 240 4% 85%; /* #D8D8DB */ // --color-neutral-20: 240 3% 77%; /* #C3C3C6 */ - + // --color-neutral-50: 240 2% 52%; /* #818186 */ // --color-neutral-60: 240 2% 43%; /* #6C6C71 */ // --color-neutral-70: 240 3% 35%; /* #56565C */ - + // --color-neutral-80: 240 4% 27%; /* #414146 */ // --color-neutral-85: 240 4% 18%; /* #2D2D31 */ // --color-neutral-90: 240 7% 12%; /* #1D1D21 */ // --color-neutral-100: 240 6% 10%; /* #19191C */ } + + .is-cloud { + --heading-font: 'Aeonik Pro', arial, sans-serif; + } diff --git a/static/fonts/main.css b/static/fonts/main.css index af99c1f9d..240a4f285 100644 --- a/static/fonts/main.css +++ b/static/fonts/main.css @@ -45,3 +45,117 @@ font-display: swap; src: url('poppins/poppins-v19-latin-700.woff2') format('woff2'); } + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Air.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-AirItalic.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Thin.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-ThinItalic.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Light.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-LightItalic.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-RegularItalic.woff2') + format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-MediumItalic.woff2') + format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BoldItalic.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Black.woff2') format('woff2'); +} + +@font-face { + font-family: 'Aeonik Pro'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BlackItalic.woff2') format('woff2'); +}