откорретктировал медиа запросы

gadjster · Mar 4, 2024 · b52e0f5 · b52e0f5
1 parent 62c4a83
commit b52e0f5
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 8 deletions.
diff --git a/styles/dark.css b/styles/dark.css
@@ -22,8 +22,6 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-  }
 }
 
 .page.theme_dark {

diff --git a/styles/style.css b/styles/style.css
@@ -120,7 +120,6 @@
   top: 20px;
   right: 29px;
   display: flex;
-  display: flex;
   color: var(--menu-color, #ff0070);
   font-family: var(--mainfont, sans-serif);
   font-weight: 400;
@@ -180,7 +179,6 @@
   margin-inline-end: 20px;
   margin-block-start: 60px;
   margin-block-end: 80px;
-  justify-content: center;
 }
 
 .container--why {
@@ -208,14 +206,11 @@
 }
 
 .container--what-title {
+  padding-block-end: 20px;
   grid-column-start: 1;
   grid-row-start: 1;
 }
 
-.container--what-title {
-  padding-block-end: 20px;
-}
-
 .title.container--what-block:nth-of-type(1) {
   grid-column-start: 1;
   grid-row-start: 2;
@@ -372,7 +367,214 @@
 }
 
 @media screen and (min-width: 376px) and (max-width: 768px) {
+  .header__theme-menu {
+    justify-self: flex-end;
+    align-self: center;
+    margin-inline-end: 27px;
+  }
+  .header__theme-menu-list {
+    flex-direction: column;
+  }
+
+  .header__text {
+    margin-inline-end: 19px;
+    max-width: 364px;
+  }
+  .container--what {
+    grid-template-columns: 1fr;
+  }
+
+  .container--what-title {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+
+  .title.container--what-block:nth-of-type(1) {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: 3;
+  }
+
+  .text__block.container--what-block:nth-of-type(1) {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 4;
+  }
+
+  .title.container--what-block:nth-of-type(2) {
+    grid-column-start: 1;
+    grid-row-start: 4;
+    grid-row-end: 5;
+  }
+
+  .text__block.container--what-block:nth-of-type(2) {
+    grid-column-start: 1;
+    grid-row-start: 5;
+    grid-row-end: 6;
+  }
+
+  .title.container--what-block:nth-of-type(3) {
+    grid-column-start: 1;
+    grid-row-start: 6;
+    grid-row-end: 7;
+  }
+
+  .text__block.container--what-block:nth-of-type(3) {
+    grid-column-start: 1;
+    grid-row-start: 8;
+    grid-row-end: 9;
+  }
 }
 
 @media (max-width: 375px) {
+  .decor__element {
+    top: 10px;
+    right: 19px;
+  }
+
+  .decorated-zone:after {
+    top: 10px;
+    right: 10px;
+  }
+  .decorated-zone:before {
+    bottom: 10px;
+    left: 10px;
+  }
+
+  .main-title {
+    font-size: var(--mainfont-size-mob, 116px);
+  }
+
+  .header__theme-menu {
+    justify-self: flex-end;
+    align-self: center;
+    margin-inline-end: 17px;
+  }
+  .header__theme-menu-list {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .header__text {
+    margin-inline-end: 0;
+    max-width: 357px;
+    justify-self: center;
+  }
+
+  .container {
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
+    margin-block-start: 50px;
+    margin-block-end: 50px;
+  }
+
+  .container--what {
+    grid-template-columns: 1fr;
+  }
+
+  .container--what-title {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+
+  .title.container--what-block:nth-of-type(1) {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: 3;
+  }
+
+  .text__block.container--what-block:nth-of-type(1) {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 4;
+  }
+
+  .title.container--what-block:nth-of-type(2) {
+    grid-column-start: 1;
+    grid-row-start: 4;
+    grid-row-end: 5;
+  }
+
+  .text__block.container--what-block:nth-of-type(2) {
+    grid-column-start: 1;
+    grid-row-start: 5;
+    grid-row-end: 6;
+  }
+
+  .title.container--what-block:nth-of-type(3) {
+    grid-column-start: 1;
+    grid-row-start: 6;
+    grid-row-end: 7;
+  }
+
+  .text__block.container--what-block:nth-of-type(3) {
+    grid-column-start: 1;
+    grid-row-start: 8;
+    grid-row-end: 9;
+  }
+
+  .container--why {
+    grid-template-columns: 1fr;
+  }
+  .container--why-title {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+
+  .container--why-block {
+    grid-column-start: 1;
+    grid-row-start: span 1;
+  }
+
+  .container--how {
+    grid-template-columns: 1fr;
+  }
+
+  .container--how-title {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+
+  .container--img {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+    row-gap: 5px;
+  }
+
+  .container--img-title {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 1;
+  }
+
+  .container--img-block:nth-of-type(1) {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 2;
+  }
+  .container--img-block:nth-of-type(2) {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 4;
+  }
+
+  .container--img-block:nth-of-type(3) {
+    grid-column-start: 1;
+    grid-row-start: 4;
+    grid-row-end: 5;
+  }
+
+  .container--img-block:nth-of-type(4) {
+    grid-column-start: 1;
+    grid-row-start: 5;
+  }
+  .container--img-block:nth-of-type(5) {
+    grid-column-start: 1;
+    grid-column-end: 6;
+    grid-row-start: 7;
+  }
 }