Merge pull request #5 from ananastasiap/05_responsive

05_Responsiveness

index.html

@@ -21,7 +21,7 @@
     <h1 class="title stroke">Поздравьте близкого человека с праздником!</h1>
     <p class="about__text">Выберите открытку и получатель получит ее на свой телефон</p>
   </section>
-  <section class="congratulation u-wrapper-larger">
+  <section class="congratulation u-wrapper">
     <section class="cards">
       <div class="swiper congratulation__swiper congratulation__swiper--card">
         <div class="swiper-wrapper">

nested/index.html

@@ -18,7 +18,7 @@
     </div>
   </header>
   <main>
-    <section class="congrats-final">
+    <section class="congrats-final u-wrapper">
       <h1 class="title">Вам открытка!</h1>
       <p class="congrats-final__text">Нажмите на нее, чтобы узнать от кого она и прочитать поздравление</p>
       <div class="card">

src/scss/base/_typography.scss

@@ -40,3 +40,32 @@ body {
 .about__text {
   font-size: 1.7rem;
 }
+
+/* MEDIA */
+@media screen and (max-width: 1039px) {
+  .title {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  .about__text {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 551px) {
+  .title {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1;
+
+    &__card {
+      font-size: 1.7rem;
+    }
+  }
+
+  .about__text {
+    font-size: 1.2rem;
+  }
+}

src/scss/base/_utilities.scss

@@ -1,11 +1,20 @@
 .u-wrapper {
-  padding: 2.5rem 8.12rem 0 15rem;
-}
-
-.u-wrapper-larger {
-  padding: 2.5rem 35rem 0 15rem;
+  padding: 3.5rem 8.12rem 0 14rem;
 }
 
 .stroke {
   -webkit-text-stroke: 0.04rem #94b7fc;
 }
+
+/* MEDIA */
+@media screen and (max-width: 1194px) and (min-width: 1040px) {
+  .u-wrapper {
+    padding: 2.5rem 3.12rem 0 5rem;
+  }
+}
+
+@media screen and (max-width: 1039px) {
+  .u-wrapper {
+    padding: 2rem 3rem 0 3rem;
+  }
+}

src/scss/layout/_about.scss

@@ -5,3 +5,10 @@
     margin-bottom: 2.96rem;
   }
 }
+
+/* MEDIA */
+@media screen and (max-width: 551px) {
+  .title {
+    margin-top: none;
+  }
+}

src/scss/layout/_congrats-final.scss

@@ -70,3 +70,56 @@
     margin-bottom: 2.96rem;
   }
 }
+
+/* MEDIA */
+@media screen and (max-width: 625px) {
+  .congrats-final {
+    margin-bottom: 5rem;
+  }
+
+  .congrats-final__text {
+    text-align: center;
+  }
+
+  .congrats-final .card {
+    width: 380px;
+    height: auto;
+  }
+
+  .congrats-final .card__message {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 580px) {
+  .congrats-final .card__contacts {
+    margin-bottom: 0;
+    margin-top: 2rem;
+  }
+
+  .congrats-final .card__message {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (max-width: 545px) {
+  .congrats-final .card {
+    width: 360px;
+    height: auto;
+  }
+
+  .congrats-final__text {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (max-width: 387px) {
+  .congrats-final .card {
+    width: 300px;
+    height: auto;
+  }
+
+  .congrats-final .card__back {
+    padding: 3rem 3rem 5rem 3rem;
+  }
+}

src/scss/layout/_congratulation.scss

@@ -1,8 +1,7 @@
 .congratulation {
   display: flex;
-  justify-content: space-between;
   align-items: start;
-  gap: 6rem;
+  gap: 15rem;
 
   .cards {
     max-width: 50rem;
@@ -105,3 +104,56 @@
     }
   }
 }
+
+/* MEDIA */
+@media screen and (max-width: 1194px) and (min-width: 1040px) {
+  .congratulation {
+    gap: 7rem;
+  }
+}
+
+@media screen and (max-width: 1039px) {
+  .congratulation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 5rem;
+  }
+
+  .form {
+    margin-bottom: 3rem;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .cards {
+    width: 46rem;
+  }
+
+  .congratulation .gift__form .form__label-text {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (max-width: 479px) and (min-width: 320px) {
+  .cards {
+    width: 35rem;
+  }
+}
+
+@media screen and (max-width: 368px) {
+  .cards {
+    width: 30rem;
+  }
+}
+
+@media screen and (max-width: 334px) {
+  .congratulation {
+    gap: 2.5rem;
+  }
+
+  .congratulation .gift__form .form {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

src/scss/layout/_header.scss

@@ -0,0 +1,7 @@
+/* MEDIA */
+@media screen and (max-width: 550px) {
+  .logo__icon {
+    width: 14rem;
+    height: auto;
+  }
+}

src/scss/style.scss

@@ -6,6 +6,7 @@
 @import "./base/utilities";
 @import "./base/typography";
 
+@import "./layout/header";
 @import "./layout/about";
 @import "./layout/congratulation";
 @import "./layout/_congrats-final";

src/ts/main.ts

@@ -1,8 +1,10 @@
 import "../scss/style.scss";
 import "swiper/css";
-import { swiperMain } from "./modules";
+import { swiperMain, rearrangeElement } from "./modules";
 
 window.addEventListener("DOMContentLoaded", () => {
-  // swiperThumb(".congratulation__swiper--thumb");
   swiperMain(".congratulation__swiper--card");
+  window.addEventListener("resize", () => {
+    rearrangeElement(".card", ".card__title", ".card__contacts");
+  });
 });

src/ts/modules/index.ts

@@ -1 +1,2 @@
 export { swiperThumb, swiperMain } from "./swiper.ts";
+export { rearrangeElement } from "./sciptForCard.ts";

src/ts/modules/sciptForCard.ts

@@ -0,0 +1,17 @@
+export const rearrangeElement = (
+  cardSelector: string,
+  cardTitleSelector: string,
+  cardContactsSelector: string
+) => {
+  const screenWidth = window.innerWidth;
+
+  const card = document.querySelector(cardSelector);
+  const cardTitle = document.querySelector(cardTitleSelector);
+  const cardContacts = document.querySelector(cardContactsSelector);
+
+  if (screenWidth <= 580 && card && cardContacts) {
+    card?.after(cardContacts);
+  } else if (cardTitle && cardContacts) {
+    cardTitle?.after(cardContacts);
+  }
+};