-
+
-
Почему сосредоточиться так сложно
@@ -96,7 +95,7 @@
Дофамин
-
+
-
Что снижает концентрацию внимания?
@@ -137,7 +136,7 @@
Гаджеты
-
+
-
Как концентрироваться лучше, чем золотая рыбка (то есть дольше diff --git a/styles/dark.css b/styles/dark.css index a84dde8..32fb9d3 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -10,35 +10,17 @@ /* цвет шрифта для акцентных элементов */ --accent-color: #ff0070; /* цвет шрифта для заголовков 1 уровня */ - --h1font-colore: #db00ff; + --title_big-color: #db00ff; /* цвет шрифта для заголовков 2 уровня */ - --h2font-colore: #ff0070; + --subtitle-colore: #ff0070; /* цвет шрифта для заголовков 2 уровня с декором*/ - --h2h3font-colore-decor: #000028; + --subtitle-color-decor: #000028; /* цвет шрифта для заголовков 2 и 3 уровня */ --mainfont-color: #f1b2ce; } @media (prefers-color-scheme: dark) { :root { - /* цвет шрифта для акцентных элементов */ - --accent-color: #ff0070; - /* цвет шрифта для заголовков 1 уровня */ - --h1font-colore: #db00ff; - /* цвет шрифта для заголовков 2 уровня */ - --h2font-colore: #ff0070; - /* цвет шрифта для заголовков 2 уровня с декором*/ - --h2h3font-colore-decor: #000028; - /* цвет шрифта для заголовков 2 и 3 уровня */ - --mainfont-color: #f1b2ce; - } - - .page { - background-image: url(../images/cover-image-dark.png); - } - - .decor__element { - display: flex; } } @@ -48,8 +30,8 @@ чем стили в медиазапросе предпочтений пользователя */ background-image: url(../images/cover-image-dark.png); +} - .decor__element { - display: flex; - } +.page.theme_dark.decor__element { + display: flex; } diff --git a/styles/light.css b/styles/light.css index 7bc9c23..a015b27 100644 --- a/styles/light.css +++ b/styles/light.css @@ -10,11 +10,11 @@ /* цвет шрифта для акцентных элементов */ --accent-color: #ff8dcb; /* цвет шрифта для заголовков 1 уровня */ - --h1font-colore: #ffc2e6; + --title_big-color: #ffc2e6; /* цвет шрифта для заголовков 2 уровня */ - --h2font-colore: #353430; + --subtitle-colore: #353430; /* цвет шрифта для заголовков 2 и 3 уровня с декором*/ - --h2h3font-colore-decor: #353430; + --subtitle-color-decor: #353430; /* цвет шрифта для параграфов */ --mainfont-color: #353430; } @@ -26,11 +26,11 @@ /* цвет шрифта для акцентных элементов */ --accent-color: #ff8dcb; /* цвет шрифта для заголовков 1 уровня */ - --h1font-colore: #ffc2e6; + --title_big-color: #ffc2e6; /* цвет шрифта для заголовков 2 уровня */ - --h2font-colore: #353430; + --subtitle-colore: #353430; /* цвет шрифта для заголовков 2 и 3 уровня с декором*/ - --h2h3font-colore-decor: #353430; + --subtitle-color-decor: #353430; /* цвет шрифта для параграфов */ --mainfont-color: #353430; } diff --git a/styles/style.css b/styles/style.css index 91527ff..9ba5341 100644 --- a/styles/style.css +++ b/styles/style.css @@ -22,7 +22,7 @@ } .main-title { - color: var(--h1font-colore, #db00ff); + color: var(--title_big-color, #db00ff); font-family: var(--mainfont, sans-serif); font-weight: 700; font-size: clamp(7.5rem, 0.5625rem + 14.4531vw, 9.8125rem); @@ -84,21 +84,19 @@ text-shadow: 4px 4px 0px var(--accent-color, #ff0070); } -.header__text-block { - justify-self: flex-end; - max-width: 491px; - margin-inline-end: 20px; -} - .header__text { font-family: var(--mainfont, sans-serif); font-weight: 700; font-size: 18px; font-style: normal; line-height: 130%; + justify-self: flex-end; + max-width: 491px; + margin-inline-end: 20px; } .decor__element { + display: flex; position: absolute; top: 20px; right: 29px; @@ -113,7 +111,7 @@ text-transform: uppercase; } -.decor__element::after { +.decor__element-bullet { content: ""; width: 9px; height: 9px; @@ -169,7 +167,7 @@ justify-content: center; } -.container--1 { +.container--why { grid-template-columns: minmax(calc(100vmin / 3 - 20px), 315px) minmax( calc(100vmin * 2 / 3 - 40px), 650px @@ -178,7 +176,7 @@ column-gap: 20px; } -.container--2 { +.container--what { grid-template-columns: minmax(calc(100vmin / 3 - 80px / 3), 315px) minmax(calc(100vmin / 3 - 80px / 3), 315px) @@ -186,7 +184,7 @@ column-gap: 20px; } -.container--3 { +.container--how { grid-template-columns: minmax(calc(100vmin / 3 - 30px), 315px) minmax( calc(100vmin * 2 / 3 - 30px), 650px @@ -230,11 +228,11 @@ } .title__h2 { - color: var(--h2font-colore, #ff0070); + color: var(--subtitle-colore, #ff0070); } .title__h-decor { - color: var(--h2h3font-colore-decor, #000028); + color: var(--subtitle-color-decor, #000028); background-color: var(--accent-color, #ff0070); } diff --git a/styles/variables.css b/styles/variables.css index bd6b794..432a6e2 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -4,6 +4,18 @@ */ :root { --mainfont: "IBM Plex mono"; + /* цвет меню */ + --menu-color: #ff0070; + /* цвет шрифта для акцентных элементов */ + --accent-color: #ff0070; + /* цвет шрифта для заголовков 1 уровня */ + --title_big-color: #db00ff; + /* цвет шрифта для заголовков 2 уровня */ + --subtitle-colore: #ff0070; + /* цвет шрифта для заголовков 2 уровня с декором*/ + --subtitle-color-decor: #000028; + /* цвет шрифта для заголовков 2 и 3 уровня */ + --mainfont-color: #f1b2ce; } @media screen and (min-width: 375px) and (max-width: 768px) { @@ -143,16 +155,16 @@ margin-block-end: 0px; } - .container--1 { + .container--why { grid-template-columns: 1fr; } - .container--2 { + .container--what { grid-template-columns: 1fr; margin-block-start: 30px; } - .container--3 { + .container--how { grid-template-columns: 1fr; gap: 0; margin-block-start: 1px;