Improve layout of About section

id-andyyy · Aug 3, 2024 · 271927c · 271927c
1 parent 1578382
commit 271927c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 16 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
diff --git a/docs/index.html b/docs/index.html
diff --git a/src/html/blocks/about.html b/src/html/blocks/about.html
@@ -1,6 +1,6 @@
 <section class="about" id="about">
   <div class="container">
-    <div class="about__grid">
+    <div class="about__content">
       <div class="about__title">
         <h2 class="about__subheading">Психолог</h2>
         <h1 class="about__heading">Татьяна<br>Обрезкова</h1>
@@ -12,7 +12,7 @@ <h1 class="about__heading">Татьяна<br>Обрезкова</h1>
         Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede
         justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
       </div>
-      <div class="about__photo no-select">
+      <div class="about__photo">
         <img src="./img/photos/main-photo.jpg" alt="Фото">
       </div>
       <div class="about__sign-up sign-up">

diff --git a/src/scss/blocks/_about.scss b/src/scss/blocks/_about.scss
@@ -1,46 +1,52 @@
 .about {
-  &__grid {
-    margin: auto;
+  margin: 40px 0 0 0;
+
+  &__content {
     display: grid;
     grid-template-areas:
       "title photo"
       "description photo"
       "sign-up photo";
-    column-gap: 20px;
-    height: calc(100vh - 100px);
-    max-height: 832px;
+    column-gap: adaptive-value(30, 10);
+
+    @include tablet {
+      grid-template-areas:
+        "title"
+        "photo"
+        "description"
+        "sign-up";
+    }
   }
 
   &__title {
     grid-area: title;
     font-weight: 600;
+    margin: 0 0 adaptive-value(25, 15) 0;
   }
 
   &__subheading {
     font-size: adaptive-value(30, 22);
     color: $accent-color;
+    margin: 0 0 5px 0;
   }
 
   &__heading {
     font-size: adaptive-value(60, 40);
-    color: $main-color;
     text-transform: uppercase;
   }
 
   &__description {
+    grid-area: description;
     font-size: adaptive-value(16, 14);
     font-weight: 500;
-    grid-area: description;
-    max-width: 540px;
+    margin: 0 0 adaptive-value(40, 30) 0;
   }
 
   &__photo {
     grid-area: photo;
-    height: 100%;
-    overflow: hidden;
-    user-select: none;
+    margin: 0 0 15px 0;
 
-    & img {
+    img {
       width: 100%;
       height: 100%;
       object-fit: cover;

diff --git a/src/scss/blocks/_header.scss b/src/scss/blocks/_header.scss
@@ -15,6 +15,7 @@
     display: inline-block;
     width: adaptive-value(51, 42);
     margin: 0 26px 0 0;
+    user-select: none;
 
     & img {
       width: 100%;

diff --git a/src/scss/blocks/_prices.scss b/src/scss/blocks/_prices.scss
@@ -48,6 +48,7 @@
     width: 100%;
     max-width: 374px;
     height: 281px;
+    user-select: none;
 
     @include tablet {
       max-width: 80%;