diff --git a/pages/music-landing/main.css b/pages/music-landing/main.css deleted file mode 100644 index 28b2584..0000000 --- a/pages/music-landing/main.css +++ /dev/null @@ -1,170 +0,0 @@ -.line-height-0-8 { - line-height: 0.8; -} - -.line-height-1-2 { - line-height: 1.2; -} - -.free-tier-bg { - overflow: hidden; - color: white; - background: linear-gradient(139deg, rgba(227, 145, 35, 0.20) 6.59%, rgba(219, 87, 33, 0.20) 101.73%), #0A0A0A; -} - -.badge-free-tier-bg { - background: linear-gradient(139deg, rgba(217, 136, 28, 0.45) 6.59%, rgba(198, 69, 16, 0.45) 101.73%); -} - -.paid-tier-bg { - overflow: hidden; - color: white; - background: linear-gradient(139deg, #D9881C 6.59%, #C64510 101.73%); -} - -.badge-paid-tier-bg { - background: rgba(0, 0, 0, 0.25); -} - -.extra-large-br { - border-radius: 30px; -} - -.xl7-5 { - font-size: 85px; -} - -.wbutton.orange-bg { - --font-color: white; - background: linear-gradient(139deg, #E39123 6.59%, #DB5721 101.73%); -} - -.wbutton.normal.orange-box-shadow { - box-shadow: 0px 0.824px 1.752px 0px rgba(219, 87, 33, 0.14), 0px 2.085px 4.43px 0px rgba(219, 87, 33, 0.20), 0px 4.253px 9.038px 0px rgba(219, 87, 33, 0.24), 0px 8.76px 18.616px 0px rgba(219, 87, 33, 0.30), 0px 24px 51px 0px rgba(219, 87, 33, 0.44) -} - -.wbutton:not(.disabled).normal:is(:hover, :focus-visible).orange-box-shadow { - transform: translate(0px, -2px); - box-shadow: 0px 1.237px 0.69px 0px rgba(219, 87, 33, 0.27), 0px 3.127px 5.113px 0px rgba(219, 87, 33, 0.34), 0px 6.38px 15.547px 0px rgba(219, 87, 33, 0.36), 0px 13.141px 37.63px 0px rgba(219, 87, 33, 0.39), 0px 36px 100px 0px rgba(219, 87, 33, 0.51); -} - -.feature-list .wlabel { - font-size: 25px; - font-weight: bold; - line-height: 1; -} - -.feature-list .wicon { - font-size: 24px; -} - -.icon-carousel .wimage { - width: var(--carousel-size); - height: var(--carousel-size); - filter: brightness(0) invert(1); -} - -.icon-carousel { - --carousel-size: 72px; - animation: 30s infinite linear carousel; -} - -.icon-carousel-reversed { - animation-direction: reverse; -} - -.icon-carousel-container { - mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%, rgba(255, 255, 255, 0.00) 100%); - overflow: hidden; -} - -.opacity-60 { - opacity: 0.6; -} - -.key-icon { - display: grid; - padding: 10px; - border-radius: 16px; - color: #FFEEEE; - aspect-ratio: 1 / 1; - width: min-content; -} - -.key-icon.red { - background-color: #EF5C52; -} - -.key-icon.green { - color: #1B1B1B; - background-color: #97EF52; -} - -.key-icon.blue { - background-color: #5552EF; -} - -.italic-text { - font-style: italic; -} - -@keyframes carousel { - 0% { - /* calc (width + gap) * number of icons * -1 */ - transform: translateX(calc((var(--carousel-size) + 38px) * -8)); - } - - 100% { - /* calc (width + gap) * (number of icons-0.5) * 2 * -1 */ - transform: translateX(calc(((var(--carousel-size) + 38px) * -8.5*2))); - } -} - -[data-theme=dark] { - --background-color: #000; -} - -.background-image { - position: absolute; - inset: -0.5rem; - --image: url('./assets/background.png'); - background: - linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, #000 77.08%, #000 100%), - var(--image) no-repeat center center; - background-size: cover; - filter: blur(4.5px); - z-index: -1; -} - - -[data-theme=light] .background-image { - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.61) 0%, #FFF 77.08%, #FFF 100%), - var(--image) no-repeat center center; - background-size: cover; -} - -.max-width-30rem { - max-width: 30rem; -} - -@media (max-width: 820px) { - .key-features { - gap: 40px !important; - } - - .key-features .title { - grid-column: 1 / -1; - text-align: center; - } - - .key-features .call-to-action { - grid-column: 1 / -1; - display: grid; - justify-items: center; - } - - .icon-carousel { - --carousel-size: 50px; - } -} \ No newline at end of file diff --git a/pages/music-landing/main.ts b/pages/music-landing/main.ts index efeed9d..855fbe8 100644 --- a/pages/music-landing/main.ts +++ b/pages/music-landing/main.ts @@ -24,6 +24,7 @@ import tiktok from "./assets/tiktok.svg"; // @deno-types="https://raw.githubusercontent.com/lucsoft-DevTeam/lucsoft.de/master/custom.d.ts" import youtube from "./assets/youtube.svg"; +import backgroundImage from "./assets/background.png"; import criticz from "./assets/criticz.jpg"; import redz from "./assets/redz.jpg"; @@ -54,6 +55,8 @@ document.adoptedStyleSheets.push(css` --badge-free-tier: linear-gradient(139deg,#d9881c73 6.59%,#c6451073 101.73%); --background-paid-tier: linear-gradient(139deg, #d9881c 6.59%, #c64510 101.73%); --badge-paid-tier: #00000040; + --bg-color: ${Color.reverseNeutral.mix(new Color("black"), 50)}; + background-color: var(--bg-color); } `); @@ -95,13 +98,38 @@ export function CTAButtonSmall() { `); } +const isLightMode = mediaQueryRef("(prefers-color-scheme: light)"); + appendBody( WebGenTheme( Content( FullWidthSection( DynaNavigation("Music-Landing"), ), - FullWidthSection(Empty().addClass("background-image")), + FullWidthSection( + Empty() + .setAttribute("theme", isLightMode.map((x) => x ? "light" : "dark")) + .addStyle(css` + :host { + position: absolute; + display: block; + inset: -0.5rem; + --image: url('${backgroundImage}'); + background: + linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, var(--bg-color) 77.08%, var(--bg-color) 100%), + var(--image) no-repeat center center; + background-size: cover; + filter: blur(4.5px); + z-index: -1; + } + :host([theme=light]) { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.61) 0%, #FFF 77.08%, #FFF 100%), + var(--image) no-repeat center center; + background-size: cover; + } + `), + ), Content( Grid( Box( @@ -277,12 +305,16 @@ appendBody( ) .setContentMaxWidth("850px") .setAlignContent("center") + .setAttribute("theme", isLightMode.map((x) => x ? "light" : "dark")) .addStyle(css` .icon-carousel wg-image { width: var(--carousel-size); height: var(--carousel-size); filter: brightness(0) invert(1); } + :host([theme="light"]) .icon-carousel wg-image { + filter: brightness(0) invert(0); + } @keyframes carousel { 0% { /* calc (width + gap) * number of icons * -1 */ @@ -473,5 +505,3 @@ appendBody( ) .setPrimaryColor(new Color("#eb8c2d")), ); - -document.body.style.backgroundColor = Color.reverseNeutral.mix(new Color("black"), 50);