Merge branch 'main' into gallery

src/partials/home.html

@@ -126,7 +126,7 @@
 
     <a
       class="home-button"
-      href="https://play.google.com/store/apps/details?id=com.zynga.wonkamatch&hl=en&pli=1"
+      href="https://play.google.com/store/apps/details?id=com.zynga.wonkamatch"
       target="_blank"
       rel="noopener noreferrer"
       title="mobile game wonka"

src/partials/how-to-play.html

@@ -194,6 +194,7 @@ <h2 class="htp-title section-title" text="How to play">How to play</h2>
           </p>
         </li>
       </ul>
+
       <ul class="htp-list">
         <li class="htp-item">
           <div class="htp-wrapper">

src/scss/header.scss

@@ -51,18 +51,20 @@ header .container {
 }
 
 .nav-logo {
-  transition: transform $animation-fast;
-  &:hover,
-  &:focus {
-    transform: scale(1.02);
-  }
-
   @include media(desktop) {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
   }
+  &:hover &-thumb,
+  &:focus &-thumb {
+    transform: scale(1.02);
+  }
+  &:hover &-text,
+  &:focus &-text {
+    letter-spacing: 0.8px;
+  }
 }
 
 .nav-logo-thumb {
@@ -91,7 +93,7 @@ header .container {
 
   line-height: normal;
   letter-spacing: 0.64px;
-  max-width: 125px;
+  max-width: 130px;
 
   text-shadow: 1px 1px 0 $_brown_color, -1px 1px 0 $_brown_color,
     -1px -1px 0 $_brown_color, 1px -1px 0 $_brown_color;
@@ -114,7 +116,7 @@ header .container {
   .nav-list-link {
     padding: 24px 0px;
     @include font(24, 30);
-    letter-spacing: 0.01px;
+    letter-spacing: 0.1px;
     display: inline-block;
     font-weight: 600;
     transition: color $animation-fast, transform $animation-fast;
@@ -185,7 +187,7 @@ header .container {
 
 .menu-list-link {
   @include font(24, 30);
-  letter-spacing: 0.01px;
+  letter-spacing: 0.1px;
   font-weight: 600;
   transition: color $animation-fast;
   &:hover,

src/scss/home.scss

@@ -13,7 +13,7 @@
     margin-bottom: 72px;
   }
 }
-.home-section-container {
+.home-section-container.container {
   @include media(desktop) {
     position: relative;
   }
@@ -32,6 +32,7 @@
 }
 .home-content {
   position: relative;
+
   height: 100%;
   width: 100%;
   min-height: 92px;
@@ -41,32 +42,33 @@
     position: absolute;
     top: 0;
     right: 126px;
+    width: 569px;
+    height: 440px;
   }
 }
 
 .home-picture {
   position: absolute;
+
+  min-height: 80px;
   min-width: 176px;
 
-  &:nth-child(odd) {
+  &:first-child {
     top: 0;
     right: 0;
   }
 
-  &:nth-child(even) {
+  &:last-child {
     left: 0;
     bottom: 0;
-    @include media(desktop) {
-      left: 870px;
-      top: 203px;
-    }
   }
   @include media(desktop) {
     width: 500px;
   }
 }
 
 .home-button {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -75,6 +77,7 @@
   min-width: 170px;
   max-width: -moz-fit-content;
   max-width: fit-content;
+  z-index: 2;
 
   @include font(12, 15);
   font-family: $third_font_family;
@@ -85,17 +88,31 @@
     @include font(16, 19);
     margin-left: 0;
     margin-bottom: 166px;
+
+    &:hover,
+    &:focus {
+      &:after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: block;
+        content: '';
+        width: 100%;
+        height: 100%;
+        background-color: $_button_bg_color;
+        filter: blur(20px);
+        z-index: -1;
+      }
+    }
   }
 
   border: 1px solid $_button_border_color;
   border-radius: 8px;
   color: $_button_text_color;
   background-color: $_button_bg_color;
 
-  transition: transform $animation_fast;
-  &:hover,
-  &:focus {
-    transform: scale(1.02);
+  &:active {
+    background-color: $_button_border_color;
   }
 }
 .home-button-text {

src/scss/how-to-play.scss

@@ -13,28 +13,35 @@
 
 .htp-thumb {
   position: relative;
+  overflow: hidden;
+  width: 100%;
 }
 
 .htp-list {
+  position: relative;
+
   $_gap_column: 16px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  gap: 26px 16px;
 
   @include media(to-desktop) {
     transition: transform $animation-reveal, opacity $animation-reveal,
       visibility $animation-reveal;
+
     &:first-child {
       transform: translateX(0);
     }
 
     &:last-child {
       position: absolute;
       top: 0;
-      left: 0;
+      right: 0;
       transform: translateX(100%);
       opacity: 0;
       visibility: hidden;
+      z-index: 10;
     }
   }