Merge pull request #16 from Maestr1/dmitry/heroAdaptive

Dmitry/hero adaptive
Maestr1 · Nov 7, 2022 · 463d107 · 463d107
2 parents 57f3d36 + 2cb8968
commit 463d107
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 17 deletions.
diff --git a/blocks/hero/__desc/hero__desc.css b/blocks/hero/__desc/hero__desc.css
@@ -1,3 +1,11 @@
 .hero__desc {
-  width: 50%;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+@media (max-width: 728px) {
+  .hero__desc {
+    flex-direction: column;
+  }
 }
diff --git a/blocks/hero/__link/hero__link-wrap.css b/blocks/hero/__link/hero__link-wrap.css
@@ -2,4 +2,10 @@
   padding-left: 30px;
   padding-top: 32px;
   height: 32px;
+}
+
+@media (max-width: 728px) {
+  .hero__link-wrap {
+    display: none;
+  }
 }
diff --git a/blocks/hero/__pic/hero__pic.css b/blocks/hero/__pic/hero__pic.css
@@ -1,6 +1,16 @@
 .hero__pic {
-  width: 100%;
+  width: 50%;
   aspect-ratio: 1.618;
   background-image: url(../../../images/header-pic.png);
   background-size: cover;
+}
+
+@media (max-width: 728px) {
+  .hero__pic {
+    background-position: center;
+    width: 100%;
+    height: 450px;
+    aspect-ratio: inherit;
+
+  }
 }
diff --git a/blocks/hero/__subtitle/hero__subtitle.css b/blocks/hero/__subtitle/hero__subtitle.css
@@ -1,9 +1,39 @@
 .hero__subtitle {
+  box-sizing: border-box;
   margin: 0;
-  padding-top: 199px;
-  padding-left: 180px;
+  /*padding-top: 199px;*/
+  /*padding-left: 180px;*/
   padding-right: 50px;
+  width: 50%;
   max-width: 420px;
   font-size: 28px;
   line-height: 1.14;
+  letter-spacing: -0.01em;
+}
+
+@media (max-width: 1100px) {
+  .hero__subtitle {
+    padding-left: 30px;
+    font-size: 20px;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width: 728px) {
+  .hero__subtitle {
+    box-sizing: inherit;
+    padding-left: 86px;
+    padding-bottom: 36px;
+    padding-right: 24px;
+    width: inherit;
+    max-width: 304px;
+    align-self: flex-end;
+  }
+
+}
+
+@media (max-width: 360px) {
+  .hero__subtitle {
+    padding-right: 0;
+  }
 }
diff --git a/blocks/hero/__title/hero__title.css b/blocks/hero/__title/hero__title.css
@@ -1,9 +1,23 @@
 .hero__title {
   margin: 0;
-  margin-top: -4px;
+  padding-left: 50%;
   padding-bottom: 65px;
-  max-width: 141px;
+  max-width: 450px;
   font-size: 72px;
   font-weight: 400;
   line-height: .97;
+  /*word-wrap: break-word;*/
+}
+
+@media (max-width: 900px) {
+  .hero__title {
+    font-size: 40px;
+  }
+}
+@media (max-width: 728px) {
+  .hero__title {
+    padding-top: 54px;
+    padding-left: 24px;
+    padding-bottom: 22px;
+  }
 }
diff --git a/blocks/hero/__wrap/hero__wrap.css b/blocks/hero/__wrap/hero__wrap.css
@@ -1,3 +1,4 @@
 .hero__wrap {
   display: flex;
+  flex-direction: column;
 }
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
   <link rel="stylesheet" href="./pages/index.css"/>
+  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
   <title>Lubimovka</title>
 </head>
 
@@ -50,12 +51,10 @@
   <section class="hero">
     <div class="hero__link-wrap"><a href="#" class="hero__back-btn">ПРОЕКТЫ</a></div>
     <div class="hero__wrap">
+      <h1 class="hero__title">Любимовка.<span style="font-size: 0;"> </span>Ещё</h1>
       <div class="hero__desc">
         <p class="hero__subtitle">Межсезонные читки и обсуждение пьес из списка отмеченных отборщиками
-          Любимовки.</p>
-      </div>
-      <div class="hero__main">
-        <h1 class="hero__title">Любимовка. Ещё</h1>
+          Любимовки. Можно слушать, обсуждать и даже участвовать.</p>
         <div class="hero__pic"></div>
       </div>
     </div>
@@ -83,7 +82,7 @@ <h2 class="title">Заголовок блока с персонами</h2>
         <p class="persons__title">Тереза Шимчак</p>
         <p class="persons__subtitle">Драматург, сценарист, преподаватель</p>
       </li>
-<!--      <img class="slider" src="">-->
+      <!--      <img class="slider" src="">-->
     </ul>
   </section>
 </main>

diff --git a/pages/index.css b/pages/index.css
@@ -7,12 +7,6 @@
 @import url(../vendor/fonts/FormularLight/formular-light.css);
 @import url(../vendor/fonts/NeueMachinaRegular/neue-machina-regular.css);
 @import url(../blocks/title/title.css);
-@import url(../blocks/persons/__subtitle/persons__subtitle.css);
-@import url(../blocks/persons/__foto/persons__foto.css);
-@import url(../blocks/persons/__title/persons__title.css);
-@import url(../blocks/persons/persons.css);
-@import url(../blocks/persons/__list/persons__list.css);
-@import url(../blocks/persons/__item/persons__item.css);
 
 /* ---------------Header-------------- */
 @import url(../blocks/header/header.css);
@@ -43,6 +37,14 @@
 @import url(../blocks/hero/__desc/hero__desc.css);
 @import url(../blocks/hero/__pic/hero__pic.css);
 
+/* ---------------Persons-------------- */
+@import url(../blocks/persons/__subtitle/persons__subtitle.css);
+@import url(../blocks/persons/__foto/persons__foto.css);
+@import url(../blocks/persons/__title/persons__title.css);
+@import url(../blocks/persons/persons.css);
+@import url(../blocks/persons/__list/persons__list.css);
+@import url(../blocks/persons/__item/persons__item.css);
+
 /* ---------------Footer-------------- */
 @import url(../blocks/footer/footer.css);
 @import url(../blocks/footer/__container/footer__container.css);