add search and page layouts

1 files changed, 82 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;
+    }
+
+}