Css + fonts..

app/src/main/kotlin/routes/Router.kt

@@ -27,8 +27,9 @@ class Router(
 ) {
     operator fun invoke(): RoutingHttpHandler {
 
+        val resourceLoader = ResourceLoader.Classpath(("/static"))
         val basicRoutes = routes(
-            ImmutableFilter().then(static(ResourceLoader.Classpath(("/static")))),
+            ImmutableFilter().then(static(resourceLoader, "woff2" to ContentType("font/woff2"))),
         )
 
         fun public(request: Request, handler: PublicHandler) = handler(request, request.jwtPayload(contexts))

app/src/main/kotlin/views/BaseView.kt

@@ -35,7 +35,10 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                         </div>
                         <form class="md:space-x-2" id="search">
                         <input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
-                        <span id="buttons"><button disabled="" class="pointer-events-none">search</button><span>clear</span></span>
+                        <span id="buttons">
+                        <button disabled="" class="btn btn-green pointer-events-none">search</button>
+                        <span class="btn btn-red pointer-events-none">clear</span>
+                        </span>
                         </form>
                         <div class="overflow-x-auto">
                           <table id="notes">

app/src/main/kotlin/views/NoteView.kt

@@ -22,7 +22,7 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                 alert(Alert.Warning, it.dataPath.substringAfter('.') + ": " + it.message)
             }
             form(method = FormMethod.post) {
-                textArea(classes = "w-full bg-gray-800 p-5 outline-none font-mono") {
+                textArea {
                     attributes.also {
                         it["rows"] = "20"
                         it["id"] = "markdown"

app/src/main/kotlin/views/View.kt

@@ -25,6 +25,11 @@ abstract class View(staticFileResolver: StaticFileResolver) {
                 meta(name = "viewport", content = "width=device-width, initial-scale=1")
                 title("$title - SimpleNotes")
                 description?.let { meta(name = "description", content = it) }
+                link(rel = "preload", href = "/recursive-0.0.1.woff2"){
+                    attributes["as"] = "font"
+                    attributes["type"] = "font/woff2"
+                    attributes["crossorigin"] = "anonymous"
+                }
                 link(rel = "stylesheet", href = styles)
                 link(rel = "shortcut icon", href = "/favicon.ico", type = "image/x-icon")
                 scripts.forEach { src ->

app/src/main/kotlin/views/components/NoteListHeader.kt

@@ -26,10 +26,10 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") {
         }
         span {
             id = "buttons"
-            button(type = submit) {
+            button(type = submit, classes = "btn btn-green") {
                 +"search"
             }
-            a(href = "/notes") {
+            a(href = "/notes", classes = "btn btn-red") {
                 +"clear"
             }
         }

css/src/button.pcss

@@ -1,9 +1,14 @@
 .btn {
-    @apply font-bold py-2 px-4 rounded;
+    @apply font-semibold py-2 px-4 rounded;
 
     &:focus {
         @apply outline-none shadow-outline;
     }
+
+    &:hover {
+        --CASL: 1;
+        @apply font-extrabold;
+    }
 }
 
 .btn-teal {

css/src/fonts.pcss

@@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'Recursive';
+    font-weight: 300 800;
+    font-display: swap;
+    src: url(/recursive-0.0.1.woff2) format('woff2');
+}
+
+:root {
+    --MONO: 0;
+    --CASL: 0;
+    --slnt: 0;
+    --CRSV: 0.5;
+}
+
+*,
+*:before,
+*:after {
+    font-variation-settings: "MONO" var(--MONO), "CASL" var(--CASL), "slnt" var(--slnt), "CRSV" var(--CRSV);
+}

css/src/navbar.pcss

@@ -6,7 +6,8 @@
         @apply text-2xl text-gray-100 font-bold;
 
         &:hover {
-            @apply text-blue-300;
+            @apply text-blue-300 underline font-extrabold;
+            --CASL: 1;
         }
     }
 
@@ -25,7 +26,8 @@
             @apply text-gray-100 font-semibold;
 
             &:hover {
-                @apply underline text-blue-300;
+                @apply underline text-blue-300 font-bold;
+                --CASL: 1;
             }
         }
     }

css/src/note.pcss

@@ -51,7 +51,7 @@
     ul,
     ol {
         ul {
-            list-style-type: circle;
+            @apply list-disc;
         }
 
         ul,
@@ -76,17 +76,23 @@
         ul,
         ol,
         dl {
-            margin: 0;
+            @apply m-0;
         }
     }
 
     b,
     strong {
-        font-weight: bold;
+        @apply font-bold;
     }
 
     pre {
         @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-800;
+        --MONO: 1;
     }
 
 }
+
+#markdown {
+    @apply w-full bg-gray-800 p-5 outline-none font-mono;
+    --MONO: 1;
+}

css/src/other.pcss

@@ -7,6 +7,7 @@
 
     &:hover {
         @apply bg-teal-800 text-white;
+        --CASL: 1;
     }
 
     &.disabled {

css/src/search.pcss

@@ -13,11 +13,11 @@
         @apply flex flex-1 justify-between mb-2;
 
         button {
-            @apply flex-1 btn btn-green;
+            @apply flex-1;
         }
 
         a, span {
-            @apply ml-2 flex-1 btn btn-red inline-block text-center;
+            @apply ml-2 flex-1 inline-block text-center;
         }
     }
 }

css/src/styles.pcss

@@ -1,3 +1,5 @@
+@import "fonts.pcss";
+
 /*noinspection CssUnknownTarget*/
 @import "tailwindcss/base";
 

css/tailwind.config.js

@@ -5,7 +5,16 @@ module.exports = {
         ]
     },
     theme: {
-        extend: {},
+        fontFamily: {
+            'sans': [
+                'Recursive',
+                'sans-serif',
+            ],
+            'mono': [
+                'Recursive',
+                'monospace'
+            ],
+        }
     },
     variants: {},
     plugins: [],