feat: satoshi font, frontend styling

assets/font/README.md

@@ -1,43 +0,0 @@
-# Installing Webfonts
-Follow these simple Steps.
-
-## 1.
-Put `satoshi/` Folder into a Folder called `fonts/`.
-
-## 2.
-Put `satoshi.css` into your `css/` Folder.
-
-## 3. (Optional)
-You may adapt the `url('path')` in `satoshi.css` depends on your Website Filesystem.
-
-## 4.
-Import `satoshi.css` at the top of you main Stylesheet.
-
-```
-@import url('satoshi.css');
-```
-
-## 5.
-You are now ready to use the following Rules in your CSS to specify each Font Style:
-```
-font-family: Satoshi-Light;
-font-family: Satoshi-LightItalic;
-font-family: Satoshi-Regular;
-font-family: Satoshi-Italic;
-font-family: Satoshi-Medium;
-font-family: Satoshi-MediumItalic;
-font-family: Satoshi-Bold;
-font-family: Satoshi-BoldItalic;
-font-family: Satoshi-Black;
-font-family: Satoshi-BlackItalic;
-font-family: Satoshi-Variable;
-font-family: Satoshi-VariableItalic;
-
-```
-## 6. (Optional)
-Use `font-variation-settings` rule to controll axes of variable fonts:
-wght 900.0
-
-Available axes:
-'wght' (range from 300.0 to 900.0
-

assets/font/css/satoshi.css

@@ -1,148 +0,0 @@
-/**
-* @license
-*
-* Font Family: Satoshi
-* Designed by: Deni Anggara
-* URL: https://www.fontshare.com/fonts/satoshi
-* © 2025 Indian Type Foundry
-*
-* Satoshi Light 
-* Satoshi LightItalic 
-* Satoshi Regular 
-* Satoshi Italic 
-* Satoshi Medium 
-* Satoshi MediumItalic 
-* Satoshi Bold 
-* Satoshi BoldItalic 
-* Satoshi Black 
-* Satoshi BlackItalic 
-* Satoshi Variable (Variable font)
-* Satoshi VariableItalic (Variable font)
-
-*
-*/
-@font-face {
-  font-family: 'Satoshi-Light';
-  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
-       url('../fonts/Satoshi-Light.woff') format('woff'),
-       url('../fonts/Satoshi-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Satoshi-LightItalic';
-  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
-       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
-       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
-  font-weight: 300;
-  font-display: swap;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Satoshi-Regular';
-  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
-       url('../fonts/Satoshi-Regular.woff') format('woff'),
-       url('../fonts/Satoshi-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Satoshi-Italic';
-  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
-       url('../fonts/Satoshi-Italic.woff') format('woff'),
-       url('../fonts/Satoshi-Italic.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Satoshi-Medium';
-  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
-       url('../fonts/Satoshi-Medium.woff') format('woff'),
-       url('../fonts/Satoshi-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Satoshi-MediumItalic';
-  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
-       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
-       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
-  font-weight: 500;
-  font-display: swap;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Satoshi-Bold';
-  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
-       url('../fonts/Satoshi-Bold.woff') format('woff'),
-       url('../fonts/Satoshi-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Satoshi-BoldItalic';
-  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
-       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
-       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Satoshi-Black';
-  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
-       url('../fonts/Satoshi-Black.woff') format('woff'),
-       url('../fonts/Satoshi-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Satoshi-BlackItalic';
-  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
-       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
-       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
-  font-weight: 900;
-  font-display: swap;
-  font-style: italic;
-}
-/**
-* This is a variable font
-* You can control variable axes as shown below:
-* font-variation-settings: wght 900.0;
-*
-* available axes:
-'wght' (range from 300.0 to 900.0
-*/
-@font-face {
-  font-family: 'Satoshi-Variable';
-  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
-       url('../fonts/Satoshi-Variable.woff') format('woff'),
-       url('../fonts/Satoshi-Variable.ttf') format('truetype');
-  font-weight: 300 900;
-  font-display: swap;
-  font-style: normal;
-}
-/**
-* This is a variable font
-* You can control variable axes as shown below:
-* font-variation-settings: wght 900.0;
-*
-* available axes:
-'wght' (range from 300.0 to 900.0
-*/
-@font-face {
-  font-family: 'Satoshi-VariableItalic';
-  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
-       url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
-       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
-  font-weight: 300 900;
-  font-display: swap;
-  font-style: italic;
-}
-

assets/hi.txt

@@ -1 +0,0 @@
-HI

assets/input.css

@@ -12,7 +12,16 @@
   If we ever want to remove these styles, we need to add an explicit border
   color utility to any element that depends on these defaults.
 */
+
+@view-transition {
+  navigation: auto;
+}
+
 @layer base {
+  body {
+    @apply font-satoshi;
+  }
+
 
   *,
   ::after,
@@ -21,4 +30,125 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentColor);
   }
+}
+
+/* satoshi.css */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Light.woff2') format('woff2'),
+    url('fonts/Satoshi-Light.woff') format('woff'),
+    url('fonts/Satoshi-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-LightItalic.woff2') format('woff2'),
+    url('fonts/Satoshi-LightItalic.woff') format('woff'),
+    url('fonts/Satoshi-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
+    url('fonts/Satoshi-Regular.woff') format('woff'),
+    url('fonts/Satoshi-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Italic.woff2') format('woff2'),
+    url('fonts/Satoshi-Italic.woff') format('woff'),
+    url('fonts/Satoshi-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
+    url('fonts/Satoshi-Medium.woff') format('woff'),
+    url('fonts/Satoshi-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'),
+    url('fonts/Satoshi-MediumItalic.woff') format('woff'),
+    url('fonts/Satoshi-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
+    url('fonts/Satoshi-Bold.woff') format('woff'),
+    url('fonts/Satoshi-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'),
+    url('fonts/Satoshi-BoldItalic.woff') format('woff'),
+    url('fonts/Satoshi-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Black.woff2') format('woff2'),
+    url('fonts/Satoshi-Black.woff') format('woff'),
+    url('fonts/Satoshi-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'),
+    url('fonts/Satoshi-BlackItalic.woff') format('woff'),
+    url('fonts/Satoshi-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
+    url('fonts/Satoshi-Variable.woff') format('woff'),
+    url('fonts/Satoshi-Variable.ttf') format('truetype');
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
+    url('fonts/Satoshi-VariableItalic.woff') format('woff'),
+    url('fonts/Satoshi-VariableItalic.ttf') format('truetype');
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
 }