From fa8b77252d2108cbad3080e8bc04d93baac64f40 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 4 Mar 2020 15:25:13 +0300
Subject: [PATCH 1/5] initial article update: scss to css; minor refactoring

---
 pages/[...slug].tsx               |  3 ++
 pages/_app.tsx                    |  1 +
 src/components/Page/index.tsx     |  7 +--
 src/style.css                     |  6 ++-
 src/style/article.css             | 81 ++++++++++++++++++++++++++++
 src/style/components/Article.scss | 87 -------------------------------
 src/style/style.scss              |  1 -
 7 files changed, 94 insertions(+), 92 deletions(-)
 create mode 100644 src/style/article.css
 delete mode 100644 src/style/components/Article.scss

diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index 2c577e48..ae80cffb 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -40,6 +40,9 @@ const Index: NextPage<Props> = props => (
         <Page
             tags={props.tags}
             date={props.date ? new Date(props.date) : null}
+            style={{
+                marginBottom: 'var(--size-xl)',
+            }}
         >
             {props.content}
         </Page>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d1f613e5..b44f2e92 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import 'src/style.css'
 import 'src/style/content.css'
+import 'src/style/article.css'
 import 'src/style/marker/marker-table.css'
 import 'src/style/kazimir/image.css'
 import 'src/style/kazimir/video.css'
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 09176002..196978be 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -3,14 +3,15 @@ import { Html } from '../Html'
 import { PageMeta } from '../PageMeta'
 import { ITag } from 'src/types'
 
-export interface IPageProps {
+export type PageProps = {
+    style?: React.CSSProperties
     children: string
     date: Date
     tags: ITag[]
 }
 
-export const Page: React.FC<IPageProps> = props => (
-    <div className={'Article'}>
+export const Page: React.FC<PageProps> = props => (
+    <div className={'Article'} style={props.style}>
         <style jsx>{`
             hr {
                 border: 1px solid black;
diff --git a/src/style.css b/src/style.css
index 1f0e20a7..e86a81c9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -83,11 +83,15 @@
     --half-margin: 0.5em;
     --single-margin: 1em;
     --double-margin: 2em;
-    --post-margin: 5em;
 
     /* OTHER */
     --block-border-radius: 3px;
 
+    /* ARTICLE */
+    --article-line-height: 1.5em;
+    --article-quote-padding: var(--half-margin);
+    --article-quote-font-size: 1.25em;
+
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
     --kazimir-radius: 5px;
diff --git a/src/style/article.css b/src/style/article.css
new file mode 100644
index 00000000..6ca20841
--- /dev/null
+++ b/src/style/article.css
@@ -0,0 +1,81 @@
+.Article-Body {
+    hyphens: auto;
+}
+
+.Article-Body h1 {
+    margin-bottom: var(--size-s);
+}
+
+.Article-Body ul {
+    margin-left: var(--half-margin);
+    margin-bottom: var(--single-margin);
+
+    list-style: disc;
+}
+
+.Article-Body ol {
+    margin-left: var(--half-margin);
+    margin-bottom: var(--single-margin);
+}
+
+.Article-Body li {
+    margin-bottom: var(--half-margin);
+}
+
+.Article-Body p {
+    margin-bottom: var(--article-line-height);
+    line-height: var(--article-line-height);
+}
+
+.Article-Body blockquote {
+    background-color: hsl(215, 10%, 96%);
+    padding: var(--article-quote-padding);
+    margin: var(--single-margin) 0;
+    font-family: var(--title-font);
+    font-style: italic;
+    font-weight: normal;
+    font-size: var(--article-quote-font-size);
+
+    border-radius: var(--block-border-radius);
+}
+
+.Article-Body cite {
+    margin-top: var(--single-margin);
+    display: block;
+    color: #aaa;
+    font-size: initial;
+    font-family: var(--text-font);
+    text-align: right;
+    margin-right: var(--single-margin);
+}
+
+.Article-Body hr {
+    margin-bottom: var(--double-margin);
+    border: none;
+    height: 1px;
+    background: var(--dark-color);
+}
+
+@media (max-width: var(--mobile-width)) {
+    .Article {
+        --article-line-height: 1.5em;
+        --article-quote-padding: 0.5em;
+        --article-quote-font-size: 1em;
+    }
+
+    .Article-Body {
+        --text-margin: 0;
+    }
+
+    .Article-Body img {
+        max-height: 20em;
+    }
+
+    .Article-Body ul {
+        margin-left: var(--single-margin);
+    }
+
+    .Article-Body ol {
+        margin-left: var(--single-margin);
+    }
+}
diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss
deleted file mode 100644
index 79100fa9..00000000
--- a/src/style/components/Article.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.Article {
-    --article-line-height: 1.5em;
-    --article-quote-padding: var(--half-margin);
-    --article-quote-font-size: 1.25em;
-
-    hyphens: auto;
-    margin-bottom: var(--post-margin);
-
-    h1 {
-        margin-bottom: var(--size-s);
-    }
-
-    &-Body {
-        ul,
-        ol {
-            margin-left: var(--half-margin);
-            margin-bottom: var(--single-margin);
-
-            li {
-                margin-bottom: var(--half-margin);
-            }
-        }
-
-        ul {
-            list-style: disc;
-        }
-
-        p {
-            margin-bottom: var(--article-line-height);
-            line-height: var(--article-line-height);
-        }
-
-        blockquote {
-            background-color: hsl(215, 10%, 96%);
-            padding: var(--article-quote-padding);
-            margin: var(--single-margin) 0;
-            font-family: var(--title-font);
-            font-style: italic;
-            font-weight: normal;
-            font-size: var(--article-quote-font-size);
-
-            border-radius: var(--block-border-radius);
-
-            cite {
-                margin-top: var(--single-margin);
-                display: block;
-                color: #aaa;
-                font-size: initial;
-                font-family: var(--text-font);
-                text-align: right;
-                margin-right: var(--single-margin);
-            }
-
-            p {
-                margin-bottom: 0;
-            }
-        }
-
-        hr {
-            margin-bottom: var(--double-margin);
-            border: none;
-            height: 1px;
-            background: var(--dark-color);
-        }
-    }
-}
-
-@media (max-width: var(--mobile-width)) {
-    .Article {
-        --article-line-height: 1.5em;
-        --article-quote-padding: 0.5em;
-        --article-quote-font-size: 1em;
-
-        &-Body {
-            --text-margin: 0;
-
-            img {
-                max-height: 20em;
-            }
-
-            ul,
-            ol {
-                margin-left: var(--single-margin);
-            }
-        }
-    }
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index be6ff9d1..19c97863 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -1,3 +1,2 @@
 @import "components/document";
 @import "components/document-row";
-@import "components/Article";

From bf007b583c51899ae75ec303f7f625412492b150 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 4 Mar 2020 15:41:01 +0300
Subject: [PATCH 2/5] page layout upd

---
 pages/[...slug].tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index ae80cffb..05ca6e7a 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -26,7 +26,8 @@ type Props = {
 const Index: NextPage<Props> = props => (
     <App
         contentStyle={{
-            marginTop: 'var(--size-l)'
+            marginTop: 'var(--size-l)',
+            marginBottom: 'var(--size-xl)',
         }}
         breadcrumbs={props.breadcrumb}
     >
@@ -40,9 +41,6 @@ const Index: NextPage<Props> = props => (
         <Page
             tags={props.tags}
             date={props.date ? new Date(props.date) : null}
-            style={{
-                marginBottom: 'var(--size-xl)',
-            }}
         >
             {props.content}
         </Page>

From 830a193333a74540d7f405bd40d58caa800484b2 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 4 Mar 2020 15:41:28 +0300
Subject: [PATCH 3/5] article update

---
 src/components/Html/index.tsx  | 15 ++++++++++++---
 src/components/Page/index.tsx  | 21 ++++++++-------------
 src/components/Page/styles.css |  5 +++++
 src/style.css                  |  4 ++++
 src/style/article.css          | 32 +++++++++++++-------------------
 5 files changed, 42 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Page/styles.css

diff --git a/src/components/Html/index.tsx b/src/components/Html/index.tsx
index 74b3c30b..f7f552ce 100644
--- a/src/components/Html/index.tsx
+++ b/src/components/Html/index.tsx
@@ -1,7 +1,16 @@
+import { createElement } from 'react'
+
 export type HtmlProps = {
+    className?: string
+    as?: keyof HTMLElementTagNameMap
     html: string
 }
 
-export const Html: React.FC<HtmlProps> = props => (
-    <div dangerouslySetInnerHTML={{ __html: props.html }} />
-)
+export const Html: React.FC<HtmlProps> = ({ as = 'div', ...props }) => {
+    return createElement(as, {
+        className: props.className,
+        dangerouslySetInnerHTML: {
+            __html: props.html,
+        }
+    })
+}
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 196978be..efb74fb5 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -1,3 +1,5 @@
+import './styles.css'
+
 import { Share } from '../Share'
 import { Html } from '../Html'
 import { PageMeta } from '../PageMeta'
@@ -11,19 +13,12 @@ export type PageProps = {
 }
 
 export const Page: React.FC<PageProps> = props => (
-    <div className={'Article'} style={props.style}>
-        <style jsx>{`
-            hr {
-                border: 1px solid black;
-                margin-top: var(--size-m);
-                margin-bottom: var(--size-m);
-            }
-        `}</style>
-        <div className={'Article-Body'}>
-            <Html
-                html={props.children}
-            />
-        </div>
+    <div className={'page'} style={props.style}>
+        <Html
+            as={'article'}
+            className={'article'}
+            html={props.children}
+        />
 
         <hr />
         <Share />
diff --git a/src/components/Page/styles.css b/src/components/Page/styles.css
new file mode 100644
index 00000000..bfb179f0
--- /dev/null
+++ b/src/components/Page/styles.css
@@ -0,0 +1,5 @@
+.page hr {
+    border: 1px solid black;
+    margin-top: var(--size-m);
+    margin-bottom: var(--size-m);
+}
diff --git a/src/style.css b/src/style.css
index e86a81c9..4958968c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -200,5 +200,9 @@ a.invisible {
         --content-wide-margin: var(--size-m) var(--size-m);
 
         --kazimir-image-increase: 0px;
+
+        --article-line-height: 1.5em;
+        --article-quote-padding: 0.5em;
+        --article-quote-font-size: 1em;
     }
 }
diff --git a/src/style/article.css b/src/style/article.css
index 6ca20841..edc46ee1 100644
--- a/src/style/article.css
+++ b/src/style/article.css
@@ -1,33 +1,33 @@
-.Article-Body {
+.article {
     hyphens: auto;
 }
 
-.Article-Body h1 {
+.article h1 {
     margin-bottom: var(--size-s);
 }
 
-.Article-Body ul {
+.article ul {
     margin-left: var(--half-margin);
     margin-bottom: var(--single-margin);
 
     list-style: disc;
 }
 
-.Article-Body ol {
+.article ol {
     margin-left: var(--half-margin);
     margin-bottom: var(--single-margin);
 }
 
-.Article-Body li {
+.article li {
     margin-bottom: var(--half-margin);
 }
 
-.Article-Body p {
+.article p {
     margin-bottom: var(--article-line-height);
     line-height: var(--article-line-height);
 }
 
-.Article-Body blockquote {
+.article blockquote {
     background-color: hsl(215, 10%, 96%);
     padding: var(--article-quote-padding);
     margin: var(--single-margin) 0;
@@ -39,7 +39,7 @@
     border-radius: var(--block-border-radius);
 }
 
-.Article-Body cite {
+.article cite {
     margin-top: var(--single-margin);
     display: block;
     color: #aaa;
@@ -49,7 +49,7 @@
     margin-right: var(--single-margin);
 }
 
-.Article-Body hr {
+.article hr {
     margin-bottom: var(--double-margin);
     border: none;
     height: 1px;
@@ -57,25 +57,19 @@
 }
 
 @media (max-width: var(--mobile-width)) {
-    .Article {
-        --article-line-height: 1.5em;
-        --article-quote-padding: 0.5em;
-        --article-quote-font-size: 1em;
-    }
-
-    .Article-Body {
+    .article {
         --text-margin: 0;
     }
 
-    .Article-Body img {
+    .article img {
         max-height: 20em;
     }
 
-    .Article-Body ul {
+    .article ul {
         margin-left: var(--single-margin);
     }
 
-    .Article-Body ol {
+    .article ol {
         margin-left: var(--single-margin);
     }
 }

From 19f2535a24fc1e36d9f71e11924aafc5a80e0f05 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 4 Mar 2020 21:30:58 +0300
Subject: [PATCH 4/5] styles updated; unused removed

---
 src/style.css         | 11 ++---------
 src/style/article.css | 25 ++++++++++---------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/style.css b/src/style.css
index 4958968c..701e89b4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -8,10 +8,6 @@
     --text-font: 'PT Sans', Helvetica, sans-serif;
 
     --smaller-font-size: 0.9rem;
-    --normal-font-size: 1rem;
-    --bigger-font-size: 1.2rem;
-    --big-font-size: 1.5rem;
-    --biggest-font-size: 2.25rem;
 
     /* MENU */
     --menu-mark-thickness: 4px;
@@ -33,10 +29,11 @@
 
     /* FONTS */
     --font-size-default: 14pt;
+    --font-size-accent: 24pt;
     --font-size-second: 12pt;
 
     --font-size-h1: 5rem;
-    --font-size-h2: 2.5rem;
+    --font-size-h2: 3rem;
     --font-size-h3: 1.5rem;
 
     /* COLOR */
@@ -186,10 +183,6 @@ a.invisible {
 @media (max-width: 31.25em) {
     :root {
         --smaller-font-size: 0.9rem;
-        --normal-font-size: 1rem;
-        --bigger-font-size: 1.1rem;
-        --big-font-size: 1.3rem;
-        --biggest-font-size: 2rem;
 
         --font-size-h1: 1.5rem;
         --font-size-h2: 1.5rem;
diff --git a/src/style/article.css b/src/style/article.css
index edc46ee1..b7e010c4 100644
--- a/src/style/article.css
+++ b/src/style/article.css
@@ -23,30 +23,25 @@
 }
 
 .article p {
-    margin-bottom: var(--article-line-height);
+    margin-bottom: var(--size-m);
     line-height: var(--article-line-height);
 }
 
-.article blockquote {
-    background-color: hsl(215, 10%, 96%);
-    padding: var(--article-quote-padding);
-    margin: var(--single-margin) 0;
-    font-family: var(--title-font);
-    font-style: italic;
-    font-weight: normal;
-    font-size: var(--article-quote-font-size);
+.article p:last-child {
+    margin-bottom: 0;
+}
 
-    border-radius: var(--block-border-radius);
+.article blockquote {
+    padding: var(--size-m);
+    font-size: var(--font-size-accent);
 }
 
 .article cite {
-    margin-top: var(--single-margin);
     display: block;
-    color: #aaa;
-    font-size: initial;
-    font-family: var(--text-font);
+    font-size: var(--font-size-default);
     text-align: right;
-    margin-right: var(--single-margin);
+
+    margin-top: var(--size-m);
 }
 
 .article hr {

From a4999dad9e8b1e336acfa3bca64adbe1157aa7f2 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 4 Mar 2020 22:49:24 +0300
Subject: [PATCH 5/5] css variables refactoring

---
 src/components/Contacts/index.tsx      |  6 +++---
 src/components/HudozkaTitle/index.tsx  |  2 +-
 src/style.css                          | 19 +++----------------
 src/style/article.css                  | 18 +++++++++++-------
 src/style/components/document-row.scss |  2 +-
 src/style/components/document.scss     |  2 +-
 src/style/marker/marker-table.css      |  2 +-
 7 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx
index 27fd91e5..0bd47042 100644
--- a/src/components/Contacts/index.tsx
+++ b/src/components/Contacts/index.tsx
@@ -8,12 +8,12 @@ export const Contacts: React.FC = props => {
         <>
             <style jsx>{`
                 h4 {
-                    margin-bottom: var(--half-margin);
+                    margin-bottom: var(--size-s);
                 }
 
                 p {
-                    margin-left: var(--single-margin);
-                    margin-bottom: var(--half-margin);
+                    margin-left: var(--size-m);
+                    margin-bottom: var(--size-s);
                 }
             `}</style>
 
diff --git a/src/components/HudozkaTitle/index.tsx b/src/components/HudozkaTitle/index.tsx
index e0f1efcc..5450401b 100644
--- a/src/components/HudozkaTitle/index.tsx
+++ b/src/components/HudozkaTitle/index.tsx
@@ -17,7 +17,7 @@ export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
 
             @media (max-width: 31.25em) {
                 div {
-                    --padding: 0 0 var(--double-margin);
+                    --padding: 0 0 2em;
                 }
             }
         `}</style>
diff --git a/src/style.css b/src/style.css
index 701e89b4..0017a251 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,10 +14,6 @@
 
     /* SIZE */
     --mobile-width: 31.25em;
-    --desktop-width: 59.99999em;
-
-    --tablet-min-width: 31.25em;
-    --tablet-max-width: 64em;
 
     /* CONTENT */
     --content-width: 60%;
@@ -76,18 +72,13 @@
     --shadow-active: 0 4px 16px var(--color-shadow);
 
     /* MARGINS */
-    --small-margin: 0.2em;
-    --half-margin: 0.5em;
     --single-margin: 1em;
-    --double-margin: 2em;
 
     /* OTHER */
     --block-border-radius: 3px;
 
     /* ARTICLE */
     --article-line-height: 1.5em;
-    --article-quote-padding: var(--half-margin);
-    --article-quote-font-size: 1.25em;
 
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
@@ -115,7 +106,7 @@ footer {
     padding: var(--single-margin);
     color: var(--color-text-opposite);
     background-color: var(--color-back-opposite);
-    font-size: var(--smaller-font-size);
+    font-size: var(--font-size-second);
 }
 
 h1 {
@@ -182,8 +173,8 @@ a.invisible {
 
 @media (max-width: 31.25em) {
     :root {
-        --smaller-font-size: 0.9rem;
-
+        --font-size-default: 14pt;
+        --font-size-accent: 16pt;
         --font-size-h1: 1.5rem;
         --font-size-h2: 1.5rem;
         --font-size-h3: 1.25rem;
@@ -193,9 +184,5 @@ a.invisible {
         --content-wide-margin: var(--size-m) var(--size-m);
 
         --kazimir-image-increase: 0px;
-
-        --article-line-height: 1.5em;
-        --article-quote-padding: 0.5em;
-        --article-quote-font-size: 1em;
     }
 }
diff --git a/src/style/article.css b/src/style/article.css
index b7e010c4..d271b05d 100644
--- a/src/style/article.css
+++ b/src/style/article.css
@@ -7,19 +7,19 @@
 }
 
 .article ul {
-    margin-left: var(--half-margin);
+    margin-left: var(--size-s);
     margin-bottom: var(--single-margin);
 
     list-style: disc;
 }
 
 .article ol {
-    margin-left: var(--half-margin);
+    margin-left: var(--size-s);
     margin-bottom: var(--single-margin);
 }
 
 .article li {
-    margin-bottom: var(--half-margin);
+    margin-bottom: var(--size-s);
 }
 
 .article p {
@@ -45,14 +45,18 @@
 }
 
 .article hr {
-    margin-bottom: var(--double-margin);
+    margin-bottom: var(--size-xl);
     border: none;
     height: 1px;
     background: var(--dark-color);
 }
 
-@media (max-width: var(--mobile-width)) {
-    .article {
+@media (max-width: 31.25em){
+    .article blockquote {
+        padding: 0
+    }
+
+    /* .article {
         --text-margin: 0;
     }
 
@@ -66,5 +70,5 @@
 
     .article ol {
         margin-left: var(--single-margin);
-    }
+    } */
 }
diff --git a/src/style/components/document-row.scss b/src/style/components/document-row.scss
index 514479dc..23e5487e 100644
--- a/src/style/components/document-row.scss
+++ b/src/style/components/document-row.scss
@@ -43,7 +43,7 @@
 
 @media (max-width: var(--mobile-width)) {
   .document-row__file {
-    margin-left: var(--half-margin);
+    margin-left: var(--size-s);
   }
 
   .document-row__file-info {
diff --git a/src/style/components/document.scss b/src/style/components/document.scss
index e7af27fd..1cc23000 100644
--- a/src/style/components/document.scss
+++ b/src/style/components/document.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   padding: 0;
-  margin-bottom: var(--double-margin);
+  margin-bottom: var(--size-xl);
 }
 
 .document__image{
diff --git a/src/style/marker/marker-table.css b/src/style/marker/marker-table.css
index bb40307d..56e6fdbe 100644
--- a/src/style/marker/marker-table.css
+++ b/src/style/marker/marker-table.css
@@ -1,6 +1,6 @@
 .MarkerTable {
     width: 100%;
-    margin-bottom: var(--double-margin);
+    margin-bottom: var(--size-l);
 
     border-spacing: 0;
     border-collapse: separate;