MatDenDagen/Components/Layout/AdminLayout.razor
+6
-0
diff --git a/MatDenDagen/Components/Layout/AdminLayout.razor b/MatDenDagen/Components/Layout/AdminLayout.razor
index 1d6c901..2a717e3 100644
@@ -2,8 +2,14 @@
<div class="admin-layout">
<div class="admin-sidebar">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<div class="admin-logo">
<h2><a href="/admin">Admin Panel</a></h2>
<label for="nav-toggle" class="nav-toggle-label" aria-label="Öppna meny">
<span></span>
<span></span>
<span></span>
</label>
</div>
<nav class="admin-nav">
<ul>
MatDenDagen/Components/Layout/AdminLayout.razor.css
+50
-0
diff --git a/MatDenDagen/Components/Layout/AdminLayout.razor.css b/MatDenDagen/Components/Layout/AdminLayout.razor.css
index 6f5d836..1b5a647 100644
@@ -19,12 +19,15 @@
padding: 0 1.5em 1.5em;
border-bottom: 2px solid var(--wood-dark);
margin-bottom: 1.5em;
display: flex;
flex-direction: row;
}
.admin-logo h2 {
font-size: 1.5rem;
text-align: center;
position: relative;
flex: 1;
}
.admin-logo h2 a {
@@ -105,6 +108,40 @@
opacity: 0.3;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
cursor: pointer;
}
.nav-toggle-label span {
display: block;
width: 24px;
height: 3px;
background-color: var(--paper-color);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
.nav-toggle:checked ~ .admin-logo .nav-toggle-label span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle:checked ~ .admin-logo .nav-toggle-label span:nth-child(2) {
opacity: 0;
}
.nav-toggle:checked ~ .admin-logo .nav-toggle-label span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 768px) {
.admin-layout {
flex-direction: column;
@@ -127,4 +164,17 @@
.admin-main {
padding: 1em;
}
.nav-toggle-label {
display: flex;
}
.admin-nav {
display: none;
overflow-x: unset;
}
.nav-toggle:checked ~ .admin-nav {
display: block;
}
}
MatDenDagen/Components/Pages/Home.razor.css
+14
-2
diff --git a/MatDenDagen/Components/Pages/Home.razor.css b/MatDenDagen/Components/Pages/Home.razor.css
index 541b4b0..d731b96 100644
@@ -1,6 +1,10 @@
.home-content {
max-width: 800px;
margin: 0 auto;
h1 {
text-align: center;
}
}
.cookbook-intro {
@@ -26,11 +30,15 @@
.date-range {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
margin: 1.5em 0;
flex-wrap: wrap;
@media (min-width: 768px) {
flex-direction: row;
gap: 1em;
}
}
.date-start,
@@ -102,6 +110,10 @@
box-shadow: var(--box-shadow);
animation: fadeIn 0.5s ease;
position: relative;
code {
white-space: nowrap;
}
}
.date-reveal-checkbox:checked + label + .date-reveal-content,
MatDenDagen/wwwroot/app.css
+1
-0
diff --git a/MatDenDagen/wwwroot/app.css b/MatDenDagen/wwwroot/app.css
index a8f20e0..8f30ec1 100644
@@ -62,6 +62,7 @@ html {
font-size: 16px;
line-height: 1.6;
scroll-behavior: smooth;
overscroll-behavior-x: none;
}
body {