From 85873bd383313803f1353d22816874b5e3a9c5d4 Mon Sep 17 00:00:00 2001 From: Gadzhi Ibragimov Date: Sat, 2 Mar 2024 13:24:19 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BE=D1=82=D0=BA=D0=BE=D1=80=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20dark.css=20?= =?UTF-8?q?=D0=B8=20=D0=B2=D1=81=D0=B5=20=D1=81=D0=B2=D1=8F=D0=B7=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=BE=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 21 ++++++++++----------- styles/dark.css | 30 ++++++------------------------ styles/light.css | 12 ++++++------ styles/style.css | 24 +++++++++++------------- styles/variables.css | 18 +++++++++++++++--- 5 files changed, 48 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 4ee46b4..50d6198 100644 --- a/index.html +++ b/index.html @@ -44,19 +44,18 @@ - -

no focus

-
-

- Что делать, когда не можешь делать ничего
- Или почему нам так сложно сконцентрироваться, особенно когда очень - надо -

+ +

no focus

+

+ Что делать, когда не можешь делать ничего
+ Или почему нам так сложно сконцентрироваться, особенно когда очень надо +

-
    +

    • Почему сосредоточиться так сложно

      • @@ -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;