Center header

lipu-tenpo · Aug 28, 2024 · f6c54e6 · f6c54e6
1 parent 898e28e
commit f6c54e6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 27 deletions.
diff --git a/_includes/page.hbs b/_includes/page.hbs
@@ -51,31 +51,35 @@ scripts: []
 </head>
 
 <body>
-  <header>
-    <div class="sewi-lipu">
-      <a href="/">
-        <img src="/logo.png" alt="lipu tenpo logo" class="logo" />
-      </a>
-      <div>
-        <h1><a href="/">lipu tenpo</a></h1>
-        <div class="subtitle"><a href="/sona#faq">li alasa e jan pali sin</a></div>
+  <div class="poki-insa">
+    <header>
+      <div class="sewi-lipu">
+        <a href="/">
+          <img src="/logo.png" alt="lipu tenpo logo" class="logo" />
+        </a>
+        <div>
+          <h1><a href="/">lipu tenpo</a></h1>
+          <div class="subtitle"><a href="/sona#faq">li alasa e jan pali sin</a></div>
+        </div>
       </div>
-    </div>
-    <nav>
-      <ul>
-        <!--
-        Conversation about menu links: https://discord.com/channels/795288348024373289/796468535672963122/1278030295211442291
-        -->
-        {{{ nav "/" "lipu" }}}
-        {{{ nav "/toki/" "toki ale" }}}
-        {{{ nav "/sona/" "ni li seme" }}}
-      </ul>
-      <!-- search bar -->
-      <!-- <form onsubmit="">
-        <input type="text" name="q" placeholder="search" />
-      </form> -->
-    </nav>
-  </header>
+      <nav>
+        <ul>
+          {{!--
+          Conversation about menu links: https://discord.com/channels/795288348024373289/796468535672963122/1278030295211442291
+          --}}
+          {{{ nav "/" "lipu" }}}
+          {{{ nav "/toki/" "toki ale" }}}
+          {{{ nav "/sona/" "ni li seme" }}}
+        </ul>
+        <!-- search bar -->
+        <!-- <form onsubmit="">
+          <input type="text" name="q" placeholder="search" />
+        </form> -->
+      </nav>
+    </header>
+
+    <hr class="anpa-sewi" />
+  </div>
 
   <main>{{{ content }}}</main>
 

diff --git a/public/stylesheet.css b/public/stylesheet.css
@@ -87,13 +87,23 @@ h6 {
   font-family: "Bricolage Grotesque", sans-serif;
 }
 
+.poki-insa {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 60rem;
+  padding: 0 2rem;
+  width: 100%;
+}
+
 header {
   align-items: flex-start;
-  border-bottom: 2px solid var(--colour-pimeja-lili);
   display: flex;
   flex-flow: row wrap;
   font-family: "Bricolage Grotesque", sans-serif;
-  margin: 3rem 2rem 1rem;
+  justify-content: space-evenly;
+  margin-top: 3rem;
 }
 header #banner {
   position: absolute;
@@ -145,7 +155,7 @@ header nav ul {
   padding: 0;
 }
 header nav {
-  margin-top: 1rem;
+  margin: 1rem 0.5rem 0 0;
 }
 header nav li {
   line-height: 1;
@@ -188,6 +198,14 @@ header nav a:hover .sitelen-tu {
   text-decoration: underline;
 }
 
+hr.anpa-sewi {
+  background-color: var(--colour-pimeja-lili);
+  height: 4px;
+  border-width: 0;
+  border-bottom: 2px solid black;
+  margin: 0 0 1rem;
+}
+
 main {
   padding: 0 0 1rem 0;
   flex-grow: 1;