Merge pull request #47 from LesiaUKR/about-fix

About fix

src/partials/gallery.html

@@ -276,28 +276,45 @@ <h2 class="section-title" data-text="Gallery">Gallery</h2>
       rel="noopener noreferrer"
       title="mobile game wonka"
     >
-      <picture>
+      <picture class="home-button-icon">
         <source
           srcset="
-            ./img/hero/[email protected] 1x,
-            ./img/hero/[email protected] 2x
+            ./img/hero/desktop/[email protected] 1x,
+            ./img/hero/desktop/[email protected] 2x
+          "
+          media="(min-width: 1440px)"
+          type="image/webp"
+        />
+        <source
+          srcset="
+            ./img/hero/desktop/[email protected] 1x,
+            ./img/hero/desktop/[email protected] 2x
+          "
+          media="(min-width: 1440px)"
+        />
+        <source
+          srcset="
+            ./img/hero/mobile/[email protected] 1x,
+            ./img/hero/mobile/[email protected] 2x
           "
           media="(min-width: 320px)"
           type="image/webp"
         />
         <source
           srcset="
-            ./img/hero/[email protected] 1x,
-            ./img/hero/[email protected] 2x
+            ./img/hero/mobile/hero-google-pic-mobile@1x.png 1x,
+            ./img/hero/mobile/hero-google-pic-mobile@2x.png 2x
           "
           media="(min-width: 320px)"
         />
 
         <img
           class="home-google-icon"
-          src="./img/hero/[email protected]"
+          src="./img/hero/mobile/hero-google-pic-mobile@1x.png"
           alt="google play icon"
           loading="lazy"
+          width="36"
+          height="36"
         />
       </picture>
 

src/partials/header.html

@@ -110,7 +110,7 @@
       </button>
     </div>
     <!-- MOBILE NAVIGATION -->
-    <ul class="menu-list">
+    <ul class="menu-list" id="mobile-menu">
       <li class="menu-list-item">
         <a class="menu-list-link js-link js-close-menu" href="./index.html#home"
           >Home</a

src/partials/home.html

@@ -2,6 +2,7 @@
 <section class="home-section section" id="home">
   <div class="container home-section-container">
     <!-- HOME TITLE -->
+    <h2 class="section-title visually-hidden" data-text="Hero">Hero</h2>
     <div class="home-title-wrapper">
       <picture>
         <source
@@ -131,28 +132,45 @@
       rel="noopener noreferrer"
       title="mobile game wonka"
     >
-      <picture>
+      <picture class="home-button-icon">
+        <source
+          srcset="
+            ./img/hero/desktop/[email protected] 1x,
+            ./img/hero/desktop/[email protected] 2x
+          "
+          media="(min-width: 1440px)"
+          type="image/webp"
+        />
+        <source
+          srcset="
+            ./img/hero/desktop/[email protected] 1x,
+            ./img/hero/desktop/[email protected] 2x
+          "
+          media="(min-width: 1440px)"
+        />
         <source
           srcset="
-            ./img/hero/[email protected] 1x,
-            ./img/hero/[email protected] 2x
+            ./img/hero/mobile/hero-google-pic-mobile@1x.webp 1x,
+            ./img/hero/mobile/hero-google-pic-mobile@2x.webp 2x
           "
           media="(min-width: 320px)"
           type="image/webp"
         />
         <source
           srcset="
-            ./img/hero/[email protected] 1x,
-            ./img/hero/[email protected] 2x
+            ./img/hero/mobile/hero-google-pic-mobile@1x.png 1x,
+            ./img/hero/mobile/hero-google-pic-mobile@2x.png 2x
           "
           media="(min-width: 320px)"
         />
 
         <img
           class="home-google-icon"
-          src="./img/hero/[email protected]"
+          src="./img/hero/mobile/hero-google-pic-mobile@1x.png"
           alt="google play icon"
           loading="lazy"
+          width="36"
+          height="36"
         />
       </picture>
       <span>Get it on<span class="home-button-text">Google Play</span></span></a

src/scss/about.scss

@@ -58,12 +58,14 @@
 }
 
 .about-img-wrapper {
+  min-height: 136px;
   border-radius: 8px;
   border: 2px solid $_yellow_color;
   overflow: hidden;
   @include media(desktop) {
     flex-shrink: 0;
-    max-width: 744px;
+    height: 313px;
+    width: 744px;
     border-radius: 24px;
   }
 }

src/scss/header.scss

@@ -86,6 +86,10 @@ header .container {
     border-radius: 24px;
   }
 }
+// .nav-logo-icon {
+//   width: 100%;
+//   height: 100%;
+// }
 
 .nav-logo-text {
   display: none;

src/scss/home.scss

@@ -1,8 +1,7 @@
 .home-section.section {
   position: relative;
-  padding-top: 100px;
+  padding: 100px 0 30px;
   text-align: center;
-
   &::after {
     @include blik();
     top: 200px;
@@ -24,13 +23,13 @@
 }
 
 .home-title-wrapper {
-  min-height: 104px;
-  max-width: 282px;
-  margin: 0 auto 55px;
+  min-height: 106px;
+  min-width: 282px;
+  margin: 0 auto 54px;
   @include media(desktop) {
     margin: 0 0 72px;
     padding-top: 52px;
-    max-height: 288px;
+    min-height: 288px;
     max-width: 660px;
     overflow: hidden;
   }
@@ -80,7 +79,7 @@
   align-items: center;
   gap: 8px;
   margin: 0 auto;
-  padding: 10px 16px 10px 24px;
+  padding: 10px 16px 10px 22px;
   min-width: 170px;
   max-width: -moz-fit-content;
   max-width: fit-content;
@@ -103,7 +102,7 @@
   @include media(desktop) {
     @include font(16, 19);
     margin-left: 0;
-    gap: 11px;
+    gap: 10px;
 
     &::after {
       position: absolute;
@@ -140,15 +139,6 @@
   }
 }
 
-.home-google-icon {
-  width: 36px;
-  height: 36px;
-  @include media(desktop) {
-    width: 29px;
-    height: 27px;
-  }
-}
-
 .home-button-text {
   display: block;
   @include font(16, 24);