Skip to content

Commit d182dab

Browse files
Sup2point0Sup2point0
committed
sup
1 parent 449402a commit d182dab

6 files changed

Lines changed: 569 additions & 70 deletions

File tree

‎src/parts/music/block.artist.svelte‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!-- @component ArtistBlock
2+
3+
-->
4+
5+
<script lang="ts">
6+
7+
import type { ArtistData } from "#scripts/types";
8+
9+
10+
interface Props {
11+
artist: ArtistData;
12+
}
13+
14+
let { artist }: Props = $props();
15+
16+
</script>
17+
18+
19+
<button class="artist block"
20+
class:shrink={artist.name.length > 12}
21+
id={artist.shard}
22+
>
23+
<div class="img-container">
24+
<img alt={artist.name} title={artist.name}
25+
width="120px" height="120px"
26+
src="/music/icons/{artist.icon ?? 'purple-portal.png'}"
27+
/>
28+
29+
{#if artist.track}
30+
<div class="favourites">
31+
{#if Array.isArray(artist.track)}
32+
{#each artist.track as track}
33+
<a class="favourite" href={track.link}>
34+
{track.name}
35+
</a>
36+
{/each}
37+
{:else}
38+
<a class="favourite" href={artist.track.link}>
39+
{artist.track.name}
40+
</a>
41+
{/if}
42+
</div>
43+
{/if}
44+
</div>
45+
46+
<div class="info">
47+
<div class="upper">
48+
<h3> {artist.name} </h3>
49+
50+
{#if artist.date}
51+
<p class="date">
52+
{artist.date}
53+
</p>
54+
{/if}
55+
</div>
56+
57+
<div class="inner">
58+
<p class="discovered">
59+
{artist.discovered}
60+
</p>
61+
</div>
62+
63+
<div class="lower">
64+
<ul class="genres">
65+
{#each artist.genres ?? [] as genre}
66+
<li class="genre">{genre}</li>
67+
{/each}
68+
</ul>
69+
</div>
70+
</div>
71+
</button>
72+
73+
74+
<style lang="scss">
75+
76+
@use 'sass:color';
77+
78+
79+
button.block.artist {
80+
max-width: 32rem;
81+
padding: 1rem 1.5rem;
82+
display: flex;
83+
flex-flow: row nowrap;
84+
justify-content: start;
85+
align-items: center;
86+
gap: 2rem;
87+
88+
background: none;
89+
border: none;
90+
@include shear-card($interactive: true);
91+
92+
&:hover img {
93+
box-shadow: 0 0 42px rgb(white, 20%);
94+
animation-name: shine;
95+
animation-duration: 0.8s;
96+
// animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); // ease-in-exp
97+
}
98+
}
99+
100+
101+
.img-container {
102+
height: 120px;
103+
position: relative;
104+
105+
img {
106+
border-radius: 50%;
107+
box-shadow: 0 8px 16px rgb(black, 40%);
108+
}
109+
110+
.favourites {
111+
width: max-content;
112+
position: absolute;
113+
left: 0;
114+
bottom: 0;
115+
z-index: 10;
116+
display: flex;
117+
flex-flow: row wrap;
118+
gap: 0.5rem;
119+
transform: translateY(1rem) scale(120%);
120+
opacity: 0;
121+
transition: opacity 0.2s ease-out, transform 0s 0.5s;
122+
}
123+
124+
a.favourite {
125+
padding: 0.5em 1em;
126+
@include font-ui;
127+
color: $col-text;
128+
text-decoration: none;
129+
white-space: nowrap;
130+
@include shear-card();
131+
132+
&::before {
133+
background: $col-prot;
134+
}
135+
}
136+
137+
&:hover .favourites {
138+
transform: translateY(1rem) scale(100%);
139+
opacity: 1;
140+
transition: opacity 0.5s ease-out, transform 1s cubic-bezier(0.19, 1, 0.22, 1); // ease-out-exp
141+
}
142+
}
143+
144+
.info {
145+
flex-grow: 1;
146+
height: 100%;
147+
display: flex;
148+
flex-flow: column nowrap;
149+
justify-content: space-between;
150+
align-items: start;
151+
gap: 0.5rem;
152+
}
153+
154+
.upper {
155+
width: 100%;
156+
display: flex;
157+
flex-flow: row wrap;
158+
justify-content: space-between;
159+
align-items: end;
160+
gap: 0.5rem;
161+
162+
h3 {
163+
@include font-ui;
164+
font-size: 200%;
165+
font-weight: normal;
166+
color: $col-deut;
167+
text-align: start;
168+
169+
button.shrink & {
170+
font-size: 200%;
171+
}
172+
}
173+
174+
p.date {
175+
padding-bottom: 0.25em;
176+
@include font-tech;
177+
font-size: 150%;
178+
color: $col-text-deut;
179+
}
180+
}
181+
182+
.inner {
183+
flex-grow: 1;
184+
185+
p.discovered {
186+
@include font-fun;
187+
font-size: 150%;
188+
color: $col-text;
189+
}
190+
}
191+
192+
.lower {
193+
ul.genres {
194+
display: flex;
195+
flex-flow: row wrap;
196+
justify-content: start;
197+
gap: 0.5em;
198+
list-style-type: none;
199+
200+
li {
201+
padding: 0 0.5em;
202+
@include font-fun;
203+
font-size: 150%;
204+
color: $col-text;
205+
@include shear-card();
206+
transition: #{trans()};
207+
208+
&:hover {
209+
padding: 0 0.8em;
210+
color: black;
211+
212+
&::before {
213+
background: white;
214+
}
215+
}
216+
}
217+
218+
li:not(:hover) {
219+
&.genre::before { background: color.change($col-trit, $alpha: 0.69); }
220+
&.vibe::before { background: color.change($col-deut, $alpha: 0.69); }
221+
}
222+
}
223+
}
224+
225+
</style>

‎src/routes/(sup)/sup/music/create/+page.svelte‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,8 @@ import LinkCard from "#parts/ui/card.link.svelte";
1212
]} />
1313

1414
<div class="cards">
15-
<LinkCard link="/sup/music/create/tracks" text="Tracks">
16-
</LinkCard>
17-
18-
<LinkCard link="/sup/music/create/albums" text="Albums">
19-
</LinkCard>
15+
<LinkCard link="/sup/music/create/tracks" text="Tracks" />
16+
<LinkCard link="/sup/music/create/albums" text="Albums" />
2017
</div>
2118

2219

‎src/routes/(sup)/sup/music/listen/+page.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
3+
import Breadcrumbs from "#parts/ui/breadcrumbs.svelte";
4+
import LinkCard from "#parts/ui/card.link.svelte";
5+
6+
</script>
7+
8+
9+
<Breadcrumbs levels={[
10+
{ text: "music", intern: "sup/music" },
11+
{ text: "listen" },
12+
]} />
13+
14+
<div class="cards">
15+
<LinkCard link="/sup/music/listen/tracks" text="Tracks" />
16+
<LinkCard link="/sup/music/listen/artists" text="Artists" />
17+
</div>
18+
19+
20+
<style lang="scss">
21+
22+
.cards {
23+
display: flex;
24+
flex-flow: row wrap;
25+
gap: 1rem;
26+
}
27+
28+
</style>

0 commit comments

Comments
 (0)