🎨 fixed landing html + styling

ref #52
2020-12-23 17:55:44 +01:00 · 2020-12-23 17:55:44 +01:00 · 11c7d041ef
parent 9ab6eb5314
commit 11c7d041ef
1 changed files with 155 additions and 15 deletions
--- 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>
+<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>