From 029d147b6beff13f4939a3f7f699d14d1ebc7ad8 Mon Sep 17 00:00:00 2001
From: Roman Timashev <tmshv@yandex-team.ru>
Date: Sat, 14 Oct 2017 02:59:41 +0300
Subject: [PATCH] [www] Using CSS Variables for common style: font size, base
 color, some sizes

---
 src/style/components/article.scss | 22 ++++++++++++++++------
 src/style/main.scss               | 10 ++++++++++
 src/style/variables.scss          | 16 ++++++++++++++++
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/style/components/article.scss b/src/style/components/article.scss
index 0a046efd..c7856575 100644
--- a/src/style/components/article.scss
+++ b/src/style/components/article.scss
@@ -1,6 +1,10 @@
 @import "../variables";
 
 .article {
+  --article-line-height: 1.75em;
+  --article-quote-padding: 1em;
+  --article-quote-font-size: 1.25em;
+
   hyphens: auto;
 
   margin-bottom: $post-margin;
@@ -9,13 +13,11 @@
     margin-bottom: 1.25em;
 
     h1 {
-      font-size: $biggest-font-size;
       text-align: center;
       margin-bottom: $small-margin;
     }
 
     h2 {
-      font-size: $big-font-size;
       text-align: center;
     }
 
@@ -45,18 +47,18 @@
       --margin: 20px;
       margin-left: var(--margin);
       margin-right: var(--margin);
-      margin-bottom: 1.75em;
-      line-height: 1.75em;
+      margin-bottom: var(--article-line-height);
+      line-height: var(--article-line-height);
     }
 
     blockquote {
       background-color: hsl(215, 10%, 96%);
-      padding: 1em 1em .5em;
+      padding: var(--article-quote-padding);
       margin: $single-margin 0;
       font-family: $title-font;
       font-style: italic;
       font-weight: normal;
-      font-size: 1.25em;
+      font-size: var(--article-quote-font-size);
 
       cite {
         margin-top: $single-margin;
@@ -73,10 +75,18 @@
 
 @media (max-width: $mobile-width) {
   .article {
+    --article-line-height: 1.5em;
+    --article-quote-padding: .5em;
+    --article-quote-font-size: 1em;
+
     &__body {
       img {
         max-height: 20em;
       }
+
+      p {
+        --margin: 0;
+      }
     }
   }
 }
diff --git a/src/style/main.scss b/src/style/main.scss
index 046aea88..1deaf7b3 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -11,15 +11,25 @@ html, body {
 
 body {
   min-width: 320px;
+
+  color: var(--text-color);
+}
+
+h1 {
+  font-size: var(--font-size-h1);
 }
 
 h2{
   text-align: center;
   margin-bottom: $single-margin;
+
+  font-size: var(--font-size-h2);
 }
 
 h3{
   margin-bottom:  $single-margin / 2;
+
+  font-size: var(--font-size-h3);
 }
 
 .actor {
diff --git a/src/style/variables.scss b/src/style/variables.scss
index 551d06eb..ca5a0238 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -71,3 +71,19 @@ $short-duration: 0.3s;
   $big-font-size: 1.3rem;
   $biggest-font-size: 2.0rem;
 }
+
+:root {
+  --text-color: #303030;
+
+  --font-size-h1: 2.0rem;
+  --font-size-h2: 1.3rem;
+  --font-size-h3: 1.1rem;
+}
+
+@media (max-width: $mobile-width) {
+  :root {
+    --font-size-h1: 1.5rem;
+    --font-size-h2: 1.25rem;
+    --font-size-h3: 1rem;
+  }
+}