Improve docs header style (#2516)

* refactor: pattern to separate file causes a lot of lag and also probably isn't the best to inline since we have scss preprocessing * fix: escape quotes properly * feat: improve header styles
getzola · Jun 11, 2024 · 606c2be · 606c2be
1 parent 0056851
commit 606c2be
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 23 deletions.
diff --git a/docs/sass/_base.scss b/docs/sass/_base.scss
@@ -1,3 +1,5 @@
+@import "pattern";
+
 html, body {
   font-size: 16px;
   height: 100%;
@@ -8,7 +10,7 @@ body {
   line-height: 1.6;
   // from http://www.heropatterns.com
   background-color: #191919;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: $grid-pattern;
 
   color: $foreground;
 

diff --git a/docs/sass/_header.scss b/docs/sass/_header.scss
@@ -3,8 +3,15 @@ header {
     border-bottom: none;
   }
 
-  nav a {
-    margin-right: 2rem;
+  ul {
+    padding-inline-start: 0;
+    display: flex;
+    gap: 1ch 2rem;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
   }
 
   .header__logo {
@@ -27,7 +34,8 @@ header {
 
     .header__logo {
       // to force menu links to be on a line below
-      display: block;
+      text-align: center;
+      width: 100%;
     }
   }
 }
diff --git a/docs/sass/_layout.scss b/docs/sass/_layout.scss
@@ -1,15 +1,32 @@
 header {
   padding: 2rem 3rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 2rem;
+
+  // Container is reused elsewhere, so this must be declared here
+  nav {
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: center;
+    gap: 1rem 2rem;
+    margin: 0;
+  }
 }
 
 .container {
   max-width: 1000px;
   margin: 0 auto;
 }
 
-@media only screen and (max-width: 1000px)  {
-  .container {
+@media only screen and (max-width: 1000px) {
+  header {
     max-width: 90%;
+    margin-inline: auto;
+    justify-content: center;
   }
 }
 
@@ -22,7 +39,6 @@ header {
   }
 }
 
-
 footer {
   text-align: center;
   padding: 2rem 3rem;

diff --git a/docs/sass/_pattern.scss b/docs/sass/_pattern.scss
@@ -0,0 +1 @@
+$grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
diff --git a/docs/sass/_search.scss b/docs/sass/_search.scss
@@ -1,7 +1,9 @@
 .search-container {
   display: inline-block;
   position: relative;
-  width: 300px;
+  width: 100%;
+  max-width: 300px;
+  margin-left: auto;
 
   input {
     width: 100%;
@@ -45,3 +47,9 @@
     }
   }
 }
+
+@media only screen and (max-width: 1000px) {
+  .search-container {
+    margin-left: 0;
+  }
+}
diff --git a/docs/templates/index.html b/docs/templates/index.html
@@ -7,19 +7,20 @@
         <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
         <meta name="author" content="{{ config.extra.author }}">
         <title>{% block title %}{{ config.title }}{% endblock title %}</title>
-        <link rel="stylesheet" href="{{ get_url(path="site.css") }}"/>
-        <link rel="icon" href="{{ get_url(path="favicon.ico") }}">
+        <link rel="stylesheet" href="{{ get_url(path='site.css') }}">
+        <link rel="icon" href="{{ get_url(path='favicon.ico') }}">
     </head>
     <body>
 
         <header>
-            <nav class="{% block extra_nav_class %}container{% endblock extra_nav_class %}">
-                <a class="header__logo white" href="{{ config.base_url }}">Zola</a>
-                <a class="white" href="{{ get_url(path="@/documentation/_index.md") }}" class="nav-link">Docs</a>
-                <a class="white" href="{{ get_url(path="@/themes/_index.md") }}" class="nav-link">Themes</a>
-                <a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a>
-                <a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a>
-
+            <a class="header__logo white" href="{{ config.base_url }}">Zola</a>
+            <nav>
+                <ul>
+                    <li><a class="white" href="{{ get_url(path='@/documentation/_index.md') }}" class="nav-link">Docs</a></li>
+                    <li><a class="white" href="{{ get_url(path='@/themes/_index.md') }}" class="nav-link">Themes</a></li>
+                    <li><a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a></li>
+                    <li><a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a></li>
+                </ul>
                 <div class="search-container">
                     <input id="search" type="search" placeholder="🔎 Search the docs">
 
@@ -37,7 +38,7 @@ <h1>Your one-stop static site engine</h1>
                     <p class="hero__tagline">
                         Forget dependencies. Everything you need in one binary.
                     </p>
-                    <a href="{{ get_url(path="@/documentation/_index.md") }}" class="button">Get started</a>
+                    <a href="{{ get_url(path='@/documentation/_index.md') }}" class="button">Get started</a>
                 </div>
 
                 <div class="inverted-colours selling-points">
@@ -73,7 +74,7 @@ <h2>Easy to use</h2>
                             <p>
                                 From the CLI to the template engine, everything is designed to be intuitive.
                                 Don't take my word for it though, look at the
-                                <a href="{{ get_url(path="@/documentation/_index.md") }}">documentation</a> and see for yourself.
+                                <a href="{{ get_url(path='@/documentation/_index.md') }}">documentation</a> and see for yourself.
                             </p>
                         </div>
 
@@ -88,8 +89,8 @@ <h2>Flexible</h2>
                         <div class="selling-point">
                             <h2>Augmented Markdown</h2>
                             <p>
-                                Zola comes with <a href="{{ get_url(path="@/documentation/content/shortcodes.md") }}">shortcodes</a> and
-                                <a href="{{ get_url(path="@/documentation/content/linking.md") }}">internal links</a>
+                                Zola comes with <a href="{{ get_url(path='@/documentation/content/shortcodes.md') }}">shortcodes</a> and
+                                <a href="{{ get_url(path='@/documentation/content/linking.md') }}">internal links</a>
                                 to make it easier to write your content.
                             </p>
                         </div>
@@ -102,7 +103,7 @@ <h2>Augmented Markdown</h2>
             ©2017-{{ now() | date(format="%Y") }} — <a class="white" href="https://www.vincentprouillet.com">Vincent Prouillet</a> and <a class="white" href="https://github.com/getzola/zola/graphs/contributors">contributors</a>
         </footer>
 
-        <script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
-        <script type="text/javascript" src="{{ get_url(path="search.js") }}"></script>
+        <script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}"></script>
+        <script type="text/javascript" src="{{ get_url(path='search.js') }}"></script>
     </body>
 </html>