article update

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

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 />

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

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

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