terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

fix alignment of nav

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:22:45 +02:00
parent 6e22ff12b9
commit da2acbf377
1 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/nav.njk
+24 -10
View File
@@ -20,13 +20,19 @@
border-radius: 0.5rem; border-radius: 0.5rem;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
grid-template-columns: auto 1fr; grid-template-columns: 4rem 1fr;
grid-template-rows: auto; grid-template-rows: auto;
padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding); padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding);
} }
.logo { a {
padding-right: var(--medium-padding); display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
a > svg {
fill: var(--light-gray);
} }
slot { slot {
@@ -34,7 +40,7 @@
gap: var(--small-padding); gap: var(--small-padding);
grid-auto-columns: 14rem; grid-auto-columns: 14rem;
grid-auto-flow: column; grid-auto-flow: column;
grid-template-rows: 4rem; grid-template-rows: 1fr;
justify-content: start; justify-content: start;
} }
@@ -44,20 +50,24 @@
tesoft-button.small-menu::part(children) { tesoft-button.small-menu::part(children) {
display: grid; display: grid;
grid-template-columns: 1fr auto; gap: 1rem;
grid-template-columns: 1fr 4rem;
grid-template-rows: auto; grid-template-rows: auto;
width: 100%; width: 100%;
} }
tesoft-button.small-menu span { tesoft-button.small-menu span {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 2;
grid-row: 1; grid-row: 1;
} }
tesoft-button.small-menu svg { tesoft-button.small-menu svg {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
height: 2.4rem;
justify-self: end;
width: 2.4rem;
} }
dialog { dialog {
@@ -67,6 +77,7 @@
} }
dialog.small-menu tesoft-button { dialog.small-menu tesoft-button {
min-height: 4rem;
width: 100%; width: 100%;
} }
@@ -110,13 +121,17 @@
<nav> <nav>
<div> <div>
<img class="logo" src="/public/assets/logo.svg"> <a href="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M240-360h96q19 0 32.5-13.5T382-406v-148q0-19-13.5-32.5T336-600h-96v240Zm46-46v-148h50v148h-50Zm149 46h98v-46h-82v-52h52v-46h-52v-50h82v-46h-98q-13 0-21.5 8.5T405-570v180q0 13 8.5 21.5T435-360Zm228.5-9.5Q673-378 676-391l56-209h-48l-43 164-43-164h-48l56 209q3 13 12.5 21.5T641-361q13 0 22.5-8.5ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
</svg>
</a>
<slot> <slot>
</slot> </slot>
<tesoft-button class="small-menu"> <tesoft-button class="small-menu">
<span></span> <span></span>
<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/> <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
</svg> </svg>
</tesoft-button> </tesoft-button>
@@ -130,8 +145,7 @@
<dialog class="exec" closedby="any"> <dialog class="exec" closedby="any">
<div> <div>
<tesoft-input> <tesoft-input>
<svg slot="left" xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" <svg slot="left" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
width="2.4rem">
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/> <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
</svg> </svg>
</tesoft-input> </tesoft-input>