diff --git a/.gitignore b/.gitignore index 4a38385..e0f889d 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,10 @@ server/node_modules/ .DS_Store # Aufgabenstellung enthaelt Server-Passwoerter im Klartext Anforderungen.txt + +# Rohvorlagen der Logos im Projektstamm. Nur die freigestellte Fassung in +# public/pulse-logo.png wird gebraucht. Fuehrender Schraegstrich, sonst greift +# das Muster unter Windows auch auf public/pulse-logo.png (Gross-/Kleinschreibung). +/Logo*.png +/Logo*.jpg +/Pulse-Logo.png diff --git a/public/pulse-logo.png b/public/pulse-logo.png new file mode 100644 index 0000000..6d2a094 Binary files /dev/null and b/public/pulse-logo.png differ diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 2ed805c..b7e1dc5 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -62,13 +62,12 @@ export const Sidebar: React.FC = ({ current, onNavigate, collapsed {collapsed ? ( ) : ( -
- perinco - - - Pulse - -
+ /* + * Das Pulse-Logo traegt den Namen selbst, deshalb steht daneben kein + * Schriftzug mehr. Kein logo-adaptive: die Wuerfel sind gruen und + * sollen im Dunkelmodus nicht umgefaerbt werden. + */ + Pulse )} diff --git a/src/index.css b/src/index.css index 7b40d5a..1a2fff0 100644 --- a/src/index.css +++ b/src/index.css @@ -885,14 +885,19 @@ html.theme-aura:not(.dark) { --aura-header-position: right -45px top -55px, center, center, center; --aura-header-size: 130px 130px, cover, cover, cover; --aura-cloud-opacity: 1; + /* + * Hell ohne Grafik-Ebene: die Huegel liegen in .app-sidebar::after und + * schaukeln dort (siehe @keyframes aura-hills). Als Hintergrundbild liesse + * sich das nur ueber background-position bewegen - das ruckelt und ist bei + * den breiten Huegeln kaum zu sehen. + */ --theme-sidebar-image: linear-gradient( - 180deg, - rgb(255 253 247 / 0.97) 0%, - rgb(255 253 247 / 0.88) 45%, - rgb(255 253 247 / 0.35) 78%, - rgb(255 253 247 / 0.5) 100% - ), - url('/themes/aura-sidebar.svg'); + 180deg, + rgb(255 253 247 / 0.97) 0%, + rgb(255 253 247 / 0.88) 45%, + rgb(255 253 247 / 0.35) 78%, + rgb(255 253 247 / 0.5) 100% + ); --color-canvas: #fbf6ea; --color-surface: #fffdf7; @@ -1105,15 +1110,35 @@ html.theme-aura.dark { } /* - * Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her. + * Aura, hell: die Huegel am Fuss der Seitenleiste schaukeln. * - * Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber - * bleibt stehen. Die Grafik ist an der Unterkante verankert und breiter - * zugeschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine - * Luecke. 26 Sekunden pro Runde: als Bewegung kaum bemerkbar, aber lebendig. + * Sie liegen in einer eigenen Ebene und werden per transform bewegt - das + * laeuft auf der Grafikkarte und ist sichtbar, waehrend ein verschobenes + * Hintergrundbild bei diesen breiten Formen kaum auffiel. + * + * `z-index: -1` plus `isolation: isolate` haelt sie hinter Namen und + * Abmelden-Knopf, aber ueber der Flaeche. Die Ebene ist links und rechts + * 48 px breiter als die Leiste; weil die Leiste `overflow-hidden` traegt, + * bleibt der Ausschlag unsichtbar und es entsteht keine Luecke am Rand. */ html.theme-aura:not(.dark) .app-sidebar { - animation: aura-hills 26s ease-in-out infinite; + position: relative; + isolation: isolate; + } + + html.theme-aura:not(.dark) .app-sidebar::after { + content: ''; + position: absolute; + right: -48px; + bottom: -12px; + left: -48px; + height: 58%; + z-index: -1; + pointer-events: none; + background: url('/themes/aura-sidebar.svg') no-repeat bottom center / cover; + /* Entspricht dem Schleier, der vorher darueber lag. */ + opacity: 0.5; + animation: aura-hills 18s ease-in-out infinite; } /* @@ -1344,21 +1369,19 @@ html.theme-aura.dark { } } +/* + * Schaukelnde Huegel: 26 px nach rechts, dabei 5 px auf und ab. Weit genug, + * dass man es sieht, langsam genug (18 s), dass es beim Arbeiten nicht stoert. + */ @keyframes aura-hills { 0% { - background-position: - center top, - calc(50% - 9px) bottom; + transform: translate3d(-26px, 5px, 0); } 50% { - background-position: - center top, - calc(50% + 9px) calc(100% + 4px); + transform: translate3d(26px, -4px, 0); } 100% { - background-position: - center top, - calc(50% - 9px) bottom; + transform: translate3d(-26px, 5px, 0); } } @@ -1373,7 +1396,7 @@ html.theme-aura.dark { @media (prefers-reduced-motion: reduce) { html.theme-aura .app-header::before, - html.theme-aura:not(.dark) .app-sidebar { + html.theme-aura:not(.dark) .app-sidebar::after { animation: none; } }