adding styles

lukanov-9b · Sep 27, 2023 · 6c2ee3d · 6c2ee3d
1 parent 50de494
commit 6c2ee3d
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -123,7 +123,7 @@ <h3 class="main-content__card-title text-decorated">5 простых (на са
         </div>
         <div class="main-content__card">
           <p class="text-decorated">Прогуляйтесь</p>
-          <p class="main-content__card-text">Или даже пробегитесь. Лучше найти парк или лес: один эксперимент показал, 
+          <p class="main-content__card-text">Или даже пробегитесь. Лучше найти парк или лес: один эксперимент <a href="https://www.sciencedirect.com/science/article/abs/pii/S0272494415000328" target="_blank">показал</a>, 
             что созерцание природы повышает концентрацию, в то время как после просмотра городских пейзажей она наоборот понижается. 
             Можно совместить прогулку с физическими упражнениями или бегом — так в мозг поступит ещё больше кислорода и он будет лучше 
             работать. Но и простая двадцатиминутная прогулка — тоже отличный вариант.</p>
@@ -140,8 +140,30 @@ <h3 class="main-content__card-title text-decorated">5 простых (на са
             А вот интересная книга способна затянуть и на несколько часов и круто тренирует направленное внимание.</p>
         </div>
       </section>
+      <section class="pictures">
+        <h2 class="text-decorated">А можно в картинках?</h2>
+        <div class="pictures-grid">
+          <div class="image-container">
+            <img src="./images/sunset.png" loading="lazy" alt="заходящее за горы солнце">
+          </div>
+          <div class="image-container">
+            <img src="./images/ice-cream.png" loading="lazy" alt="что-то милое с глазами в миске с мороженым">
+          </div>
+          <div class="image-container">
+            <img src="./images/tape.png" loading="lazy" alt="касета">
+          </div>
+          <div class="image-container">
+            <img src="./images/books.png" loading="lazy" alt="стопка книг">
+          </div>
+          <div class="image-container">
+            <img src="./images/street.png" loading="lazy" alt="стопка книг">
+          </div>
+        </div>
+      </section>
+      <footer>
+        <p class="main-title">focus</p>
+      </footer>
     </main>
-
-    <script src="./scripts/script.js"></script>
+  <script src="./scripts/script.js"></script>
   </body>
 </html>
diff --git a/styles/dark.css b/styles/dark.css
@@ -9,4 +9,20 @@
     Так стили написанные ниже будут иметь больший вес,
     чем стили в медиазапросе предпочтений пользователя
   */
+    --main-text-color: #F1B2CE;
+    --background-color: #000028;
+    --header-text-color: #000028;
+    --accent-color: #FF0070;
+    --color-decorated: #FF0070;
+
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-text-color: #F1B2CE;
+    --background-color: #000028;
+    --header-text-color: #000028;
+    --accent-color: #FF0070;
+    --color-decorated: #FF0070;
+    }
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -7,7 +7,7 @@
 }
 
 body {
-  min-inline-size: 375px;
+  min-inline-size: 374px;
   max-inline-size: 1440px;
   margin: 0 auto;
 }

diff --git a/styles/light.css b/styles/light.css
@@ -5,8 +5,42 @@
 */
 
 .page.theme_light {
-  /* сохраните этот селектор в приведённом виде.
-    Так стили написанные ниже будут иметь больший вес,
-    чем стили в медиазапросе предпочтений пользователя
-  */
+  --main-text-color: #353430;
+  --accent-color: #FF8DCB;
+  --header-text-color: #353430;
+  --color-decorated: #353430;
 }
+
+.page.theme_light .decorated-element-text {
+  display: none;
+}
+
+.page.theme_light .main-title {
+  color: #FFC2E6;
+}
+
+.page.theme_light .section-title {
+  color: var(--main-text-color);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --main-text-color: #353430;
+    --accent-color: #FF8DCB;
+    --header-text-color: #353430;
+    --color-decorated: #353430;   
+    }
+
+    .page .decorated-element-text {
+      display: none;
+    }
+
+    .page .main-title {
+      color: #FFC2E6;
+    }
+
+    .page .section-title {
+      color: var(--main-text-color);
+    }
+}
+
diff --git a/styles/style.css b/styles/style.css
@@ -15,7 +15,7 @@
 }
 
 /* фон для тёмного фона */
-.page.theme_dark {
+.page {
  background-image: url('../images/cover-image-dark.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
@@ -62,8 +62,8 @@
   display: block;
   block-size: 25px;
   inline-size: 25px;
-  border-inline-end: 1px solid var(--accent-color);
-  border-block-start: 1px solid var(--accent-color);
+  border-inline-end: 1px solid var(--color-decorated);
+  border-block-start: 1px solid var(--color-decorated);
   position: absolute;
   inset-inline-end: var(--padding-size);
   inset-block-start: var(--padding-size);
@@ -76,8 +76,8 @@
   display: block;
   block-size: 25px;
   inline-size: 25px;
-  border-inline-start: 1px solid var(--accent-color);
-  border-block-end: 1px solid var(--accent-color);
+  border-inline-start: 1px solid var(--color-decorated);
+  border-block-end: 1px solid var(--color-decorated);
   position: relative;
   inset-block-start: -25px;
 }
@@ -91,18 +91,18 @@
 .header__theme-menu-button {
   inline-size: 70px;
   block-size: 23px;
-  color: var(--accent-color);
+  color: var(--color-decorated);
   text-transform: lowercase;
   line-height: 18px;
 }
 
 .header__theme-menu-button_active {
   pointer-events: none;
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--color-decorated);
 }
 
 .header__theme-menu-button:hover {
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--color-decorated);
 }
 
 .header__theme-menu-button:focus-visible {
@@ -134,11 +134,17 @@
   align-self: center;
   position: relative;
   inset-inline-start: -18px;
+  line-height: 82.5%;
 }
 
 @media (width <= 380px) {
+  .header {
+    grid-template-rows: 228px 190px 228px;
+  }
+
   .main-title{
     font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
+    inset-inline-start: 0;
   }
 }
 
@@ -184,6 +190,13 @@
   grid-row: 1/ span 2;
 }
 
+@media (max-width: 770px) {
+  .difficulties {
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: repeat(2, auto);
+  }
+}
+
 @media (max-width: 380px) {
   .difficulties {
     grid-template-columns: 1fr;
@@ -291,3 +304,125 @@ a:focus-visible {
     grid-row: 1/ span 1;
   }
 }
+
+.pictures {
+  margin-block-start: var(--no-phone-margin);
+}
+
+.pictures-grid {
+  margin-block-start: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: minmax(192px, 260px) minmax(230px, 315px) minmax(318px, 428px);
+  gap: 20px;
+  width: 100%;
+  height: 100%;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pictures-grid div:nth-child(1) {
+  grid-row: 1/ span 1;
+  grid-column: 1/ span 2;
+}
+
+.pictures-grid div:nth-child(2) {
+  grid-row: 1/ span 2;
+  grid-column: 3/ span 1;
+}
+
+.pictures-grid div:nth-child(3) {
+  grid-row: 2/ span 2;
+  grid-column: 1/ span 1;
+}
+
+.pictures-grid div:nth-child(-2) {
+  grid-row: 2/ span 1;
+  grid-column: 2/ span 1;
+}
+
+.pictures-grid div:last-child {
+  grid-row: 3 / span 1;
+  grid-column: 2/ span 2;
+}
+
+@media (max-width: 380px) {
+  .pictures-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(1, auto);
+    grid-auto-rows: 355px 237px;
+    gap: 10px;
+    margin-block-start: 10px;
+  }
+
+  .pictures-grid div:nth-child(1) {
+    grid-row: 1/ span 1;
+    grid-column: 1/ span 1;
+  }
+
+  .pictures-grid div:nth-child(2) {
+    grid-row: 2/ span 1;
+    grid-column: 1/ span 1;
+  }
+
+  .pictures-grid div:nth-child(3) {
+    grid-row: 3/ span 1;
+    grid-column: 1/ span 1;
+  }
+
+  .pictures-grid div:nth-child(-2) {
+    grid-row: 4/ span 1;
+    grid-column: 1/ span 1;
+  }
+
+  .pictures-grid div:last-child {
+    grid-row: 5 / span 1;
+    grid-column: 1/ span 1;
+  }
+}
+
+footer {
+  margin-block-start: 80px;
+  display: flex;
+  height: clamp(667px, 100vh, 1024px);
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding-block: var(--padding-size);
+}
+
+footer .main-title {
+  text-shadow: 0 2px 0 var(--accent-color);
+  position: static;
+}
+
+/* декоративный элемент в футере */
+footer::before {
+  content: '';
+  display: block;
+  block-size: 25px;
+  inline-size: 25px;
+  border-inline-end: 1px solid var(--color-decorated);
+  border-block-start: 1px solid var(--color-decorated);
+  position: absolute;
+  inset-inline-end: var(--padding-size);
+  inset-block-start: var(--padding-size);
+
+}
+
+/* декоративный элемент в футере */
+footer::after {
+  content: '';
+  display: block;
+  block-size: 25px;
+  inline-size: 25px;
+  border-inline-start: 1px solid var(--color-decorated);
+  border-block-end: 1px solid var(--color-decorated);
+  position: absolute;
+  inset-block-end: var(--padding-size);
+  inset-inline-start: var(--padding-size);
+}
diff --git a/styles/variables.css b/styles/variables.css
@@ -11,10 +11,12 @@
   --main-text-font: 'IBM Plex mono';
   --main-text-size: 18px;
   --padding-size: 20px;
+  --no-phone-margin: 80px;
 }
 
 @media (max-width: 380px) {
-  .page {
+  body {
+    --no-phone-margin: 50px;
     --padding-size: 10px;
   }
 }