some layout updates

src/components/Contacts/index.tsx

@@ -7,17 +7,16 @@ export const Contacts: React.FC = props => {
     return (
         <>
             <style jsx>{`
-                h4 {
+                strong {
-                    margin-bottom: var(--size-s);
+                    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>

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>

src/style/article.css

@@ -3,7 +3,7 @@
 }
 
 .article h1 {
-    margin-bottom: var(--size-s);
+    margin-bottom: var(--size-m);
 }
 
 .article ul {

src/style/style.css

@@ -27,11 +27,11 @@
     --color-shadow: rgba(27, 51, 88, 0.25);
 
     /* SIZE */
-    --size-xs: 0.35em;
+    --size-xs: 0.35rem;
-    --size-s: 0.75em;
+    --size-s: 0.75rem;
-    --size-m: 1em;
+    --size-m: 1.25rem;
-    --size-l: 2em;
+    --size-l: 2rem;
-    --size-xl: 3em;
+    --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: hsl(240, 10%, 80%);
-        --color-text-second: hsl(240, 10%, 90%);
+        --color-text-second: hsl(240, 10%, 60%);
         --color-text-opposite: hsl(240, 10%, 15%);
 
         --color-back-main: hsl(240, 10%, 10%);