From 2fdcb7c79e8333c0fa9c14e34da5eaebe96e32b4 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Wed, 30 Aug 2023 01:06:39 +0530
Subject: first commit

---
 css/_menu_page.scss | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 css/_menu_page.scss

(limited to 'css/_menu_page.scss')

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;
+}
-- 
cgit v1.2.3