initial article update: scss to css; minor refactoring

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>

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'

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;

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;

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);
+    }
+}

src/style/components/Article.scss

@@ -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);
-            }
-        }
-    }
-}

src/style/style.scss

@@ -1,3 +1,2 @@
 @import "components/document";
 @import "components/document-row";
-@import "components/Article";