first commit

3 files changed, 163 insertions, 0 deletions

diff --git a/css/_menu_page.scss b/css/_menu_page.scss
new file mode 100644
index 0000000..f42d799
--- /dev/null
+++ b/css/_menu_page.scss
@@ -0,0 +1,72 @@
+.menu-wrapper {
+    max-width: 35em;
+    width: 90%;
+    margin: auto;
+
+    .menu {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+        width: 100%;
+
+        .items-wrapper {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1em;
+
+            .menu-item {
+                $menuitem-height: 5em;
+                width: 100%;
+                height: $menuitem-height;
+                border: 1px solid var(--link-fg);
+                border-radius: 0.3em;
+
+                display: grid;
+                grid-template-columns: 15fr 85fr;
+                align-items: center;
+
+                color: var(--body-fg);
+                text-decoration: none;
+
+                transition: width 150ms, margin-left 150ms;
+
+                .logo {
+                    height: $menuitem-height;
+                    width: $menuitem-height;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    svg {
+                        $dim: calc($menuitem-height - 2em);
+                        height: $dim;
+                        width: $dim;
+                    }
+                }
+
+                .label {
+                    font-size: 1.7em;
+                    font-weight: bold;
+                    padding-bottom: 0.15em;
+                }
+            }
+
+            .menu-item:hover {
+                width: 105%;
+                margin-left: 5%;
+                transition: width 200ms, margin-left 200ms;
+            }
+        }
+    }
+}
+
+#manage-menu-page, #home-page {
+    $h: calc(var(--nav-height) + calc(var(--main-padding) * 2));
+    height: calc(100vh - $h);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/css/_navbar.scss b/css/_navbar.scss
new file mode 100644
index 0000000..f55d215
--- /dev/null
+++ b/css/_navbar.scss
@@ -0,0 +1,49 @@
+#navbar-wrapper {
+    width: 100%;
+    background-color: var(--nav-bg);
+    color: var(--nav-fg);
+    height: var(--nav-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    #navbar {
+        height: 100%;
+        width: 98%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        #nav-logo {
+            height: var(--nav-height);
+
+            a {
+                height: 100%;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                img {
+                    max-width: 100%;
+                    max-height: 90%;
+                }
+            }
+        }
+
+        nav {
+            flex: 1;
+            display: flex;
+            justify-content: right;
+            gap: 0.6rem;
+
+            a {
+                color: var(--nav-fg);
+            }
+
+            a.active {
+                color: var(--link-fg);
+            }
+        }
+    }
+}
diff --git a/css/styles.scss b/css/styles.scss
new file mode 100644
index 0000000..900d4a5
--- /dev/null
+++ b/css/styles.scss
@@ -0,0 +1,42 @@
+// font import
+// TODO: serve font yourself
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
+
+@import "navbar";
+@import "menu_page";
+
+:root {
+    --body-bg: #282a36;
+    --body-fg: #f8f8f8;
+
+    --nav-bg: #383a59;
+    --nav-fg: #f8f8f8;
+    --nav-height: 4rem;
+
+    --link-fg: #bd93f9;
+
+    --main-padding: 0.7rem;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+* {
+    font-family: 'Open Sans', sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--body-bg);
+    color: var(--body-fg);
+}
+
+main {
+    width: 100%;
+    max-width: 1500px;
+    margin: 0 auto;
+    min-height: calc(100vh - var(--nav-height));
+    padding: var(--main-padding);
+}