mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to @fontsource v5

Browse Source
This commit is contained in:
prototypa
2023-07-27 07:26:16 -04:00
parent 006c332f85
commit 5a716917a3
5 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -21,7 +21,10 @@
"@astrojs/tailwind": "^4.0.0",
"@astrolib/analytics": "^0.3.0",
"@astrolib/seo": "^0.4.0",
"@fontsource/inter": "^4.5.15",
"@fontsource-variable/inter": "^5.0.5",
"@iconify-json/flat-color-icons": "^1.1.6",
"@iconify-json/ri": "^1.1.10",
"@iconify-json/tabler": "^1.1.85",
"@tailwindcss/typography": "^0.5.9",
"@typescript-eslint/eslint-plugin": "^6.2.0",
"@typescript-eslint/parser": "^6.2.0",
@ -43,10 +46,5 @@
},
"engines": {
"node": ">=16.12.0"
},
"dependencies": {
"@iconify-json/flat-color-icons": "^1.1.6",
"@iconify-json/ri": "^1.1.10",
"@iconify-json/tabler": "^1.1.85"
}
}

35
src/components/CustomFonts.astro Normal file
View File

@ -0,0 +1,35 @@
---
import '@fontsource-variable/inter';
// 'DM Sans'
// Nunito
// Dosis
// Outfit
// Roboto
// Literata
// 'IBM Plex Sans'
// Karla
// Poppins
// 'Fira Sans'
// 'Libre Franklin'
// Inconsolata
// Raleway
// Oswald
// 'Space Grotesk'
// Urbanist
---
<style is:inline is:global>
:root {
--aw-font-sans: 'Inter Variable';
--aw-font-serif: var(--aw-font-sans);
--aw-font-heading: var(--aw-font-sans);
--aw-color-primary: rgb(30 64 175);
--aw-color-secondary: rgb(30 58 138);
--aw-color-accent: rgb(109 40 217);
--aw-color-text-page: rgb(17 24 39);
--aw-color-text-muted: rgb(75 85 99);
--aw-color-bg-page: rgb(255 255 255);
}
</style>

8
src/components/CustomStyles.astro → src/components/VariablesCss.astro
View File

@ -1,13 +1,9 @@
---
import '@fontsource/inter/variable.css';
// Nunito
// Dosis
---
<style is:inline is:global>
:root {
--aw-font-sans: 'InterVariable';
--aw-font-sans: 'Inter Variable';
--aw-font-serif: var(--aw-font-sans);
--aw-font-heading: var(--aw-font-sans);
@ -18,4 +14,4 @@ import '@fontsource/inter/variable.css';
--aw-color-text-muted: rgb(75 85 99);
--aw-color-bg-page: rgb(255 255 255);
}
</style>
</style>

5
src/components/common/MetaTags.astro
View File

@ -82,8 +82,6 @@ const image =
}}
/>
<CustomStyles />
<!-- Google Site Verification -->
{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
@ -92,7 +90,4 @@ const image =
{SITE.splitbeeAnalytics?.enabled && <SplitbeeAnalytics {...SITE.splitbeeAnalytics} />}
<link rel="shortcut icon" href={getAsset('/favicon.ico')} />
<link rel="icon" type="image/svg+xml" href={getAsset('/favicon.svg')} />
<link rel="mask-icon" href={getAsset('/favicon.svg')} color="#8D46E7" />
<link rel="sitemap" href={getAsset('/sitemap-index.xml')} />

6
src/layouts/BaseLayout.astro
View File

@ -2,6 +2,9 @@
import '~/assets/styles/base.css';
import MetaTags from '~/components/common/MetaTags.astro';
import Favicons from '~/components/Favicons.astro';
import VariablesCss from "~/components/VariablesCss.astro"
import CustomFonts from "~/components/CustomFonts.astro"
import BasicScripts from '~/components/common/BasicScripts.astro';
import { MetaSEO } from '~/types';
@ -18,6 +21,9 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
<!DOCTYPE html>
<html lang={language} dir={textDirection} class="2xl:text-[20px]">
<head>
<Favicons />
<VariablesCss />
<CustomFonts />
<MetaTags {...meta} />
</head>