From 1675ada70bea82cb5ed605ca4eecdb08894d758f Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Sun, 22 Jan 2023 22:30:15 +0100 Subject: [PATCH] Make the menu work as a menu --- web/static/numerus.css | 56 ++++++++++++++++++++++++++++++++---------- web/template/app.html | 17 ++++++++----- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/web/static/numerus.css b/web/static/numerus.css index f4b948c..5d5ac28 100644 --- a/web/static/numerus.css +++ b/web/static/numerus.css @@ -152,7 +152,7 @@ --numerus--color--hay: #ffe673; --numerus--text-color: var(--numerus--color--black); - --numerus--background-color: var(--numerus--color-white); + --numerus--background-color: var(--numerus--color--white); --numerus--font-family: 'JetBrains Mono'; --numerus--header--background-color: #ede9e5; @@ -168,8 +168,8 @@ html { } body { - color: var(--numerus--text-color); background-color: var(--numerus--background-color); + color: var(--numerus--text-color); font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: antialiased; @@ -234,16 +234,21 @@ header { justify-content: space-between; align-items: center; background-color: var(--numerus--header--background-color); - padding: 1rem 3rem; + padding: 0rem 3rem; } -nav { +main { + padding: 3rem; +} + +.relative { position: relative; } -nav > button { +#profilebutton { width: 7rem; height: 7rem; + margin: 1rem 0; display: flex; justify-content: center; align-items: center; @@ -251,25 +256,50 @@ nav > button { border: none; } -nav button { +#profilebutton, #profilemenu button { cursor: pointer; } -nav ul { +#profilemenu { list-style: none; - padding: none; position: absolute; right: -1.875em; - top: calc(100% + 1rem); + top: 100%; padding: 1rem 2rem; background-color: var(--numerus--color--white); + display: none; + opacity: 0; + z-index: 10; } -nav ul li + li { +header div:hover #profilemenu { + opacity: 1; + display: initial; +} + +header .overlay { + background-color: var(--numerus--header--background-color); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + display: none; + pointer-events: none; + mix-blend-mode: multiply; +} + +header div:hover + .overlay { + display: block; + opacity: 1; +} + +#profilemenu li + li { border-top: 1px solid var(--numerus--color--black); } -nav ul button, nav ul a { +#profilemenu button, #profilemenu a { font-size: 2rem; font-style: italic; height: 8rem; @@ -283,12 +313,12 @@ nav ul button, nav ul a { text-transform: initial; } -nav ul i[class^='ri-'] { +#profilemenu i[class^='ri-'] { margin-right: 2rem; color: var(--numerus--color--dark-gray); } -nav ul button:hover, nav ul a:hover { +#profilemenu button:hover, #profilemenu a:hover { background-color: var(--numerus--color--light-gray); } diff --git a/web/template/app.html b/web/template/app.html index 7f14c75..c7faca4 100644 --- a/web/template/app.html +++ b/web/template/app.html @@ -9,13 +9,18 @@

Numerus

- + +
{{- template "content" . }}