Use Fixel font

navix · Oct 25, 2024 · 1ef11f3 · 1ef11f3
1 parent a5a2ee2
commit 1ef11f3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 24 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,7 +6,7 @@ import starlight from '@astrojs/starlight';
 export default defineConfig({
   integrations: [
     starlight({
-      customCss: ['./src/styles/theme.css', './src/styles/common.css'],
+      customCss: ['./src/fonts/fixel.css', './src/styles/theme.css', './src/styles/common.css'],
       title: 'База знань Bluesky',
       defaultLocale: 'root',
       locales: {

diff --git a/src/fonts/FixelVariable.ttf b/src/fonts/FixelVariable.ttf
diff --git a/src/fonts/FixelVariableItalic.ttf b/src/fonts/FixelVariableItalic.ttf
diff --git a/src/fonts/fixel.css b/src/fonts/fixel.css
@@ -0,0 +1,25 @@
+:root {
+  --sl-font: Segoe UI, Helvetica, Arial, sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    --sl-font: FixelVariable, Segoe UI, Helvetica, Arial, sans-serif;
+    font-optical-sizing: auto;
+  }
+}
+
+@font-face {
+  font-display: swap;
+  font-family: FixelVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('./FixelVariable.ttf') format('truetype');
+}
+@font-face {
+  font-display: swap;
+  font-family: FixelVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  src: url('./FixelVariable.ttf') format('truetype');
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -1,29 +1,29 @@
 /* Dark mode colors. */
 :root {
-    --sl-color-accent-low: #00273c;
-    --sl-color-accent: #0072a3;
-    --sl-color-accent-high: #a0d0ef;
-    --sl-color-white: #ffffff;
-    --sl-color-gray-1: #ebeef5;
-    --sl-color-gray-2: #c5c8d1;
-    --sl-color-gray-3: #9ea4b4;
-    --sl-color-gray-4: #525866;
-    --sl-color-gray-5: #333845;
-    --sl-color-gray-6: #222633;
-    --sl-color-black: #16181e;
+  --sl-color-accent-low: #00273c;
+  --sl-color-accent: #0072a3;
+  --sl-color-accent-high: #a0d0ef;
+  --sl-color-white: #ffffff;
+  --sl-color-gray-1: #ebeef5;
+  --sl-color-gray-2: #c5c8d1;
+  --sl-color-gray-3: #9ea4b4;
+  --sl-color-gray-4: #525866;
+  --sl-color-gray-5: #333845;
+  --sl-color-gray-6: #222633;
+  --sl-color-black: #16181e;
 }
 /* Light mode colors. */
 :root[data-theme='light'] {
-    --sl-color-accent-low: #b9ddf4;
-    --sl-color-accent: #00557a;
-    --sl-color-accent-high: #003751;
-    --sl-color-white: #16181e;
-    --sl-color-gray-1: #222633;
-    --sl-color-gray-2: #333845;
-    --sl-color-gray-3: #525866;
-    --sl-color-gray-4: #858b9b;
-    --sl-color-gray-5: #bfc2ca;
-    --sl-color-gray-6: #ebeef5;
-    --sl-color-gray-7: #f5f6fa;
-    --sl-color-black: #ffffff;
+  --sl-color-accent-low: #b9ddf4;
+  --sl-color-accent: #00557a;
+  --sl-color-accent-high: #003751;
+  --sl-color-white: #16181e;
+  --sl-color-gray-1: #222633;
+  --sl-color-gray-2: #333845;
+  --sl-color-gray-3: #525866;
+  --sl-color-gray-4: #858b9b;
+  --sl-color-gray-5: #bfc2ca;
+  --sl-color-gray-6: #ebeef5;
+  --sl-color-gray-7: #f5f6fa;
+  --sl-color-black: #ffffff;
 }