From 58739a6b322bdc01c92274bf940029568533c4f8 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Thu, 5 Mar 2020 19:40:45 +0300
Subject: [PATCH] css variables cleanup

---
 src/components/Footer/index.tsx        |  2 +-
 src/style.css                          | 57 ++++++++++++++------------
 src/style/article.css                  | 20 +--------
 src/style/components/document-row.scss | 16 ++------
 src/style/components/document.scss     | 10 +----
 5 files changed, 39 insertions(+), 66 deletions(-)

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index bf09ab38..0f0361a1 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -11,7 +11,7 @@ export interface IFooterProps {
 export const Footer: React.FC<IFooterProps> = props => (
     <footer className={'opposite'}>
         <Block direction={'vertical'} style={{
-            marginBottom: 'var(--single-margin)',
+            marginBottom: 'var(--size-m)',
         }}>
             <Contacts />
         </Block>
diff --git a/src/style.css b/src/style.css
index 200c4eec..1daaef96 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,22 +5,6 @@
     --title-font: Shadow, Georgia, serif;
     --text-font: 'PT Sans', Helvetica, sans-serif;
 
-    --smaller-font-size: 0.9rem;
-
-    /* MENU */
-    --menu-mark-thickness: 4px;
-
-    /* SIZE */
-    --mobile-width: 31.25em;
-
-    /* CONTENT */
-    --content-width: 60%;
-    --content-margin: 0;
-    --content-wide-width: 100%;
-    --content-wide-margin: var(--size-l) var(--size-xl);
-
-    --embed-video-ratio: 56.25%;
-
     /* FONTS */
     --font-size-default: 14pt;
     --font-size-accent: 24pt;
@@ -56,14 +40,16 @@
     --shadow: 0 0 8px var(--color-shadow);
     --shadow-active: 0 4px 16px var(--color-shadow);
 
-    /* MARGINS */
-    --single-margin: 1em;
-
-    /* OTHER */
-    --block-border-radius: 3px;
-
-    /* ARTICLE */
+    /* SPECIAL */
     --article-line-height: 1.5em;
+    --menu-mark-thickness: 4px;
+    --embed-video-ratio: 56.25%;
+
+    /* CONTENT */
+    --content-width: 60%;
+    --content-margin: 0;
+    --content-wide-width: 100%;
+    --content-wide-margin: var(--size-l) var(--size-xl);
 
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
@@ -89,7 +75,7 @@ body {
 }
 
 footer {
-    padding: var(--single-margin);
+    padding: var(--size-m);
     color: var(--color-text-opposite);
     background-color: var(--color-back-opposite);
     font-size: var(--font-size-second);
@@ -103,14 +89,14 @@ h1 {
 }
 
 h2 {
-    margin: var(--single-margin) 0;
+    margin: var(--size-m) 0;
     font-size: var(--font-size-h2);
 
     hyphens: none;
 }
 
 h3 {
-    margin: var(--single-margin) 0;
+    margin: var(--size-m) 0;
 
     font-size: var(--font-size-h3);
 
@@ -169,3 +155,22 @@ a.invisible {
         --kazimir-image-increase: 0px;
     }
 }
+
+/* DARK THEME */
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* TEXT COLOR */
+        --color-text: #cbd0d3;
+        --color-text-second: #bbc2c6;
+        --color-text-opposite: #2c363c;
+
+        --color-back-main: #1a1f22;
+        --color-back: #2c363c;
+        --color-back-opposite: #bbc2c6;
+        --color-link: #666;
+        --color-link-opposite: #8f9aa0;
+
+        --shadow: none;
+        --shadow-active: none;
+    }
+}
diff --git a/src/style/article.css b/src/style/article.css
index 622adc54..c53f0270 100644
--- a/src/style/article.css
+++ b/src/style/article.css
@@ -8,14 +8,14 @@
 
 .article ul {
     margin-left: var(--size-s);
-    margin-bottom: var(--single-margin);
+    margin-bottom: var(--size-m);
 
     list-style: disc;
 }
 
 .article ol {
     margin-left: var(--size-s);
-    margin-bottom: var(--single-margin);
+    margin-bottom: var(--size-m);
 }
 
 .article li {
@@ -54,20 +54,4 @@
     .article blockquote {
         padding: 0
     }
-
-    /* .article {
-        --text-margin: 0;
-    }
-
-    .article img {
-        max-height: 20em;
-    }
-
-    .article ul {
-        margin-left: var(--single-margin);
-    }
-
-    .article ol {
-        margin-left: var(--single-margin);
-    } */
 }
diff --git a/src/style/components/document-row.scss b/src/style/components/document-row.scss
index 2ba2c3f8..aac9f193 100644
--- a/src/style/components/document-row.scss
+++ b/src/style/components/document-row.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   padding: 0;
-  margin-bottom: var(--single-margin);
+  margin-bottom: var(--size-m);
 }
 
 .document-row__image{
@@ -30,23 +30,13 @@
 }
 
 .document-row__file {
-  margin-left: var(--single-margin);
+  margin-left: var(--size-m);
   flex-grow: 10;
 }
 
 .document-row__file-info {
   width: 25%;
   flex-grow: 1;
-  font-size: var(--smaller-font-size);
+  font-size: var(--font-size-second);
   text-align: right;
 }
-
-@media (max-width: var(--mobile-width)) {
-  .document-row__file {
-    margin-left: var(--size-s);
-  }
-
-  .document-row__file-info {
-    display: none;
-  }
-}
diff --git a/src/style/components/document.scss b/src/style/components/document.scss
index edaad1ca..22cfe83f 100644
--- a/src/style/components/document.scss
+++ b/src/style/components/document.scss
@@ -11,7 +11,7 @@
   //width: 20em;
   //height: 20em;
 
-  margin-bottom: var(--single-margin);
+  margin-bottom: var(--size-m);
 
   //display: flex;
   //justify-content: center;
@@ -37,11 +37,5 @@
 }
 
 .document__file-info {
-  font-size: var(--smaller-font-size);
-}
-
-@media (max-width: var(--mobile-width)) {
-  .document {
-    margin: 0 var(--single-margin) var(--single-margin);
-  }
+  font-size: var(--font-size-second);
 }