Initial commit. Google-like design.

2 files changed, 772 insertions, 0 deletions

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;
+}