💄 site logo

static/css/style.css

@@ -135,6 +135,30 @@ nav .container {
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wide);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.nav-logo {
+    height: 2.5rem;
+    width: auto;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.nav-logo-beside {
+    /* Logo displayed beside the title */
+}
+
+.nav-logo-replace {
+    /* Logo replaces the title - can be larger */
+    height: 3rem;
+}
+
+.nav-title {
+    /* Title text when displayed beside logo */
+    display: inline-block;
 }
 
 .nav-links {
@@ -528,6 +552,14 @@ main {
         font-size: var(--font-size-xl);
     }
 
+    .nav-logo {
+        height: 2rem;
+    }
+
+    .nav-logo-replace {
+        height: 2.5rem;
+    }
+
     .nav-links {
         gap: var(--space-md);
     }