فهرست منبع

Change nav bar to unordered list

Instead of having the links side-by-side, they're now a vertical list of
links. I think this is cleaner, and will give more room for more blog
post types.
Bee Hudson 1 سال پیش
والد
کامیت
af0c2b0f86
2فایلهای تغییر یافته به همراه14 افزوده شده و 12 حذف شده
  1. 6 4
      layouts/partials/header.html
  2. 8 8
      static/css/base.css

+ 6 - 4
layouts/partials/header.html

@@ -2,9 +2,11 @@
 <header id="sidebar">
 	<h1 id="site-title">{{ .Site.Title }}</h1>
 	<img class="w-48 mx-auto rounded-full border border-black" src="/imgs/logo_partial.png" alt="Logo for The Hive" />
-	<nav id="nav">
-		{{ range .Site.Menus.main }}
-		<a href="{{ .URL }}">{{ .Name }}</a>
-		{{ end }}
+	<nav>
+		<ul>
+			{{ range .Site.Menus.main }}
+			<li><a href="{{ .URL }}">{{ .Name }}</a></li>
+			{{ end }}
+		</ul>
 	</nav>
 </header>

+ 8 - 8
static/css/base.css

@@ -170,6 +170,14 @@
     figure figcaption {
         @apply w-full sm:w-3/4 xl:w-5/6 mx-auto text-sm italic;
     }
+
+    nav ul {
+        @apply list-none space-y-2;
+    }
+
+    nav a {
+        @apply text-black;
+    }
 }
 
 @layer components {
@@ -214,14 +222,6 @@
         @apply text-3xl;
     }
 
-    #nav {
-        @apply flex flex-wrap justify-around;
-    }
-
-    #nav a {
-        @apply flex-1-1/3 xs:flex-auto lg:flex-1-1/3 text-black;
-    }
-
     /* Blog */
     .blog-post {
         @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;