Skip to content

Commit

Permalink
все кроме розовых заголовков
Browse files Browse the repository at this point in the history
  • Loading branch information
@YanaPolyanskaya
YanaPolyanskaya committed Nov 14, 2023
1 parent 94ee324 commit ea2edd6
Show file tree
Hide file tree
Showing 5 changed files with 286 additions and 206 deletions.
166 changes: 84 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</head>
<body class="page">
<header class="header decorated-zone">
<div class="rec" aria-hidden="true">REC</div>
<span class="rec" aria-hidden="true">REC</span>
<nav class="header__theme-menu">
<ul class="header__theme-menu-list">
<li class="header__theme-menu-item">
Expand Down Expand Up @@ -48,52 +48,54 @@
</nav>
<h1 class="header__title-decor">no focus</h1>
<div class="section__text-decor_position">
<h3 class="section__text-decor">
<p class="section__text-decor">
Что делать, когда не можешь делать ничего<br />
Или почему нам так сложно сконцентрироваться, особенно когда очень
надо
</h3>
</p>
</div>
</header>

<main class="main">
<section class="section section__flexible-why">
<section class="section section__flexible-column">
<h2 class="section__title">Почему сосредоточиться так сложно</h2>
<article class="section__flexible-why_content">
<h3 class="section__text-decor">Многозадачность</h3>
<p class="section__text_content">
Особенно сложно сосредоточиться, когда задач много и все они —
важные. Где же легендарная многозадачность, когда она так нужна вам
(и всем нанимающим менеджерам этого мира)? А дело в том, что её
просто не существует. Исследователи
<a href="#0" class="text_content-link">выяснили</a>, что мозгу
тяжело концентрироваться даже на двух делах одновременно. А когда в
поле внимания попадает несколько важных задач, организм паникует и
выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы
работаем невнимательно: ошибаемся и быстро устаём.
</p>
</article>
<article class="section__flexible-why_content">
<h3 class="section__text-decor">Дофамин</h3>
<p class="section__text_content">
С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей
невозможности сосредоточиться замешана и полная противоположность
стрессу — дофамин. Это вещество участвует в системе вознаграждения
мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на
что-то более «приятное» для мозгов. Например, смотрим лайки в
соцсетях. В это время и выделяется дофамин — и мы чувствуем
удовольствие. Получается замкнутый круг: чем больше отвлекаешься,
тем больше удовольствия получаешь.
</p>
</article>
<div class="section__flexible">
<article class="section__flexible_content">
<h3 class="section__text-decor">Многозадачность</h3>
<p class="section__text_content">
Особенно сложно сосредоточиться, когда задач много и все они —
важные. Где же легендарная многозадачность, когда она так нужна
вам (и всем нанимающим менеджерам этого мира)? А дело в том, что
её просто не существует. Исследователи
<a href="#0" class="text_content-link">выяснили</a>, что мозгу
тяжело концентрироваться даже на двух делах одновременно. А когда
в поле внимания попадает несколько важных задач, организм паникует
и выделяет кортизол и адреналин — «гормоны стресса». Из-за этого
мы работаем невнимательно: ошибаемся и быстро устаём.
</p>
</article>
<article class="section__flexible_content">
<h3 class="section__text-decor">Дофамин</h3>
<p class="section__text_content">
С гормонами стресса всё понятно, но дальше — ещё интереснее. В
нашей невозможности сосредоточиться замешана и полная
противоположность стрессу — дофамин. Это вещество участвует в
системе вознаграждения мозга. Причём тут он? Мы часто отвлекаемся
от важной задачи на что-то более «приятное» для мозгов. Например,
смотрим лайки в соцсетях. В это время и выделяется дофамин — и мы
чувствуем удовольствие. Получается замкнутый круг: чем больше
отвлекаешься, тем больше удовольствия получаешь.
</p>
</article>
</div>
</section>

<section class="section section__flexible-what">
<section class="section">
<h2 class="section__title section__title-what">
Что снижает концентрацию внимания?
</h2>
<div class="section__flexible-what_all">
<article class="section__flexible-what_content">
<div class="section__flexible section__flexible-what">
<article class="section__flexible_content">
<h3 class="section__text-decor">Многозадачность</h3>
<p class="section__text_content">
Как концентрация может снижаться из-за… концентрации? Любая
Expand All @@ -104,7 +106,7 @@ <h3 class="section__text-decor">Многозадачность</h3>
может не выдержать, если не давать ей отдохнуть.
</p>
</article>
<article class="section__flexible-what_content">
<article class="section__flexible_content">
<h3 class="section__text-decor">Еда</h3>
<p class="section__text_content">
«Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно
Expand All @@ -115,7 +117,7 @@ <h3 class="section__text-decor">Еда</h3>
хотим ещё больше быстрых углеводов.
</p>
</article>
<article class="section__flexible-what_content">
<article class="section__flexible_content">
<h3 class="section__text-decor">Гаджеты</h3>
<p class="section__text_content">
Да-да, это та самая ситуация, когда на экране ноутбука — код, в
Expand All @@ -130,17 +132,17 @@ <h3 class="section__text-decor">Гаджеты</h3>
</div>
</section>

<section class="section section__flexible-how">
<section class="section section__flexible-column">
<h2 class="section__title">
Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх
секунд)
</h2>
<div class="section__flexible-how_all">
<div class="section__flexible">
<h3 class="section__text-decor section__text-decor_how">
5 простых (на самом деле не очень) советов
</h3>
<article class="section__flexible-how_content">
<h3 class="section__text-decor-thin">Представьте небо и облака</h3>
<article class="section__flexible_content">
<h4 class="section__text-decor-thin">Представьте небо и облака</h4>
<p class="section__text_content">
Или листья в ручье. Тут дело в лёгкой медитации, которая помогает
успокоиться. Ведь часто именно тревожные мысли о сложных задачах
Expand All @@ -152,17 +154,17 @@ <h3 class="section__text-decor-thin">Представьте небо и обла
проблемах из будущего.
</p>
</article>
<article class="section__flexible-how_content">
<h3 class="section__text-decor-thin">Включите музыку</h3>
<article class="section__flexible_content">
<h4 class="section__text-decor-thin">Включите музыку</h4>
<p class="section__text_content">
Но не любую, и не любимую. Любимая может быть связана с сильными
положительными эмоциями, которые тоже очень сильно отвлекают.
Подойдёт тихая, спокойная, умеренно-ритмичная. Можно вообще
попробовать включить плейлист в «белым шумом» или нейромузыкой.
</p>
</article>
<article class="section__flexible-how_content">
<h3 class="section__text-decor-thin">Прогуляйтесь</h3>
<article class="section__flexible_content">
<h4 class="section__text-decor-thin">Прогуляйтесь</h4>
<p class="section__text_content">
Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
<a href="#0" class="text_content-link">показал</a>, что созерцание
Expand All @@ -173,17 +175,17 @@ <h3 class="section__text-decor-thin">Прогуляйтесь</h3>
простая двадцатиминутная прогулка — тоже отличный вариант.
</p>
</article>
<article class="section__flexible-how_content">
<h3 class="section__text-decor-thin">Хорошо ешьте</h3>
<article class="section__flexible_content">
<h4 class="section__text-decor-thin">Хорошо ешьте</h4>
<p class="section__text_content">
Мы — не ваша бабушка, но это правда важно. Выбирайте продукты,
которые препятствуют резким скачкам сахара в крови. Например, с
высоким содержанием клетчатки: овощи, ягоды, бобовые (нут,
чечевица, фасоль), коричневый рис, хлеб из цельнозерновой пшеницы.
</p>
</article>
<article class="section__flexible-how_content">
<h3 class="section__text-decor-thin">Читайте</h3>
<article class="section__flexible_content">
<h4 class="section__text-decor-thin">Читайте</h4>
<p class="section__text_content">
Настоящие бумажные книги. Это правда помогает с концентрацией:
чтобы прочитать пост в соцсети, достаточно нескольких минут или
Expand All @@ -195,43 +197,43 @@ <h3 class="section__text-decor-thin">Читайте</h3>
</section>

<section class="gallery__picture">
<h3 class="section__text-decor">А можно в картинках?</h3>
<div class="gallery__picture-areas">
<img
class="picture sunset"
src="./images/sunset.png"
alt="рассвет"
loading="lazy"
/>
<img
class="picture ice-cream"
src="./images/ice-cream.png"
alt="мороженое"
loading="lazy"
/>
<img
class="picture tape"
src="./images/tape.png"
alt="пленка"
loading="lazy"
/>
<img
class="picture books"
src="./images/books.png"
alt="книги"
loading="lazy"
/>
<img
class="picture street"
src="./images/street.png"
alt="улица"
loading="lazy"
/>
</div>
<h3 class="section__text-decor">А можно в картинках?</h3>
<div class="gallery__picture-areas">
<img
class="picture sunset"
src="./images/sunset.png"
alt="рассвет"
loading="lazy"
/>
<img
class="picture ice-cream"
src="./images/ice-cream.png"
alt="мороженое"
loading="lazy"
/>
<img
class="picture tape"
src="./images/tape.png"
alt="пленка"
loading="lazy"
/>
<img
class="picture books"
src="./images/books.png"
alt="книги"
loading="lazy"
/>
<img
class="picture street"
src="./images/street.png"
alt="улица"
loading="lazy"
/>
</div>
</section>
</main>
<footer class="footer decorated-zone">
<h5 class="footer__title-decor">focus</h5>
<h2 class="footer__title-decor">focus</h2>
</footer>
<script src="./scripts/script.js"></script>
</body>
Expand Down
20 changes: 16 additions & 4 deletions styles/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:root {
--accent-color: #ff0070;
--title-decor: #db00ff;
--font-IBM: "IBM Plex mono", sans-serif;
--font-IBM: "IBM Plex mono", monospace;
--color-text-content: #f1b2ce;
--title-text: #000028;
--font-size: 18px;
Expand All @@ -15,6 +15,18 @@
--bg-color: #000028;
}

@media (prefers-color-scheme: dark) {
:root {
--accent-color: #ff0070;
--title-decor: #db00ff;
--color-text-content: #f1b2ce;
--title-text: #000028;
/* --font-size: 18px;
--font-wl: 400;
--font-wb: 700; */
--bg-color: #000028;
}
}
/* Остальные стили */

.page.theme_dark {
Expand All @@ -24,11 +36,11 @@
*/
--accent-color: #ff0070;
--title-decor: #db00ff;
--font-IBM: "IBM Plex mono", sans-serif;
--font-IBM: "IBM Plex mono", monospace;
--color-text-content: #f1b2ce;
--title-text: #000028;
--font-size: 18px;
/* --font-size: 18px;
--font-wl: 400;
--font-wb: 700;
--font-wb: 700; */
--bg-color: #000028;
}
27 changes: 18 additions & 9 deletions styles/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,39 @@
--accent-color: #ffc2e6;
--title-decor: #ff8dcb;
--text-shadow: #ff0070;
--font-IBM: "IBM Plex mono", sans-serif;
--font-IBM: "IBM Plex mono", monospace;
--color-text-content: #353430;
--title-text: #353430;
--bg-title: --font-size: 18px;
--font-wl: 400;
--font-wb: 700;
--bg-title: #fff1f7;
/* --font-wl: 400;
--font-wb: 700; */
--bg-color: #fff1f7;
}

/* Остальные стили */

/* @media (prefers-color-scheme: light) {
:root {
--accent-color: #ffc2e6;
--title-decor: #ff8dcb;
--text-shadow: #ff0070;
--color-text-content: #353430;
--title-text: #353430;
--bg-color: #fff1f7;
--accent-color: var(--color-text);
}
} */
@media (prefers-color-scheme: light) {
:root {
/* Дублируем переменные светлой темы */
--accent-color: #ffc2e6;
--title-decor: #ff8dcb;
--text-shadow: #ff0070;
--font-IBM: "IBM Plex mono", sans-serif;
--font-IBM: "IBM Plex mono", monospace;
--color-text-content: #353430;
--title-text: #353430;
--font-size: 18px;
--font-wl: 400;
--font-wb: 700;
--bg-color: #fff1f7;
background-image: url(../images/cover-image-light.png);
}
.page.theme_light .rec {
display: none;
Expand Down
Loading

0 comments on commit ea2edd6

Please sign in to comment.