Merge pull request #40 from tmshv/fix/article-layout-update

Article layout update

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

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

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

src/components/Page/index.tsx

@@ -1,28 +1,24 @@
+import './styles.css'
+
 import { Share } from '../Share'
 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'}>
-        <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>
+export const Page: React.FC<PageProps> = props => (
+    <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

@@ -8,20 +8,12 @@
     --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;
 
     /* SIZE */
     --mobile-width: 31.25em;
-    --desktop-width: 59.99999em;
-
-    --tablet-min-width: 31.25em;
-    --tablet-max-width: 64em;
 
     /* CONTENT */
     --content-width: 60%;
@@ -33,10 +25,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 */
@@ -79,15 +72,14 @@
     --shadow-active: 0 4px 16px var(--color-shadow);
 
     /* MARGINS */
-    --small-margin: 0.2em;
-    --half-margin: 0.5em;
     --single-margin: 1em;
-    --double-margin: 2em;
-    --post-margin: 5em;
 
     /* OTHER */
     --block-border-radius: 3px;
 
+    /* ARTICLE */
+    --article-line-height: 1.5em;
+
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
     --kazimir-radius: 5px;
@@ -114,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 {
@@ -181,12 +173,8 @@ 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-default: 14pt;
+        --font-size-accent: 16pt;
         --font-size-h1: 1.5rem;
         --font-size-h2: 1.5rem;
         --font-size-h3: 1.25rem;

src/style/article.css

@@ -0,0 +1,74 @@
+.article {
+    hyphens: auto;
+}
+
+.article h1 {
+    margin-bottom: var(--size-s);
+}
+
+.article ul {
+    margin-left: var(--size-s);
+    margin-bottom: var(--single-margin);
+
+    list-style: disc;
+}
+
+.article ol {
+    margin-left: var(--size-s);
+    margin-bottom: var(--single-margin);
+}
+
+.article li {
+    margin-bottom: var(--size-s);
+}
+
+.article p {
+    margin-bottom: var(--size-m);
+    line-height: var(--article-line-height);
+}
+
+.article p:last-child {
+    margin-bottom: 0;
+}
+
+.article blockquote {
+    padding: var(--size-m);
+    font-size: var(--font-size-accent);
+}
+
+.article cite {
+    display: block;
+    font-size: var(--font-size-default);
+    text-align: right;
+
+    margin-top: var(--size-m);
+}
+
+.article hr {
+    margin-bottom: var(--size-xl);
+    border: none;
+    height: 1px;
+    background: var(--dark-color);
+}
+
+@media (max-width: 31.25em){
+    .article blockquote {
+        padding: 0
+    }
+
+    /* .article {
+        --text-margin: 0;
+    }
+
+    .article img {
+        max-height: 20em;
+    }
+
+    .article ul {
+        margin-left: var(--single-margin);
+    }
+
+    .article 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/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 {

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{

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;

src/style/style.scss

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