edpibu/musik
edpibu/musik
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add hero section with background gradient and logo to enhance user interface

Browse source
This commit is contained in:
Edgar P. Burkhart 2025-06-14 13:49:01 +02:00
parent 3042382ae4
commit 9cb4f42d07
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 87 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

27
base/static/css/main.css
View file

@ -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;
}
}

2
base/templates/base.html
View file

@ -21,6 +21,7 @@
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
</head>
<body>
{% block body %}
<header>
<div class="container">
<a href="{% url 'index' %}">
@ -61,5 +62,6 @@
{% block content %}
{% endblock content %}
</main>
{% endblock body %}
</body>
</html>

10
base/templates/hero.html Normal file
View file

@ -0,0 +1,10 @@
{% load static %}
<div id="hero">
<div>
<i class="ri-music-ai-fill big-logo"></i>
<h1>Musik</h1>
<p>
<a href="{% url "login" %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
</p>
</div>
</div>

10
base/templates/index.html
View file

@ -1,7 +1,11 @@
{% extends "base.html" %}
{% block content %}
<h1>Musik</h1>
{% if user.is_authenticated %}
{% include "game/home.html" %}
{% endif %}
{% endblock content %}
{% block body %}
{% if user.is_authenticated %}
{{ block.super }}
{% else %}
{% include "hero.html" %}
{% endif %}
{% endblock body %}