${formatDate(new Date())} - ${time}
diff --git a/public/router.js b/public/router.js
index 6c5985a..769e626 100644
--- a/public/router.js
+++ b/public/router.js
@@ -302,6 +302,27 @@ function renderAppShell(container) {
sidebar.setAttribute('aria-label', t('nav.main'));
const sidebarLogo = document.createElement('div');
sidebarLogo.className = 'nav-sidebar__logo';
+
+ // SVG-Logomark: Haus-Symbol (Lucide "home" path, 24×24 viewBox)
+ const logomark = document.createElement('div');
+ logomark.className = 'nav-sidebar__logomark';
+ logomark.setAttribute('aria-hidden', 'true');
+ const logoSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ logoSvg.setAttribute('viewBox', '0 0 24 24');
+ logoSvg.setAttribute('fill', 'none');
+ logoSvg.setAttribute('stroke', 'currentColor');
+ logoSvg.setAttribute('stroke-width', '2.5');
+ logoSvg.setAttribute('stroke-linecap', 'round');
+ logoSvg.setAttribute('stroke-linejoin', 'round');
+ const housePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ housePath.setAttribute('d', 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z');
+ const doorPath = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+ doorPath.setAttribute('points', '9 22 9 12 15 12 15 22');
+ logoSvg.appendChild(housePath);
+ logoSvg.appendChild(doorPath);
+ logomark.appendChild(logoSvg);
+ sidebarLogo.appendChild(logomark);
+
const sidebarLogoSpan = document.createElement('span');
sidebarLogoSpan.textContent = 'Oikos';
sidebarLogo.appendChild(sidebarLogoSpan);
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index dd812e0..fb3ad88 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -92,12 +92,23 @@
--greeting-from: var(--color-accent-active);
--greeting-to: var(--color-accent);
background: linear-gradient(135deg, var(--greeting-from), var(--greeting-to));
+ transition: background var(--transition-slow);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
color: var(--color-text-on-accent);
grid-column: 1 / -1;
}
+/* Tageszeit-Varianten */
+.widget-greeting[data-time-variant="morning"] {
+ --greeting-from: var(--greeting-morning-from);
+ --greeting-to: var(--greeting-morning-to);
+}
+.widget-greeting[data-time-variant="evening"] {
+ --greeting-from: var(--greeting-evening-from);
+ --greeting-to: var(--greeting-evening-to);
+}
+
.widget-greeting__inner {
display: flex;
align-items: flex-start;
@@ -974,7 +985,7 @@
justify-content: center;
cursor: pointer;
transition:
- transform var(--transition-base),
+ transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
background-color var(--transition-fast);
border: none;
flex-shrink: 0;
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 4c86bf6..595789c 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -546,22 +546,24 @@
flex-shrink: 0;
}
- /* App-Icon als kompaktes Logo */
- .nav-sidebar__logo::before {
- content: 'O';
+ /* SVG-Logomark (via DOM API in router.js injiziert) */
+ .nav-sidebar__logomark {
width: var(--target-sm);
height: var(--target-sm);
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
color: var(--color-text-on-accent);
- font-size: var(--text-sm);
- font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
+ .nav-sidebar__logomark svg {
+ width: 16px;
+ height: 16px;
+ }
+
/* Logo-Text verstecken im collapsed-Modus */
.nav-sidebar__logo > span {
display: none;
@@ -662,10 +664,9 @@
gap: var(--space-3);
}
- .nav-sidebar__logo::before {
+ .nav-sidebar__logomark {
width: 28px;
height: 28px;
- font-size: var(--text-xs);
}
.nav-sidebar__logo > span {
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index ae0fcf4..d834e16 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -96,6 +96,12 @@
--_color-accent-active: #3730A3;
--color-accent-active: var(--_color-accent-active); /* Indigo-800 */
--color-accent-deep: #2E2D82; /* Tiefer Akzent für Gradienten, Wetter-Widget */
+
+ /* Greeting-Gradienten: Tageszeit-Varianten */
+ --greeting-morning-from: #C2410C; /* Orange-700 — Morgensonne */
+ --greeting-morning-to: #D97706; /* Amber-600 */
+ --greeting-evening-from: #6D28D9; /* Violet-700 */
+ --greeting-evening-to: #8250DF; /* = --module-calendar */
--_color-accent-secondary: #7C5CFC;
--color-accent-secondary: var(--_color-accent-secondary); /* Sekundärer Akzent für Logo-Gradient */
--_color-accent-light: #EEF2FF;