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