(search) Update front page with new look

code/services-application/search-service/src/main/resources/static/search/serp.scss

@@ -25,6 +25,54 @@ body {
   padding: 0;
 }
 
+#frontpage {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  grid-gap: 1ch;
+  align-items: start;
+  justify-content: start;
+  margin-top: 1ch;
+  margin-bottom: 1ch;
+  // named grid areas
+  grid-template-areas:
+        "frontpage-about frontpage-news"
+        "frontpage-tips  frontpage-news";
+
+  @media (max-device-width: 624px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-gap: 1ch;
+    align-items: start;
+    justify-content: start;
+    margin-top: 1ch;
+    margin-bottom: 1ch;
+    // named grid areas
+    grid-template-areas:
+            "frontpage-about"
+            "frontpage-tips"
+            "frontpage-news";
+
+    * { max-width: unset !important; min-width: unset !important; }
+  }
+
+  #frontpage-news {
+    grid-area: frontpage-news;
+    max-width: 40ch;
+    @extend .dialog;
+  }
+  #frontpage-about {
+    grid-area: frontpage-about;
+    min-width: 40ch;
+    @extend .dialog;
+  }
+  #frontpage-tips {
+    grid-area: frontpage-tips;
+    min-width: 40ch;
+    @extend .dialog;
+  }
+}
+
 #siteinfo-nav {
   display: block;
   width: 100%;
@@ -319,14 +367,18 @@ footer {
 
   input[type="text"] {
     font-family: monospace;
-    font-size: 14pt;
+    font-size: 12pt;
     padding: 0.5ch;
     border: 1px solid $border-color;
+    background-color: $fg-light;
+    color: $fg-dark;
   }
 
   button[type="submit"] {
-    font-size: 14pt;
+    font-size: 12pt;
     border: 1px solid $border-color;
+    background-color: $fg-light;
+    color: $fg-dark;
   }
 
 }

code/services-application/search-service/src/main/resources/templates/search/index/index-about.hdb

@@ -1,4 +1,4 @@
-    <section class="card">
+    <section id="frontpage-about">
         <h2>About</h2>
         <div class="info">
             <p>This is an independent DIY search engine that focuses on non-commercial content, and attempts to

code/services-application/search-service/src/main/resources/templates/search/index/index-news.hdb

@@ -1,6 +1,6 @@
 
 {{#if news}}
-    <section class="card rightbox">
+<section id="frontpage-news">
     <h2>Publicity, Discussion and Events</h2>
     <div class="info">
         <dl>
@@ -13,5 +13,5 @@
     <div class="utils">
         <a href="/news.xml">📡 RSS Feed</a>
     </div>
-    </section>
+</section>
 {{/if}}

code/services-application/search-service/src/main/resources/templates/search/index/index-tips.hdb

@@ -1,4 +1,4 @@
-    <section class="card">
+<section id="frontpage-tips">
     <h2>Tips</h2>
     <div class="info">
         <p>
@@ -18,6 +18,4 @@
         </p>
 
     </div>
-        <div class="utils">
+</section>
-        </div>
-    </section>

code/services-application/search-service/src/main/resources/templates/search/index/index-updates.hdb

@@ -1,10 +0,0 @@
-<section class="card">
-    <h2>Updates</h2>
-    <div class="info">
-        <p>☛ It is possible to search by website generator.</p>
-        <p>☛ New filters for forums and wikis are added.</p>
-    </div>
-    <div class="utils">
-        <a href="https://www.marginalia.nu/release-notes/">Release Notes</a>
-    </div>
-</section>

code/services-application/search-service/src/main/resources/templates/search/index/index.hdb

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Marginalia Search</title>
 
-    <link rel="stylesheet" href="/style-new.css" />
+    <link rel="stylesheet" href="/serp.css" />
     <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Marginalia">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -20,18 +20,12 @@
 <!-- Hi there, fellow human being :-) -->
 
 {{>search/parts/search-header}}
-
-<article>
 {{>search/parts/search-form}}
-
+<section id="frontpage">
 {{>search/index/index-news}}
-    <div class="cards big">
 {{>search/index/index-about}}
 {{>search/index/index-tips}}
-{{>search/index/index-updates}}
+</section>
-    </div>
-
-</article>
 
 {{>search/parts/search-footer}}
 </body>