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;
 }

tailwind.config.js

@@ -15,6 +15,9 @@ module.exports = {
       },      
     },
     extend: {
+      fontFamily: {
+        satoshi: ['Satoshi', 'sans-serif'],
+      },
       typography: {
         DEFAULT: {
           css: {

templates/body_base.html

@@ -4,35 +4,7 @@
 <body>
   <div class="min-h-screen flex flex-col">
     <!-- Navbar -->
-    <nav class="navbar bg-base-200">
+    {% include "navigation_bar.html" %}
-      <div class="container flex mx-auto">
-        <div class="flex-1 flex items-center">
-          <a class="text-2xl text-primary " href="/" hx-boost="true">Minne</a>
-        </div>
-        <div>
-          <ul class="menu menu-horizontal px-1">
-            {% include "theme_toggle.html" %}
-            <li><a hx-boost="true" class="" href="/documentation">Docs</a></li>
-            {% if user %}
-            <li>
-              <details>
-                <summary>Account</summary>
-                <ul class="bg-base-100 rounded-t-none p-2 z-50">
-                  <li><a hx-boost="true" href="/account">Account</a></li>
-                  {% if user.admin %}
-                  <li><a hx-boost="true" href="/admin">Admin</a></li>
-                  {% endif %}
-                  <li><a hx-boost="true" href="/signout">Sign out</a></li>
-                </ul>
-              </details>
-            </li>
-            {% else %}
-            <li><a hx-boost="true" class="" href="/signin">Sign in</a></li>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
-    </nav>
 
     <!-- Main Content -->
     {% block main %}{% endblock %}

templates/documentation/base.html

@@ -1,6 +1,6 @@
 {% extends "body_base.html" %}
 {% block main %}
-<main class="flex justify-center grow mt-2 sm:mt-4">
+<main class="flex justify-center grow mt-2 sm:mt-4 pb-10">
   <div class="container">
     <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-4">
       <!-- Documentation Menu -->

templates/documentation/get_started.html

@@ -13,13 +13,15 @@
     release, open the <code>config.yaml</code> file and set the following configurations:
   </li>
 </ol>
-<pre><code>OPENAI_API_KEY: your_api_key
+<pre><code>
+    OPENAI_API_KEY: your_api_key
     SMTP_EMAIL_RELAYER: your_email_relayer
     SMTP_USERNAME: your_smtp_username
     SMTP_PASSWORD: your_smtp_password
     DB_ADDRESS: your_db_address
     DB_USER: your_db_user
-    DB_PASSWORD: your_db_password</code></pre>
+    DB_PASSWORD: your_db_password
+  </code></pre>
 <p>The database settings relate to a running instance of SurrealDB. You can opt for their cloud solution or run your
   own instance.</p>
 

templates/documentation/index.html

@@ -1,6 +1,6 @@
 {% extends "documentation/base.html" %}
 {% block article %}
-<h1>Documentation</h1>
+<h2>Documentation</h2>
 <p>
   Personalised Knowledge Management (PKM) is a system designed to help individuals organise, store, and retrieve
   information effectively. It empowers users to create a personalised workflow for managing knowledge, enabling
@@ -10,13 +10,17 @@
   This documentation will guide you through the core concepts, tools, and best practices for building and
   maintaining your own PKM system.
 </p>
-<div class="card p-6 rounded-lg shadow-md">
+<div class="card bg-base-200 rounded-lg shadow-md">
-  <h2>Getting Started</h2>
+  <div class="card-body">
-  <p>
+    <h3 class="card-title not-prose">Getting Started</h3>
-    To begin, explore the sections in the navigation menu. Each section provides detailed insights into
+    <p>
-    different
+      To begin, explore the sections in the navigation menu. Each section provides detailed insights into
-    aspects of PKM, from foundational principles to advanced techniques.
+      different
-  </p>
+      aspects of PKM, from foundational principles to advanced techniques.
-  <a href="/documentation/quick-start" class="btn btn-primary text-primary-content" hx-boost="true">Learn More</a>
+    </p>
+    <div class="card-actions">
+      <a href="/documentation/quick-start" class="btn btn-primary text-primary-content" hx-boost="true">Learn More</a>
+    </div>
+  </div>
 </div>
 {% endblock %}

templates/documentation/mobile_friendly.html

@@ -1,8 +1,6 @@
 {% extends 'documentation/base.html' %}
 {% block article %}
-<header>
+<h2>Mobile Friendly Ingression: How to Submit Content from iOS to Minne</h2>
-  <h2>Mobile Friendly Ingression: How to Submit Content from iOS to Minne</h2>
-</header>
 <p>Minne is built with simplicity in mind. Whether you wish to save a file, capture a thought, or share a page,
   submitting content is effortless. Our server provides API access that enables users to perform actions using a
   personalized API key.</p>

templates/documentation/privacy.html

@@ -1,6 +1,6 @@
 {% extends 'documentation/base.html' %}
 {% block article %}
-<h1>Privacy Policy</h1>
+<h2>Privacy Policy</h2>
 <p>We value your privacy and are committed to protecting your personal information. This policy
   outlines how we handle your data and ensures transparency in our practices.</p>
 

templates/head_base.html

@@ -33,4 +33,14 @@
 </head>
 {% block body %}{% endblock %}
 
+<script>
+  (function wait_for_htmx() {
+    if (window.htmx) {
+      htmx.config.globalViewTransitions = true;
+    } else {
+      setTimeout(wait_for_htmx, 50);
+    }
+  })();
+</script>
+
 </html>

templates/index/hero.html

@@ -3,7 +3,7 @@
     <div class="space-y-8">
       <!-- Hero Section -->
       <h1
-        class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-linear-to-r from-primary to-secondary text-transparent bg-clip-text">
+        class="text-5xl sm:text-6xl py-4 pt-10 font-extrabold bg-linear-to-r from-primary to-secondary text-transparent bg-clip-text font-satoshi">
         Simplify Your Knowledge Management
       </h1>
       <p class="text-xl text-base-content/70">

templates/navigation_bar.html

@@ -0,0 +1,29 @@
+<nav class="navbar bg-base-200">
+  <div class="container flex mx-auto">
+    <div class="flex-1 flex items-center">
+      <a class="text-2xl text-primary font-bold" href="/" hx-boost="true">Minne</a>
+    </div>
+    <div>
+      <ul class="menu menu-horizontal px-1">
+        {% include "theme_toggle.html" %}
+        <li><a hx-boost="true" class="" href="/documentation">Docs</a></li>
+        {% if user %}
+        <li>
+          <details>
+            <summary>Account</summary>
+            <ul class="bg-base-100 rounded-t-none p-2 z-50">
+              <li><a hx-boost="true" href="/account">Account</a></li>
+              {% if user.admin %}
+              <li><a hx-boost="true" href="/admin">Admin</a></li>
+              {% endif %}
+              <li><a hx-boost="true" href="/signout">Sign out</a></li>
+            </ul>
+          </details>
+        </li>
+        {% else %}
+        <li><a hx-boost="true" class="" href="/signin">Sign in</a></li>
+        {% endif %}
+      </ul>
+    </div>
+  </div>
+</nav>