A website inspired by Last.fm that will keep track of your listening statistics
lastfm
music
statistics
Style changes to the input related components
+26
-18
+1
-1
web/components/content/Description.svelte
+1
-1
web/components/content/Description.svelte
+2
-2
web/components/content/Error.svelte
+2
-2
web/components/content/Error.svelte
···
24
24
.messages {
25
25
display: flex;
26
26
flex-direction: column;
27
-
gap: var(--spacing-1);
27
+
gap: var(--spacing-0_5);
28
28
}
29
29
30
30
span {
···
33
33
gap: var(--spacing-1);
34
34
color: var(--color-danger);
35
35
font-size: var(--text-sm);
36
-
line-height: var(--text-sm--line-height);
36
+
line-height: var(--leading-tighter);
37
37
}
38
38
39
39
span > :global(.icon) {
+5
-1
web/components/interaction/Field.svelte
+5
-1
web/components/interaction/Field.svelte
···
96
96
display: grid;
97
97
grid-template-columns: var(--spacing-4) 1fr;
98
98
column-gap: var(--spacing-2);
99
-
row-gap: var(--spacing-0_5);
99
+
row-gap: var(--spacing-1);
100
100
}
101
101
102
102
.label {
103
103
grid-column: 1 / 3;
104
+
display: flex;
104
105
}
105
106
106
107
.field.checkbox > .label {
···
123
124
124
125
.description {
125
126
grid-column: 1 / 3;
127
+
height: max-content;
128
+
display: flex;
126
129
}
127
130
128
131
.error {
129
132
grid-column: 1 / 3;
133
+
display: flex;
130
134
}
131
135
</style>
+1
-13
web/components/interaction/Input.svelte
+1
-13
web/components/interaction/Input.svelte
···
23
23
height: var(--spacing-10);
24
24
width: 100%;
25
25
box-shadow: var(--shadow-xs);
26
-
background-color: color-mix(
27
-
in srgb,
28
-
var(--color-base-100),
29
-
var(--mixin-color-light-200)
30
-
);
26
+
background-color: hsl(from var(--color-base-100) h s 90%);
31
27
font-size: var(--text-base);
32
28
line-height: var(--text-base--line-height);
33
-
34
-
@media (prefers-color-scheme: dark) {
35
-
background-color: color-mix(
36
-
in srgb,
37
-
var(--color-base-100),
38
-
var(--mixin-color-dark-100)
39
-
);
40
-
}
41
29
42
30
@media (width >= 40rem) {
43
31
height: var(--spacing-10);
+8
web/styles/app.css
+8
web/styles/app.css
···
76
76
--width-6xl: 72rem;
77
77
--width-7xl: 80rem;
78
78
--width-prose: 65ch;
79
+
80
+
/* Line height */
81
+
--leading-tighter: 1.175;
82
+
--leading-tight: 1.25;
83
+
--leading-snug: 1.375;
84
+
--leading-normal: 1.5;
85
+
--leading-relaxed: 1.625;
86
+
--leading-loose: 2;
79
87
}
80
88
81
89
@theme inline {
+9
-1
web/styles/typography.css
+9
-1
web/styles/typography.css
···
27
27
color: var(--color-content-300);
28
28
}
29
29
30
+
.subtitle > a {
31
+
text-decoration: underline;
32
+
}
33
+
34
+
.subtitle > a:hover {
35
+
color: var(--color-content-100);
36
+
}
37
+
30
38
/* Automatically add spacing between hgroup children, unless the hgroup has the class no-hgroup */
31
39
hgroup:not(.no-hgroup) {
32
40
display: flex;
···
36
44
.label {
37
45
font-size: var(--text-sm);
38
46
font-weight: var(--font-weight-medium);
39
-
line-height: var(--text-xs--line-height);
47
+
line-height: var(--leading-tighter);
40
48
color: var(--color-content-100);
41
49
width: fit-content;
42
50
max-width: 100%;