add border around normal button

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

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

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">

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>

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