From 11c7d041efaa6d2cca50bc58e263edfd7821147e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 23 Dec 2020 17:55:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20fixed=20landing=20html=20+=20sty?=
 =?UTF-8?q?ling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #52
---
 src/static/docs/index.html | 170 +++++++++++++++++++++++++++++++++----
 1 file changed, 155 insertions(+), 15 deletions(-)
diff --git a/src/static/docs/index.html b/src/static/docs/index.html
index e96cdf4..2870cac 100644
--- a/src/static/docs/index.html
+++ b/src/static/docs/index.html
@@ -1,16 +1,156 @@
 <!DOCTYPE html>
-<h1>Pick your poison</h1>
-<ul>
-    <li>
-        <a href="./redoc">ReDoc</a>
-    </li>
-    <li>
-        <a href="./swaggerui">SwaggerUI</a>
-    </li>
-    <li>
-        <a href="./rapidoc">RapiDoc</a>
-    </li>
-    <li>
-        <a href="./openapi.json">Raw Spec (json)</a>
-    </li>
-</ul>
\ No newline at end of file
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Docs</title>
+    <style>
+        :root {
+            --bg-color: #fff;
+            --bg-secondary-color: #f3f3f6;
+            --color-primary: #14854f;
+            --color-lightGrey: #d2d6dd;
+            --color-grey: #747681;
+            --color-darkGrey: #3f4144;
+            --color-error: #d43939;
+            --color-success: #28bd14;
+            --grid-maxWidth: 120rem;
+            --grid-gutter: 2rem;
+            --font-size: 1.6rem;
+            --font-color: #333;
+            --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+            --font-family-mono: monaco, "Consolas", "Lucida Console", monospace
+        }
+
+        html {
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            font-size: 62.5%;
+            line-height: 1.15;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%
+        }
+
+        *,
+        :after,
+        :before {
+            -webkit-box-sizing: inherit;
+            box-sizing: inherit
+        }
+
+        body {
+            background-color: var(--bg-color);
+            line-height: 1.6;
+            font-size: var(--font-size);
+            color: var(--font-color);
+            font-family: Segoe UI, Helvetica Neue, sans-serif;
+            font-family: var(--font-family-sans);
+            margin: 0;
+            padding: 0
+        }
+
+        h3 {
+            font-weight: 500;
+            margin: .35em 0 .7em
+        }
+
+        h3 {
+            font-size: 1.5em
+        }
+
+        a {
+            color: var(--color-primary);
+            text-decoration: none
+        }
+
+        a:hover:not(.button) {
+            opacity: .75
+        }
+
+        input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):not(:disabled):hover {
+            border-color: var(--color-grey)
+        }
+
+        ::-webkit-input-placeholder {
+            color: #bdbfc4
+        }
+
+        ::-moz-placeholder {
+            color: #bdbfc4
+        }
+
+        :-ms-input-placeholder {
+            color: #bdbfc4
+        }
+
+        ::-ms-input-placeholder {
+            color: #bdbfc4
+        }
+
+        .tabs {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex
+        }
+
+        .tabs a {
+            text-decoration: none
+        }
+
+        .tabs>a {
+            padding: 1rem 2rem;
+            -webkit-box-flex: 0;
+            -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+            color: var(--color-darkGrey);
+            border-bottom: 2px solid var(--color-lightGrey);
+            text-align: center
+        }
+
+        .tabs>a:hover {
+            opacity: 1;
+            border-bottom: 2px solid var(--color-darkGrey)
+        }
+
+        .is-vertical-align {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center
+        }
+
+        .is-center {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center
+        }
+
+        .is-center {
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center
+        }
+    </style>
+</head>
+
+<body>
+    <div class="hero">
+        <div class="logo is-center is-vertical-align">
+            <h3>API Docs</h3>
+        </div>
+        <nav class="tabs is-center">
+            <a href="./redoc">ReDoc</a>
+            <a href="./swaggerui">SwaggerUI</a>
+            <a href="./rapidoc">RapiDoc</a>
+            <a href="./openapi.json">Raw Spec (json)</a>
+        </nav>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
