From 9946ecfca491ed73e34468e6c3c44e0807d10949 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Malte=20Schr=C3=B6der?= Date: Thu, 18 Dec 2025 15:49:03 +0100 Subject: [PATCH] css loading error fix --- style/home.scss | 118 --------------------------------------------- style/main.scss | 124 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 120 insertions(+), 122 deletions(-) delete mode 100644 style/home.scss diff --git a/style/home.scss b/style/home.scss deleted file mode 100644 index f7d4b30..0000000 --- a/style/home.scss +++ /dev/null @@ -1,118 +0,0 @@ -.home-container { - max-width: 1100px; - margin: 0 auto; - padding: 0 1rem; -} - -.projects-grid { - display: grid; - // Sorgt dafür, dass die Karten immer gleich breit sind - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 2rem; - margin: 2rem 0; - // Verhindert Layout-Shifts - align-items: stretch; -} - -.project-card { - background: var(--white); - border-radius: 1rem; - border: 1px solid var(--border); - overflow: hidden; - display: flex; - flex-direction: column; - transition: transform 0.2s ease, box-shadow 0.2s ease; - height: 100%; // Wichtig für einheitliche Höhe im Grid - - &:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0,0,0,0.05); - } - - .project-image { - height: 180px; - background: #f1f5f9; - img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } - } - - .project-content { - padding: 1.25rem; - display: flex; - flex-direction: column; - flex-grow: 1; - - h3 { - margin: 0 0 0.5rem 0; - font-size: 1.25rem; - color: var(--text-main); - } - - p { - font-size: 0.95rem; - color: var(--text-light); - line-height: 1.5; - margin-bottom: 1.5rem; - flex-grow: 1; // Drückt die Buttons nach unten - } - } - - .project-links { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.75rem; - - a { - display: inline-block; - text-decoration: none; - padding: 0.6rem; - border-radius: 0.5rem; - font-size: 0.85rem; - font-weight: 600; - text-align: center; - transition: background 0.2s; - } - - .btn-download { - background: var(--primary); - color: white; - &:hover { background: var(--primary-dark); } - } - - .btn-code { - background: var(--bg); - color: var(--text-main); - border: 1px solid var(--border); - &:hover { background: var(--border); } - } - } -} - -.loading-trigger { - text-align: center; - padding: 3rem 0; - min-height: 100px; -} - -.end-msg { - color: var(--text-light); - font-size: 0.9rem; - border-top: 1px solid var(--border); - padding-top: 2rem; -} - -.spinner { - width: 30px; - height: 30px; - border: 3px solid var(--border); - border-top-color: var(--primary); - border-radius: 50%; - margin: 0 auto; - animation: spin 0.8s linear infinite; -} - -@keyframes spin { to { transform: rotate(360deg); } } \ No newline at end of file diff --git a/style/main.scss b/style/main.scss index 6025343..5357a71 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,6 +1,3 @@ -@import "home"; - - :root { --primary: #6366f1; --primary-dark: #4f46e5; @@ -155,4 +152,123 @@ body { font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } -} \ No newline at end of file +} + +.home-container { + max-width: 1100px; + margin: 0 auto; + padding: 0 1rem; +} + +.projects-grid { + display: grid; + // Sorgt dafür, dass die Karten immer gleich breit sind + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + margin: 2rem 0; + // Verhindert Layout-Shifts + align-items: stretch; +} + +.project-card { + background: var(--white); + border-radius: 1rem; + border: 1px solid var(--border); + overflow: hidden; + display: flex; + flex-direction: column; + transition: transform 0.2s ease, box-shadow 0.2s ease; + height: 100%; // Wichtig für einheitliche Höhe im Grid + + &:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0,0,0,0.05); + } + + .project-image { + height: 180px; + background: #f1f5f9; + img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + } + + .project-content { + padding: 1.25rem; + display: flex; + flex-direction: column; + flex-grow: 1; + + h3 { + margin: 0 0 0.5rem 0; + font-size: 1.25rem; + color: var(--text-main); + } + + p { + font-size: 0.95rem; + color: var(--text-light); + line-height: 1.5; + margin-bottom: 1.5rem; + flex-grow: 1; // Drückt die Buttons nach unten + } + } + + .project-links { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + + a { + display: inline-block; + text-decoration: none; + padding: 0.6rem; + border-radius: 0.5rem; + font-size: 0.85rem; + font-weight: 600; + text-align: center; + transition: background 0.2s; + } + + .btn-download { + background: var(--primary); + color: white; + &:hover { background: var(--primary-dark); } + } + + .btn-code { + background: var(--bg); + color: var(--text-main); + border: 1px solid var(--border); + &:hover { background: var(--border); } + } + } +} + +.loading-trigger { + text-align: center; + padding: 3rem 0; + min-height: 100px; +} + +.end-msg { + color: var(--text-light); + font-size: 0.9rem; + border-top: 1px solid var(--border); + padding-top: 2rem; +} + +.spinner { + width: 30px; + height: 30px; + border: 3px solid var(--border); + border-top-color: var(--primary); + border-radius: 50%; + margin: 0 auto; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { to { transform: rotate(360deg); } } \ No newline at end of file