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] 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";