Merge pull request #9 from AdvancedCSS2023/Petter-test

Petter test

Author: PetterFuruli

styling/colors.css

@@ -0,0 +1,2 @@
+
+$sky-color-blue: #a8c0ff;

styling/colors.css.map

@@ -39,4 +39,20 @@
     -webkit-animation: none !important;
             animation: none !important;
   }
+}
+@media screen and (max-width: 768px) {
+  .school {
+    position: absolute;
+    transform: translate(50%, 5em);
+    width: 30px;
+    height: auto;
+  }
+  .kofi__school2 {
+    width: 66px; /* 50% of the original width */
+    height: 214px; /* 50% of the original height */
+    transform: translate(2em, 10em); /* adjust the position as needed */
+  }
+  .scene3 {
+    height: 50vh;
+  }
 }/*# sourceMappingURL=mediaqueries.css.map */

styling/colors.scss

@@ -29,4 +29,23 @@
     .drop3{
       animation: none !important;
     }
-  }
+  }
+
+  @media screen and (max-width: 768px) {
+    .school {
+      position: absolute;
+      transform: translate(50%, 5em);
+      width: 30px;
+      height: auto;
+      
+    }
+    .kofi__school2 {
+        width: 66px; /* 50% of the original width */
+        height: 214px; /* 50% of the original height */
+        transform: translate(2em, 10em); /* adjust the position as needed */
+    }
+    .scene3 {
+      height: 50vh;
+    }
+  }
+  

styling/mediaqueries.css

@@ -1,5 +1,6 @@
 @import "animations";
 @import "mediaqueries";
+@import "colors";
 
 
 
@@ -435,6 +436,16 @@ p {
   position: absolute;
 }
 
+
+.scene3__text1{
+  position: absolute;
+  transform: translate(70vw, 5vw);
+}
+.scene3__text2{
+  position: absolute;
+  transform: translate(35vw, 1vw);
+}
+
 .scene5__text > a {
   display: inline-block;
   padding: 10px 20px;
@@ -603,7 +614,7 @@ button:hover {
 .scene3 {
   height: 100vh;
   width: 100%;
-  background: skyblue;
+  background: var(s);
   position: relative;
 }