From 8b0b23a87229af45f63ce2ffd498db7e19dc8468 Mon Sep 17 00:00:00 2001 From: Aron Date: Wed, 5 Nov 2025 15:21:36 +0100 Subject: [PATCH] change styling --- static/css/style.css | 86 ++++++++++++++++++++++++++++------ templates/base.html | 1 + templates/landing.html | 102 ++++++++++++++++++++++++++--------------- 3 files changed, 139 insertions(+), 50 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index d5fe76a..c9514bb 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -28,7 +28,12 @@ body { width: 100%; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: 'HealTheWebB', sans-serif; color: #2C3E50; margin: 0.5em 0; @@ -99,18 +104,33 @@ main { } .container { - max-width: 900px; + max-width: 1200px; width: 90%; margin: 3em auto; display: flex; flex-direction: column; gap: 1.5em; background: #FFFFFF; - padding: 2em; + padding: 3em; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } +/* Grid layout for link cards */ +.link-cards-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 1.5em; + row-gap: 1.5em; + margin-top: 1em; +} + +@media (max-width: 768px) { + .link-cards-grid { + grid-template-columns: 1fr; + } +} + section { margin-bottom: 2em; padding: 1.5em; @@ -323,8 +343,13 @@ section a:hover { } @keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } .modal-close { @@ -357,6 +382,7 @@ section a:hover { transform: scale(0.8); opacity: 0; } + to { transform: scale(1); opacity: 1; @@ -380,25 +406,54 @@ section a:hover { a.link-card, .link-card { - display: block; - padding: 1.2em 1em; - background-color: #F9F9F9; + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1em; + padding: 1.5em 1.8em; + background-color: #F8F9FA; color: #1C1C1E; border-left: 6px solid #cd0d80; border-radius: 12px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); - margin-bottom: 1rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + margin: 0; } a.link-card:hover, .link-card:hover { background-color: #cd0d80; color: #FFFFFF; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); + transform: translateY(-4px); +} + +.link-card:hover .card-icon { + color: #FFFFFF; + transform: scale(1.15); +} + +.link-card:hover .tagline { + color: rgba(255, 255, 255, 0.9); +} + +.card-icon { + font-size: 2.5rem; + color: #cd0d80; + min-width: 2.5rem; + width: 2.5rem; + flex-shrink: 0; + transition: all 0.3s ease; + margin-top: 0.2em; +} + +.card-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.3em; } .link-card .title { @@ -410,6 +465,7 @@ a.link-card:hover, font-size: 0.875rem; color: #666; margin-top: 0.25rem; + transition: color 0.3s ease; } @@ -556,7 +612,8 @@ table { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } -th, td { +th, +td { border: 1px solid #E1E1E6; padding: 0.5em; text-align: center; @@ -845,7 +902,8 @@ footer a:hover { overflow-x: auto; } - th, td { + th, + td { padding: 0.45em; font-size: 0.9em; } diff --git a/templates/base.html b/templates/base.html index 7bf6cb0..b5f9fc1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,7 @@ {% block title %}studio einszwovier{% endblock %} + diff --git a/templates/landing.html b/templates/landing.html index 06b0356..bcb41bd 100644 --- a/templates/landing.html +++ b/templates/landing.html @@ -39,49 +39,79 @@ - -
einszwovier - Über uns
-
Erfahre, wer wir sind, welche Projekte wir realisieren und wie du uns findest.
- +
+ + +
+
einszwovier - Über uns
+
Erfahre, wer wir sind, welche Projekte wir realisieren und wie du uns findest. +
+
+ - -
Großformat - Kostenrechner
-
Berechne einfach Druck- und Materialkosten für Posterprints und andere Großformate.
- + + +
+
Großformat - Kostenrechner
+
Berechne einfach Druck- und Materialkosten für Posterprints und andere Großformate. +
+
+ - -
Wissenssammlung
-
Zugriff auf geteilte Anleitungen und Dokumente innerhalb von BookStack – ideal für die - Zusammenarbeit. Schreib uns eine kurze E-Mail, um einen Login zu erhalten.
- + + +
+
Wissenssammlung
+
Zugriff auf geteilte Anleitungen und Dokumente innerhalb von BookStack – ideal für + die + Zusammenarbeit. Schreib uns eine kurze E-Mail, um einen Login zu erhalten.
+
+ - -
Lokaler Chatbot
-
Teste unsere schulischen Large Language Models direkt über die Weboberfläche.
- + + +
+
Lokaler Chatbot
+
Teste unsere schulischen Large Language Models direkt über die Weboberfläche.
+
+ - -
JupyterHub
-
Interaktive Python-Notebooks für Datenanalyse, Visualisierung und kollaboratives - Programmieren. Schreib uns eine E-Mail für Login-Daten.
- + + +
+
JupyterHub
+
Interaktive Python-Notebooks für Datenanalyse, Visualisierung und kollaboratives + Programmieren. Schreib uns eine E-Mail für Login-Daten.
+
+ - -
Forgejo Git Server
-
Versionskontrolle und Code-Hosting für kollaborative Softwareprojekte. Ideal für gemeinsame - Entwicklung und Projektmanagement.
- + + +
+
Forgejo Git Server
+
Versionskontrolle und Code-Hosting für kollaborative Softwareprojekte. Ideal für + gemeinsame + Entwicklung und Projektmanagement.
+
+ - -
Matrix Chat
-
Browser-basierter Chat für die studio einszwovier Community. Nutzt den bestehenden - Matrix-Server – keine App-Installation nötig.
- + + +
+
Matrix Chat
+
Browser-basierter Chat für die studio einszwovier Community. Nutzt den bestehenden + Matrix-Server – keine App-Installation nötig.
+
+ - -
Kontakt
-
Schreibe uns direkt an: einszwovier@gvb-gymnasium.de
- + + +
+
Kontakt
+
Schreibe uns direkt an: einszwovier@gvb-gymnasium.de
+
+ +