From f7f62540169f6c4e520a4bc4c9a9c45782e71b9e Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sun, 7 Apr 2024 00:26:03 +0100
Subject: [PATCH] better htmx, better css

---
 public/index.html     | 18 ++++++++++++--
 public/links.html     |  6 ++---
 public/paste.html     |  6 ++---
 public/style/main.css | 57 +++++++++++++++++++++++++------------------
 4 files changed, 55 insertions(+), 32 deletions(-)
diff --git a/public/index.html b/public/index.html
index f8bfc76..a7e65db 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
         </head>
         <body>
                 <header>
-                        <nav hx-boost="true" hx-target="body">
+                        <nav hx-boost="true" hx-target="body" hx-swap="outerHTML show:window:top">
                                 <a href="/">home</a>
                                 <span aria-hidden="true">-</span>
                                 <a href="/links">links</a>
@@ -26,7 +26,7 @@
                                 <a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
                         </nav>
                 </header>
-                <main>
+                <main class="center-content">
                         <div class="title-icon">
                                 <img src="/img/icon-light.svg" class="icon-light" width=64 height=64 />
                                 <img src="/img/icon-dark.svg" class="icon-dark" width=64 height=64 />
@@ -38,6 +38,20 @@
                         <br>
                         check back later for updates!
                         </p>
+                        <button id="friendly-button">friendly button</button>
+                        <script>
+                                const button = document.getElementById("friendly-button");
+                                let clicks = 0;
+                                let saved_clicks = window.localStorage.getItem("friendly-button-clicks");
+                                if (saved_clicks) {
+                                        clicks = saved_clicks;
+                                        button.innerText = `clicked ${clicks} times!`;
+                                }
+                                button.addEventListener("click", () => {
+                                        button.innerText = `clicked ${++clicks} times!`;
+                                        window.localStorage.setItem("friendly-button-clicks", clicks);
+                                });
+                        </script>
                 </main>
                 <footer>
                         <p>
diff --git a/public/links.html b/public/links.html
index 71acf60..f72fb35 100644
--- a/public/links.html
+++ b/public/links.html
@@ -12,11 +12,11 @@
                 <meta property="og:url" content="https://bliss.town/links" />
 
                 <link rel="stylesheet" type="text/css" href="/style/main.css">
-                <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+                <script type="application/javascript" src="/script/vendor/htmx.min.js"></script>
         </head>
         <body>
                 <header>
-                        <nav hx-boost="true" hx-target="body">
+                        <nav hx-boost="true" hx-target="body" hx-swap="outerHTML show:window:top">
                                 <a href="/">home</a>
                                 <span aria-hidden="true">-</span>
                                 <a href="/links">links</a>
@@ -26,7 +26,7 @@
                                 <a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
                         </nav>
                 </header>
-                <main>
+                <main class="center-content">
                         <h1><span aria-hidden="true">🔗</span><br>bliss<span class="col-primary-bg">.</span>town shortlinks</h1>
                         <hr>
                         <p>
diff --git a/public/paste.html b/public/paste.html
index 671c135..aa41184 100644
--- a/public/paste.html
+++ b/public/paste.html
@@ -12,11 +12,11 @@
                 <meta property="og:url" content="https://bliss.town/paste" />
 
                 <link rel="stylesheet" type="text/css" href="/style/main.css">
-                <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+                <script type="application/javascript" src="/script/vendor/htmx.min.js"></script>
         </head>
         <body>
                 <header>
-                        <nav hx-boost="true" hx-target="body">
+                        <nav hx-boost="true" hx-target="body" hx-swap="outerHTML show:window:top">
                                 <a href="/">home</a>
                                 <span aria-hidden="true">-</span>
                                 <a href="/links">links</a>
@@ -26,7 +26,7 @@
                                 <a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
                         </nav>
                 </header>
-                <main>
+                <main class="center-content">
                         <h1><span aria-hidden="true">📝</span><br>bliss<span class="col-primary-bg">.</span>town pastebin</h1>
                         <hr>
                         <p>
diff --git a/public/style/main.css b/public/style/main.css
index fb8cc7b..fb50a61 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -16,10 +16,31 @@
         }
 }
 
+body {
+        margin: 0;
+        padding: 0;
+
+        font-family: "Lora", serif;
+        font-size: 20px;
+
+        color: var(--foreground);
+        background-color: var(--background);
+
+        transition: color .2s linear, background-color .2s linear;
+}
+
 header {
+        position: fixed;
+        top: 1em;
+        left: 50%;
+        transform: translateX(-50%);
         width: min(900px, calc(100vw - 4rem));
         margin: 0 auto;
+        padding: .5em 0;
+        border-radius: 2em;
         text-align: center;
+        backdrop-filter: blur(1em);
+        z-index: 100;
 }
 
 header nav {
@@ -31,31 +52,10 @@ header nav span {
         color: var(--primary-fg);
 }
 
-body {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        min-height: 100vh;
-        margin: 0;
-        padding: 0;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        font-family: "Lora", serif;
-        font-size: 1.5rem;
-
-        color: var(--foreground);
-        background-color: var(--background);
-
-        transition: color .2s linear, background-color .2s linear;
-}
-
 main {
         width: min(720px, calc(100vw - 4rem));
+        min-height: calc(100vh - 8.3em);
+        margin: 3em auto 0 auto;
         text-align: center;
 }
 
@@ -84,8 +84,16 @@ main {
         }
 }
 
+.center-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+}
+
 hr {
-        margin: 2rem 0;
+        width: 100%;
+        margin: 1em 0;
         border-width: 1px 0 0 0;
 }
 hr::after {
@@ -133,6 +141,7 @@ button:active {
 footer {
         width: min(900px, calc(100vw - 4rem));
         margin: 0 auto;
+        padding: 1em 0;
         text-align: center;
         opacity: .5;
         transition: opacity .1s ease-out;
