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 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>
|
||||
|
|
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
@use 'components/tab';
|
||||
@use 'components/lyrics';
|
||||
@use 'components/song';
|
||||
@use 'components/album';
|
||||
@use 'components/album-grid';
|
||||
|
||||
// Partials
|
||||
@use 'partials/nav';
|
||||
|
|
Loading…
Reference in a new issue