Configure some css variables

cheezovsky · Jan 22, 2023 · b470cf7 · b470cf7
1 parent de76660
commit b470cf7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 34 deletions.
diff --git a/src/components/common/CustomStyles.astro b/src/components/common/CustomStyles.astro
@@ -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>
diff --git a/src/components/common/Fonts.astro b/src/components/common/Fonts.astro
diff --git a/src/components/common/MetaTags.astro b/src/components/common/MetaTags.astro
@@ -5,10 +5,10 @@ import { getImage } from '@astrojs/image';
 
 import { SITE } from '~/config.mjs';
 import { MetaSEO } from '~/types';
-import { getCanonical, getAsset  } from '~/utils/permalinks';
+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} />}

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -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",
-// };