From fce33250a79e6dd2c8b17827ae753714acdc457a Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Sat, 29 Apr 2023 21:32:08 +0200
Subject: [PATCH] Improve styles

---
 src/components/markdown/Album.astro     | 15 --------------
 src/components/markdown/AlbumGrid.astro | 19 ++++++++++++++++++
 src/pages/songs/[circle].astro          | 10 ++++------
 src/styles/components/_album-grid.scss  | 26 +++++++++++++++++++++++++
 src/styles/components/_album.scss       | 16 ---------------
 src/styles/layouts/_songs.scss          | 12 +++++-------
 src/styles/styles.scss                  |  2 +-
 7 files changed, 55 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/markdown/Album.astro
 create mode 100644 src/components/markdown/AlbumGrid.astro
 create mode 100644 src/styles/components/_album-grid.scss
 delete mode 100644 src/styles/components/_album.scss

diff --git a/src/components/markdown/Album.astro b/src/components/markdown/Album.astro
deleted file mode 100644
index f2b5958..0000000
--- a/src/components/markdown/Album.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-interface Props {
-  album: {
-    title: string;
-    cover: string;
-    url: string;
-  }
-}
-
-const { album } = Astro.props;
----
-<a class="c-album" href={album.url}>
-  <img class="c-album__image" src={album.cover} alt=""/>
-  <div class="c-album__title">{album.title}</div>
-</a>
diff --git a/src/components/markdown/AlbumGrid.astro b/src/components/markdown/AlbumGrid.astro
new file mode 100644
index 0000000..e66f5fe
--- /dev/null
+++ b/src/components/markdown/AlbumGrid.astro
@@ -0,0 +1,19 @@
+---
+interface Props {
+  albums: Array<{
+    title: string;
+    cover: string;
+    url: string;
+  }>
+}
+
+const { albums } = Astro.props;
+---
+<section class="c-album-grid">
+  {albums.map(album => 
+    <a class="c-album-grid__item" href={album.url}>
+      <img class="c-album-grid__image" src={album.cover} alt=""/>
+      <div class="c-album-grid__title">{album.title}</div>
+    </a>
+  )}
+</section>
diff --git a/src/pages/songs/[circle].astro b/src/pages/songs/[circle].astro
index 1825c84..83e737b 100644
--- a/src/pages/songs/[circle].astro
+++ b/src/pages/songs/[circle].astro
@@ -1,6 +1,6 @@
 ---
 import Base from "@layouts/Base.astro";
-import Album from "@components/markdown/Album.astro";
+import Grid from "@components/markdown/AlbumGrid.astro";
 import Header from "@components/headers/Base.astro";
 import { CIRCLES } from "@utils/songs/data";
 
@@ -28,12 +28,10 @@ const items = Object.keys(albums)
 ---
 
 <Base>
-  <main>
-    <article>
+  <main class="l-songs-circle">
+    <article class="l-songs-circle__article">
       <Header title={CIRCLES[circle].name} />
-      <section class="l-album-grid">
-        {items.map(album => <Album album={album} />)}
-      </section>
+      <Grid albums={items} />
     </article>
   </main>
 </Base>
diff --git a/src/styles/components/_album-grid.scss b/src/styles/components/_album-grid.scss
new file mode 100644
index 0000000..d35b343
--- /dev/null
+++ b/src/styles/components/_album-grid.scss
@@ -0,0 +1,26 @@
+.c-album-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  justify-content: center;
+
+  &__item {
+    padding: 0.5em;
+    background-color: white;
+    border-radius: 0.5em;
+    box-shadow: var(--shadow-l);
+    transition: box-shadow ease-in-out 0.2s;
+    text-decoration: none;
+  
+    &:hover {
+      box-shadow: var(--shadow-m);
+    }
+  }
+  &__image {
+    width: 12em;
+  }
+  &__title {
+    margin-top: 0.3em;
+    line-height: 1em;
+  }
+}
diff --git a/src/styles/components/_album.scss b/src/styles/components/_album.scss
deleted file mode 100644
index faf7283..0000000
--- a/src/styles/components/_album.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.c-album {
-  padding: 0.5em;
-  background-color: white;
-  border-radius: 0.5em;
-  box-shadow: var(--shadow-l);
-  transition: box-shadow ease-in-out 0.2s;
-  text-decoration: none;
-
-  &:hover {
-    box-shadow: var(--shadow-m);
-  }
-
-  &__image {
-    width: 16em;
-  }
-}
diff --git a/src/styles/layouts/_songs.scss b/src/styles/layouts/_songs.scss
index 487a81b..13d35a1 100644
--- a/src/styles/layouts/_songs.scss
+++ b/src/styles/layouts/_songs.scss
@@ -1,11 +1,9 @@
-.l-album-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2em;
+.l-songs-circle {
+  padding: 1.5em;
 
-  &__item img {
-    width: 20em;
-    height: 20em;
+  &__article {
+    max-width: 48em;
+    margin: 0 auto;
   }
 }
 
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 411faa2..cabd736 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -11,7 +11,7 @@
 @use 'components/tab';
 @use 'components/lyrics';
 @use 'components/song';
-@use 'components/album';
+@use 'components/album-grid';
 
 // Partials
 @use 'partials/nav';