Improve styles
This commit is contained in:
parent
28bde28f46
commit
fce33250a7
|
@ -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>
|
|
19
src/components/markdown/AlbumGrid.astro
Normal file
19
src/components/markdown/AlbumGrid.astro
Normal file
|
@ -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>
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Base from "@layouts/Base.astro";
|
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 Header from "@components/headers/Base.astro";
|
||||||
import { CIRCLES } from "@utils/songs/data";
|
import { CIRCLES } from "@utils/songs/data";
|
||||||
|
|
||||||
|
@ -28,12 +28,10 @@ const items = Object.keys(albums)
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base>
|
<Base>
|
||||||
<main>
|
<main class="l-songs-circle">
|
||||||
<article>
|
<article class="l-songs-circle__article">
|
||||||
<Header title={CIRCLES[circle].name} />
|
<Header title={CIRCLES[circle].name} />
|
||||||
<section class="l-album-grid">
|
<Grid albums={items} />
|
||||||
{items.map(album => <Album album={album} />)}
|
|
||||||
</section>
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
</Base>
|
</Base>
|
||||||
|
|
26
src/styles/components/_album-grid.scss
Normal file
26
src/styles/components/_album-grid.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,11 +1,9 @@
|
||||||
.l-album-grid {
|
.l-songs-circle {
|
||||||
display: flex;
|
padding: 1.5em;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2em;
|
|
||||||
|
|
||||||
&__item img {
|
&__article {
|
||||||
width: 20em;
|
max-width: 48em;
|
||||||
height: 20em;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
@use 'components/tab';
|
@use 'components/tab';
|
||||||
@use 'components/lyrics';
|
@use 'components/lyrics';
|
||||||
@use 'components/song';
|
@use 'components/song';
|
||||||
@use 'components/album';
|
@use 'components/album-grid';
|
||||||
|
|
||||||
// Partials
|
// Partials
|
||||||
@use 'partials/nav';
|
@use 'partials/nav';
|
||||||
|
|
Loading…
Reference in a new issue