put home button instead of text being perma-link

plabayo · Aug 15, 2024 · 69c1b6b · 69c1b6b
1 parent d59222f
commit 69c1b6b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -162,9 +162,14 @@ body > header {
     font-family: var(--mono-font);
     border-bottom: 1px solid var(--accent);
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr;
     align-items: center;
     gap: 10px;
+    padding-inline: 10px;
+}
+
+body > header.grid {
+    grid-template-columns: 1fr auto auto;
 }
 
 body > footer {
@@ -184,11 +189,6 @@ body > footer a {
     text-decoration: none;
 }
 
-body > header a .hover-icon {
-    display: none;
-    font-size: 16px;
-}
-
 body > header .htmx-indicator {
     opacity: 0;
     transition: opacity 500ms ease-in;
@@ -213,11 +213,8 @@ body > header .htmx-request.htmx-indicator {
         visibility: hidden;
     }
 
-    body > header a:hover .hover-icon {
-        display: block;
-        position: absolute;
-        top: 6px;
-        left: 5px;
+    body > header a:hover .hover-icon::before {
+        content: "⬅  ";
     }
 }
 

diff --git a/templates/base.html b/templates/base.html
@@ -46,22 +46,23 @@
         <link rel="stylesheet" href="/css/style.css" />
     </head>
     <body hx-boost="true">
-        <header>
+        <header {% if this.slug !="" %}class="grid" {% endif %}>
             <div>
-                <a
-                    href="/"
-                    title="Go to the homepage"
-                    hx-indicator="#nav-spinner-home"
-                >
-                    <span class="nuance icon">&gt;</span>
-                    <span class="hover-icon">🏠</span>
-                    <span>&nbsp;plabayo.tech/{{ this.slug }}</span>
-                    <span class="cursor">&nbsp;</span>
-                </a>
+                <span class="nuance icon">&gt;</span>
+                <span>&nbsp;plabayo.tech/{{ this.slug }}</span>
+                <span class="cursor">&nbsp;</span>
             </div>
+            {% if this.slug !="" %}
             <div id="nav-spinner-home" class="htmx-indicator">
                 {% include "includes/bars.svg" %}
             </div>
+            <a
+                href="/"
+                title="Go to the homepage"
+                hx-indicator="#nav-spinner-home"
+                ><div class="hover-icon"><span>🏠&nbsp;Home</span></div></a
+            >
+            {% endif %}
         </header>
         <div id="content">{% block content %}{% endblock %}</div>
         <footer>