Merge pull request #6 from Electr0nic1/main

Adaptation to mobile

index.html

@@ -17,6 +17,11 @@ <h1 class="header__title">Code Crew</h1>
           <a class="menu-list__item" href="#projects">Наши проекты</a>
           <a class="menu-list__item" href="#contact">Контакты</a>
         </nav>
+        <button class="header__menu-btn" title="навигация">
+          <span class="header__menu-btn--long"></span>
+          <span class="header__menu-btn--short"></span>
+          <span class="header__menu-btn--long"></span>
+        </button>
         <div class="theme-toggle">
           <input
             class="input-theme"
@@ -184,7 +189,7 @@ <h4 class="contact-group__title">Персональные</h4>
               <li class="list__item contact-group__item">
                 Шмырёв Илья Алексеевич —
                 <a class="contact-group__link" href="mailto:[email protected]">
-                  [email protected]
+                  [email protected]<br class="break">
                 </a>
                 |
                 <a class="contact-group__link" href="tel:+79923353581">
@@ -205,7 +210,7 @@ <h4 class="contact-group__title">Персональные</h4>
                   class="contact-group__link"
                   href="mailto:[email protected]"
                 >
-                  [email protected]
+                  [email protected]<br class="break">
                 </a>
                 |
                 <a class="contact-group__link" href="tel:+79022547311">
@@ -271,6 +276,14 @@ <h4 class="contact-group__title">Общие</h4>
           document.body.classList.remove("dark-theme");
         }
       });
+
+
+      const menuBtn = document.querySelector('.header__menu-btn');
+      const menuMobile = document.querySelector('.menu-list');
+
+      menuBtn.addEventListener('click', () => {
+        menuMobile.classList.toggle('menu--open');
+      });
     </script>
   </body>
 </html>

static/mobile.css

@@ -1,21 +1,137 @@
 @media (max-width: 1023px) {
-  #theme-toggle__button {
+  .header {
+    grid-template-columns: 100%;
+    position: static;
+  }
+
+  .header__title {
+    font-size: 4em;
+  }
+
+  /* .header__title {
     display: none;
+  } */
+
+  .menu-list__item {
+    font-size: 2.2rem;
+  }
+
+  .theme-toggle {
+    margin-top: -235px;
+  }
+
+  .container {
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 650px) {
+  .header__title {
+    font-size: 3em;
+  }
+
+  .menu-list {
+    gap: 30px;
+  }
+  .menu-list__item {
+    font-size: 1.5rem;
+  }
+
+  .theme-toggle {
+    margin-top: -160px;
+  }
+
+  .break {
+    display: block;
+  }
+}
+
+@media (max-width: 570px)
+{
+  .title {
+    font-size: 2em;
+  }
+
+  .text {
+    font-size: 15px;
+  }
+
+  .subtitle {
+    font-size: 1.7em;
   }
 
+  .header__title {
+    font-size: 2.5em;
+  }
+
+  .theme-toggle {
+    margin-right: 0;
+    margin-top: -140px;
+  }
+}
+
+@media (max-width: 450px) {
   .header {
-    grid-template-columns: 100%;
+    display: flex;
+    justify-content: space-around;
   }
 
   .header__title {
+    font-size: 2em;
+  }
+
+  .theme-toggle {
+    margin-top: 0;
+    justify-content: center;
+  }
+
+  .menu-list {
     display: none;
   }
 
-  .menu-list__item {
-    font-size: 1.3rem;
+  .contact-group {
+    margin-bottom: 10px;
   }
 
-  .container {
-    margin-top: 100px;
+  .theme-toggle {
+    margin-right: 10px;
   }
 }
+
+@media (max-width: 400px) {
+  .label-theme:active:after {
+    width: 28px;
+  } 
+
+  .label-theme {
+    width: 50px;
+    height: 25px;
+    border-radius: 25px;
+  }
+
+  .label-theme:after {
+    width: 23px;
+    height: 23px;
+    top: 1.15px;
+    left: 1.15px;
+    border-radius: 23px;
+    box-shadow: 0px 0.8px 1.5px rgba(0, 0, 0, 0.2);
+  }
+
+  .input-theme:checked + .label-theme:after {
+    left: 48px;
+  }
+
+  .label-theme__svg {
+    width: 15px;
+    top: 4.6px;
+  }
+
+  .label-theme__sun {
+    left: 4.6px;
+  }
+
+  .label-theme__moon {
+    left: 32px;
+  }
+}

static/style.css

@@ -63,6 +63,34 @@ body {
   text-align: center;
 }
 
+.header__menu-btn {
+  display: none;
+  width: 53px;
+  height: 44px;
+  padding: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 6px;
+  background-color: #ff9b3f;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.header__menu-btn span {
+  height: 2px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.header__menu-btn--long {
+  width: 33px;
+}
+
+.header__menu-btn--short {
+  width: 21px;
+}
+
 .container {
   max-width: 900px;
   margin-top: 70px;
@@ -347,6 +375,10 @@ section {
   transform: scale(1.01);
 }
 
+.break {
+  display: none;
+}
+
 .project-details {
   background-color: var(--secondary-bg-color);
   border-radius: 8px;