style

2021-07-07 22:04:20 +03:00 · 2021-07-07 22:04:20 +03:00 · 8111e1bf5d
parent 01423bd7f0
commit 8111e1bf5d
4 changed files with 131 additions and 25 deletions
--- a/docs/.nojekyll
+++ b/docs/.nojekyll
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/index.html
+++ b/docs/index.html
@ -2,34 +2,45 @@
 <html lang="en">
 <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Turn 0 Around</title>
-    <style type="text/css">
-        html, 
-        body {
-            height: 90%;
-        }
-
-        body {
-            background-color: #38607c;
-        }
-
-        div.wrap {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-        }
-
-        h1.slogan {
-            font-family: sans-serif;
-            color: #d44e52;
-            text-align: center;
-        }
-    </style>
+    <link type="text/plain" rel="author" href="http://iiiypuk.me/humans.txt">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
-    <div class="wrap">
-        <h1 class="slogan">licking and assemble</h1>
+    <div class="container">
+        <header>
+            <p>
+                Turn 0 Around
+                <span class="slogan">// licking and assemble //</span>
+            </p>
+            <!-- <p id="languages">
+                <a href="/ru/">Switch to Russian</a>
+            </p> -->
+        </header>
+
+        <nav>
+            <a href="#">Blog</a>
+            <a href="#">Games</a>
+            <a href="#">Products</a>
+            <a href="#">Vacancies</a>
+        </nav>
+
+        <main>
+            <p class="future">
+                !! DANGER !!<br>
+                Soon. In the near future.
+            </p>
+        </main>
+
+        <footer>
+            made by
+            <a href="//iiiypuk.me/">iiiypuk</a>
+            with love
+        </footer>
    </div>
 </body>
 </html>
--- a/docs/styles.css
+++ b/docs/styles.css
@ -0,0 +1,95 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+html, 
+body {
+    height: 90%;
+}
+
+body {
+    background-color: #2f3542;
+    font-family: ABeeZee;
+    font-size: 1.2rem;
+    color: #ffffff;
+}
+
+div.container {
+    flex-grow: 1;
+}
+
+header {
+    padding: 16px;
+    margin: 16px 0;
+    display: flex;
+}
+
+header p {
+    flex-grow: 1;
+}
+
+header p#languages {
+    text-align: right;
+}
+
+header p#languages a { color: #ffffff; }
+
+span.slogan {
+    color: #a4b0be;
+}
+
+nav {
+    display: flex;
+}
+
+nav a {
+    color: #ffffff;
+    background-color: #ff96a6;
+    flex-grow: 1;
+    text-align: center;
+    text-decoration: none;
+    padding: 16px;
+    transition: all 200ms;
+}
+
+nav a:hover {
+    background-color: #ff6b81;
+    transition: all 200ms;
+    border: 0;
+}
+
+footer {
+    text-align: center;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin-bottom: 0px;
+    padding: 16px;
+}
+
+main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 800px;
+    margin: 16px auto;
+    height: 400px;
+}
+
+p.future {
+    color: #ff6b81;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+}
+
+a {
+    color: #ff4757;
+    text-decoration: none;
+}
+
+a:hover {
+    border-bottom: 1px dashed #ff4757;
+}