Navbar mockup

1 year ago · d669adeb2f
parent 1c660608ee
commit d669adeb2f
2 changed files with 144 additions and 52 deletions
--- a/styles/sass/style.scss
+++ b/styles/sass/style.scss
@ -1,11 +1,82 @@
+@use "sass:color";
+
+$bg: #FFFDF3;
+$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -2%, $saturation: -50%)};
+$fg: #011627;
+
+:root {
+  --bg: #{$bg};
+  --fg: #{$fg};
+}
+
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background: #1e1e2e;
-  color: #c6d0f5;
+  font-family: 'Nunito', 'K Gothic', sans-serif;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 2em;
+  background: $bg0;
+  color: var(--fg);
+  font-size: 1.25em;
+}
+
+#content {
+  width: 100%;
+  background: var(--bg);
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
+
+  & > div {
+    padding: 1em;
+  }
+
+  nav {
+    --bg: #{$fg};
+    --fg: #{$bg};
+    background: var(--bg);
+    color: var(--fg);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125);
+
+    display: flex;
+
+    & > * {
+      padding: 0.45em;
+
+      & > * {
+        vertical-align: middle;
+      }
+    }
+
+    & > a {
+      color: var(--fg);
+      font-weight: bold;
+
+      &:hover {
+        border: none;
+        --fg: #{$fg};
+        --bg: #{$bg};
+        background: var(--bg);
+        cursor: pointer;
+      }
+    }
+
+    & > :last-child {
+      margin-left: auto;
+    }
+
+    img {
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
 }

-b, strong {
-  color: #eff1f5;
+.svg-inline {
+  height: 1em;
+  vertical-align: -0.125em;
 }

 a {
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@ -2,9 +2,28 @@
 <html>
 <head>
    <title>Tegaki Tuesday</title>
+    <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=Nunito:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
 </head>
 <body>
+    <div id="content">
+        <nav>
+            <a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a>
+            <input type="number">
+            <a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></a>
+            {% if content.song %}
+                <div>
+                    <span>{{ content.song.japanese }}</span>
+                </div>
+            {% endif %}
+            {# <a href="#">Login</a> #}
+            <a>
+                <span>@mochamoko</span> <img src="https://cdn.discordapp.com/avatars/101938458200641536/dd726225dbf0ae3d7888c6dbfec3eabe.webp?size=1024">
+            </a>
+        </nav>
+        <div>
            <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
            <a href="/{{ challenge - 1 }}">Previous</a>
            <a href="/{{ challenge + 1 }}">Next</a>
@ -55,5 +74,7 @@
            {%- if content.suggester -%}
                <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
            {%- endif -%}
+        </div>
+    </div>
 </body>
 </html>