add search and page layouts

3 files changed, 299 insertions, 74 deletions

diff --git a/style/main.css b/style/main.css
index 78558a6..f373e37 100644
--- a/style/main.css
+++ b/style/main.css
@@ -11,13 +11,15 @@
     --bg:         #FFFFFF;
     --bg-dark:    #F2F2F2;
     --fg:         #202124;
-    --fg-light:   #CACACA;
+    --fg-mid:     #5F6368;
+    --fg-light:   #70757A;
 
     --border:     #DADCE0;
 
     /* query input */
     --qbg:        transparent;
     --qborder:    var(--border);
+    --qshadow:    transparent;
 
     --qbgh:       transparent;
     --qborderh:   var(--border);
@@ -66,73 +68,6 @@
     --logo-d:     #34A853;
 }
 
-@media (prefers-color-scheme: dark)
-{
-    /* TODO: dew it */
-
-    :root
-    {
-        /* general */
-        --bg:         #202124;
-        --bg-dark:    #171717;
-        --fg:         #E8EAED;
-        --fg-light:   #BDC1C6;
-
-        --border:     #3C4043;
-
-        /* query input */
-        --qbg:        transparent;
-        --qborder:    #5F6368;
-
-        --qbgh:       #303134;
-        --qborderh:   transparent;
-        --qshadowh:   #171717;
-
-        /* buttons */
-        --btn-bg:     #303134;
-        --btn-fg:     var(--fg);
-        --btn-shad:   transparent;
-        --btn-brd:    transparent;
-
-        --btn-bgh:    var(--btn-bg);
-        --btn-fgh:    var(--btn-fg);
-        --btn-shadh:  transparent;
-        --btn-brdh:   #5F6368;
-
-        --btn-bgf:    var(--btn-bg);
-        --btn-fgf:    var(--btn-fg);
-        --btn-shadf:  transparent;
-        --btn-brdf:   var(--btn-brdh);
-
-        /* accent buttons */
-        --abtn-bg:    #8AB4F8;
-        --abtn-fg:    #202124;
-        --abtn-brd:   transparent;
-        --abtn-shad:  transparent;
-
-        --abtn-bgh:   #93BAF9;
-        --abtn-fgh:   var(--abtn-fg);
-        --abtn-brdh:  transparent;
-        --abtn-shadh: transparent;
-
-        --abtn-bgf:   #A6C6FA;
-        --abtn-fgf:   var(--abtn-fg);
-        --abtn-brdf:  transparent;
-        --abtn-shadf: transparent;
-
-        /* links */
-        --a-unvis:    #8AB4F8;
-        --a-vis:      #C58AF9;
-
-        /* misc */
-        --logo-a:     #FFFFFF;
-        --logo-b:     #FFFFFF;
-        --logo-c:     #FFFFFF;
-        --logo-d:     #FFFFFF;
-    }
-
-}
-
 /* TODO: credit fonts */
 @font-face
 {
@@ -181,7 +116,6 @@ a:hover { text-decoration: underline; }
     align-items:     center;
     justify-content: center;
 
-    width: 100dvw;
     height: 100dvh;
 }
 
@@ -189,7 +123,7 @@ a:hover { text-decoration: underline; }
 {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: baseline;
     justify-content: flex-end;
     flex-grow: 0.75;
 
@@ -199,13 +133,19 @@ a:hover { text-decoration: underline; }
     padding: 0 1rem;
 }
 
+#topnav
+{
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+}
+
 #topnav_icon
 {
     display: inline-block;
 
-    width:  1.25rem;
-    height: 1.25rem;
-    line-height: 2.5rem;
+    width:  12pt;
+    height: 12pt;
 
     margin:  0 1rem;
     padding: 0;
@@ -221,7 +161,6 @@ a:hover { text-decoration: underline; }
     height: 3rem;
     margin: 1rem 0.5rem;
 
-
     border: 1px solid var(--btn-brd);
     border-radius: 0.35rem;
 
@@ -321,6 +260,8 @@ button, input { all: unset; }
     background-color: var(--qbg);
     border: 1px solid var(--qborder);
     border-radius: 10rem;
+
+    box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow);
 }
 
 #query_wrap:hover
@@ -441,3 +382,70 @@ footer, #about_pane
     display:   inline-block;
     transform: rotate(180deg);
 }
+
+
+@media (prefers-color-scheme: dark)
+{
+    :root
+    {
+        /* general */
+        --bg:         #202124;
+        --bg-dark:    #171717;
+        --fg:         #E8EAED;
+        --fg-mid:     #BDC1C6;
+        --fg-light:   #BDC1C6;
+
+        --border:     #3C4043;
+
+        /* query input */
+        --qbg:        transparent;
+        --qborder:    #5F6368;
+
+        --qbgh:       #303134;
+        --qborderh:   transparent;
+        --qshadowh:   #171717;
+
+        /* buttons */
+        --btn-bg:     #303134;
+        --btn-fg:     var(--fg);
+        --btn-shad:   transparent;
+        --btn-brd:    transparent;
+
+        --btn-bgh:    var(--btn-bg);
+        --btn-fgh:    var(--btn-fg);
+        --btn-shadh:  transparent;
+        --btn-brdh:   #5F6368;
+
+        --btn-bgf:    var(--btn-bg);
+        --btn-fgf:    var(--btn-fg);
+        --btn-shadf:  transparent;
+        --btn-brdf:   var(--btn-brdh);
+
+        /* accent buttons */
+        --abtn-bg:    #8AB4F8;
+        --abtn-fg:    #202124;
+        --abtn-brd:   transparent;
+        --abtn-shad:  transparent;
+
+        --abtn-bgh:   #93BAF9;
+        --abtn-fgh:   var(--abtn-fg);
+        --abtn-brdh:  transparent;
+        --abtn-shadh: transparent;
+
+        --abtn-bgf:   #A6C6FA;
+        --abtn-fgf:   var(--abtn-fg);
+        --abtn-brdf:  transparent;
+        --abtn-shadf: transparent;
+
+        /* links */
+        --a-unvis:    #8AB4F8;
+        --a-vis:      #C58AF9;
+
+        /* misc */
+        --logo-a:     #FFFFFF;
+        --logo-b:     #FFFFFF;
+        --logo-c:     #FFFFFF;
+        --logo-d:     #FFFFFF;
+    }
+
+}
diff --git a/style/man.css b/style/man.css
new file mode 100644
index 0000000..12a00b2
--- /dev/null
+++ b/style/man.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2024 dwlr <dweller@cabin.digital>
+ *
+ * BSD 3-Clause License (BSD-3-Clause)
+ * See LICENSE for details
+ */
+
+.manpage
+{
+    font-size: small;
+
+    width:   min(100% - 3rem, 9in);
+    padding: 0.25in;
+    margin:  1em 0 1em 0;
+
+    border: 1px solid var(--border);
+    border-radius: 1em;
+}
+
+.head
+{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+@media (width <= 800px)
+{
+    .manpage
+    {
+        width:   unset;
+        border:  none;
+        margin:  0;
+        padding: 0;
+    }
+}
+
+
+/* TODO: give copyright */
+
+table.head, table.foot { width: 100%; }
+td.head-rtitle, td.foot-os { text-align: right; }
+td.head-vol { text-align: center; }
+.Nd, .Bf, .Op { display: inline; }
+.Pa, .Ad { font-style: italic; }
+.Ms { font-weight: bold; }
+.Bl-diag > dt { font-weight: bold; }
+code.Nm, .Fl, .Cm, .Ic, code.In, .Fd, .Fn, .Cd { font-weight: bold; font-family: inherit; }
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; }
+}