About section adaptive complete

Dual-Ice · May 7, 2020 · 48cb30c · 48cb30c
1 parent 986c0b9
commit 48cb30c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/src/components/about.pug b/src/components/about.pug
@@ -9,9 +9,9 @@ section.about(id="about")
           .user__info
             - 
               var info = [
-                ["Проживаю", "Петропавловск-Камчатский"],
-                ["Возраст", "27 лет"],
-                ["Родился", "8 ноября 1992"]
+                ["Проживаю:", "Петропавловск-Камчатский"],
+                ["Возраст:", "27 лет"],
+                ["Родился:", "8 ноября 1992"]
               ];
             table.user__data
               tbody.user__data-body  

diff --git a/src/styles/blocks/about.pcss b/src/styles/blocks/about.pcss
@@ -8,23 +8,58 @@
   justify-content: center;
   padding-top: 100px;
   padding-bottom: 200px;
+
+  @include phonesLg {
+    padding-bottom: 100px;
+  }
 }
 
 .about__content {
   display: flex;
   justify-content: space-between;
   max-width: 1008px;
+
+  @include tablets {
+    max-width: 690px;
+    font-size: 14px;
+  }
+
+  @include phonesLg {
+    max-width: initial;
+    flex-direction: column;
+    justify-content: initial;
+    align-items: center;
+  }
 }
 
 .about__user {
   width: 40%;
+
+  @include phonesLg {
+    width: 100%;
+    margin-bottom: 50px;
+  }
 }
 
 .about__text {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 54%;
+
+  @include phonesLg {
+    width: 80%;
+  }
+
+  @include phones {
+    width: initial;
+  }
+}
+
+.about__text-main {
+  @include phonesLg {
+    margin-bottom: 50px;;
+  }
 }
 
 .about__intro,
@@ -35,12 +70,27 @@
 
 .about__intro {
   margin-bottom: 30px;
+
+  @include phones {
+    margin-bottom: 20px;;
+  }
 }
 
 .about__title {
   font-weight: 700;
   font-size: 36px;
   margin-bottom: 38px;
+
+  @include tablets {
+    font-size: 30px;
+    margin-bottom: 50px;
+  }
+}
+
+.about__desc {
+  @include phones {
+    line-height: 30px;
+  }
 }
 
 .about__ps {
@@ -58,6 +108,11 @@
     left: -50px;
     line-height: 1;
   }
+
+  @include phones {
+    margin-bottom: 0;
+    line-height: 30px;
+  }
 }
 
 
diff --git a/src/styles/blocks/user.pcss b/src/styles/blocks/user.pcss
@@ -1,6 +1,11 @@
 .user {
-  &--horizontal {
+  @include phonesLg {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
+  &--horizontal {
     display: flex;
     align-items: center;
 
@@ -30,6 +35,10 @@
   justify-content: center;
   margin-bottom: 80px;
 
+  @include phonesLg {
+    margin-bottom: 50px;
+  }
+
   @include phones {
     margin-bottom: 30px;
   }