simplify styles

This commit is contained in:
matthias@matsewe.de
2024-05-21 14:31:59 +02:00
parent 9401e0727b
commit 88a6c4ada9
2 changed files with 6 additions and 7 deletions

View File

@@ -184,7 +184,7 @@
.categories { .categories {
width: 60%; width: 60%;
overflow: hidden; overflow: hidden;
cursor: grab; /*cursor: grab;*/
white-space: nowrap; white-space: nowrap;
font-size: 0.7em; font-size: 0.7em;
line-height: 1.2em; line-height: 1.2em;
@@ -199,7 +199,7 @@
color: white; color: white;
max-width: 10em; max-width: 10em;
overflow: clip; overflow: clip;
background-color: var(--main-color); background-color: hsl(calc(var(--hue) * 360), 100%, 40%); /*color-mix(in srgb, var(--main-color) 60%, transparent);*/
} }
.vote-buttons { .vote-buttons {
@@ -225,8 +225,8 @@ h1 {
padding-left: 0.2em; padding-left: 0.2em;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.5em; font-size: 1.5em;
background-color: color-mix(in srgb, var(--main-color) 60%, transparent); background-color: hsl(calc(var(--hue) * 360), 100%, 70%); /*color-mix(in srgb, var(--main-color) 60%, transparent);*/
border-bottom: 0.3rem solid var(--main-color); border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%);
} }
#yt-player, #yt-player,

View File

@@ -8,7 +8,6 @@
<link rel="alternate icon" href="https://choriosity.de/assets/images/favicon.png" type="image/png"> <link rel="alternate icon" href="https://choriosity.de/assets/images/favicon.png" type="image/png">
<link rel="shortcut icon" href="https://choriosity.de/assets/images/favicon.svg" type="image/svg+xml"> <link rel="shortcut icon" href="https://choriosity.de/assets/images/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" type="text/css" href="/static/colors.css">
<link rel="stylesheet" type="text/css" href="/static/site.css"> <link rel="stylesheet" type="text/css" href="/static/site.css">
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script> <script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
@@ -117,7 +116,7 @@
</div> </div>
<div id="songs"> <div id="songs">
{% for main_category, songs in songs_by_category.items() %} {% for main_category, songs in songs_by_category.items() %}
<h1 class="cat-{{ all_categories[main_category] }}">{{ main_category }}</h1> <h1 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h1>
{% for song in songs -%} {% for song in songs -%}
<div class="song" id="song-{{ song.id }}"> <div class="song" id="song-{{ song.id }}">
<div class="cover-container"> <div class="cover-container">
@@ -132,7 +131,7 @@
song.aca_artist != song.og_artist %} / {{ song.aca_artist song.aca_artist != song.og_artist %} / {{ song.aca_artist
}}{% endif %}{% else %}{{ song.aca_artist }}{% endif %}</div> }}{% endif %}{% else %}{{ song.aca_artist }}{% endif %}</div>
<div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{% <div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{%
if is_in_category %}<span class="cat-{{ all_categories[category_name] }}">{{ category_name }}</span>{% if is_in_category %}<span style="--hue: {{ all_categories[category_name] / all_categories|length }};">{{ category_name }}</span>{%
endif %}{% endfor %}<span style="--main-color: transparent;">&nbsp;</span> endif %}{% endfor %}<span style="--main-color: transparent;">&nbsp;</span>
</div> </div>
<div class="vote-buttons"> <div class="vote-buttons">