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?" />