From 8ef299f876ebb57d81f598134647e4c1b8147f05 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 17 Feb 2021 19:52:01 +0300
Subject: [PATCH] some layout updates

---
 src/components/Contacts/index.tsx |  7 +++----
 src/components/PageGrid/Date.tsx  |  2 +-
 src/style/article.css             |  2 +-
 src/style/style.css               | 21 +++++++++------------
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx
index 0bd47042..6b546f04 100644
--- a/src/components/Contacts/index.tsx
+++ b/src/components/Contacts/index.tsx
@@ -7,17 +7,16 @@ export const Contacts: React.FC = props => {
     return (
         <>
             <style jsx>{`
-                h4 {
-                    margin-bottom: var(--size-s);
+                strong {
+                    margin-bottom: var(--size-m);
                 }
 
                 p {
-                    margin-left: var(--size-m);
                     margin-bottom: var(--size-s);
                 }
             `}</style>
 
-            <h4>Контактная информация</h4>
+            <strong>Контактная информация</strong>
 
             {contacts.map((x, i) => (
                 <p key={i}><a href={x.value}>{x.title}</a></p>
diff --git a/src/components/PageGrid/Date.tsx b/src/components/PageGrid/Date.tsx
index 2ad47fe4..507227c2 100644
--- a/src/components/PageGrid/Date.tsx
+++ b/src/components/PageGrid/Date.tsx
@@ -8,7 +8,7 @@ export const Date: React.FC<DateProps> = props => (
     <p style={props.style}>
         <style jsx>{`
             p {
-                color: var(--color-text-second);
+                color: var(--color-text);
                 font-size: var(--font-size-second);
             }
         `}</style>
diff --git a/src/style/article.css b/src/style/article.css
index d5b23251..50826c78 100644
--- a/src/style/article.css
+++ b/src/style/article.css
@@ -3,7 +3,7 @@
 }
 
 .article h1 {
-    margin-bottom: var(--size-s);
+    margin-bottom: var(--size-m);
 }
 
 .article ul {
diff --git a/src/style/style.css b/src/style/style.css
index 1b6172a3..6ba53aa3 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -27,11 +27,11 @@
     --color-shadow: rgba(27, 51, 88, 0.25);
 
     /* SIZE */
-    --size-xs: 0.35em;
-    --size-s: 0.75em;
-    --size-m: 1em;
-    --size-l: 2em;
-    --size-xl: 3em;
+    --size-xs: 0.35rem;
+    --size-s: 0.75rem;
+    --size-m: 1.25rem;
+    --size-l: 2rem;
+    --size-xl: 3rem;
 
     /* EFFECTS */
     --radius: 16px;
@@ -81,6 +81,7 @@ footer {
 }
 
 h1 {
+    font-family: var(--title-font);
     text-align: center;
     font-size: var(--font-size-h1);
 
@@ -88,6 +89,7 @@ h1 {
 }
 
 h2 {
+    font-family: var(--title-font);
     margin: var(--size-m) 0;
     font-size: var(--font-size-h2);
 
@@ -102,11 +104,6 @@ h3 {
     hyphens: none;
 }
 
-h1,
-h2 {
-    font-family: var(--title-font);
-}
-
 a {
     color: var(--color-text);
 
@@ -159,8 +156,8 @@ a.invisible {
 @media (prefers-color-scheme: dark) {
     :root {
         /* TEXT COLOR */
-        --color-text: hsl(240, 10%, 90%);
-        --color-text-second: hsl(240, 10%, 90%);
+        --color-text: hsl(240, 10%, 80%);
+        --color-text-second: hsl(240, 10%, 60%);
         --color-text-opposite: hsl(240, 10%, 15%);
 
         --color-back-main: hsl(240, 10%, 10%);