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

🎨 style: update base styles and database schema for improved layout

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 18:14:04 +02:00
parent 7f33dea278
commit 460c3f987e
3 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
database/systades.db
View File

Binary file not shown.

80
static/css/base-styles.css
View File

@@ -460,17 +460,53 @@ body:not(.dark) button:not(.toggle) {
background-color: var(--light-primary); background-color: var(--light-primary);
color: white; color: white;
border: none; border: none;
box-shadow: var(--light-shadow); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 0.375rem; border-radius: 8px;
padding: 0.5rem 1rem; padding: 0.625rem 1.25rem;
transition: all 0.3s ease; transition: all 0.2s ease;
font-weight: 600;
letter-spacing: 0.02em;
} }
body:not(.dark) .btn:hover, body:not(.dark) .btn:hover,
body:not(.dark) button:not(.toggle):hover { body:not(.dark) button:not(.toggle):hover {
background-color: var(--light-primary-hover); background-color: var(--light-primary-hover);
transform: translateY(-2px); transform: translateY(-1px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Dark/Light Mode Switch Button */
.theme-toggle {
position: relative;
width: 48px;
height: 24px;
background: linear-gradient(to right, #7c3aed, #3b82f6);
border-radius: 24px;
padding: 2px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.theme-toggle::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
top: 2px;
left: 2px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.theme-toggle.dark::after {
transform: translateX(24px);
}
.theme-toggle:hover::after {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
} }
/* Light Mode Cards und Panels */ /* Light Mode Cards und Panels */
@@ -547,33 +583,37 @@ body:not(.dark) .card:hover {
/* Light Mode Buttons mit verbesserter Lesbarkeit */ /* Light Mode Buttons mit verbesserter Lesbarkeit */
body:not(.dark) .btn-primary { body:not(.dark) .btn-primary {
background: linear-gradient(135deg, var(--light-primary), var(--light-primary-hover)); background: linear-gradient(135deg, #7c3aed, #6d28d9);
color: white; color: white;
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 500; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.02em;
box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2);
border-radius: 8px;
} }
body:not(.dark) .btn-primary:hover { body:not(.dark) .btn-primary:hover {
background: linear-gradient(135deg, var(--light-primary-hover), var(--light-primary)); background: linear-gradient(135deg, #8b5cf6, #7c3aed);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transform: translateY(-1px);
} }
body:not(.dark) .btn-secondary { body:not(.dark) .btn-secondary {
background: linear-gradient(135deg, #f8fafc, #f1f5f9); background: white;
color: var(--light-text); color: #1f2937;
border: 1px solid #e5e7eb; border: 2px solid #e5e7eb;
font-weight: 500; font-weight: 600;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-radius: 8px;
} }
body:not(.dark) .btn-secondary:hover { body:not(.dark) .btn-secondary:hover {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0); background: #f9fafb;
border-color: #d1d5db; border-color: #d1d5db;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
} }
body:not(.dark) .btn-outline { body:not(.dark) .btn-outline {

16
templates/base.html
View File

@@ -326,20 +326,10 @@
<!-- Dark/Light Mode Schalter --> <!-- Dark/Light Mode Schalter -->
<button <button
@click="toggleDarkMode()" @click="toggleDarkMode()"
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus:outline-none" class="theme-toggle"
:class="darkMode ? 'bg-purple-600' : 'bg-gray-200'" :class="{ 'dark': darkMode }"
aria-label="Dark Mode umschalten"
> >
<span class="sr-only">Dark Mode umschalten</span>
<!-- Schieberegler -->
<span
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
:class="darkMode ? 'translate-x-6' : 'translate-x-1'"
></span>
<!-- Icons -->
<i class="fas fa-sun absolute left-1 text-yellow-400 transition-opacity duration-300"
:class="darkMode ? 'opacity-0' : 'opacity-100'"></i>
<i class="fas fa-moon absolute right-1 text-gray-100 transition-opacity duration-300"
:class="darkMode ? 'opacity-100' : 'opacity-0'"></i>
</button> </button>
<!-- Profil-Link oder Login --> <!-- Profil-Link oder Login -->
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}