From 9cb4f42d07fff69eb8a8d667241ddb049b2564f8 Mon Sep 17 00:00:00 2001 From: "Edgar P. Burkhart" Date: Sat, 14 Jun 2025 13:49:01 +0200 Subject: [PATCH] Add hero section with background gradient and logo to enhance user interface --- base/static/css/main.css | 27 +++++++++++++ base/templates/base.html | 82 ++++++++++++++++++++------------------- base/templates/hero.html | 10 +++++ base/templates/index.html | 12 ++++-- 4 files changed, 87 insertions(+), 44 deletions(-) create mode 100644 base/templates/hero.html diff --git a/base/static/css/main.css b/base/static/css/main.css index e916ab0..1cb4daf 100644 --- a/base/static/css/main.css +++ b/base/static/css/main.css @@ -70,3 +70,30 @@ article.message { font-family: remixicon; content: "\eca0"; } + +#hero { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle 50vh at 4rem 50%, + var(--pico-primary-background), + color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 10%) 20%, + color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 30%) 40%, + color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%, + color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%, + var(--pico-background-color)); + display: grid; + align-items: center; + padding: 4rem; + + .big-logo { + font-size: 8rem; + } + h1 { + font-size: 4rem; + font-weight: 900; + } +} diff --git a/base/templates/base.html b/base/templates/base.html index 9fe6763..60315f0 100644 --- a/base/templates/base.html +++ b/base/templates/base.html @@ -21,45 +21,47 @@ href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"> -
-
- - - - -
-
-
- {% for message in messages %}
{{ message }}
{% endfor %} - {% block content %} - {% endblock content %} -
+ {% block body %} +
+
+ + + + +
+
+
+ {% for message in messages %}
{{ message }}
{% endfor %} + {% block content %} + {% endblock content %} +
+ {% endblock body %} diff --git a/base/templates/hero.html b/base/templates/hero.html new file mode 100644 index 0000000..7dcdbe0 --- /dev/null +++ b/base/templates/hero.html @@ -0,0 +1,10 @@ +{% load static %} +
+
+ +

Musik

+

+ Jouer +

+
+
diff --git a/base/templates/index.html b/base/templates/index.html index 42c83ec..5235a9f 100644 --- a/base/templates/index.html +++ b/base/templates/index.html @@ -1,7 +1,11 @@ {% extends "base.html" %} {% block content %} -

Musik

- {% if user.is_authenticated %} - {% include "game/home.html" %} - {% endif %} + {% include "game/home.html" %} {% endblock content %} +{% block body %} + {% if user.is_authenticated %} + {{ block.super }} + {% else %} + {% include "hero.html" %} + {% endif %} +{% endblock body %}