diff --git a/src/assets/intro/introDesktop.svg b/src/assets/intro/introDesktop.svg deleted file mode 100644 index b44a438..0000000 --- a/src/assets/intro/introDesktop.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/intro/introMobile.svg b/src/assets/intro/introMobile.svg deleted file mode 100644 index f616426..0000000 --- a/src/assets/intro/introMobile.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 0fa30f2..e475d11 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -318,4 +318,17 @@ const menuItems = letter-spacing: getLetterSpacing(14, 1, 1); } } + + :global(.home) .header { + background: transparent; + animation: blend 1s linear forwards; + animation-timeline: scroll(); + animation-range: 0 pxToRem(240); + + @keyframes blend { + to { + background: var(--color-black); + } + } + } diff --git a/src/components/Spline.astro b/src/components/Spline.astro new file mode 100644 index 0000000..3f0ea7a --- /dev/null +++ b/src/components/Spline.astro @@ -0,0 +1,27 @@ +--- + +--- + + + + + diff --git a/src/components/Ticket.astro b/src/components/Ticket.astro index d97a1f3..b414d7a 100644 --- a/src/components/Ticket.astro +++ b/src/components/Ticket.astro @@ -16,13 +16,13 @@ .ticket { position: absolute; - inset: auto 5cqw clamp(6rem, 27.5cqw, 11.5rem) 5cqw; + inset: auto 5cqw 5cqw 5cqw; outline-width: 0; @include breakpoint-up("sm") { width: 42.5cqw; max-width: 600px; - inset: auto auto 0 12.5cqw; + inset: auto auto 10cqw 12.5cqw; } img { diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9360bc0..6a36a6a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -72,10 +72,10 @@ const currentPage = data.collection?.items[0]; )) } - +
-
+
{ isHome ? ( diff --git a/src/pages/index.astro b/src/pages/index.astro index 36b4a2e..60fdd39 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,9 +6,8 @@ import Layout from "../layouts/Layout.astro"; import VenueTeaser from "../components/VenueTeaser.astro"; import SponsorList from "../components/SponsorList.astro"; import Ticket from "../components/Ticket.astro"; -import introDesktop from "../assets/intro/introDesktop.svg?raw"; -import introMobile from "../assets/intro/introMobile.svg?raw"; import SpeakerList from "../components/SpeakerList.astro"; +import Spline from "../components/Spline.astro"; const query = graphql(` query { @@ -33,11 +32,8 @@ const page = data.collection?.items[0]; page.showIntro && ( <>
-
- -
-
- +
+
@@ -115,41 +111,15 @@ const page = data.collection?.items[0]; .introWrapper { position: relative; - max-width: calc(var(--max-content-width) + 10%); - margin-block-start: var(--spacing-6x); + max-width: calc(var(--max-content-width) + 30%); + margin-block-start: pxToRem(-80); margin-inline: auto; container-type: inline-size; - - @include breakpoint-up("sm") { - padding-inline: var(--grid-padding); - } - - @include breakpoint-up("lg") { - margin-block-start: var(--spacing-8x); - } } .intro { - display: none; - - :global(svg) { - width: 100%; - height: auto; - } - - &.intro--mobile { - display: block; - } - - @include breakpoint-up("sm") { - &.intro--mobile { - display: none; - } - - &.intro--desktop { - display: block; - } - } + position: relative; + z-index: -1; } .arrowWrapper { diff --git a/src/styles/global.scss b/src/styles/global.scss index 2e59895..95aabbb 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,20 +1,20 @@ @import "./_imports.scss"; body { - background: var(--color-black); - margin: 0; -} + background: var(--color-black); + margin: 0; -* { - box-sizing: border-box; + &:not(.home) { + background-color: var(--color-white); + color: var(--color-black); + } } -main:not(.home) { - background-color: var(--color-white); - color: var(--color-black); +* { + box-sizing: border-box; } a, button { - outline-offset: 4px; + outline-offset: 4px; }