feat: Migrate Fonts imports to the fonts.scss file

Might not be stable

CHANGELOG.md

@@ -20,6 +20,8 @@
 
 - Add two new types of links (`external` and `internal`) with different icons at the end of the link
 
+- Migrate Fonts imports to the `fonts.scss` file (rather then the main TypeScript file)
+
 ## 1.3.3 (2024-04-27)
 
 ### Feature(s)

index.ts

@@ -1,6 +1,5 @@
 import "./Layout.vue";
 import "./styles/index.scss";
-import "inter-ui/inter.css";
-import "inter-ui/inter-variable.css";
-import "non.geist/mono"
-import '@csstools/normalize.css';
+import "non.geist/mono";
+import "@csstools/normalize.css";
+import "sass";

package.json

@@ -1,6 +1,7 @@
 {
   "name": "aplos",
-  "version": "1.3.4-3",
+  "version": "1.3.4-4",
+  "type": "module",
   "description": "A sleek, contemporary, and purposefully designed VitePress theme",
   "main": "index.ts",
   "keywords": [
@@ -27,4 +28,4 @@
     "url": "https://github.com/aplosdev/aplos/issues"
   },
   "homepage": "https://aplos.gxbs.me"
-}
+}

styles/fonts.scss

@@ -0,0 +1,44 @@
+@use "~inter-ui/default" with ($inter-font-display: swap,
+    $inter-font-path: '~inter-ui/web'
+);
+
+@use "~inter-ui/variable" with ($inter-font-display: swap,
+    $inter-font-path: '~inter-ui/variable'
+);
+
+@include default.all;
+@include variable.all;
+
+
+html {
+    font-family: "Inter", sans-serif;
+
+    @supports (font-variation-settings: normal) {
+        font-family: "InterVariable", sans-serif;
+    }
+}
+
+
+:root {
+    font-family: Inter, sans-serif;
+    font-feature-settings: "liga" 1, "calt" 1, "cv05" 1;
+    scroll-behavior: smooth;
+    /* fix for Chrome */
+
+    @supports (font-variation-settings: normal) {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
+body {
+    font-family: Inter, sans-serif;
+    color: var(--color-text);
+    font-size: normal;
+    font-weight: 400;
+    font-synthesis: style;
+    text-rendering: optimizeLegibility;  
+
+    @supports (font-variation-settings: normal) {
+        font-family: InterVariable, sans-serif;
+    }
+}

styles/index.scss

@@ -10,37 +10,15 @@
 @import "medias.scss";
 @import "cards.scss";
 @import "color.scss";
-
-:root {
-  font-family: Inter, sans-serif;
-  font-feature-settings: "liga" 1, "calt" 1, "cv05" 1;
-  scroll-behavior: smooth;
-  /* fix for Chrome */
-}
-
-@supports (font-variation-settings: normal) {
-  :root {
-    font-family: InterVariable, sans-serif;
-  }
-
-  body {
-    font-family: InterVariable, sans-serif;
-  }
-}
+@import "fonts.scss";
 
 *, ::before, ::after {
   box-sizing: border-box;
 }
 
 body {
-  font-family: Inter, sans-serif;
   scroll-behavior: smooth;
   background-color: var(--color-background);
-  color: var(--color-text);
-  font-size: normal;
-  font-weight: 400;
-  font-synthesis: style;
-  text-rendering: optimizeLegibility;
 }
 
 main {