diff --git a/package.json b/package.json index 542e582..eaec69d 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,6 @@ "@astrojs/node": "^7.0.1", "@astrojs/react": "^3.0.7", "@directus/sdk": "^13.0.2", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", "@uidotdev/usehooks": "^2.4.1", "astro": "^4.0.7", "classnames": "^2.3.2", @@ -25,6 +23,8 @@ "react-spring-carousel": "^2.0.19" }, "devDependencies": { + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", "@typescript-eslint/parser": "^6.14.0", "eslint": "^8.56.0", "eslint-plugin-astro": "^0.31.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a576772..ca3796a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,12 +10,6 @@ dependencies: '@directus/sdk': specifier: ^13.0.2 version: 13.0.2 - '@types/react': - specifier: ^18.2.45 - version: 18.2.45 - '@types/react-dom': - specifier: ^18.2.18 - version: 18.2.18 '@uidotdev/usehooks': specifier: ^2.4.1 version: 2.4.1(react-dom@18.2.0)(react@18.2.0) @@ -39,6 +33,12 @@ dependencies: version: 2.0.19(react-dom@18.2.0)(react-spring@9.7.3)(react@18.2.0) devDependencies: + '@types/react': + specifier: ^18.2.45 + version: 18.2.45 + '@types/react-dom': + specifier: ^18.2.18 + version: 18.2.18 '@typescript-eslint/parser': specifier: ^6.14.0 version: 6.14.0(eslint@8.56.0)(typescript@5.1.3) @@ -2596,13 +2596,11 @@ packages: /@types/prop-types@15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - dev: false /@types/react-dom@18.2.18: resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==} dependencies: '@types/react': 18.2.45 - dev: false /@types/react-reconciler@0.26.7: resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==} @@ -2622,11 +2620,9 @@ packages: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.3 csstype: 3.1.2 - dev: false /@types/scheduler@0.16.3: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} - dev: false /@types/stack-utils@2.0.3: resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} @@ -3693,7 +3689,6 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} - dev: false /damerau-levenshtein@1.0.8: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} diff --git a/public/assets/backgrounds/bg_cloud_dark--left.svg b/public/assets/backgrounds/bg_cloud_dark--left.svg new file mode 100644 index 0000000..591afd1 --- /dev/null +++ b/public/assets/backgrounds/bg_cloud_dark--left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/backgrounds/bg_cloud_dark--right.svg b/public/assets/backgrounds/bg_cloud_dark--right.svg new file mode 100644 index 0000000..a02d1c0 --- /dev/null +++ b/public/assets/backgrounds/bg_cloud_dark--right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/backgrounds/bg_cloud_dark.svg b/public/assets/backgrounds/bg_cloud_dark.svg deleted file mode 100644 index 10089b3..0000000 --- a/public/assets/backgrounds/bg_cloud_dark.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/public/assets/backgrounds/bg_cloud_light--left.svg b/public/assets/backgrounds/bg_cloud_light--left.svg new file mode 100644 index 0000000..6d71340 --- /dev/null +++ b/public/assets/backgrounds/bg_cloud_light--left.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/assets/backgrounds/bg_cloud_light--right.svg b/public/assets/backgrounds/bg_cloud_light--right.svg new file mode 100644 index 0000000..28c8bda --- /dev/null +++ b/public/assets/backgrounds/bg_cloud_light--right.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/backgrounds/bg_cloud_light.svg b/public/assets/backgrounds/bg_cloud_light.svg deleted file mode 100644 index ae0bd49..0000000 --- a/public/assets/backgrounds/bg_cloud_light.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index c5f0864..1171278 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -99,6 +99,7 @@ const VideoPlayer = (props: Props) => { src={`/assets/choices/choices_${theme}_${position}.png`} height="290" width="680" + className="choices__image" alt={`${props.textContent.screenshotAlt} ${position + 1}`} /> @@ -157,6 +158,16 @@ const VideoPlayer = (props: Props) => { + + ); }; diff --git a/src/views/Choices/Choices.scss b/src/views/Choices/Choices.scss index 029a6de..4a1ea89 100644 --- a/src/views/Choices/Choices.scss +++ b/src/views/Choices/Choices.scss @@ -21,10 +21,7 @@ } .choices__content { - background-image: url("/assets/backgrounds/bg_cloud_light.svg"); - background-size: contain; - background-position: center; - background-repeat: no-repeat; + position: relative; width: 100%; height: fit-content; display: flex; @@ -38,7 +35,7 @@ max-width: min(80%, 1320px); } - img { + .choices__image { width: 100%; height: 100%; object-fit: contain; @@ -122,24 +119,60 @@ } } +.choices__cloud { + position: absolute; + width: 100%; + object-fit: contain; + z-index: -1; + + &--left { + top: 10%; + right: 820px; + height: 66%; + } + + &--right { + bottom: 5%; + left: 660px; + height: 95%; + } +} + @media (prefers-color-scheme: dark) { - .choices__content { - background-image: url("/assets/backgrounds/bg_cloud_dark.svg"); + .choices__video-button { + background: var(--darkmode-blue); + } - .choices__video-button { - background: var(--darkmode-blue); + .choices__video-position-buttons { + button { + background: var(--darkmode-pink); + } + } + + .choices__cloud { + &--left { + content: url("/assets/backgrounds/bg_cloud_dark--left.svg"); } - .choices__video-position-buttons { - button { - background: var(--darkmode-pink); - } + &--right { + content: url("/assets/backgrounds/bg_cloud_dark--right.svg"); } } } -@media screen and (max-width: 850px) { +@media screen and (max-width: 1500px) { + .choices__cloud { + &--left { + right: 50%; + } + &--right { + left: 50%; + } + } +} + +@media screen and (max-width: 850px) { .choices { padding-top: 64px; } @@ -165,4 +198,8 @@ height: 400px; } } + + .choices__cloud { + display: none; + } }