diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 98656fa..ca1e2d3 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,18 +1,18 @@
version: 2
updates:
- - package-ecosystem: "github-actions"
- directory: "/"
+ - package-ecosystem: 'github-actions'
+ directory: '/'
schedule:
- interval: "daily"
+ interval: 'daily'
groups:
actions-deps:
patterns:
- - "*"
+ - '*'
- - package-ecosystem: "npm"
- directory: "/"
+ - package-ecosystem: 'npm'
+ directory: '/'
schedule:
- interval: "weekly"
+ interval: 'weekly'
groups:
patch-minor:
- update-types: ["patch", "minor"]
+ update-types: ['patch', 'minor']
diff --git a/src/lib/components/CoverCard.svelte b/src/lib/components/CoverCard.svelte
index 84ed809..a499894 100644
--- a/src/lib/components/CoverCard.svelte
+++ b/src/lib/components/CoverCard.svelte
@@ -46,10 +46,12 @@
{#if cover}
- {cover.artists.join(", ")}
+ {cover.artists.join(', ')}
{/if}
{#if original}
- covering {original.artists.join(", ")}
+ covering {original.artists.join(', ')}
{/if}
{#if !isSkeleton}
diff --git a/src/lib/components/CoverComparison.svelte b/src/lib/components/CoverComparison.svelte
index 0c5e2a6..2d070b8 100644
--- a/src/lib/components/CoverComparison.svelte
+++ b/src/lib/components/CoverComparison.svelte
@@ -94,10 +94,6 @@
max-width: 100%;
margin-inline: auto;
padding-inline: var(--space-xl);
- @supports (padding: max(0px)) {
- padding-inline-start: max(var(--space-xl), env(safe-area-inset-left));
- padding-inline-end: max(var(--space-xl), env(safe-area-inset-right));
- }
scroll-padding-inline: var(--space-xl);
gap: var(--space-l);
grid-template:
@@ -105,6 +101,11 @@
'originalContent coverContent';
grid-template-columns: 1fr 1fr;
+ @supports (padding: max(0px)) {
+ padding-inline-start: max(var(--space-xl), env(safe-area-inset-left));
+ padding-inline-end: max(var(--space-xl), env(safe-area-inset-right));
+ }
+
@media (max-width: 480px) {
overflow-x: scroll;
overflow-y: hidden;
@@ -125,6 +126,7 @@
.track:first-child {
scroll-snap-align: start;
+
@supports (animation-timeline: scroll()) {
animation: dim linear both;
animation-direction: normal;
@@ -134,6 +136,7 @@
.track:last-child {
scroll-snap-align: end;
+
@supports (animation-timeline: scroll()) {
animation: dim linear both;
animation-direction: reverse;
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 06d650c..2e73c56 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -42,11 +42,6 @@
width: 100%;
padding-inline: var(--space-m);
padding-block: var(--space-l);
- @supports (padding: max(0px)) {
- padding-inline-start: max(var(--space-m), env(safe-area-inset-left));
- padding-inline-end: max(var(--space-m), env(safe-area-inset-right));
- padding-block-end: max(var(--space-l), env(safe-area-inset-bottom));
- }
display: grid;
grid-template-areas: 'nav toggle';
grid-template-columns: 1fr fit-content(64px);
@@ -54,6 +49,12 @@
row-gap: var(--space-l);
z-index: 0;
+ @supports (padding: max(0px)) {
+ padding-inline-start: max(var(--space-m), env(safe-area-inset-left));
+ padding-inline-end: max(var(--space-m), env(safe-area-inset-right));
+ padding-block-end: max(var(--space-l), env(safe-area-inset-bottom));
+ }
+
a {
font-weight: var(--font-weight-bold);
text-decoration: underline;
diff --git a/src/routes/cover/[slug]/+page.svelte b/src/routes/cover/[slug]/+page.svelte
index ac36bf7..843bae4 100644
--- a/src/routes/cover/[slug]/+page.svelte
+++ b/src/routes/cover/[slug]/+page.svelte
@@ -125,15 +125,15 @@
padding-block-start: var(--space-xl);
padding-block-end: var(--space-3xl);
padding-inline: var(--space-l);
- @supports (padding: max(0px)) {
- padding-inline-start: max(var(--space-l), env(safe-area-inset-left));
- padding-inline-end: max(var(--space-l), env(safe-area-inset-right));
- }
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-wrap: balance;
+ @supports (padding: max(0px)) {
+ padding-inline-start: max(var(--space-l), env(safe-area-inset-left));
+ padding-inline-end: max(var(--space-l), env(safe-area-inset-right));
+ }
}
.title {
@@ -152,7 +152,7 @@
.artist {
color: var(--mauve-12);
- @media (hover: hover) {
+ @media (hover: hover) {
&:hover {
text-decoration: underline;
text-decoration-color: var(--mauve-9);
diff --git a/src/routes/new/+page.svelte b/src/routes/new/+page.svelte
index 7aae84f..5d5ae60 100644
--- a/src/routes/new/+page.svelte
+++ b/src/routes/new/+page.svelte
@@ -97,8 +97,6 @@
use:autosize
name="description"
class="input"
- minRows={2}
- maxRows={4}
placeholder="What’s different about this cover?"
/>