A website inspired by Last.fm that will keep track of your listening statistics
lastfm
music
statistics
oscarzwagers.nl
Get data from the api into the sveltekit application for the artist page. Scrobbles counts, artist name and artist image are loaded.
1.button {
2 font-size: var(--text-sm);
3 font-weight: var(--font-weight-medium);
4 display: inline-flex;
5 align-items: center;
6 justify-content: center;
7 text-align: center;
8}
9
10.button.variant-default {
11 gap: var(--spacing-1);
12 line-height: var(--leading-tighter);
13 height: var(--spacing-10);
14
15 padding-inline: var(--padding-inline);
16 border: 1px solid var(--border-color);
17
18 background-color: var(--bg-color);
19 color: var(--text-color);
20
21 &:hover:not(:where(:disabled, .state-disabled)) {
22 background-color: hsl(from var(--bg-color) h calc(s * 0.8) l / 0.8);
23 }
24
25 &:active {
26 color: hsl(from var(--text-color) h s l / 0.75);
27 }
28
29 &:disabled,
30 &.state-disabled {
31 pointer-events: none;
32 color: hsl(from var(--text-color) h s l / 0.75);
33 background-color: hsl(from var(--bg-color) h calc(s * 0.8) l / 0.8);
34
35 &:hover {
36 cursor: not-allowed;
37 }
38 }
39
40 &.with-icon > .icon {
41 width: var(--spacing-5);
42 height: var(--spacing-5);
43 }
44}
45
46.button.variant-text {
47 gap: var(--spacing-0_5);
48 line-height: var(--leading-tight);
49 height: var(--spacing-4);
50}
51
52.button.variant-text > .icon {
53 margin-bottom: -2px;
54}
55
56.button.shape-square {
57 --border-radius: var(--radius-md);
58 --padding-inline: var(--spacing-3);
59}
60
61.button.shape-rounded {
62 --border-radius: 9999px;
63 --padding-inline: var(--spacing-3_5);
64}
65
66.button.shape-circle {
67 --border-radius: 9999px;
68 --padding-inline: var(--spacing-1);
69 aspect-ratio: 1 / 1;
70 width: var(--spacing-9);
71}
72
73.button.scheme-default {
74 --bg-color: var(--color-secondary);
75 --text-color: var(--color-secondary-contrast);
76 --border-color: hsl(from var(--text-color) h s l / 0.5);
77}
78
79.button.scheme-primary {
80 --bg-color: var(--color-primary);
81 --text-color: var(--color-primary-contrast);
82 --border-color: hsl(from var(--bg-color) h s calc(l * 0.25) / 1);
83
84 @media (prefers-color-scheme: dark) {
85 --border-color: hsl(from var(--text-color) h s 80%);
86 }
87}