Initial commit. Google-like design.

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