From 55320829daa352b1a8806756bc2af525299407df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:22:49 +0200
Subject: [PATCH] add border around normal button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/button.njk     | 9 ++++++++-
 frontend/src/components/nav.njk        | 2 +-
 frontend/src/components/pagination.njk | 4 ++--
 frontend/src/layouts/main.njk          | 2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/button.njk b/frontend/src/components/button.njk
index c1abaab..26141d7 100644
--- a/frontend/src/components/button.njk
+++ b/frontend/src/components/button.njk
@@ -9,8 +9,10 @@
         button, a {
             align-content: center;
             background-color: transparent;
+            border-color: var(--light-gray);
             border-radius: var(--button-border-radius);
-            border-style: none;
+            border-style: solid;
+            border-width: 0.1rem;
             color: var(--light-gray);
             display: grid;
             font-weight: 600;
@@ -21,8 +23,13 @@
             width: 100%;
         }
 
+        :host([transparent]) button, :host([transparent]) a {
+            border-style: none;
+        }
+
         :host([selected]) button, :host([selected]) a {
             background-color: var(--light-gray);
+            border-style: none;
             color: var(--gray);
             font-weight: 800;
         }
diff --git a/frontend/src/components/nav.njk b/frontend/src/components/nav.njk
index 14dda98..c200c3c 100644
--- a/frontend/src/components/nav.njk
+++ b/frontend/src/components/nav.njk
@@ -128,7 +128,7 @@
             </a>
             <slot>
             </slot>
-            <tesoft-button class="small-menu">
+            <tesoft-button class="small-menu" transparent>
                 <span></span>
 
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
diff --git a/frontend/src/components/pagination.njk b/frontend/src/components/pagination.njk
index d8d1995..f17c525 100644
--- a/frontend/src/components/pagination.njk
+++ b/frontend/src/components/pagination.njk
@@ -20,7 +20,7 @@
     </style>
 
     <div>
-        <tesoft-button class="prev" disabled>
+        <tesoft-button class="prev" disabled transparent>
             <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem" fill="#000000">
                 <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
             </svg>
@@ -28,7 +28,7 @@
         <div class="cur-page">
             1
         </div>
-        <tesoft-button class="next" disabled>
+        <tesoft-button class="next" disabled transparent>
             <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem" fill="#000000">
                 <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
             </svg>
diff --git a/frontend/src/layouts/main.njk b/frontend/src/layouts/main.njk
index faf86d0..91e1290 100644
--- a/frontend/src/layouts/main.njk
+++ b/frontend/src/layouts/main.njk
@@ -12,7 +12,7 @@
 <div>
     <tesoft-nav>
         {% for item in [{title: "Blog", href: "/blog"}, {title: "About me", href: "/about"}] %}
-            <tesoft-button href="{{ item.href }}" {% if item.title == title %}selected{% endif %}>
+            <tesoft-button transparent href="{{ item.href }}" {% if item.title == title %}selected{% endif %}>
                 {{ item.title }}
             </tesoft-button>
         {% endfor %}