diff --git a/static/css/style.css b/static/css/style.css index 362738b..4406700 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,3 +1,172 @@ +:root { + --bg: #0f1724; /* dunkler Hintergrund, wiki-ähnlich */ + --card: #0b1530; + --accent: #ffcc33; /* Akzentfarbe */ + --muted: #9aa4b2; + --text: #e6eef8; + --glass: rgba(255, 255, 255, 0.03); +} + +* { + box-sizing: border-box +} + +html, body { + height: 100% +} + body { - font-family: "Comic Sans MS" !important; + margin: 0; + font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; + background: linear-gradient(180deg, #071022 0%, #0b1230 60%); + color: var(--text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.45; +} + +/* Container */ +.wrap { + max-width: 1200px; + margin: 28px auto; + padding: 20px +} + +/* Topbar */ +header.topbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 18px; + background: var(--glass); + border-radius: 12px +} + +.brand { + display: flex; + gap: 12px; + align-items: center +} + +.logo { + width: 48px; + height: 48px; + border-radius: 8px; + background: linear-gradient(135deg, var(--accent), #ff9a3c); + display: flex; + align-items: center; + justify-content: center; + font-weight: 800; + color: #081022 +} + +.brand h1 { + margin: 0; + font-size: 1.05rem +} + +.search { + display: flex; + align-items: center; + gap: 8px +} + +.search input { + padding: 8px 12px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: transparent; + color: var(--text); + outline: none +} + +/* Layout */ +.grid { + display: grid; + grid-template-columns: 1fr 320px; + gap: 18px; + margin-top: 18px +} + +main.card { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); + padding: 18px; + border-radius: 12px +} + +aside.sidebar { + background: var(--card); + padding: 16px; + border-radius: 12px; + height: fit-content +} + +/* Article */ +h2.title { + margin-top: 0 +} + +.meta { + color: var(--muted); + font-size: 0.9rem; + margin-bottom: 10px +} + +.hero { + height: 180px; + border-radius: 8px; + background-size: cover; + background-position: center; + margin-bottom: 12px; + overflow: hidden +} + +/* Cards */ +.card-row { + display: flex; + flex-wrap: wrap; + gap: 12px +} + +.mini-card { + flex: 1 1 160px; + background: rgba(255, 255, 255, 0.02); + padding: 10px; + border-radius: 10px +} + +/* Footer */ +footer { + margin-top: 24px; + text-align: center; + color: var(--muted); + font-size: 0.9rem +} + +/* Responsive */ +@media (max-width: 880px) { + .grid { + grid-template-columns:1fr; + } + + .search { + display: none + } +} + +/* Small helpers */ +a.button { + display: inline-block; + padding: 8px 12px; + border-radius: 999px; + background: var(--accent); + color: #081022; + text-decoration: none; + font-weight: 600 +} + +nav a { + color: var(--muted); + text-decoration: none; + margin-right: 12px } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 3e981de..75348ad 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,177 +1,133 @@ - - - {% block title %}Spiel-Fandom{% endblock %} — {{ site_name or 'My Game Wiki' }} - + + + {% block title %}Spiel-Fandom{% endblock %} — {{ site_name or 'My Game Wiki' }} + - - - + + + + + + + - /* Container */ - .wrap{max-width:1200px;margin:28px auto;padding:20px} - - /* Topbar */ - header.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--glass);border-radius:12px} - .brand{display:flex;gap:12px;align-items:center} - .logo{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff9a3c);display:flex;align-items:center;justify-content:center;font-weight:800;color:#081022} - .brand h1{margin:0;font-size:1.05rem} - .search{display:flex;align-items:center;gap:8px} - .search input{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);outline:none} - - /* Layout */ - .grid{display:grid;grid-template-columns: 1fr 320px;gap:18px;margin-top:18px} - main.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px} - aside.sidebar{background:var(--card);padding:16px;border-radius:12px;height:fit-content} - - /* Article */ - h2.title{margin-top:0} - .meta{color:var(--muted);font-size:0.9rem;margin-bottom:10px} - .hero{height:180px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:12px;overflow:hidden} - - /* Cards */ - .card-row{display:flex;flex-wrap:wrap;gap:12px} - .mini-card{flex:1 1 160px;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px} - - /* Footer */ - footer{margin-top:24px;text-align:center;color:var(--muted);font-size:0.9rem} - - /* Responsive */ - @media(max-width:880px){ - .grid{grid-template-columns:1fr;} - .search{display:none} - } - - /* Small helpers */ - a.button{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--accent);color:#081022;text-decoration:none;font-weight:600} - nav a{color:var(--muted);text-decoration:none;margin-right:12px} - - - {% block extra_head %}{% endblock %} + {% block extra_head %}{% endblock %} -
+
-
- -
-

{{ site_name or 'Game Fandom' }}

-
{% block tagline %}Community-geführtes Wiki & Guides{% endblock %}
+
+ +
+

{{ site_name or 'Game Fandom' }}

+
{% block tagline %}Community-geführtes Wiki & + Guides{% endblock %}
+
-
- +
-
- {% block hero %} -
- {% endblock %} +
+ {% block hero %} +
+ {% endblock %} -
-

{% block page_title %}Willkommen{% endblock %}

-
{% block meta %}Letzte Aktualisierung: —{% endblock %}
+
+

{% block page_title %}Willkommen{% endblock %}

+
{% block meta %}Letzte Aktualisierung: —{% endblock %}
- {% block content %} -

Hier kommt der Seiteninhalt.

- {% endblock %} -
+ {% block content %} +

Hier kommt der Seiteninhalt.

+ {% endblock %} +
-
-

Beliebte Artikel

-
- {% for item in popular_items|default([]) %} -
- {{ item.title }} -
{{ item.short_desc }}
+
+

Beliebte Artikel

+
+ {% for item in popular_items|default([]) %} +
+ {{ item.title }} +
{{ item.short_desc }}
+
+ {% else %} +
Keine Daten.
+ {% endfor %} +
+
+ +
+ +
- - +
+

Kategorien

+
+ {% for c in categories|default([]) %} + {{ c.name }} + {% else %} +
Keine Kategorien.
+ {% endfor %} +
+
- +
+

Über

+

{% block about_snippet %}Fandom-Community. Leitfäden, + Lore, Builds und mehr.{% endblock %}

+
+
-
+ - {% block scripts %} - - {% endblock %} +{% block scripts %} + +{% endblock %} + diff --git a/templates/login.html b/templates/login.html index 72ec360..a0948cc 100644 --- a/templates/login.html +++ b/templates/login.html @@ -2,16 +2,17 @@ {% block title %}Login{% endblock %} {% block page_title %}Anmelden{% endblock %} {% block content %} -
- - - - - - - - - -
-

Noch keinen Account? Jetzt registrieren.

+
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+ +
+

Noch keinen Account? Jetzt registrieren.

{% endblock %} \ No newline at end of file