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

82
base/templates/base.html
View file

@ -21,45 +21,47 @@
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
</head>
<body>
<header>
<div class="container">
<a href="{% url 'index' %}">
<img class="logo"
src="{% static "logo.svg" %}"
height="64"
width="64"
alt="Musik">
</a>
<nav>
<ul>
{% if object.group %}
<li>
<a href="{% url 'group_detail' pk=object.group.pk %}">
<i class="ri-group-2-fill"></i> {{ object.group.name }}
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li>{{ user.username }}</li>
<li>
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<input type="submit" value="Se déconnecter" class="logout">
</form>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" role="button">Se connecter <i class="ri-login-box-fill"></i></a>
</li>
{% endif %}
</ul>
</nav>
</div>
</header>
<main class="container">
{% for message in messages %}<article class="message {{ message.tags }}">{{ message }}</article>{% endfor %}
{% block content %}
{% endblock content %}
</main>
{% block body %}
<header>
<div class="container">
<a href="{% url 'index' %}">
<img class="logo"
src="{% static "logo.svg" %}"
height="64"
width="64"
alt="Musik">
</a>
<nav>
<ul>
{% if object.group %}
<li>
<a href="{% url 'group_detail' pk=object.group.pk %}">
<i class="ri-group-2-fill"></i> {{ object.group.name }}
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li>{{ user.username }}</li>
<li>
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<input type="submit" value="Se déconnecter" class="logout">
</form>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" role="button">Se connecter <i class="ri-login-box-fill"></i></a>
</li>
{% endif %}
</ul>
</nav>
</div>
</header>
<main class="container">
{% for message in messages %}<article class="message {{ message.tags }}">{{ message }}</article>{% endfor %}
{% 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>

12
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 %}
{% include "game/home.html" %}
{% endblock content %}
{% block body %}
{% if user.is_authenticated %}
{{ block.super }}
{% else %}
{% include "hero.html" %}
{% endif %}
{% endblock body %}