changes:

step 1 of #138
minor layout fixes

src/assets/base.css

@@ -347,43 +347,47 @@ img {
   box-shadow: 0 0 0.5rem var(--color-border);
 }
 
+.grid, .grid-3 {
+  --col: 1;
+  grid-template-columns: repeat(var(--col), 1fr);
+}
 .grid-3 {
   display: grid;
-  grid-template-columns: 1fr;
 }
 @media (max-width: 530px) {
   [data-compact] .grid-3 {
-    grid-template-columns: 1fr 1fr;
+    --col: 2;
   }
 }
 @media (min-width: 530px) {
   .grid-3 {
-    grid-template-columns: 1fr 1fr;
+    --col: 2;
   }
   [data-compact] .grid-3 {
-    grid-template-columns: 1fr 1fr 1fr;
+    --col: 3;
   }
 }
 @media (min-width: 780px) {
+  .grid {
+    --col: 2;
+    display: grid;
+  }
   .grid-3 {
-    grid-template-columns: 1fr 1fr 1fr;
+    --col: 3;
   }
   [data-compact] .grid-3 {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    --col: 4;
-  }
-}
-@media (min-width: 930px) {
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
   }
 }
 @media (min-width: 1130px) {
+  .grid {
+    --col: 3;
+  }
   .grid-3 {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    --col: 4;
   }
   [data-compact] .grid-3 {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    --col: 5;
   }
 }
 

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-07-29"
+  "date": "2023-07-30"
 }

src/components/Charts.vue

@@ -62,19 +62,6 @@ onMounted(getCharts);
     </select>
   </template>
 
-  <template v-if="data.artists.length > 0">
-    <h2 class="center">{{ t('title.artists') }}</h2>
-    <div class="grid-3 circle">
-      <AlbumItem
-        v-for="i in data.artists"
-        :key="i.id"
-        :name="i.title"
-        :author="i.subtitle"
-        :art="i.thumbnails[1].url"
-        @open-album="getArtist(i.id)" />
-    </div>
-  </template>
-
   <template v-if="data.songs.length > 0">
     <h2 class="center">{{ t('title.songs') }}</h2>
     <div class="grid">
@@ -100,4 +87,23 @@ onMounted(getCharts);
         " />
     </div>
   </template>
+
+  <template v-if="data.artists.length > 0">
+    <h2 class="center">{{ t('title.artists') }}</h2>
+    <div class="grid-3 circle">
+      <AlbumItem
+        v-for="i in data.artists"
+        :key="i.id"
+        :name="i.title"
+        :author="i.subtitle"
+        :art="i.thumbnails[1].url"
+        @open-album="getArtist(i.id)" />
+    </div>
   </template>
+</template>
+
+<style scoped>
+.center {
+  margin-top: 2rem;
+}
+</style>

src/components/Genres.vue

@@ -138,7 +138,7 @@ onMounted(get);
   font-size: 1rem;
   font-weight: bold;
   letter-spacing: 0.125rem;
-  line-break: anywhere;
+  overflow-wrap: break-word;
   background-color: var(--color-background-mute);
   color: var(--btn-color);
   transition: background-color 0.1s ease;