tandem
/
numerus
2
0
Fork 0
Code Issues 37 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Make the menu work as a menu

This commit is contained in:
jordi fita mas 2023-01-22 22:30:15 +01:00
parent 5505fa41c3
commit 1675ada70b
2 changed files with 54 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/static/numerus.css
View File

@ -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);
}

17
web/template/app.html
View File

@ -9,13 +9,18 @@
<body>
<header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<nav role="navigation">
<button aria-haspopup="true"><i class="ri-eye-close-line ri-3x"></i></button>
<ul>
<li><a href="/profile"><i class="ri-account-circle-line"></i> {{( gettext "Account" )}}</a></li>
<li><form method="POST" action="/logout"><button type="submit"><i class="ri-logout-circle-line"></i> {{( pgettext "Logout" "action" )}}</button></form></li>
<div class="relative">
<button id="profilebutton" aria-controls="profilemenu" aria-haspopup="true"><i class="ri-eye-close-line ri-3x"></i></button>
<ul id="profilemenu" role="menu" aria-labelledby="profilebutton">
<li role="presentation">
<a role="menuitem" href="/profile"><i class="ri-account-circle-line"></i> {{( gettext "Account" )}}</a>
</li>
<li role="presentation">
<form method="POST" action="/logout"><button type="submit" role="menuitem"><i class="ri-logout-circle-line"></i> {{( pgettext "Logout" "action" )}}</button></form>
</li>
</ul>
</nav>
</div>
<div class="overlay"></div>
</header>
<main>
{{- template "content" . }}