diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..aee8181 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a291..250032a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5501, + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] } \ No newline at end of file diff --git a/Iceparts/.DS_Store b/Iceparts/.DS_Store new file mode 100644 index 0000000..e61a425 Binary files /dev/null and b/Iceparts/.DS_Store differ diff --git a/Iceparts/Icebear_body_1.svg b/Iceparts/Icebear_body_1.svg new file mode 100644 index 0000000..01986e8 --- /dev/null +++ b/Iceparts/Icebear_body_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_ear_1.svg b/Iceparts/Icebear_ear_1.svg new file mode 100644 index 0000000..dcc9e12 --- /dev/null +++ b/Iceparts/Icebear_ear_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_face_1.svg b/Iceparts/Icebear_face_1.svg new file mode 100644 index 0000000..2fe6c76 --- /dev/null +++ b/Iceparts/Icebear_face_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_footLeft_1.svg b/Iceparts/Icebear_footLeft_1.svg new file mode 100644 index 0000000..ea5f7eb --- /dev/null +++ b/Iceparts/Icebear_footLeft_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_footRight_1.svg b/Iceparts/Icebear_footRight_1.svg new file mode 100644 index 0000000..8fa043f --- /dev/null +++ b/Iceparts/Icebear_footRight_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_headBase_1.svg b/Iceparts/Icebear_headBase_1.svg new file mode 100644 index 0000000..084841e --- /dev/null +++ b/Iceparts/Icebear_headBase_1.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Iceparts/Icebear_legLeft_1.svg b/Iceparts/Icebear_legLeft_1.svg new file mode 100644 index 0000000..347ea25 --- /dev/null +++ b/Iceparts/Icebear_legLeft_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_legRight_1.svg b/Iceparts/Icebear_legRight_1.svg new file mode 100644 index 0000000..cc73a9b --- /dev/null +++ b/Iceparts/Icebear_legRight_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Icebear_tail_1.svg b/Iceparts/Icebear_tail_1.svg new file mode 100644 index 0000000..007fdef --- /dev/null +++ b/Iceparts/Icebear_tail_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Iceparts/Iceberg_base_1.svg b/Iceparts/Iceberg_base_1.svg new file mode 100644 index 0000000..cf06fe2 --- /dev/null +++ b/Iceparts/Iceberg_base_1.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Iceparts/Iceberg_bottom_1.svg b/Iceparts/Iceberg_bottom_1.svg new file mode 100644 index 0000000..7ef9488 --- /dev/null +++ b/Iceparts/Iceberg_bottom_1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/Iceparts/Iceberg_overlay_1.svg b/Iceparts/Iceberg_overlay_1.svg new file mode 100644 index 0000000..788d0f7 --- /dev/null +++ b/Iceparts/Iceberg_overlay_1.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Iceparts/Iceberg_overlay_2.svg b/Iceparts/Iceberg_overlay_2.svg new file mode 100644 index 0000000..b85eaf0 --- /dev/null +++ b/Iceparts/Iceberg_overlay_2.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Iceparts/Iceberg_platform_1.svg b/Iceparts/Iceberg_platform_1.svg new file mode 100644 index 0000000..35c1f10 --- /dev/null +++ b/Iceparts/Iceberg_platform_1.svg @@ -0,0 +1,11 @@ + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index d5ff804..68d1d9f 100644 --- a/README.md +++ b/README.md @@ -1 +1,26 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/E1TYCvbT) [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10934183&assignment_repo_type=AssignmentRepo) + + + +What the project does +This product is a story telling website that shows how important it is to take care of the environment because the ice is melting on the north pole where animals live. This story is inspired on the UN´s sustainable goal nr 14, life under water. + +Why the project is useful +Our project is useful because it can prevent the ice melting, water full of trash and global warming, we also talk about how the reader can help the planet. + +How users can get started with the project +The projects start when you begin to scroll downwards + +Where users can get help with your project +Users can click on the picture of nr 14 goal to go to the main Un site to read more about the subject (Does not work on the website because something is blocking the img) + +Which technology is used +HTML, CSS/SCSS and JavaScript + +Who maintains and contributes to the project +Nora Lundquist, Guro Karlsen and Martin Heggholmen + + +There were some things we could´t figure out with the media queries, we tried to make it as responsive as possible but could not figure out hoe to get the bottom text smaller (Nora send you a teams message on it without a replay on the problem) +The SVG of the polobear/iceberg is for some odd reason taking up a lot of space and is causing the MQ to have a large margin space on the right side of the screen. (also send a message about this with no luck) \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..0e58955 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/SVG/toxic.svg b/images/SVG/toxic.svg new file mode 100644 index 0000000..fb3de63 --- /dev/null +++ b/images/SVG/toxic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud1.svg b/images/cloud1.svg new file mode 100644 index 0000000..1e3e99c --- /dev/null +++ b/images/cloud1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud2.svg b/images/cloud2.svg new file mode 100644 index 0000000..6940c16 --- /dev/null +++ b/images/cloud2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud3.svg b/images/cloud3.svg new file mode 100644 index 0000000..b283968 --- /dev/null +++ b/images/cloud3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud4.svg b/images/cloud4.svg new file mode 100644 index 0000000..43259cb --- /dev/null +++ b/images/cloud4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud5.svg b/images/cloud5.svg new file mode 100644 index 0000000..ebbb530 --- /dev/null +++ b/images/cloud5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud6.svg b/images/cloud6.svg new file mode 100644 index 0000000..2cbc74e --- /dev/null +++ b/images/cloud6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cloud7.svg b/images/cloud7.svg new file mode 100644 index 0000000..f7ee785 --- /dev/null +++ b/images/cloud7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/deadfish 1.svg b/images/deadfish 1.svg new file mode 100644 index 0000000..1b5dd6d --- /dev/null +++ b/images/deadfish 1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/deadfish 2.svg b/images/deadfish 2.svg new file mode 100644 index 0000000..ec0a218 --- /dev/null +++ b/images/deadfish 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..5fcdda1 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/fish/.DS_Store b/images/fish/.DS_Store new file mode 100644 index 0000000..55057b4 Binary files /dev/null and b/images/fish/.DS_Store differ diff --git a/images/fish/SVG/oceanfloor.svg b/images/fish/SVG/oceanfloor.svg new file mode 100644 index 0000000..bd21458 --- /dev/null +++ b/images/fish/SVG/oceanfloor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/fish/big-fish-2.svg b/images/fish/big-fish-2.svg new file mode 100644 index 0000000..a35d1b5 --- /dev/null +++ b/images/fish/big-fish-2.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/fish/big-fish.svg b/images/fish/big-fish.svg new file mode 100644 index 0000000..2cd0071 --- /dev/null +++ b/images/fish/big-fish.svg @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/fish/cluster-fish.svg b/images/fish/cluster-fish.svg new file mode 100644 index 0000000..a8a07a3 --- /dev/null +++ b/images/fish/cluster-fish.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/fish/light_fish.png b/images/fish/light_fish.png new file mode 100644 index 0000000..78a4fd1 Binary files /dev/null and b/images/fish/light_fish.png differ diff --git a/images/fish/light_fish.svg b/images/fish/light_fish.svg new file mode 100644 index 0000000..1ae9a04 --- /dev/null +++ b/images/fish/light_fish.svg @@ -0,0 +1,185 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/fish/small-amount-fish.svg b/images/fish/small-amount-fish.svg new file mode 100644 index 0000000..876c731 --- /dev/null +++ b/images/fish/small-amount-fish.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/fish/small-fish.svg b/images/fish/small-fish.svg new file mode 100644 index 0000000..a97b700 --- /dev/null +++ b/images/fish/small-fish.svg @@ -0,0 +1,185 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/goal-14.png b/images/goal-14.png new file mode 100644 index 0000000..832a9aa Binary files /dev/null and b/images/goal-14.png differ diff --git a/images/oceanfloor.svg b/images/oceanfloor.svg new file mode 100644 index 0000000..bd21458 --- /dev/null +++ b/images/oceanfloor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/osos.svg b/images/osos.svg deleted file mode 100644 index c423c69..0000000 --- a/images/osos.svg +++ /dev/null @@ -1,239 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - Openclipart - - - - - - - - - - - diff --git a/images/seaweed1.svg b/images/seaweed1.svg new file mode 100644 index 0000000..fe3feaf --- /dev/null +++ b/images/seaweed1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/seaweed2.svg b/images/seaweed2.svg new file mode 100644 index 0000000..5bad280 --- /dev/null +++ b/images/seaweed2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/toxic.svg b/images/toxic.svg new file mode 100644 index 0000000..fb3de63 --- /dev/null +++ b/images/toxic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/trash/.DS_Store b/images/trash/.DS_Store new file mode 100644 index 0000000..9bd4c7b Binary files /dev/null and b/images/trash/.DS_Store differ diff --git a/images/trash/trash-bag.svg b/images/trash/trash-bag.svg new file mode 100644 index 0000000..a58814c --- /dev/null +++ b/images/trash/trash-bag.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/trash/trash-can.svg b/images/trash/trash-can.svg new file mode 100644 index 0000000..e958641 --- /dev/null +++ b/images/trash/trash-can.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/trash/trash-paper.svg b/images/trash/trash-paper.svg new file mode 100644 index 0000000..852d417 --- /dev/null +++ b/images/trash/trash-paper.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/trash/trash-sock.svg b/images/trash/trash-sock.svg new file mode 100644 index 0000000..71fc844 --- /dev/null +++ b/images/trash/trash-sock.svg @@ -0,0 +1,37 @@ + + + + + + + + + + \ No newline at end of file diff --git a/images/trash/trash-spoon.svg b/images/trash/trash-spoon.svg new file mode 100644 index 0000000..467b87b --- /dev/null +++ b/images/trash/trash-spoon.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/images/trash/trashbag.svg b/images/trash/trashbag.svg new file mode 100644 index 0000000..3fada9a --- /dev/null +++ b/images/trash/trashbag.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..dda99aa --- /dev/null +++ b/index.html @@ -0,0 +1,148 @@ + + + + + + + + + + + Assignment_3 group_9 + + + + +
+ Switch to landscape mode for the best viewing experience. + +
+ + goal-14-image +
+
+
+
+
+
+
+ +
+ clouds + clouds + clouds +
+
+

This is Barnard, he lives on an iceberg in the north pole. Lately because of pollution, he´s home has slowly started to melt

+
+ +
+

This means he have to swim all the time and eventually be so tired he’s going to drown.

+
+ +
+

Arctic sea ice recedes every summer, + but still covers millions of square miles of ocean today. + But the Arctic is warming faster than anywhere else on + Earth and ice-free summers could become a reality. +

+
+ +
+

Human activities are at the root of this problem, because of the carbon dioxide from industry's, co2 gasses from cars and other greenhouse gasses.

+
+ +
+

Changes in water temperature causes algae to leave coral reefs, + turning them white and making them vulnerable to + disease and death—a phenomenon known as coral bleaching. +

+
+ +
+

This have raised temperatures, especially on the poles. As a result, icebergs are rapidly melting into the sea and retreating on land.

+
+ +
+
+
+
+
+
+ ice-platform + ice-overlay + ice-bottom +
+
+
+ icebear-headBase +
+ icebear-body +
+ icebear-legLeft + icebear-tail + icebear-footLeft +
+
+ icebear-legRight + icebear-footRight +
+
+
+ + +
+
+ big-fish + small-fish + small-amount-fish + cluster-fish + small-fish +
+ +
+ trash-can + trash-spoon + trash-bag + trash-sock +
+
+ +
+
+
+ dead fish on the ocean floor + dead fish on the ocean floor + seaweed + seaweed + ocean floor + dead fish on the ocean floor + toxic barrel +
+
+
+
+
+
+
+
+
+
+
+

If we dont do something... + Rising sea levels could impact 1 billion people by the year 2050. Heat waves will become more frequent and severe around the world, + affecting hundreds of millions—or even billions—of people if we don’t act. +

+
+

Things YOU can do to help:

+ +
+

Act now to save other animals like Barnard

+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..0d969d9 --- /dev/null +++ b/index.js @@ -0,0 +1,97 @@ +// Intersection Observer for background color change +const callback = (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + document.body.style.backgroundColor = entry.target.dataset.color; + } + }); +}; + +const changes = document.querySelectorAll('.change'); +const colorObserver = new IntersectionObserver(callback, { threshold: .9 }); + +changes.forEach(change => { + colorObserver.observe(change); +}); + +// Scroll event handling for .scroll-section__howtofix elements +const howToFixElems = document.querySelectorAll('.scroll-section__howtofix'); +const totalSections = howToFixElems.length; + +window.addEventListener("scroll", function() { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollPercentage = (scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)) * 100; + + let activeIndex = Math.floor(scrollPercentage / (100 / totalSections)); + + howToFixElems.forEach((elem, index) => { + if (index === activeIndex) { + elem.classList.remove("fade-out"); + elem.style.transform = `translateY(${scrollTop}px)`; + } else { + elem.classList.add("fade-out"); + elem.style.transform = ''; + } + }); +}); + +// Intersection Observer for fade-in of .scroll-section__bottom +document.addEventListener("DOMContentLoaded", function() { + const bottomText = document.querySelector('.scroll-section__bottom'); + + const fadeInCallback = (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in'); + observer.unobserve(entry.target); + } + }); + }; + + const fadeInObserver = new IntersectionObserver(fadeInCallback, { threshold: 0.1 }); + fadeInObserver.observe(bottomText); +}); +// to create particles for the toxic barrel on random areas within 5ww size. +const particles = document.querySelectorAll('.particle'); + +particles.forEach((particle, index) => { + particle.style.left = `${83.5 + Math.random() * 5}vw`; +}); + +// Function to detect if the device is mobile or not +function isMobileDevice() { + return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); +}; + +// Event listener for window resize +window.addEventListener('resize', function() { +var landscapeMessage = document.getElementById('landscape-message'); + +// only displays "switch tot landscape mode if its a mobile device" +if (!isMobileDevice()) { + landscapeMessage.style.display = 'none'; + return; +} + +if (window.innerHeight > window.innerWidth) { + landscapeMessage.style.display = 'block'; +} else { + landscapeMessage.style.display = 'none'; +} +}, false); + +// Check if its a mobile device +if (isMobileDevice() && window.innerHeight > window.innerWidth) { +document.getElementById('landscape-message').style.display = 'block'; +} + +// Button to hide the message +document.getElementById('ok-button').addEventListener('click', function() { +document.getElementById('landscape-message').style.display = 'none'; +}); + +//if its a pc remove the whole message, I had to ad this because it sometimes loaded in by defaultt +// on pc +if (!isMobileDevice()) { + document.getElementById('landscape-message').style.display = 'none'; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html deleted file mode 100644 index cfdc35d..0000000 --- a/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - -Assignment_3 group_9 - - - - -
-
-

Scene 1

-

Content for scene 1...

-
- -
-
-
-
-
-

Scene 2

-

Content for scene 2...

-
-
-
-
-

Scene 3

-

Content for scene 3...

-
-
- -
-
-

Scene 4

-

Content for scene 4...

-
-
- - - \ No newline at end of file diff --git a/public/index.js b/public/index.js deleted file mode 100644 index 71a8b27..0000000 --- a/public/index.js +++ /dev/null @@ -1,24 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const observerOptions = { - root: null, - rootMargin: "0px", - threshold: 0.25, - }; - - const observerCallback = (entries, observer) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.querySelector(".scroll-section__content").classList.add("scroll-section__content--visible"); - } else { - entry.target.querySelector(".scroll-section__content").classList.remove("scroll-section__content--visible"); - } - }); - }; - - const observer = new IntersectionObserver(observerCallback, observerOptions); - const sections = document.querySelectorAll(".scroll-section"); - - sections.forEach((section) => { - observer.observe(section); - }); -}); \ No newline at end of file diff --git a/src/sass/_root.scss b/src/sass/_root.scss index 0024448..e65058e 100644 --- a/src/sass/_root.scss +++ b/src/sass/_root.scss @@ -1,46 +1,178 @@ +/*This dark-theme/light-theme adds changes to the text-color depending on which mode is enabled.*/ +$light-theme: ( + text-color: black, + background-color: white +); + +$dark-theme: ( + text-color: white, + background-color: black +); + body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; + transition: 3s background-color; + margin: 0; + + &[data-theme="dark"] { + color: map-get($dark-theme, text-color); + background-color: map-get($dark-theme, background-color); + } + + &[data-theme="light"] { + color: map-get($light-theme, text-color); + background-color: map-get($light-theme, background-color); + } +} +.goal_14{ + position: absolute; + width: 10vh; + padding: 0.5vw; } -.scroll-section { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - position: relative; - overflow: hidden; +.goal_14 { + position: absolute; + width: 10vh; + padding: 0.5vw; } +/* This adds changes to the background with a seperation of 100vh between each change*/ +.change-1, +.change-2, +.change-3, +.change-4, +.change-5 { + position: absolute; + width: 100%; + min-height: 100vh; -.scroll-section__content { - opacity: 0; - transform: translateY(50px); - transition: all 1s ease-out; + &.change-2 { + margin-top: 100vh; + } + + &.change-3 { + margin-top: 200vh; + } + + &.change-4 { + margin-top: 300vh; + } + + &.change-5 { + margin-top: 400vh; + } } -.scroll-section__content--visible { - opacity: 1; - transform: translateY(0); +.scroll-section--scene1 { + display: grid; } -.scroll-section__polar-bear { - opacity: 0; - transform: translateY(50px); - transition: all 1s ease-out; +.scroll-section__quote { + width: 40vw; } -.scroll-section__polar-bear--visible { +* { + overflow-x: hidden; +} + +.fade-in { + opacity: 1; + transition: opacity 1s; +} + +.fade-out { + transition: opacity 1s; + + &.fade-in { opacity: 1; - transform: translateY(0); - animation: polarBearAnimation 3s infinite alternate; + } + + &.fade-out { + opacity: 0; + } } -@keyframes polarBearAnimation { - 0% { - transform: translateY(0) scale(1); +.scroll-section__howtofix { + padding-top: 50vh; + + & p, li { + background-color: #007dbc; + color: white; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + box-shadow: 2px 5px 10px white; + border-radius: 5px; + font-size: 2.5vh; } - 100% { - transform: translateY(-10px) scale(1.1); +} + +/*Stops all animation when prefers reduced motion is enabled*/ +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} + +@media only screen and (max-width: 300px) { + body { + margin: 0; + } + + .goal_14 { + width: 14%; + height: 5%; + } + + .water { + width: 100vw; + top: 134vw; + } + + .cloud_1 { + height: 10vh; + width: 10vw; + animation: unset; + position: inherit; + } + + .cloud_2, + .cloud_3 { + height: 10vh; + width: 10vw; + display: none; + } + + .iceberg__element{ + height: 5vh; + width: 5vw; + } + + .icebear_element{ + height: 5vh; + width: 5vw; + } + + .scroll-section__howtofix { + width: 0; + margin: 0; + padding: 5px; + + p, + li { + margin: 0; + font-size: 12px; } -} \ No newline at end of file + } + + .trash { + right: 0; + bottom: 0; + top: 0; + } + + .scroll-section img { + height: 45vh; + margin: 0; + } + &__bottom1, &__bottom2, &__bottom3, &__bottom4 { + font-size: 15px; + } +} diff --git a/src/sass/_scene1.scss b/src/sass/_scene1.scss index 154dc35..b23f6a9 100644 --- a/src/sass/_scene1.scss +++ b/src/sass/_scene1.scss @@ -1,3 +1,161 @@ /* scene 1 ------------------------------------------------- -*/ \ No newline at end of file +--------------------------- +*/ + +.scroll-section { + &--scene1 { + } + + &__quote { + margin: 20vw; + width: 40vw; + } +} +/* scene 1 ------------------------------------------------*/ + +.clouds{ + animation: cloud_animation 10s infinite alternate linear; + .cloud_1{ + position: absolute; + top: 15vh; + left: 100vh; + width: 20vw; + z-index: -1; + animation: cloud_animation 8s infinite alternate linear; + } + + .cloud_2{ + position: absolute; + left: 50vh; + width: 10vw; + z-index: -1; + animation: cloud_animation 10s infinite alternate linear; + } + + .cloud_3{ + position: absolute; + top: 30vh; + left: 130vh; + width: 20vw; + z-index: -2; + animation: cloud_animation 15s infinite alternate linear; + } +} + +@keyframes cloud_animation{ + from { + left: 80%; + } + + to { + left: 0; + } +} + +.water__element{ + position: absolute; + width: 100vw; + height: 70vh; + top: 54vh; + margin: 0; + background: linear-gradient(to top, rgba(169,208,113,0),rgba(21,119,143,1)); +} + +.iceberg__element, .icebear_element { + display: grid; + justify-items: center; + align-items: center; + margin-top: 35vh; +} + +.iceplatform__element--modifier { + position: absolute; + height: 127vh; + width: 127vw; +} + +.iceoverlay__element--modifier { + z-index: -1; + position: absolute; + height: 127vh; + width: 127vw; + animation: iceberg-animation 1s alternate infinite linear; +} + +.icebottom__element--modifier { + z-index: -2; + position: absolute; + height: 127vh; + width: 127vw; + animation: iceberg-animation 3s alternate infinite linear; +} + +.icebear-body__element--modifier, .icebear-headBase__element--modifier, .icebear-legLeft__element--modifier, .icebear-legRight__element--modifier, .icebear-footLeft__element--modifier, .icebear-footRight__element--modifier, .icebear-tail__element--modifier{ + position: fixed; + height: 127vh; + width: 127vw; +} + +.headmove__element--modifier{ + transform-origin: left; + position: fixed; + height: 127vh; + width: 127vw; + animation: head-animation 4s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.leftLeg-move__element--modifier{ + transform-origin: top left; + position: fixed; + height: 127vh; + width: 127vw; + animation: leg-animation 4s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.rightLeg-move__element--modifier{ + transform-origin: top center; + position: fixed; + height: 127vh; + width: 127vw; + animation: leg-animation 3s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.icebear_element{ + margin-top: 1vh; +} + +@keyframes iceberg-animation { + 0% { + transform: rotate(2deg); + } + 100% { + transform: rotate(-2deg); + } +} + +@keyframes head-animation { + 0% { + transform: rotate(0.5deg); + } + 50% { + transform: rotate(-0.5deg); + } + 100% { + transform: rotate(-1deg); + } +} + +@keyframes leg-animation { + 0% { + transform: rotate(0.5deg); + } + 50% { + transform: rotate(-0.2deg); + } + 100% { + transform: rotate(1deg); + } +} \ No newline at end of file diff --git a/src/sass/_scene2.scss b/src/sass/_scene2.scss index 0b63425..f4007ce 100644 --- a/src/sass/_scene2.scss +++ b/src/sass/_scene2.scss @@ -1,4 +1,94 @@ /* scene 2 ------------------------------------------------ */ +.scene2 { + overflow: hidden; +} + +.scroll-section--scene2 { + display: grid; + margin-top: 160vh; +} + +.scroll-section__globalwarmingfacts { + margin: 2vh; + width: 40vw; +} + +.scroll-section__globalwarmingfacts2 { + margin: 2vh; + width: 40vw; +} + +.small__fish, .cluster__fish, .small__fish__2{ + animation: fish-animation-1 7s infinite; +} + +@keyframes fish-animation-1 { + from { + transform: translateX(130vw); + } + to { + transform: translateX(-170vw); + } +} +.big__fish, .small__amount__fish { + animation: fish-animation-2 10s infinite; +} + +.big__fish{ + margin-top: 230vh; +} + +@keyframes fish-animation-2 { + from { + transform: translateX(-110vw); + } + to { + transform: translateX(130vw); + } +} + +.trash { + animation: trash-animation 7s ease-in infinite; +} + +.trash__bag{ + margin-bottom: 200vh; + margin-left: 120vh; + // position: relative; +} + +.trash__can{ + margin-left: 100vh; + margin-bottom: 260vh; + position: relative; +} + +.trash__spoon{ + margin-left: 50vh; +} + +@keyframes trash-animation { + 0% { + transform: translateY(0); + } + 30% { + transform: translateY(5.56vh); + } + 50% { + transform: translateY(11.11vh); + } + 70% { + transform: translateY(5.56vh); + } + 100% { + transform: translateY(0); + } +} + +.trash__sock { + margin-left: 10vw; + +} diff --git a/src/sass/_scene3.scss b/src/sass/_scene3.scss index 0a7c476..181584f 100644 --- a/src/sass/_scene3.scss +++ b/src/sass/_scene3.scss @@ -1,4 +1,122 @@ -/* scene 3 +/* scene 2 ------------------------------------------------ */ +.scroll-section { + &--scene3 { + position: relative; + width: 100vw; + height: 100vh; + background-image: linear-gradient(to top, rgba(239,239,239,255), rgba(239,239,239,0)); + margin: 0; + } + + &__howtofix { + position: absolute; + font-size: 2.5vh; + z-index: 1; + width: 30vw; + color: rgb(99, 99, 99); + } + + &__img1, &__img2, &__img3, &__img4, &__img6 { + position: absolute; + bottom: 0; + width: 10vw; + height: 10vh; + z-index: 1000; + } + + &__img1 { + left: 10vw; + } + + &__img2 { + left: 45vw; + } + + &__img3, &__img4 { + padding-bottom: 8vh; + } + + &__img3 { + left: 5vw; + } + + &__img4 { + left: 60vw; + } + + &__img5 { + position: absolute; + bottom: 0; + left: 0; + width: 100vw; + z-index: 999; + } + + &__img6 { + left: 60vw; + transform: rotate(180deg); + } + + &__img7 { + position: absolute; + bottom: 0; + left: 80vw; + width: 20vw; + height: auto; + z-index: 999; + } +} + +.fade-in { +opacity: 1; +transition: opacity 5s; +} + +@keyframes moveParticles { +0% { + transform: translateY(0); + opacity: 1; +} +100% { + transform: translateY(-100vh); + opacity: 0; +} +} + +.particle { +position: absolute; +bottom: 0; +background: green; +width: 25px; +height: 25px; +animation: moveParticles 2s linear infinite; +margin-bottom: 40vh; +border-radius: 50%; +} + +.particle:nth-child(2n) { +animation-duration: 7s; +} + +.particle:nth-child(3n) { +animation-duration: 7s; +} + +.particle:nth-child(4n) { +animation-duration: 6s; +} + +.particle:nth-child(5n) { +animation-duration: 7s; +} + +.particle:nth-child(6n) { +animation-duration: 6s; +} + +.particle:nth-child(7n) { +animation-duration: 4s; +} \ No newline at end of file diff --git a/src/sass/_scene4.scss b/src/sass/_scene4.scss index a3c0d39..2efeb45 100644 --- a/src/sass/_scene4.scss +++ b/src/sass/_scene4.scss @@ -1,4 +1,53 @@ -/* scene 4 ------------------------------------------------- -*/ +/*The whole bottom scene properties*/ +.scroll-section { + &--scene4 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + background-image: linear-gradient(to top, rgba(32, 21, 21, 100), rgb(19, 8, 8)); + z-index: 1000; + } + /*Bottom info-text about what happens if we dont do something*/ + &__bottom1, &__bottom2, &__bottom3, &__bottom4 { + color: white; + position: absolute; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-align: center; + font-size: 3vh; + animation: fadeInOut 40s infinite; + width: 50vw; + display: block; + animation-timing-function: ease-in-out; + opacity: 0; + visibility: hidden; + } + + &__bottom1 { + animation-delay: 0s; + } + + &__bottom2 { + animation-delay: 10s; + } + + &__bottom3 { + animation-delay: 20s; + } + + &__bottom4 { + animation-delay: 30s; + } + + @keyframes fadeInOut { + 0%, 16.66% { opacity: 0; visibility: hidden; } + 16.67%, 20% { opacity: 0; visibility: visible; transform: scale(1.0); } // Fade in starts + 25%, 33.33% { opacity: 1; visibility: visible; transform: scale(1.1);} // Fully visible + 33.34%, 37.5% { opacity: 1; visibility: visible;} // Fade out starts + 41.67%, 50% { opacity: 0; visibility: visible; } // Fully transparent + 50.01%, 100% { visibility: hidden; } + } +} \ No newline at end of file diff --git a/src/sass/style.css b/src/sass/style.css index 36974a4..7b77f44 100644 --- a/src/sass/style.css +++ b/src/sass/style.css @@ -1,58 +1,562 @@ +:root { + --text-color: black; + --background-color: white; + overflow-x: hidden; +} + +[data-theme=dark] { + --text-color: white; + --background-color: black; +} + body { - font-family: Arial, sans-serif; + transition: 3s background-color; + color: var(--text-color); + background-color: var(--background-color); margin: 0; - padding: 0; } -.scroll-section { +.goal_14 { + position: absolute; + width: 10vh; + padding: 0.5vw; +} + +.change-1 { + position: absolute; + width: 100%; min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - position: relative; - overflow: hidden; } -.scroll-section__content { - opacity: 0; - transform: translateY(50px); - transition: all 1s ease-out; +.change-2 { + position: absolute; + width: 100%; + min-height: 100vh; + margin-top: 100vh; +} + +.change-3 { + position: absolute; + width: 100%; + min-height: 100vh; + margin-top: 200vh; +} + +.change-4 { + position: absolute; + width: 100%; + min-height: 100vh; + margin-top: 300vh; +} + +.change-5 { + position: absolute; + width: 100%; + min-height: 100vh; + margin-top: 400vh; +} + +.scroll-section--scene1 { + display: grid; } -.scroll-section__content--visible { +.scroll-section__quote { + width: 40vw; +} + +* { + overflow-x: hidden; +} + +.fade-in { opacity: 1; - transform: translateY(0); + transition: opacity 1s; } -.scroll-section__polar-bear { +.fade-out { opacity: 0; - transform: translateY(50px); - transition: all 1s ease-out; + transition: opacity 1s; } -.scroll-section__polar-bear--visible { - opacity: 1; - transform: translateY(0); - animation: polarBearAnimation 3s infinite alternate; +.scroll-section__howtofix { + padding-top: 50vh; +} +.scroll-section__howtofix p, .scroll-section__howtofix li { + padding: 15px; + margin: 10px; + background-color: #007dbc; + color: white; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + box-shadow: 2px 5px 10px white; + border-radius: 5px; + font-size: 2.5vh; } -@keyframes polarBearAnimation { - 0% { - transform: translateY(0) scale(1); +@media (prefers-reduced-motion: reduce) { + Disable all animations * { + animation: none !important; + transition: none !important; } - 100% { - transform: translateY(-10px) scale(1.1); +} +@media only screen and (max-width: 300px) { + body { + margin: 0; + } + .goal_14 { + width: 14%; + height: 5%; + } + .water { + width: 100vw; + top: 134vw; + } + .cloud_1 { + height: 10vh; + width: 10vw; + animation: unset; + position: inherit; + } + .cloud_2, .cloud_3 { + height: 10vh; + width: 10vw; + display: none; + } + .iceberg__element { + height: 5vh; + width: 5vw; + } + .icebeicebear_elementar { + height: 5vh; + width: 5vw; + } + .scroll-section__howtofix { + width: 0; + margin: 0; + padding: 5px; + } + .scroll-section__howtofix p, .scroll-section__howtofix li { + margin: 0; + font-size: 12px; + } + .trash { + right: 0; + bottom: 0; + top: 0; + } + .scroll-section img { + height: 45vh; + margin: 0; + } + .scroll-section__bottom1, .scroll-section__bottom2, .scroll-section__bottom3 { + font-size: 1vh; } } /* scene 1 ------------------------------------------------- +--------------------------- */ +.scroll-section__quote { + margin: 20vw; + width: 40vw; +} + +/* scene 1 ------------------------------------------------*/ +.clouds { + animation: cloud_animation 10s infinite alternate linear; +} +.clouds .cloud_1 { + position: absolute; + top: 15vh; + left: 100vh; + width: 20vw; + z-index: -1; + animation: cloud_animation 8s infinite alternate linear; +} +.clouds .cloud_2 { + position: absolute; + left: 50vh; + width: 10vw; + z-index: -1; + animation: cloud_animation 10s infinite alternate linear; +} +.clouds .cloud_3 { + position: absolute; + top: 30vh; + left: 130vh; + width: 20vw; + z-index: -2; + animation: cloud_animation 15s infinite alternate linear; +} + +@keyframes cloud_animation { + from { + left: 80%; + } + to { + left: 0; + } +} +.water__element { + position: absolute; + width: 100vw; + height: 70vh; + top: 58vh; + background: linear-gradient(to top, rgba(169, 208, 113, 0), rgb(21, 119, 143)); +} + +.iceberg__element, .icebear_element { + display: grid; + justify-items: center; + align-items: center; + margin-top: 35vh; +} + +.iceplatform__element--modifier { + position: absolute; + height: 127vh; + width: 127vw; +} + +.iceoverlay__element--modifier { + z-index: -1; + position: absolute; + height: 127vh; + width: 127vw; + animation: iceberg-animation 1s alternate infinite linear; +} + +.icebottom__element--modifier { + z-index: -2; + position: absolute; + height: 127vh; + width: 127vw; + animation: iceberg-animation 3s alternate infinite linear; +} + +.icebear-body__element--modifier, .icebear-headBase__element--modifier, .icebear-legLeft__element--modifier, .icebear-legRight__element--modifier, .icebear-footLeft__element--modifier, .icebear-footRight__element--modifier, .icebear-tail__element--modifier { + position: fixed; + height: 127vh; + width: 127vw; +} + +.headmove__element--modifier { + transform-origin: left; + position: fixed; + height: 127vh; + width: 127vw; + animation: head-animation 4s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.leftLeg-move__element--modifier { + transform-origin: top left; + position: fixed; + height: 127vh; + width: 127vw; + animation: leg-animation 4s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.rightLeg-move__element--modifier { + transform-origin: top center; + position: fixed; + height: 127vh; + width: 127vw; + animation: leg-animation 3s alternate infinite linear; + animation-timing-function: ease-in-out; +} + +.icebear_element { + margin-top: 1vh; +} + +@keyframes iceberg-animation { + 0% { + transform: rotate(2deg); + } + 100% { + transform: rotate(-2deg); + } +} +@keyframes head-animation { + 0% { + transform: rotate(0.5deg); + } + 50% { + transform: rotate(-0.5deg); + } + 100% { + transform: rotate(-1deg); + } +} +@keyframes leg-animation { + 0% { + transform: rotate(0.5deg); + } + 50% { + transform: rotate(-0.2deg); + } + 100% { + transform: rotate(1deg); + } +} /* scene 2 ------------------------------------------------ */ -/* scene 3 +.scene2 { + overflow: hidden; +} + +.scroll-section--scene2 { + display: grid; + margin-top: 160vh; +} + +.scroll-section__globalwarmingfacts { + margin: 2vh; + width: 40vw; +} + +.scroll-section__globalwarmingfacts2 { + margin: 2vh; + width: 40vw; +} + +.small__fish, .cluster__fish, .small__fish__2 { + animation: fish-animation-1 7s infinite; +} + +@keyframes fish-animation-1 { + from { + transform: translateX(130vw); + } + to { + transform: translateX(-170vw); + } +} +.big__fish, .small__amount__fish { + animation: fish-animation-2 10s infinite; +} + +.big__fish { + margin-top: 230vh; +} + +@keyframes fish-animation-2 { + from { + transform: translateX(-110vw); + } + to { + transform: translateX(130vw); + } +} +.trash { + animation: trash-animation 7s ease-in infinite; +} + +.trash__bag { + margin-bottom: 200vh; + margin-left: 120vh; +} + +.trash__can { + margin-left: 100vh; + margin-bottom: 260vh; + position: relative; +} + +.trash__spoon { + margin-left: 50vh; +} + +@keyframes trash-animation { + 0% { + transform: translateY(0); + } + 30% { + transform: translateY(5.56vh); + } + 50% { + transform: translateY(11.11vh); + } + 70% { + transform: translateY(5.56vh); + } + 100% { + transform: translateY(0); + } +} +.trash__sock { + margin-left: 10vw; +} + +/* scene 2 ------------------------------------------------ */ -/* scene 4 ------------------------------------------------- -*//*# sourceMappingURL=style.css.map */ \ No newline at end of file +.scroll-section--scene3 { + position: relative; + width: 100vw; + height: 100vh; + background-image: linear-gradient(to top, rgb(239, 239, 239), rgba(239, 239, 239, 0)); + margin: 0; +} +.scroll-section__howtofix { + position: absolute; + font-size: 2.5vh; + z-index: 1; + width: 30vw; + color: rgb(99, 99, 99); +} +.scroll-section__img1, .scroll-section__img2, .scroll-section__img3, .scroll-section__img4, .scroll-section__img6 { + position: absolute; + bottom: 0; + width: 10vw; + height: 10vh; + z-index: 1000; +} +.scroll-section__img1 { + left: 10vw; +} +.scroll-section__img2 { + left: 45vw; +} +.scroll-section__img3, .scroll-section__img4 { + padding-bottom: 8vh; +} +.scroll-section__img3 { + left: 5vw; +} +.scroll-section__img4 { + left: 60vw; +} +.scroll-section__img5 { + position: absolute; + bottom: 0; + left: 0; + width: 100vw; + z-index: 999; +} +.scroll-section__img6 { + left: 60vw; + transform: rotate(180deg); +} +.scroll-section__img7 { + position: absolute; + bottom: 0; + left: 80vw; + width: 20vw; + height: auto; + z-index: 999; +} + +.fade-in { + opacity: 1; + transition: opacity 5s; +} + +@keyframes moveParticles { + 0% { + transform: translateY(0); + opacity: 1; + } + 100% { + transform: translateY(-100vh); + opacity: 0; + } +} +.particle { + position: absolute; + bottom: 0; + background: green; + width: 25px; + height: 25px; + animation: moveParticles 2s linear infinite; + margin-bottom: 40vh; + border-radius: 50%; +} + +.particle:nth-child(2n) { + animation-duration: 7s; +} + +.particle:nth-child(3n) { + animation-duration: 7s; +} + +.particle:nth-child(4n) { + animation-duration: 6s; +} + +.particle:nth-child(5n) { + animation-duration: 7s; +} + +.particle:nth-child(6n) { + animation-duration: 6s; +} + +.particle:nth-child(7n) { + animation-duration: 4s; +} + +.scroll-section--scene4 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + background-image: linear-gradient(to top, rgb(32, 21, 21), rgb(19, 8, 8)); + z-index: 1000; +} +.scroll-section__bottom1, .scroll-section__bottom2, .scroll-section__bottom3, .scroll-section__bottom4 { + color: white; + position: absolute; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + text-align: center; + font-size: 3vh; + animation: fadeInOut 40s infinite; + width: 50vw; + display: block; + animation-timing-function: ease-in-out; + opacity: 0; + visibility: hidden; +} +.scroll-section__bottom1 { + animation-delay: 0s; +} +.scroll-section__bottom2 { + animation-delay: 10s; +} +.scroll-section__bottom3 { + animation-delay: 20s; +} +.scroll-section__bottom4 { + animation-delay: 30s; +} +@keyframes fadeInOut { + 0%, 16.66% { + opacity: 0; + visibility: hidden; + } + 16.67%, 20% { + opacity: 0; + visibility: visible; + transform: scale(1); + } + 25%, 33.33% { + opacity: 1; + visibility: visible; + transform: scale(1.1); + } + 33.34%, 37.5% { + opacity: 1; + visibility: visible; + } + 41.67%, 50% { + opacity: 0; + visibility: visible; + } + 50.01%, 100% { + visibility: hidden; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/sass/style.css.map b/src/sass/style.css.map index e527ddd..3c0e8dc 100644 --- a/src/sass/style.css.map +++ b/src/sass/style.css.map @@ -1 +1,5 @@ -{"version":3,"sources":["_root.scss","style.css","_scene1.scss","_scene2.scss","_scene3.scss","_scene4.scss"],"names":[],"mappings":"AAAA;EACI,8BAAA;EACA,SAAA;EACA,UAAA;ACCJ;;ADEA;EACI,iBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,UAAA;EACA,2BAAA;EACA,2BAAA;ACCJ;;ADEA;EACI,UAAA;EACA,wBAAA;ACCJ;;ADEA;EACI,UAAA;EACA,2BAAA;EACA,2BAAA;ACCJ;;ADEA;EACI,UAAA;EACA,wBAAA;EACA,mDAAA;ACCJ;;ADEA;EACI;IACI,iCAAA;ECCN;EDCE;IACI,uCAAA;ECCN;AACF;AC7CA;;CAAA;ACAA;;CAAA;ACAA;;CAAA;ACAA;;CAAA","file":"style.css"} \ No newline at end of file +<<<<<<<<< Temporary merge branch 1 +{"version":3,"sources":["style.css","_root.scss","_scene1.scss","_scene2.scss","_scene3.scss","_scene4.scss"],"names":[],"mappings":"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","file":"style.css"} +========= +{"version":3,"sources":["_root.scss","style.css","_scene1.scss","_scene2.scss","_scene3.scss","_scene4.scss"],"names":[],"mappings":"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","file":"style.css"} +>>>>>>>>> Temporary merge branch 2 diff --git a/style.css b/style.css deleted file mode 100644 index f361cb0..0000000 --- a/style.css +++ /dev/null @@ -1,12 +0,0 @@ - -:root { - --sky-color: #dcf6fc; - --cloud-color: #8ae0f3; - --ground-color: #e2ede2; - --green-house: #7cbb7c; - --shadow-house: #8b1818; - --pink-house: #f8aa9f; - --dark: #1d1d1b; - --dark-roof: #0a490a; - --dark-vegetation: #0a490a; -}