откорректирован dark.css и все связи по ошибкам

gadjster · Mar 2, 2024 · 85873bd · 85873bd
1 parent 5117d23
commit 85873bd
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -44,19 +44,18 @@
           </li>
         </ul>
       </nav>
-      <div class="decor__element" aria-hidden="true">rec</div>
-      <h1 class="main-title header__title">no focus</h1>
-      <div class="header__text-block">
-        <p class="header__text title__h-decor">
-          Что делать, когда не можешь делать ничего<br />
-          Или почему нам так сложно сконцентрироваться, особенно когда очень
-          надо
-        </p>
+      <div class="decor__element" aria-hidden="true">
+        rec <span class="decor__element-bullet"></span>
       </div>
+      <h1 class="main-title header__title">no focus</h1>
+      <p class="header__text title__h-decor">
+        Что делать, когда не можешь делать ничего<br />
+        Или почему нам так сложно сконцентрироваться, особенно когда очень надо
+      </p>
     </header>
     <main class="main">
       <section class="section">
-        <ul class="container container--1">
+        <ul class="container container--why">
           <li class="card-vert-title">
             <h2 class="title title__h2">Почему сосредоточиться так сложно</h2>
           </li>
@@ -96,7 +95,7 @@ <h3 class="title title__h-decor">Дофамин</h3>
         </ul>
       </section>
       <section class="section">
-        <ul class="container container--2">
+        <ul class="container container--what">
           <li class="card__row-title">
             <h2 class="title title__h2">Что снижает концентрацию внимания?</h2>
           </li>
@@ -137,7 +136,7 @@ <h3 class="title title__h-decor">Гаджеты</h3>
         </ul>
       </section>
       <section class="section">
-        <ul class="container container--3">
+        <ul class="container container--how">
           <li class="card-vert-title">
             <h2 class="title title__h2">
               Как концентрироваться лучше, чем золотая рыбка (то есть дольше

diff --git 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
@@ -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
@@ -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,15 +176,15 @@
   column-gap: 20px;
 }
 
-.container--2 {
+.container--what {
   grid-template-columns:
     minmax(calc(100vmin / 3 - 80px / 3), 315px)
     minmax(calc(100vmin / 3 - 80px / 3), 315px)
     minmax(calc(100vmin / 3 - 80px / 3), 315px);
   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
@@ -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;