From f28f467032e4f77a1ce8efe8103191c9ad2de02b Mon Sep 17 00:00:00 2001
From: dweller <dweller@cabin.digital>
Date: Tue, 20 Feb 2024 21:01:37 +0200
Subject: add search and page layouts

---
 style/search.css | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 style/search.css

(limited to 'style/search.css')

diff --git a/style/search.css b/style/search.css
new file mode 100644
index 0000000..945d778
--- /dev/null
+++ b/style/search.css
@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2024 dwlr <dweller@cabin.digital>
+ *
+ * BSD 3-Clause License (BSD-3-Clause)
+ * See LICENSE for details
+ */
+
+:root
+{
+    --qshadow:    var(--qborder);
+    --qshadowh:   #BEC0C4;
+}
+
+#logo      { font-size: 1rem; }
+#logo > h1 { font-size: 1.5rem; }
+
+#gc-let    { font-size: 1.25em; }
+#gc-me     { font-size: 1em; }
+#gc-man    { font-size: 0.9em; }
+#gc-that   { font-size: 1em; }
+#gc-for    { font-size: 1.15em; }
+#gc-you    { font-size: 1em; }
+
+#main
+{
+    justify-content: flex-start;
+    align-items:     flex-start;
+}
+
+#main > header
+{
+    flex-grow: 0;
+    justify-content: flex-start;
+    align-items:     baseline;
+
+    padding: 1.5rem 2% 1.5rem 5%;
+    padding-bottom: 0;
+
+    border-bottom: solid 1px var(--border);
+}
+
+#search_pane
+{
+    max-width: 95%;
+    flex-grow: 0;
+}
+
+#logo { margin-right: 1.5rem; }
+
+#mank
+{
+    background-color: var(--qbg);
+    color:            var(--fg-light);
+}
+
+#man { padding-left: 5pt; }
+
+#man, #mank
+{
+    font-size:     13pt;
+    min-width:     25pt;
+    margin:        0;
+    border-radius: 0;
+}
+
+#mank
+{
+    background-color: transparent;
+    color:            var(--fg-light);
+    border-color:     transparent;
+}
+
+#man:hover, #mank:hover
+{
+    text-decoration:  underline;
+    box-shadow:       none;
+}
+
+#query_wrap
+{
+    overflow: hidden;
+    padding: 0;
+}
+
+#query { margin-left: 15pt; }
+
+#query_icon
+{
+    display: inline-block;
+
+    background: no-repeat url("/imgs/search-wt.svg");
+    background-size: contain;
+
+    height:  12pt;
+    width:   12pt;
+
+    margin:  3pt 0 0 0;
+}
+
+@keyframes verscale
+{
+    0%, 100% { transform: rotate(-10deg); }
+    50%      { transform: rotate( 10deg); }
+}
+
+#topnav { margin-left: auto; }
+
+#results
+{
+    flex-grow: 1;
+    margin: 0 5%;
+}
+
+#results > p
+{
+    font-size: small;
+    margin-bottom: 1.5rem;
+}
+
+#results > dl > dt { font-size: large; }
+#results > dl > dd
+{
+    color: var(--fg-mid);
+    margin: 5pt 0 2rem 0;
+    font-size: 12pt;
+}
+
+@media (prefers-color-scheme: dark)
+{
+    :root
+    {
+        --qshadow:    transparent;
+        --qshadowh:   #171717;
+    }
+
+    #query_wrap
+    {
+        background-color: var(--qbgh);
+        border: 1px solid var(--qborderh);
+    }
+
+    #query_wrap:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); }
+
+    #man { border-color: transparent; }
+}
+
+@media (width <= 970px)
+{
+    #topnav { display: none; }
+}
+
+@media (width <= 800px)
+{
+    #main > header
+    {
+        justify-content: center;
+        align-items:     center;
+
+        padding: 0;
+        margin:  0;
+    }
+
+    #query_wrap { width: min(42rem, 95dvw); }
+
+    #logo { display: none; }
+}
-- 
cgit v1.2.3