tweak eotl's changes to fit original design

html/about.html

@@ -1,6 +1,6 @@
 {{ template "head" . }}
-{{ template "nav". }}
-<main>
+{{ template "nav" . }}
+<main id="about">
     <p>
         <span class="lieu">Lieu</span>—an alternative search engine. Created in response to the environs of
         apathy concerning the use of hypertext search and discovery. In <span class="lieu">Lieu</span>, the

html/assets/base.css

@@ -42,9 +42,9 @@ html {
     font-family: "Inter UI", sans-serif;
     background: var(--secondary);
     color: var(--primary);
-    max-width: 650px;
     padding-bottom: 2rem;
     padding-left: 2rem;
+    padding-right: 2rem;
     margin-top: 2rem;
 }
 
@@ -141,7 +141,10 @@ and (max-device-width : 720px)
         padding-left: 0.75rem;
         padding-right: 0.75rem;
         font-size: 30pt;
-        max-width: 100vw;
+        max-width: 100vw !important;
+    }
+    #results {
+        display: grid;
     }
 }
 

html/assets/style.css

@@ -1,45 +1,50 @@
 @import url("base.css");
 
-html {
-    max-width: 31rem;
-    max-width: 100%;
-}
-
 h1 {
     font-size: 3rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0rem;
 }
 
 h2 {
     font-family: "Noto Serif";
-    font-style: italic;
     font-weight: 400;
     font-size: 1.5rem;
     margin-top: 0;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
+}
+
+.lieu-container h2 {
+    font-style: italic;
 }
 
 header {
     clear: both;
-    display: block;
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: max-content max-content 1fr;
+    grid-column-gap: 1rem;
+    align-items: start;
 }
 
-header h1 {
-    float: left;
+header h2 a, header h2 a:hover {
+    border-bottom: none;
 }
 
 header ul {
-    float: right;
-    display: block;
-    margin-top: 2rem;
-    margin-right: 2rem;
+    justify-self: end;
+    margin-top: 0.5rem;
+    grid-column-start: 3;
 }
 
 header ul li {
-    margin-right: 1.5rem;
+    margin-left: 1.5rem;
     display: inline-block;
 }
 
+header ul li:first-of-type {
+    margin-left: 0;
+}
+
 main {
     display: grid;
     justify-items: left;
@@ -47,8 +52,15 @@ main {
     margin-top: 1rem;
 }
 
-.clear {
-    clear: both;
+main#results {
+    display: block;
+    margin-top: 4rem;
+    columns: 2;
+    max-width: 1200px;
+}
+
+main#about {
+    max-width: 600px;
 }
 
 .lieu {
@@ -61,10 +73,13 @@ main {
 }
 
 .lieu-container {
-    justify-items: start;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    margin-top: 5rem;
+    width: 100%;
 }
 
-
 .entry {
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside:avoid;
@@ -75,7 +90,8 @@ main {
 }
 
 .entry p {
-    color: #777777;
+    color: var(--primary);
+    opacity: 0.45;
 }
 
 .link {
@@ -83,7 +99,6 @@ main {
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 720px) {
-
     main {
         columns: 1 !important;
     }

html/index.html

@@ -1,9 +1,19 @@
 {{ template "head" . }}
-{{ template "nav" . }}
+<header>
+    <h2><a href="https://github.com/cblgh/lieu">Lieu</a></h2>
+    <ul>
+        <li><a href="/webring">Webring</a></li>
+        <li><a href="/about">About</a></li>
+    </ul>
+</header>
+<div class="clear"></div>
 <main>
     <div class="lieu-container">
+        <h1>
+            {{ .SiteName }}
+        </h1>
         <h2>
-            <strong>Lieu</strong> the search for the new—endless
+            the search for the new—endless
         </h2>
         <form class="search-container">
             <input type="search" required minlength="1" name="q" placeholder="tracking" value="{{ .Data.Query }}" class="search-box">

html/nav.html

@@ -1,13 +1,12 @@
 {{ define "nav" }}
 <header>
-    <h1>
+    <h2>
         <a href="/">{{ .SiteName }}</a>
-    </h1>
+    </h2>
     <ul>
         <li><a href="/">Search</a></li>
         <li><a href="/webring">Webring</a></li>
         <li><a href="/about">About</a></li>
     </ul>
 </header>
-<div class="clear"></div>
 {{ end }}

html/search.html

@@ -1,10 +1,10 @@
 {{ template "head" . }}
 {{ template "nav" . }}
-<main>
-    <form method="GET" class="search-container">
-        <input type="search" minlength="1" required name="q" value="{{ .Data.Query }}" class="search-box">
-        <button type="submit" class="search-button"></button>
-    </form>
+<form method="GET" class="search-container">
+    <input type="search" minlength="1" required name="q" value="{{ .Data.Query }}" class="search-box">
+    <button type="submit" class="search-button"></button>
+</form>
+<main id="results">
     {{ range .Data.Pages }}
     <div class="entry">
         <a class="link" href="{{ .URL }}">{{ .Title }}</a>