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.
@@ -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>
@@ -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;