Initial commit. Google-like design.

20 files changed, 1011 insertions, 0 deletions

diff --git a/fonts/FiraCode-Bold.ttf b/fonts/FiraCode-Bold.ttf
new file mode 100644
index 0000000..f891bde
--- /dev/null
+++ b/fonts/FiraCode-Bold.ttf
diff --git a/fonts/FiraCode-Light.ttf b/fonts/FiraCode-Light.ttf
new file mode 100644
index 0000000..5664ec3
--- /dev/null
+++ b/fonts/FiraCode-Light.ttf
diff --git a/fonts/FiraCode-Medium.ttf b/fonts/FiraCode-Medium.ttf
new file mode 100644
index 0000000..2c0ecdf
--- /dev/null
+++ b/fonts/FiraCode-Medium.ttf
diff --git a/fonts/FiraCode-Regular.ttf b/fonts/FiraCode-Regular.ttf
new file mode 100644
index 0000000..bd73685
--- /dev/null
+++ b/fonts/FiraCode-Regular.ttf
diff --git a/fonts/FiraCode-Retina.ttf b/fonts/FiraCode-Retina.ttf
new file mode 100644
index 0000000..660742d
--- /dev/null
+++ b/fonts/FiraCode-Retina.ttf
diff --git a/fonts/FiraCode-SemiBold.ttf b/fonts/FiraCode-SemiBold.ttf
new file mode 100644
index 0000000..d8dcef6
--- /dev/null
+++ b/fonts/FiraCode-SemiBold.ttf
diff --git a/fonts/handil-pro.medium.otf b/fonts/handil-pro.medium.otf
new file mode 100644
index 0000000..269a5f8
--- /dev/null
+++ b/fonts/handil-pro.medium.otf
diff --git a/imgs/icons-work.svg b/imgs/icons-work.svg
new file mode 100644
index 0000000..da69737
--- /dev/null
+++ b/imgs/icons-work.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="icons-work.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.0544998"
+     inkscape:cx="425.32015"
+     inkscape:cy="685.15899"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1080"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true" />
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="skeletal"
+       id="path-effect27"
+       is_visible="true"
+       lpeversion="1"
+       pattern="M 0,4.9921382 C 0,2.2364779 2.2364779,0 4.9921382,0 c 2.7556604,0 4.9921383,2.2364779 4.9921383,4.9921382 0,2.7556604 -2.2364779,4.9921383 -4.9921383,4.9921383 C 2.2364779,9.9842765 0,7.7477986 0,4.9921382 Z"
+       copytype="single_stretched"
+       prop_scale="1"
+       scale_y_rel="false"
+       spacing="0"
+       normal_offset="0"
+       tang_offset="0"
+       prop_units="false"
+       vertical_pattern="false"
+       hide_knot="false"
+       fuse_tolerance="0" />
+    <inkscape:path-effect
+       effect="skeletal"
+       id="path-effect2"
+       is_visible="true"
+       lpeversion="1"
+       pattern="M 0,4.9921382 C 0,2.2364779 2.2364779,0 4.9921382,0 c 2.7556604,0 4.9921383,2.2364779 4.9921383,4.9921382 0,2.7556604 -2.2364779,4.9921383 -4.9921383,4.9921383 C 2.2364779,9.9842765 0,7.7477986 0,4.9921382 Z"
+       copytype="single_stretched"
+       prop_scale="1"
+       scale_y_rel="false"
+       spacing="0"
+       normal_offset="0"
+       tang_offset="0"
+       prop_units="false"
+       vertical_pattern="false"
+       hide_knot="false"
+       fuse_tolerance="0" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path2"
+       style="fill:none;stroke:#9aa0a6;stroke-width:10.58333333;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 58.334777,56.447627 35.123036,35.12304 M 65.60943,36.878433 A 28.020086,28.020086 0 0 1 37.589344,64.89852 28.020086,28.020086 0 0 1 9.5692577,36.878433 28.020086,28.020086 0 0 1 37.589344,8.8583469 28.020086,28.020086 0 0 1 65.60943,36.878433 Z"
+       inkscape:export-filename="search.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       id="path37"
+       style="fill:none;stroke:#9aa0a6;stroke-width:7.05556;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+       d="M 25.4554,156.8555 H 59.14997 M 26.839204,139.67712 h 13.880639 m 28.920007,4.35187 -16.195297,-0.027 m 0,-16.16826 v 16.16826 m 16.195298,59.32628 V 144.02899 L 53.444592,127.83373 h -37.0633 v 75.49454 z M 25.752917,170.4667 h 33.69457 M 25.46212,184.58255 h 33.69457"
+       inkscape:export-filename="page.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="cccccccccccccccccc" />
+    <path
+       id="circle10"
+       style="fill:#5f6368;stroke-width:25.328;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke;fill-opacity:1"
+       d="m 192.27584,184.573 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m 42.33337,-21.16669 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m 42.33337,-21.16669 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z"
+       inkscape:export-filename="menu.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>
diff --git a/imgs/logo-goog-work.xcf b/imgs/logo-goog-work.xcf
new file mode 100644
index 0000000..36a9264
--- /dev/null
+++ b/imgs/logo-goog-work.xcf
diff --git a/imgs/logo-goog.png b/imgs/logo-goog.png
new file mode 100644
index 0000000..6bb731b
--- /dev/null
+++ b/imgs/logo-goog.png
diff --git a/imgs/logo-goog16.ico b/imgs/logo-goog16.ico
new file mode 100644
index 0000000..1abc8ac
--- /dev/null
+++ b/imgs/logo-goog16.ico
diff --git a/imgs/logo-goog16.png b/imgs/logo-goog16.png
new file mode 100644
index 0000000..47a646d
--- /dev/null
+++ b/imgs/logo-goog16.png
diff --git a/imgs/logo-goog32.png b/imgs/logo-goog32.png
new file mode 100644
index 0000000..4d608d9
--- /dev/null
+++ b/imgs/logo-goog32.png
diff --git a/imgs/menu.svg b/imgs/menu.svg
new file mode 100644
index 0000000..6ff0313
--- /dev/null
+++ b/imgs/menu.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="54.854111mm"
+   height="54.85413mm"
+   viewBox="0 0 54.854111 54.85413"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-137.42173,-135.97924)">
+    <path
+       id="circle10"
+       style="fill:#5f6368;fill-opacity:1;stroke-width:25.328;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       d="m 192.27584,184.573 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m 42.33337,-21.16669 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m 42.33337,-21.16669 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16668,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z m -21.16669,0 a 6.2603703,6.2603703 0 0 1 -6.26037,6.26037 6.2603703,6.2603703 0 0 1 -6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,-6.26037 6.2603703,6.2603703 0 0 1 6.26037,6.26037 z" />
+  </g>
+</svg>
diff --git a/imgs/page.svg b/imgs/page.svg
new file mode 100644
index 0000000..0cdade5
--- /dev/null
+++ b/imgs/page.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="60.314121mm"
+   height="82.550102mm"
+   viewBox="0 0 60.314121 82.550102"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-12.853512,-124.30594)">
+    <path
+       id="path37"
+       style="fill:none;stroke:#9aa0a6;stroke-width:7.05556;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+       d="M 25.4554,156.8555 H 59.14997 M 26.839204,139.67712 h 13.880639 m 28.920007,4.35187 -16.195297,-0.027 m 0,-16.16826 v 16.16826 m 16.195298,59.32628 V 144.02899 L 53.444592,127.83373 h -37.0633 v 75.49454 z M 25.752917,170.4667 h 33.69457 M 25.46212,184.58255 h 33.69457" />
+  </g>
+</svg>
diff --git a/imgs/search.svg b/imgs/search.svg
new file mode 100644
index 0000000..572436a
--- /dev/null
+++ b/imgs/search.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="94.471886mm"
+   height="93.295662mm"
+   viewBox="0 0 94.471886 93.295662"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-4.2775913,-3.5666803)">
+    <path
+       id="path2"
+       style="fill:none;stroke:#9aa0a6;stroke-width:10.5833;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 58.334777,56.447627 35.123036,35.12304 M 65.60943,36.878433 A 28.020086,28.020086 0 0 1 37.589344,64.89852 28.020086,28.020086 0 0 1 9.5692577,36.878433 28.020086,28.020086 0 0 1 37.589344,8.8583469 28.020086,28.020086 0 0 1 65.60943,36.878433 Z" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..078e0c8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+        <title>Manup &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;  Lonely MAN near You</title>
+
+        <link rel="icon" type="image/png"    sizes="128x128" href="imgs/logo-goog.png"/>
+        <link rel="icon" type="image/png"    sizes="32x32"   href="imgs/logo-goog32.png"/>
+        <link rel="icon" type="image/png"    sizes="16x16"   href="imgs/logo-goog16.png"/>
+        <!--<link rel="icon" type="image/x-icon" sizes="16x16"   href="imgs/logo-goog16.ico"/>-->
+
+        <link rel="stylesheet" href="style/normalize.css"/>
+        <link rel="stylesheet" href="style/main.css"/>
+        <link rel="stylesheet" href="style/man.css"/>
+    </head>
+    <body>
+        <div id="main">
+            <header>
+                <nav id="topnav">
+                    <a href="https://cabin.digital">Cabin</a>
+                    <a href="#">Pages</a>
+                    <a href="#"><span id="topnav_icon"></span></a>
+                    <button class="btn-acc">Man up</button>
+                </nav>
+            </header>
+            <section id="logo">
+                <h1>
+                    <span id="gc-let">Let</span>
+                    <span id="gc-me">me</span>
+                    <code id="gc-man">man</code>
+                    <span id="gc-that">that</span>
+                    <span id="gc-for">For</span>
+                    <span id="gc-you">you</span>
+                </h1>
+                <div id="version_wrap">
+                    <span id="version">BETA!</span>
+                </div>
+            </section>
+            <nav id="search_pane">
+                <form>
+                    <div id="query_wrap">
+                        <div id="query_icon"></div>
+                        <input id="query" type='text' value='' name='query' required autofocus/>
+                    </div>
+                    <div>
+                        <input id="mank"  type='submit' value='man -k' name='action' title="apropos(1)"/>
+                        <input id="man"   type='submit' value='man'    name='action' title="Feeling lucky, punk?"/>
+                    </div>
+                </form>
+                <p class="hint center">Write "man" if you have no idea what to do...</p>
+            </nav>
+
+            <footer>
+                <p class="center">
+                    Copyleft <span class="copyleft">&copy;</span> 2024
+                    <a href="mailto:manup@cabin.digital">dweller</a> from
+                    <a href="https://cabin.digital">cabin.digital</a>.
+                    All Wrongs Reserved.
+                </p>
+            </footer>
+            <nav id="about_pane">
+                <section>
+                    <a href="#">About</a>
+                </section>
+                <section>
+                    <a href="#">Credits</a>
+                    <a href="#">Contact</a>
+                    <a href="#">Settings</a>
+                </section>
+            </nav>
+        </div>
+    </body>
+</html>
diff --git a/main.php b/main.php
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/main.php
diff --git a/style/main.css b/style/main.css
new file mode 100644
index 0000000..2ae2210
--- /dev/null
+++ b/style/main.css
@@ -0,0 +1,423 @@
+/*
+ * Copyright (C) 2024 dwlr <dweller@cabin.digital>
+ *
+ * BSD 3-Clause License (BSD-3-Clause)
+ * See LICENSE for details
+ */
+
+:root
+{
+    /* general */
+    --bg:         #FFFFFF;
+    --bg-dark:    #F2F2F2;
+    --fg:         #202124;
+    --fg-light:   #CACACA;
+
+    --border:     #DADCE0;
+
+    /* buttons */
+    --btn-bg:     #F8F9FA;
+    --btn-fg:     var(--fg);
+    --btn-shad:   transparent;
+    --btn-brd:    transparent;
+
+    --btn-bgh:    var(--btn-bg);
+    --btn-fgh:    var(--btn-fg);
+    --btn-shadh:  var(--border);
+    --btn-brdh:   var(--border);
+
+    --btn-bgf:    var(--btn-bg);
+    --btn-fgf:    var(--btn-fg);
+    --btn-shadf:  var(--border);
+    --btn-brdf:   #4285F4;
+
+    /* accent buttons */
+    --abtn-bg:    #1A73E8;
+    --abtn-fg:    #FFFFFF;
+    --abtn-brd:   transparent;
+    --abtn-shad:  #424043;
+
+    --abtn-bgh:   #1B66C9;
+    --abtn-fgh:   var(--abtn-fg);
+    --abtn-brdh:  transparent;
+    --abtn-shadh: #424043;
+
+    --abtn-bgf:   #1C5FBA;
+    --abtn-fgf:   var(--abtn-fg);
+    --abtn-brdf:  transparent;
+    --abtn-shadf: var(--abtn-shadh);
+
+    /* links */
+    --a-unvis:    #2317AE;
+    --a-vis:      #681DA8;
+
+    /* misc */
+    --logo-a:     #4284F4;
+    --logo-b:     #EA4335;
+    --logo-c:     #FBBC05;
+    --logo-d:     #34A853;
+}
+
+@media (prefers-color-scheme: dark)
+{
+    /* TODO: dew it */
+
+    :root
+    {
+        /* general */
+        --bg:         #FFFFFF;
+        --bg-dark:    #F2F2F2;
+        --fg:         #202124;
+        --fg-light:   #CACACA;
+
+        --border:     #DADCE0;
+
+        /* buttons */
+        --btn-bg:     #F8F9FA;
+        --btn-fg:     var(--fg);
+        --btn-shad:   transparent;
+        --btn-brd:    transparent;
+
+        --btn-bgh:    var(--btn-bg);
+        --btn-fgh:    var(--btn-fg);
+        --btn-shadh:  var(--border);
+        --btn-brdh:   var(--border);
+
+        --btn-bgf:    var(--btn-bg);
+        --btn-fgf:    var(--btn-fg);
+        --btn-shadf:  var(--border);
+        --btn-brdf:   #4285F4;
+
+        /* accent buttons */
+        --abtn-bg:    #1A73E8;
+        --abtn-fg:    #FFFFFF;
+        --abtn-brd:   transparent;
+        --abtn-shad:  #424043;
+
+        --abtn-bgh:   #1B66C9;
+        --abtn-fgh:   var(--abtn-fg);
+        --abtn-brdh:  transparent;
+        --abtn-shadh: #424043;
+
+        --abtn-bgf:   #1C5FBA;
+        --abtn-fgf:   var(--abtn-fg);
+        --abtn-brdf:  transparent;
+        --abtn-shadf: var(--abtn-shadh);
+
+        /* links */
+        --a-unvis:    #2317AE;
+        --a-vis:      #681DA8;
+
+        /* misc */
+        --logo-a:     #4284F4;
+        --logo-b:     #EA4335;
+        --logo-c:     #FBBC05;
+        --logo-d:     #34A853;
+    }
+
+}
+
+/* TODO: credit fonts */
+@font-face
+{
+    font-family: fn-logo;
+    src: url("/fonts/handil-pro.medium.otf");
+}
+
+@font-face
+{
+    font-family: fn-code-logo;
+    src: url("/fonts/FiraCode-SemiBold.ttf");
+}
+
+html
+{
+    background-color: var(--bg);
+    color: var(--fg);
+
+    font-family: arial, sans-serif;
+    font-size: small;
+
+    height: 100dvh;
+}
+
+body { height: 100dvh; }
+
+a
+{
+    cursor: pointer;
+    color: var(--a-unvis);
+    text-decoration: none;
+}
+
+a:visited
+{
+    color: var(--a-vis);
+    text-decoration: none;
+}
+
+a:hover { text-decoration: underline; }
+
+#main
+{
+    display:         flex;
+    flex-direction:  column;
+    align-items:     center;
+    justify-content: center;
+
+    width: 100dvw;
+    height: 100dvh;
+}
+
+#main > header
+{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-grow: 0.75;
+
+    width: 100%;
+    box-sizing: border-box;
+
+    padding: 0 1rem;
+}
+
+#topnav_icon
+{
+    display: inline-block;
+
+    width:  1.25rem;
+    height: 1.25rem;
+    line-height: 2.5rem;
+
+    margin:  0 1rem;
+    padding: 0;
+
+    background: no-repeat url("/imgs/menu.svg");
+    background-size: contain;
+}
+
+#topnav > a
+{
+    display: inline-block;
+
+    height: 3rem;
+    margin: 1rem 0.5rem;
+
+
+    border: 1px solid var(--btn-brd);
+    border-radius: 0.35rem;
+
+    font-size:  small;
+    text-align: center;
+    line-height: 2.5rem;
+
+    color: var(--fg);
+}
+
+#logo
+{
+    max-width: 85vw;
+
+    text-align:   center;
+    word-spacing: -0.5rem;
+
+    font-family: fn-logo, sans;
+    font-size:   16pt;
+}
+
+#logo > h1
+{
+    display: inline-block;
+    margin-bottom: 0;
+
+    font-size: 32pt;
+}
+
+#gc-let  { color: var(--logo-a); font-size: 46pt; }
+#gc-me   { color: var(--logo-b); }
+#gc-man  { color: var(--logo-c); font-family: fn-code-logo, monospace; font-size: 30pt; }
+#gc-that { color: var(--logo-a); }
+#gc-for  { color: var(--logo-d); font-size: 38pt; }
+#gc-you  { color: var(--logo-b); display: inline-block; transform: rotate(-2.5deg); }
+
+@keyframes verscale
+{
+    0%, 100%
+    {
+        font-size: 18pt;
+        transform: rotate(-10deg);
+    }
+    50%
+    {
+        font-size: 21pt;
+        transform: rotate(10deg);
+    }
+}
+
+#version_wrap
+{
+    display:    block;
+    min-height: 30pt;
+}
+
+#version
+{
+    display: block;
+    float:   right;
+
+    margin:  0;
+    padding: 0 10pt;
+
+    color: var(--fg);
+
+    animation: verscale 3.5s ease infinite;
+}
+
+#search_pane
+{
+    flex-grow: 1;
+}
+
+form
+{
+    display: flex;
+    flex-direction:  column;
+    align-items:     center;
+    justify-content: space-between;
+}
+
+button, input { all: unset; }
+
+#query_wrap
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    font-size: large;
+    width: min(42rem, 80vw);
+
+    padding: 1rem 1.5rem;
+    margin:  1rem;
+
+    border: 1px solid rgb(218, 220, 224);
+    border-radius: 10rem;
+}
+
+#query_wrap:hover
+{
+    box-shadow: 0.5pt 0.75pt 0.5rem var(--border);
+}
+
+#query
+{
+    width: 100%;
+}
+
+#query_icon
+{
+    background: no-repeat url("/imgs/search.svg");
+    background-size: contain;
+    margin-top: 0.15rem;
+    width: 1.25rem;
+    margin-right: 1rem;
+}
+
+button, input[type=submit]
+{
+    color:            var(--btn-fg);
+    background-color: var(--btn-bg);
+
+    height: 3rem;
+    min-width: 6rem;
+
+    margin: 1rem 0.5rem;
+    padding: 0 0.5rem;
+
+    border: 1px solid var(--btn-brd);
+    border-radius: 0.35rem;
+
+    font-size:  small;
+    text-align: center;
+
+    cursor: pointer;
+}
+
+button:hover, input[type=submit]:hover
+{
+    color:            var(--btn-fgh);
+    background-color: var(--btn-bgh);
+
+    border: 1px solid var(--btn-brdh);
+    box-shadow: 0 0.45pt 0.15rem var(--btn-shadh);
+}
+
+button:focus, input[type=submit]:focus
+{
+    color:            var(--btn-fgf);
+    background-color: var(--btn-bgf);
+    border: 1px solid var(--btn-brdf);
+}
+
+.btn-acc
+{
+    color:            var(--abtn-fg);
+    background-color: var(--abtn-bg);
+    border: 1px solid var(--abtn-brd);
+}
+
+.btn-acc:hover
+{
+    color:            var(--abtn-fgh);
+    background-color: var(--abtn-bgh);
+    border: 1px solid var(--abtn-brdh);
+    box-shadow: 0 0.45pt 0.15rem var(--abtn-shadh);
+}
+
+.btn-acc:focus
+{
+    color:            var(--abtn-fgf);
+    background-color: var(--abtn-bgf);
+    border: 1px solid var(--abtn-brdf);
+}
+
+.hint   { color: var(--fg-light); }
+.center { text-align: center; }
+
+footer, #about_pane
+{
+    width: 100%;
+    background-color: var(--bg-dark);
+    border-bottom: 1px solid var(--border);
+}
+
+#about_pane
+{
+    display:         flex;
+    flex-direction:  row;
+    justify-content: space-evenly;
+}
+
+#about_pane > section
+{
+    display:         flex;
+    flex-direction:  row;
+    align-items:     center;
+    justify-content: space-evenly;
+}
+
+#about_pane > section > a
+{
+    display: inline-block;
+    margin:  1rem 1rem;
+
+    color: var(--fg);
+}
+
+.copyleft
+{
+    display:   inline-block;
+    transform: rotate(180deg);
+}
diff --git a/style/normalize.css b/style/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/style/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}