diff options
| author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-08-30 01:06:39 +0530 |
|---|---|---|
| committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-08-30 01:06:39 +0530 |
| commit | 2fdcb7c79e8333c0fa9c14e34da5eaebe96e32b4 (patch) | |
| tree | 919a0065276553b16c930885312008d2574fe114 /css/_menu_page.scss | |
first commit
Diffstat (limited to 'css/_menu_page.scss')
| -rw-r--r-- | css/_menu_page.scss | 72 |
1 files changed, 72 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; +} |