From 7687ad7c483b6710f232938ada82fb16e9aad081 Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 26 May 2024 12:03:52 +0200 Subject: [PATCH 1/8] feat: [WEB-32] add Spline Test Preview --- src/components/Spline.astro | 13 +++++++++++++ src/pages/index.astro | 2 ++ 2 files changed, 15 insertions(+) create mode 100644 src/components/Spline.astro diff --git a/src/components/Spline.astro b/src/components/Spline.astro new file mode 100644 index 0000000..5ff1584 --- /dev/null +++ b/src/components/Spline.astro @@ -0,0 +1,13 @@ +--- + +--- + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 3b6bf21..d1c4033 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,7 @@ import { client } from "../utils/graphql-client"; import Layout from "../layouts/Layout.astro"; import VenueTeaser from "../components/VenueTeaser.astro"; import SponsorList from "../components/SponsorList.astro"; +import Spline from "../components/Spline.astro"; const query = graphql(` query { @@ -22,6 +23,7 @@ const page = data.collection?.items[0]; --- + { page.showVenue && (
From 23b08bb6525c22ac32fcd4298c3199005d6bf973 Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 26 May 2024 12:14:38 +0200 Subject: [PATCH 2/8] feat: [WEB-32] add aspect-ratio to spline container --- src/components/Spline.astro | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Spline.astro b/src/components/Spline.astro index 5ff1584..91e2579 100644 --- a/src/components/Spline.astro +++ b/src/components/Spline.astro @@ -10,4 +10,8 @@ events-target="global" class="spline"> - + From 635cfd76f589cc9ad8a97c1e3a7dc7d3ff019b2b Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Wed, 5 Jun 2024 16:36:42 +0200 Subject: [PATCH 3/8] feat: [WEB-39] update Spline integration --- src/components/Spline.astro | 16 ++++++++-------- src/pages/index.astro | 5 +++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Spline.astro b/src/components/Spline.astro index 91e2579..3243be9 100644 --- a/src/components/Spline.astro +++ b/src/components/Spline.astro @@ -3,15 +3,15 @@ --- + type="module" + src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"> + url="https://prod.spline.design/e93fTx7o7JPfIoAW/scene.splinecode" + events-target="global" + class="spline"> diff --git a/src/pages/index.astro b/src/pages/index.astro index 38c1407..4230632 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -30,13 +30,12 @@ const page = data.collection?.items[0]; --- - { page.showIntro && ( <>
- +
@@ -133,6 +132,8 @@ const page = data.collection?.items[0]; .intro { display: none; + position: relative; + z-index: -1; :global(svg) { width: 100%; From bd03c6b78f7aabded087dcb1fbd130b4439527cf Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Thu, 6 Jun 2024 08:32:52 +0200 Subject: [PATCH 4/8] feat: [WEB-39] adapt Intro / Ticket styles for Spline --- src/components/Ticket.astro | 2 +- src/pages/index.astro | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Ticket.astro b/src/components/Ticket.astro index d97a1f3..e44f2de 100644 --- a/src/components/Ticket.astro +++ b/src/components/Ticket.astro @@ -22,7 +22,7 @@ @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/pages/index.astro b/src/pages/index.astro index 4230632..64efa88 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -116,15 +116,11 @@ const page = data.collection?.items[0]; .introWrapper { position: relative; - max-width: calc(var(--max-content-width) + 10%); + max-width: calc(var(--max-content-width) + 30%); margin-block-start: var(--spacing-6x); 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); } From 4e6892153988726e4689859bfecc2b5f84115082 Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 9 Jun 2024 13:18:43 +0200 Subject: [PATCH 5/8] feat: [WEB-39] improve mobile spline styles --- src/assets/intro/introDesktop.svg | 1 - src/assets/intro/introMobile.svg | 1 - src/components/Spline.astro | 10 +++++++-- src/components/Ticket.astro | 2 +- src/pages/index.astro | 34 +++---------------------------- 5 files changed, 12 insertions(+), 36 deletions(-) delete mode 100644 src/assets/intro/introDesktop.svg delete mode 100644 src/assets/intro/introMobile.svg 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/Spline.astro b/src/components/Spline.astro index 3243be9..6707607 100644 --- a/src/components/Spline.astro +++ b/src/components/Spline.astro @@ -10,8 +10,14 @@ events-target="global" class="spline"> - diff --git a/src/components/Ticket.astro b/src/components/Ticket.astro index e44f2de..b414d7a 100644 --- a/src/components/Ticket.astro +++ b/src/components/Ticket.astro @@ -16,7 +16,7 @@ .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") { diff --git a/src/pages/index.astro b/src/pages/index.astro index e0d9249..388451c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,8 +6,6 @@ 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"; @@ -34,12 +32,9 @@ const page = data.collection?.items[0]; page.showIntro && ( <>
-
+
-
- -
@@ -117,38 +112,15 @@ const page = data.collection?.items[0]; .introWrapper { position: relative; max-width: calc(var(--max-content-width) + 30%); - margin-block-start: var(--spacing-6x); + margin-block-start: pxToRem(-80); + padding-block-start: pxToRem(80); margin-inline: auto; container-type: inline-size; - - @include breakpoint-up("lg") { - margin-block-start: var(--spacing-8x); - } } .intro { - display: none; position: relative; z-index: -1; - - :global(svg) { - width: 100%; - height: auto; - } - - &.intro--mobile { - display: block; - } - - @include breakpoint-up("sm") { - &.intro--mobile { - display: none; - } - - &.intro--desktop { - display: block; - } - } } .arrowWrapper { From e3e505b363114373b28e2c2853b135f982132d8b Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 9 Jun 2024 13:19:14 +0200 Subject: [PATCH 6/8] feat: [WEB-39] improve header styles for home --- src/components/Header.astro | 13 +++++++++++++ src/layouts/Layout.astro | 4 ++-- src/styles/global.scss | 18 +++++++++--------- 3 files changed, 24 insertions(+), 11 deletions(-) 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/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/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; } From 56f7485b42d7f3d769dc01996f984d4c3319aeb5 Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 9 Jun 2024 13:55:37 +0200 Subject: [PATCH 7/8] feat: [WEB-39] improve spline styles --- src/components/Spline.astro | 2 +- src/pages/index.astro | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Spline.astro b/src/components/Spline.astro index 6707607..4d87265 100644 --- a/src/components/Spline.astro +++ b/src/components/Spline.astro @@ -17,7 +17,7 @@ aspect-ratio: 1; @include breakpoint-up("sm") { - aspect-ratio: 16 / 9; + aspect-ratio: 5 / 3; } } diff --git a/src/pages/index.astro b/src/pages/index.astro index 388451c..60fdd39 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -113,7 +113,6 @@ const page = data.collection?.items[0]; position: relative; max-width: calc(var(--max-content-width) + 30%); margin-block-start: pxToRem(-80); - padding-block-start: pxToRem(80); margin-inline: auto; container-type: inline-size; } From 6b07fc8037102fcb8e5512d1ac86c7336c96bc17 Mon Sep 17 00:00:00 2001 From: Manuel Lieb Date: Sun, 9 Jun 2024 13:57:38 +0200 Subject: [PATCH 8/8] feat: [WEB-39] improve spline styles #2 --- src/components/Spline.astro | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Spline.astro b/src/components/Spline.astro index 4d87265..3f0ea7a 100644 --- a/src/components/Spline.astro +++ b/src/components/Spline.astro @@ -17,6 +17,10 @@ aspect-ratio: 1; @include breakpoint-up("sm") { + aspect-ratio: 4 / 3; + } + + @include breakpoint-up("lg") { aspect-ratio: 5 / 3; } }