marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: update base styles and templates for improved layout and design

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 18:46:05 +02:00
parent daf2704253
commit e8d356a27a
3 changed files with 321 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates/base.html
View File

@@ -136,7 +136,7 @@
--accent-primary:#7c3aed;
--accent-secondary:#8b5cf6;
--glow-effect:0 0 8px rgba(139,92,246,.08);
background-image: linear-gradient(to bottom right, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
background-image: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
background-attachment: fixed;
}
/* Dark‑Mode */
@@ -161,42 +161,115 @@
background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
-webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
.glass-morphism { backdrop-filter: blur(10px); }
.glass-navbar { @apply glass-morphism border backdrop-blur-xl; }
.light .glass-navbar { background-color:rgba(255,255,255,.8); border-color:rgba(0,0,0,.05); }
.dark .glass-navbar { background-color:rgba(10,14,25,.8); border-color:rgba(255,255,255,.05); }
.glass-morphism {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
.glass-navbar {
@apply glass-morphism border backdrop-blur-xl;
}
body:not(.dark) .glass-navbar {
background-color:rgba(255,255,255,.85);
border-color:rgba(0,0,0,.05);
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.dark .glass-navbar {
background-color:rgba(10,14,25,.8);
border-color:rgba(255,255,255,.05);
}
/* Light-Mode spezifische Stile */
body:not(.dark) {
background-color: var(--bg-primary);
color: var(--text-primary);
background-image: linear-gradient(135deg, rgba(249, 250, 251, 0.92), rgba(243, 244, 246, 0.92));
}
.nav-link-light {
body:not(.dark) .nav-link {
color: var(--text-secondary);
transition: all 0.3s ease;
}
.nav-link-light:hover {
color: var(--text-primary);
background-color: rgba(126, 34, 206, 0.1);
}
.nav-link-light-active {
color: var(--accent-primary);
background-color: rgba(126, 34, 206, 0.15);
border-radius: 0.5rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
}
body:not(.dark) .nav-link:hover {
color: var(--text-primary);
background-color: rgba(124, 58, 237, 0.08);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
body:not(.dark) .nav-link-active,
body:not(.dark) .nav-link-light-active {
color: var(--accent-primary);
background-color: rgba(124, 58, 237, 0.12);
font-weight: 600;
}
/* Kartendesign im Light-Mode */
body:not(.dark) .card {
background-color: white;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(229, 231, 235, 0.6);
box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
border-radius: 12px;
transition: all 0.3s ease;
}
body:not(.dark) .card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-3px);
border-color: rgba(124, 58, 237, 0.2);
}
body:not(.dark) .glass-card {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
body:not(.dark) .glass-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
border-color: rgba(124, 58, 237, 0.25);
}
/* Verbesserte Buttons im Light Mode */
body:not(.dark) .btn {
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
color: white;
border: none;
box-shadow: 0 3px 6px rgba(91, 33, 182, 0.25);
border-radius: 10px;
padding: 0.625rem 1.25rem;
font-weight: 600;
transition: all 0.2s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body:not(.dark) .btn:hover {
background: linear-gradient(135deg, #9f7afa, #7c3aed);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(109, 40, 217, 0.3);
}
/* Light Mode Netzwerk-Hintergrund */
body:not(.dark) .network-background {
opacity: 0.3;
}
body:not(.dark) .network-background .node {
fill: rgba(124, 58, 237, 0.5);
}
body:not(.dark) .network-background .link {
stroke: rgba(124, 58, 237, 0.2);
stroke-width: 1.5;
}
</style>
</head>