Modernize sass file structure and syntax

Author: PlatHum

_includes/contact.html

@@ -26,4 +26,4 @@
             <button class="form-body-submit" type="submit">SEND</button>
         </form>
     </div>
-</div>
+</div>

css/main.css

@@ -36,12 +36,12 @@
     font-size: var(--step-1);
     align-self: center;
     grid-template-areas: "mail mail mail" "linkedin linkedin linkedin" "github github github";
-    @include for-tablet-landscape-down{
-        grid-template-areas: "github github github" "linkedin linkedin linkedin" "mail mail mail";
-    }
     grid-auto-rows: auto;
     justify-items: center;
     align-items: center;
+    @include for-tablet-landscape-down{
+        grid-template-areas: "github github github" "linkedin linkedin linkedin" "mail mail mail";
+    }
 }
 
 .contact-div .contact-socials .email-contact{
@@ -121,9 +121,6 @@
 
 .form-body-submit{
     width: 15%;
-    @include for-phone-only{
-        width:20%;
-    }
     grid-area: submit;
     margin-top: calc(10px / var(--size-divisor));
     font-size: var(--step-1-5);
@@ -133,6 +130,9 @@
     box-shadow: 10px 10px 8px 10px #070707;
     transform: translateX(0) translateY(0);
     color: black;
+    @include for-phone-only{
+        width:20%;
+    }
 
 }
 .form-body button{
@@ -164,4 +164,4 @@
     background-repeat: no-repeat;
     background-origin: border-box;
     padding: 1.5rem;
-  }
+  }

sass/_contact.scss

@@ -75,19 +75,16 @@
   font-weight: 500;
   line-height: 1.3;
   text-align: center;
-
-  @supports (text-justify:inter-word) {
-    text-justify: inter-word
-  }
-
   letter-spacing: -0.02em;
   padding-inline: 15%;
   @include for-tablet-landscape-down{
     text-justify: auto;
     padding-left: 7%;
     padding-right: 5%;
   }
-
+  @supports (text-justify:inter-word) {
+    text-justify: inter-word
+  }
 }
 
 
@@ -120,4 +117,4 @@
   align-self: last baseline;
 }
 
-/*END HOME SECTION STYLES*/
+/*END HOME SECTION STYLES*/

sass/_home.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin for-phone-only {
     @media (max-width: 599px) { @content; }
   }
@@ -44,9 +46,8 @@
       cursor: pointer;
       outline: inherit;
     }
-  
   @mixin blurry-background {
-    background: hsl(0, 0%, 0% / 0.5);
+    background: hsl(0, 0%, math.div(0%, 0.5));
 
     @supports (backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem)) {
       background: hsla(0, 0%, 100%, 0.1);
@@ -90,4 +91,4 @@
     @include for-phone-only() {
       padding: $smallpadding;
     }
-  }
+  }

sass/_mixins.scss

@@ -113,16 +113,16 @@
 
 
   .swiper-slide {
+      width: 40%;
+      height: 85%;
+      text-align: center;
+      font-size: 18px;
+      justify-content: center;
+      align-items: center;
     @include for-tablet-landscape-down{
         width: 80%;
         height: 65%;
     }
-    width: 40%;
-    height: 85%;
-    text-align: center;
-    font-size: 18px;
-    justify-content: center;
-    align-items: center;
   }
 
   .project-card{
@@ -293,4 +293,4 @@
 .youtube-icon:hover{
 
     opacity: 1;
-}
+}

sass/_projects.scss

@@ -20,16 +20,16 @@
 .skill-cloud{
   width: 100%;
   height: 500px;
-  @include for-tablet-landscape-down{
-    height: 400px;
-  }
   grid-area: cloud;
   margin: 0;
   padding: 0;
   display: flex;
   justify-items: center;
   align-items: center;
   position: relative;
+  @include for-tablet-landscape-down{
+    height: 400px;
+  }
 }
 
 .skill-canvas {
@@ -154,4 +154,4 @@
   margin: 1.5vw;
 }
 
-/*END SKILLS SECTION STYLES*/
+/*END SKILLS SECTION STYLES*/