feat: light theme + gallery

MalakhN · Mar 30, 2024 · 7b2aa0c · 7b2aa0c
1 parent 1d5e041
commit 7b2aa0c
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -43,9 +43,9 @@
           </li>
         </ul>
       </nav>
-      <span class="header__rec">REC</span>
+      <span class="header__rec" aria-hidden="undefined">REC</span>
       <h1 class="main__title">no focus</h1>
-      <p class="heading header__subtitle">
+      <p class="title-decor heading header__subtitle">
         Что делать, когда не&nbsp;можешь делать ничего<br>
         Или почему нам так сложно сконцентрироваться, особенно когда очень надо
       </p>
@@ -54,19 +54,19 @@ <h1 class="main__title">no focus</h1>
       <section class="section why">
         <h2 class="heading section__title why__title">Почему сосредоточиться так сложно</h2>
         <article class="why__container">
-          <h3 class="heading section__text-block-title">Многозадачность</h3>
+          <h3 class="title-decor heading section__text-block-title">Многозадачность</h3>
           <p class="section__text-block">
             Особенно сложно сосредоточиться, когда задач много и&nbsp;все они&nbsp;&mdash; важные.
             Где&nbsp;же легендарная многозадачность, когда она так нужна вам (и&nbsp;всем нанимающим менеджерам этого мира)?
-            А&nbsp;дело в&nbsp;том, что её&nbsp;просто не&nbsp;существует.
-            Исследователи <span class="colored-text">выяснили</span>, что мозгу тяжело концентрироваться даже на&nbsp;двух делах одновременно.
-            А&nbsp;когда в&nbsp;поле внимания попадает несколько важных задач,
+            А&nbsp;дело в&nbsp;том, что её&nbsp;просто не&nbsp;существует. Исследователи
+            <a class="colored-text" href="https://www.dana.org/article/multicosts-of-multitasking/" target="_blank">выяснили</a>, что мозгу
+            тяжело концентрироваться даже на&nbsp;двух делах одновременно. А&nbsp;когда в&nbsp;поле внимания попадает несколько важных задач,
             организм паникует и&nbsp;выделяет кортизол и&nbsp;адреналин&nbsp;&mdash; &laquo;гормоны стресса&raquo;.
             Из-за этого мы&nbsp;работаем невнимательно: ошибаемся и&nbsp;быстро устаём.
           </p>
         </article>
         <article class="why__container">
-          <h3 class="heading section__text-block-title">Дофамин</h3>
+          <h3 class="title-decor heading section__text-block-title">Дофамин</h3>
           <p class="section__text-block">
             С&nbsp;гормонами стресса всё понятно, но&nbsp;дальше&nbsp;&mdash; ещё интереснее.
             В&nbsp;нашей невозможности сосредоточиться замешана и&nbsp;полная противоположность стрессу&nbsp;&mdash; дофамин.
@@ -80,7 +80,7 @@ <h3 class="heading section__text-block-title">Дофамин</h3>
       <section class="section what">
         <h2 class="heading section__title what__title ">Что снижает концентрацию внимания?</h2>
         <article class="what__container">
-          <h3 class="heading section__text-block-title">Многозадачность</h3>
+          <h3 class="title-decor heading section__text-block-title">Многозадачность</h3>
           <p class="section__text-block">
             Как концентрация может снижаться из-за... концентрации?
             Любая стрессовая ситуация (и&nbsp;резко меняющийся мир в&nbsp;целом) заставляет наш мозг постоянно &laquo;сканировать&raquo;
@@ -90,7 +90,7 @@ <h3 class="heading section__text-block-title">Многозадачность</h3
           </p>
         </article>
         <article class="what__container">
-          <h3 class="heading section__text-block-title">Еда</h3>
+          <h3 class="title-decor heading section__text-block-title">Еда</h3>
           <p class="section__text-block">
             &laquo;Быстрые углеводы&raquo;&nbsp;&mdash; сахар, белый хлеб, сладости&nbsp;&mdash; молниеносно
             доставляют в&nbsp;мозг энергию и&nbsp;помогают ему лучше работать. Но&nbsp;уходит эта энергия также быстро, как и&nbsp;приходит.
@@ -100,7 +100,7 @@ <h3 class="heading section__text-block-title">Еда</h3>
           </p>
         </article>
         <article class="what__container">
-          <h3 class="heading section__text-block-title">Гаджеты</h3>
+          <h3 class="title-decor heading section__text-block-title">Гаджеты</h3>
           <p class="section__text-block">
             Да-да, это та&nbsp;самая ситуация, когда на&nbsp;экране ноутбука&nbsp;&mdash; код, в&nbsp;наушниках&nbsp;&mdash; подкаст,
             а&nbsp;на&nbsp;компьютере фоном&nbsp;&mdash; ещё и&nbsp;видео с&nbsp;забавными утятами. В&nbsp;результате мозг пытается переключиться
@@ -112,9 +112,9 @@ <h3 class="heading section__text-block-title">Гаджеты</h3>
       </section>
       <section class="section how">
         <h2 class="heading section__title how__title">Как концентрироваться лучше, чем золотая рыбка (то&nbsp;есть дольше трёх секунд)</h2>
-        <h3 class="heading section__text-block-title how__text-block-title">5&nbsp;простых (на&nbsp;самом деле не&nbsp;очень) советов</h3>
+        <h3 class="heading title-decor section__text-block-title how__text-block-title">5&nbsp;простых (на&nbsp;самом деле не&nbsp;очень) советов</h3>
         <article class="how__container">
-          <h4 class="section__text-block-subtitle">Представьте небо и&nbsp;облака</h4>
+          <h4 class="title-decor section__text-block-subtitle">Представьте небо и&nbsp;облака</h4>
           <p class="section__text-block">
             Или листья в&nbsp;ручье. Тут дело в&nbsp;лёгкой медитации, которая помогает успокоиться.
             Ведь часто именно тревожные мысли о&nbsp;сложных задачах как раз и&nbsp;мешают эти сложные задачи делать.
@@ -125,7 +125,7 @@ <h4 class="section__text-block-subtitle">Представьте небо и&nbsp
           </p>
         </article>
         <article class="how__container">
-          <h4 class="section__text-block-subtitle">Включите музыку</h4>
+          <h4 class="title-decor section__text-block-subtitle">Включите музыку</h4>
           <p class="section__text-block">
             Но&nbsp;не&nbsp;любую, и&nbsp;не&nbsp;любимую.
             Любимая может быть связана с&nbsp;сильными положительными эмоциями, которые тоже очень сильно отвлекают.
@@ -134,32 +134,41 @@ <h4 class="section__text-block-subtitle">Включите музыку</h4>
           </p>
         </article>
         <article class="how__container">
-          <h4 class="section__text-block-subtitle">Прогуляйтесь</h4>
+          <h4 class="title-decor section__text-block-subtitle">Прогуляйтесь</h4>
           <p class="section__text-block">
-            Или даже пробегитесь. Лучше найти парк или лес: один эксперимент <span class="colored-text">показал</span>, что созерцание природы повышает концентрацию,
-            в&nbsp;то&nbsp;время как после просмотра городских пейзажей она наоборот понижается. Можно совместить прогулку с&nbsp;физическими
-            упражнениями или бегом&nbsp;&mdash; так в&nbsp;мозг поступит ещё больше кислорода и&nbsp;он&nbsp;будет лучше работать.
-            Но&nbsp;и&nbsp;простая двадцатиминутная прогулка&nbsp;&mdash; тоже отличный вариант.
+            Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
+            <a class="colored-text" href="https://www.dana.org/article/multicosts-of-multitasking/" target="_blank">показал</a>, что созерцание
+            природы повышает концентрацию, в&nbsp;то&nbsp;время как после просмотра городских пейзажей она наоборот понижается.
+            Можно совместить прогулку с&nbsp;физическими упражнениями или бегом&nbsp;&mdash; так в&nbsp;мозг поступит ещё больше
+            кислорода и&nbsp;он&nbsp;будет лучше работать. Но&nbsp;и&nbsp;простая двадцатиминутная прогулка&nbsp;&mdash; тоже отличный вариант.
           </p>
         </article>
         <article class="how__container">
-          <h4 class="section__text-block-subtitle">Хорошо ешьте</h4>
+          <h4 class="title-decor section__text-block-subtitle">Хорошо ешьте</h4>
           <p class="section__text-block">
             Мы&nbsp;&mdash; не&nbsp;ваша бабушка, но&nbsp;это правда важно. Выбирайте продукты, которые препятствуют резким скачкам сахара в&nbsp;крови.
             Например, с&nbsp;высоким содержанием клетчатки: овощи, ягоды, бобовые (нут, чечевица, фасоль), коричневый рис, хлеб из&nbsp;цельнозерновой пшеницы.
           </p>
         </article>
         <article class="how__container">
-          <h4 class="section__text-block-subtitle">Читайте</h4>
+          <h4 class="title-decor section__text-block-subtitle">Читайте</h4>
           <p class="section__text-block">
             Настоящие бумажные книги. Это правда помогает с&nbsp;концентрацией: чтобы прочитать пост в&nbsp;соцсети, достаточно нескольких минут или даже секунд.
             А&nbsp;вот интересная книга способна затянуть и&nbsp;на&nbsp;несколько часов и&nbsp;круто тренирует направленное внимание.
           </p>
         </article>
       </section>
+      <section class="section gallery">
+        <h2 class="title-decor heading section__text-block-title gallery__title">А можно в картинках?</h2>
+        <img class="gallery__image" src="./images/sunset.png" alt="Закат" loading="lazy">
+        <img class="gallery__image" src="./images/ice-cream.png" alt="Мороженое" loading="lazy">
+        <img class="gallery__image" src="./images/tape.png" alt="Аудиокассета" loading="lazy">
+        <img class="gallery__image" src="./images/books.png" alt="Книги" loading="lazy">
+        <img class="gallery__image" src="./images/street.png" alt="Улица" loading="lazy">
+      </section>
     </main>
     <footer class="footer decorated-zone">
-      <h1 class="main__title">focus</h1>
+      <h2 class="main__title">focus</h2>
     </footer>
     <script src="./scripts/script.js"></script>
   </body>

diff --git a/styles/dark.css b/styles/dark.css
@@ -9,4 +9,10 @@
     Так стили написанные ниже будут иметь больший вес,
     чем стили в медиазапросе предпочтений пользователя
   */
+  --background-color: #000028;
+  --heading-color: #DB00FF;
+  --text-color: #F1B2CE;
+  --accent-color: #ff0070;
+  --accent-color-transparent: rgba(255, 0, 112, 0.4);
+  --main-font: 'IBM Plex mono';
 }
diff --git a/styles/light.css b/styles/light.css
@@ -9,4 +9,35 @@
     Так стили написанные ниже будут иметь больший вес,
     чем стили в медиазапросе предпочтений пользователя
   */
+  --background-color: #fff1f7;
+  --background-image: url(../images/cover-image-light.png);
+  --heading-color: #ffc2e6;
+  --subtitle-text-color: #353430;
+  --text-color: #353430;
+  --accent-color: #ff8dcb;
+  --header-decoration-color: #353430;
+  --section-title-color: #353430;
+  --theme-menu-color: #353430;
+  --theme-menu-color-transparent: rgba(53, 52, 48, 0.4);
+  --main-font: "IBM Plex mono";
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background-color: #fff1f7;
+    --background-image: url(../images/cover-image-light.png);
+    --heading-color: #ffc2e6;
+    --subtitle-text-color: #353430;
+    --text-color: #353430;
+    --accent-color: #ff8dcb;
+    --header-decoration-color: #353430;
+    --section-title-color: #353430;
+    --theme-menu-color: #353430;
+    --theme-menu-color-transparent: rgba(53, 52, 48, 0.4);
+    --main-font: "IBM Plex mono";
+  }
+}
+
+.header__rec {
+  display: none;
 }
diff --git a/styles/style.css b/styles/style.css
@@ -1,13 +1,13 @@
 /* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */
 
 .page {
-  background-image: url(../images/cover-image-dark.png);
+  background-image: var(--background-image);
   background-color: var(--background-color, #000028);
   background-size: cover;
+  background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
-  font-family: "IBM Plex mono";
-  color: #000028;
+  font-family: var(--main-font);
   max-width: 1024px;
   min-width: 375px;
   margin: 0 auto;
@@ -24,8 +24,8 @@
   position: absolute;
   width: 25px;
   height: 25px;
-  border-top: 1px solid var(--accent-color);
-  border-right: 1px solid var(--accent-color);
+  border-top: 1px solid var(--header-decoration-color);
+  border-right: 1px solid var(--header-decoration-color);
   top: 20px;
   right: 20px;
 }
@@ -35,8 +35,8 @@
   position: absolute;
   width: 25px;
   height: 25px;
-  border-bottom: 1px solid var(--accent-color);
-  border-left: 1px solid var(--accent-color);
+  border-bottom: 1px solid var(--header-decoration-color);
+  border-left: 1px solid var(--header-decoration-color);
   bottom: 20px;
   left: 20px;
 }
@@ -84,7 +84,7 @@
   font-size: 18px;
   font-weight: normal;
   line-height: 1;
-  color: var(--accent-color);
+  color: var(--theme-menu-color);
   text-transform: lowercase;
   cursor: pointer;
   border: none;
@@ -93,17 +93,23 @@
 }
 
 .header__theme-menu-button:hover {
-  border: 1px solid var(--accent-color-transparent);
+  border: 1px solid var(--theme-menu-color-transparent);
 }
 
 .header__theme-menu-button:focus-visible {
   outline: none;
-  border-bottom: 1px solid var(--accent-color);
+  border-bottom: 1px solid var(--theme-menu-color);
 }
 
 .header__theme-menu-button_active {
   pointer-events: none;
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--theme-menu-color);
+}
+
+.heading {
+  font-family: inherit;
+  font-weight: bold;
+  font-size: 18px;
 }
 
 .main__title {
@@ -116,15 +122,12 @@
   align-self: center;
 }
 
-.heading {
-  font-family: inherit;
-  font-weight: bold;
-  font-size: 18px;
+.title-decor {
+  background-color: var(--accent-color, #ff0070);
+  color: var(--subtitle-text-color);
 }
 
 .header__subtitle {
-  color: inherit;
-  background-color: var(--accent-color, #ff0070);
   max-width: calc(50% - 20px);
   justify-self: end;
   align-self: end;
@@ -136,13 +139,11 @@
 }
 
 .section__title {
-  color: var(--accent-color, #ff0070);
+  color: var(--section-title-color, #ff0070);
   margin: 0;
 }
 
 .section__text-block-title {
-  color: inherit;
-  background-color: var(--accent-color, #ff0070);
   margin: 0;
 }
 
@@ -153,12 +154,31 @@
   margin: 10px 0 0;
 }
 
+.colored-text {
+  text-decoration: none;
+  color: var(--text-color);
+  text-shadow: 2px 2px 0 var(--accent-color);
+}
+
+.colored-text:hover {
+  text-decoration: underline;
+}
+
+.colored-text:focus-visible {
+  outline: none;
+  border: 1px solid var(--text-color);
+}
+
 .section {
   display: grid;
   gap: 20px;
   margin: 0 0 80px;
 }
 
+.section:last-of-type {
+  margin: 0;
+}
+
 .why {
   grid-template-columns: repeat(3, 1fr);
 }
@@ -192,14 +212,33 @@
 
 .section__text-block-subtitle {
   margin: 0;
-  background-color: var(--accent-color);
-  color: inherit;
   font-weight: normal;
   font-size: 18px;
 }
 
-.colored-text {
-  text-shadow: 2px 2px 0 var(--accent-color);
+.gallery {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.gallery__title {
+  grid-column: span 3;
+}
+
+.gallery__image {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+  height: 100%;
+}
+
+.gallery__image:first-of-type,
+.gallery__image:last-of-type {
+  grid-column: span 2;
+}
+
+.gallery__image:nth-of-type(2),
+.gallery__image:nth-of-type(3) {
+  grid-row: span 2;
 }
 
 .footer {
@@ -289,4 +328,23 @@
   .section {
     margin: 0 0 50px;
   }
+
+  .gallery {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .gallery__title {
+    grid-column: span 1;
+  }
+
+  .gallery__image:first-of-type,
+  .gallery__image:last-of-type {
+    grid-column: span 1;
+  }
+
+  .gallery__image:nth-of-type(2),
+  .gallery__image:nth-of-type(3) {
+    grid-row: span 1;
+  }
 }