simplify/fix cover position/size

static/site.css

@@ -106,9 +106,10 @@ header {
     background-color: var(--color-choriosity-red--light);
     background-color: var(--color-white-100);
     border: 1px solid var(--color-choriosity-red);
+    border: 1px solid hsl(calc(var(--hue) * 360), 100%, 40%);
     box-shadow: 4px 4px 8px var(--color-white-90);
     padding: 0.4em;
-    border-radius: 0.5em;
+    border-radius: 0.3em;
     width: 30em;
     margin-bottom: 1rem;
     margin-left: 0.5em;
@@ -117,25 +118,30 @@ header {
 
 .cover-container {
     position: relative;
-    width: 10.67em;
+    width: 11.91em;
-    height: 6em;
+    height: 6.7em;
     float: left;
     margin-right: 1em;
-    text-align: center;
+    /*background-color: white;*/
-    background-color: white;
+    display: flex;
+    /*align-items: center;*/
+    justify-content: center;
 }
 
 .cover {
-    display: block;
+    /*display: block;*/
-    max-width: 100%;
+    object-fit: contain;
+    /*max-width: 100%;
     max-height: 100%;
+    scale: 2;
     position: absolute;
-    top: 50%;
+    top: 75%;
-    left: 50%;
+    left: 75%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);*/
     transition: .3s ease;
+    border-radius: 0.3em;
 }
 
 .overlay {
@@ -181,6 +187,7 @@ header {
 
 .vote-buttons {
     display: inline-block;
+    margin-top: 0.7em;
 }
 
 .button {
@@ -274,12 +281,12 @@ header {
     /*color-mix(in srgb, var(--main-color) 60%, transparent);*/
 }
 
-.vote-buttons {
+/*.vote-buttons {
     margin-top: 1em;
     width: 100%;
     display: inline-flex;
     justify-content: center;
-}
+}*/
 
 .song-title,
 .song-artist {

templates/voting.html

@@ -181,7 +181,7 @@
         {% for main_category, songs in songs_by_category.items() %}
         <h2 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h2>
         {% for song in songs -%}
-        <div class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}"
+        <div style="--hue: {{ all_categories[main_category] / all_categories|length }};" class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}"
             id="song-{{ song.id }}">
             <div class="cover-container">
                 <img src="{{ song.thumbnail }}" class="cover">
@@ -197,7 +197,7 @@
             <div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{%
                 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; --hue: transparent;">&nbsp;</span>
             </div>
             <div class="vote-buttons">
                 <div class="button button-no {% if (song.vote == -1) or (not song.vote and not song.singable) %}selected{% endif %}"