Merge pull request #529 from Dmitry1399/fix-media-queries

[#518] fixed styles for main bg and title
hexlet-rus · Jul 16, 2024 · 8b2b11a · 8b2b11a
2 parents 92529a4 + 3897895
commit 8b2b11a
Show file tree

Hide file tree

Showing 3 changed files with 521 additions and 1,117 deletions.
diff --git a/frontend/src/pages/landing/Landing.jsx b/frontend/src/pages/landing/Landing.jsx
@@ -83,10 +83,10 @@ function NewLanding() {
               <div className="pt-5">
                 <p>{tL('freeProject')}</p>
               </div>
-              <h1>{tL('fastIDE.first')}</h1>
-              <div className="d-flex align-items-center pb-5 mb-5">
-                <h1 className="m-0 pe-3">{tL('fastIDE.second')}</h1>
-                <p className="m-0 ps-3">{tL('writeInBrowser')}</p>
+              <div className="d-flex justify-content-start flex-wrap align-items-center pb-5 mb-5 title-wrapper">
+                <h1>{tL('fastIDE.first')}</h1>
+                <h1>{tL('fastIDE.second')}</h1>
+                <p className="m-0">{tL('writeInBrowser')}</p>
               </div>
             </Col>
             <Col

diff --git a/frontend/src/pages/landing/landing.scss b/frontend/src/pages/landing/landing.scss
@@ -109,14 +109,17 @@ $font-family: 'Nunito Sans';
 }
 
 @media (max-width: 992px) {
-    .about-project > .d-lg-none > h1 {
+    .title-wrapper {
+        column-gap: 0.85rem;
+    }
+    .about-project > .d-lg-none > .d-flex > h1 {
         font-family: $font-family;
         font-weight: 700;
         font-size: 2.8rem;
         line-height: 130%;
         text-transform: uppercase;
     }
-    .about-project > .d-lg-none > div > h1 {
+    .about-project > .d-lg-none > .d-flex > h1.m-0 {
         font-family: $font-family;
         font-weight: 700;
         font-size: 4rem;
@@ -125,22 +128,23 @@ $font-family: 'Nunito Sans';
     }
     .about-project > .d-lg-none > div > h2 {
         font-family: $font-family;
-        font-weight: 600;
+        font-weight: 500;
         line-height: 130%;
     }
     .first-bg-image{
         position: relative;
         &::before {
             position: absolute;
             top: 2%;
-            right: -100%;
+            right: 0;
             width: 64rem;
             height: 65rem;
             content: "";
             background-image: url("./assets/BGElement.svg");
             background-repeat: no-repeat;
+            background-size: cover;
             background-position: top;
-            background-size: 100% 100%;
+            // background-size: 100% 100%;
             z-index: -1;
         }
     }
@@ -159,11 +163,23 @@ $font-family: 'Nunito Sans';
             background-size: 100% 100%;
             z-index: -1;
         }
-    }
-
+    }  
 @media (max-width: 991px) {
     .background-dark {
         color: black;
     }
   }
-}
+}
+@media (max-width: 992px) and (orientation: landscape) {
+
+    .about-project > .d-lg-none > .d-flex > h1 {
+        display: inline-block;
+        width: auto;
+      }
+
+    .about-project > .d-lg-none > .d-flex > p {
+      display: block;
+      width: 100%;
+
+    }
+  }