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

Configure some css variables

Browse Source
This commit is contained in:
prototypa
2023-01-21 22:33:29 -05:00
parent de766602fd
commit b470cf7e16
4 changed files with 19 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/common/CustomStyles.astro Normal file
View File

@ -0,0 +1,13 @@
---
import '@fontsource/inter/variable.css';
---
<style is:inline is:global>
:root {
--aw-font-sans: 'InterVariable';
--aw-font-serif: var(--ph-font-sans);
--aw-font-heading: 'InterVariable';
--aw-color-primary: '';
}
</style>

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

@ -1,5 +0,0 @@
---
import '@fontsource/inter/variable.css';
---
<!-- Or Google Fonts -->

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

@ -8,7 +8,7 @@ import { MetaSEO } from '~/types';
import { getCanonical, getAsset } from '~/utils/permalinks';
import { getRelativeUrlByFilePath } from '~/utils/directories';
import Fonts from '~/components/common/Fonts.astro';
import CustomStyles from '~/components/common/CustomStyles.astro';
import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
export interface Props extends MetaSEO {
@ -82,7 +82,7 @@ const image =
}}
/>
<Fonts />
<CustomStyles />
<!-- Google Site Verification -->
{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}

29
tailwind.config.cjs
View File

@ -10,35 +10,12 @@ module.exports = {
secondary: colors.pink,
},
fontFamily: {
sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans],
serif: ['var(--aw-font-serif)', ...defaultTheme.fontFamily.serif],
heading: ['var(--aw-font-heading)', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/typography')],
darkMode: 'class',
};
/*
Alternative tailwind.config.js
NOTE: Add this fonts to <head>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
*/
// module.exports = {
// content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
// theme: {
// extend: {
// colors: {
// primary: colors.cyan,
// secondary: colors.lime,
// },
// fontFamily: {
// sans: ["'Nunito'", ...defaultTheme.fontFamily.sans],
// },
// },
// },
// plugins: [require("@tailwindcss/typography")],
// darkMode: "class",
// };