opti: article styles

_sass/common/_reset.scss

@@ -1,3 +1,16 @@
+@mixin block-elements {
+  h1, h2, h3, h4, h5, h6, p,
+  hr, blockquote, figure, pre, .highlighter-rouge,
+  ul, ol, dl, table, .footnotes {
+    @content;
+  }
+}
+@mixin heading-elements {
+  h1, h2, h3, h4, h5, h6 {
+    @content;
+  }
+}
+
 *,
 ::before,
 ::after {
@@ -19,19 +32,7 @@ body {
   padding: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-ul,
-ol,
-dl,
-figure {
+@include block-elements() {
   margin: map-get($base, vertical-space) 0;
   padding: 0;
 }
@@ -132,6 +133,7 @@ pre, code {
 
 code {
   font-size: map-get($base, font-size-tiny);
+  line-height: map-get($base, line-height-small);
 }
 
 figure>img {

_sass/common/_variables.scss

@@ -27,15 +27,15 @@ $base: (
   font-size-h5-excerpt:   .9rem,
   font-size-h6-excerpt:   .9rem,
 
-  font-weight-light:      300,
   font-weight:            400,
   font-weight-bold:       700,
 
+  line-height-small:      1.4,
   line-height:            1.6,
   line-height-large:      1.8,
 
   vertical-space:         .5rem,
-  vertical-space-large:   1rem,
+  vertical-space-large:   1.4rem,
   horizontal-space:       .25rem,
   horizontal-item-vertical-space: .2rem
 );

_sass/components/_article.content.scss

@@ -1,14 +1,12 @@
 .m-article-content {
   word-wrap: break-word;
   line-height: map-get($base, line-height-large);
-  h1, h2, h3, h4, h5, h6, p,
-  hr, blockquote, figure, pre, .highlighter-rouge,
-  ul, ol, dl, table, .footnotes {
+  @include block-elements() {
     margin: map-get($base, vertical-space-large) 0;
   }
-  h1, h2, h3, h4, h5, h6 {
+  @include heading-elements() {
     position: relative;
-    margin-top: map-get($base, vertical-space-large) + .8rem;
+    margin-top: map-get($base, vertical-space-large) * 1.5;
     & > .anchor {
       @include link-text-colors($border-color, $main-color-1, $main-color-1);
       margin-left: .2rem;
@@ -34,7 +32,15 @@
     @include split-line(bottom);
   }
   hr {
-    @include split-line();
+    border: none;
+    &::before {
+      content: '...';
+      font-size: map-get($base, font-size-h3);
+      color: $text-color-l;
+      display: block;
+      letter-spacing: .8em;
+      text-align: center;
+    }
   }
   blockquote {
     padding-left: 1rem;
@@ -93,8 +99,6 @@
       background-color: $text-background-color;
       &>code {
         display: block;
-        line-height: map-get($base, line-height);
-
       }
     }
   }

_sass/layout/_home.scss

@@ -17,15 +17,15 @@
   }
   .m-article-content {
     font-size: map-get($base, font-size-sub);
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: .8rem 0;
-      // font-weight: map-get($base, font-weight);
+    line-height: map-get($base, line-height);
+    @include block-elements() {
+      margin-top: map-get($base, vertical-space);
+      margin-bottom: map-get($base, vertical-space);
+    }
+    @include heading-elements() {
+      margin-top: map-get($base, vertical-space) * 1.5;
     }
+
     h1,
     h2,
     h3 {

test/_posts/2016-05-02-horizontal-rules.md

@@ -5,34 +5,24 @@ key: 20160502
 tags: Jekyll English
 ---
 
-<br/>
-
 * * *
 
 <!--more-->
 
     * * *
 
-<br/>
-
 ***
 
     ***
 
-<br/>
-
 *****
 
     *****
 
-<br/>
-
 - - -
 
     - - -
 
-<br/>
-
 ---------------------------------------
 
     ---------------------------------------

test/_posts/2016-05-08-blockquotes.md

@@ -17,7 +17,7 @@ tags: Jekyll English
     >
     > —Hamlet in *Hamlet*
 
-<br/>
+---
 
 > "From women's eyes this doctrine I derive:
 >

test/_posts/2016-06-10-tables.md

@@ -37,7 +37,7 @@ tags: Jekyll English
     | Footer row      |            |                 |                |
     |-----------------+------------+-----------------+----------------|
 
-<br/>
+---
 
 |---
 | Default aligned | Left aligned | Center aligned | Right aligned
@@ -73,6 +73,8 @@ tags: Jekyll English
 | Initial release operating system | iOS 9.0 | iOS 9.0 | iOS 9.3 | iOS 10.0 | iOS 10.0 | iOS 11.0 | iOS 11.0 | iOS 11.0.1 |
 | Display  | 4.7 in (120 mm), 4.1 in (100 mm) by 2.3 in (58 mm), 16:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,334 × 750 px screen resolution at 326 ppi, 1400:1 contrast ratio, 500 ​cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | 5.5 in (140 mm), 4.8 in (120 mm) by 2.7 in (69 mm), 16:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,920 × 1,080 px (Full HD) screen resolution at 401 ppi, 1300:1 contrast ratio, 500 ​cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | 4 in (100 mm), 3.5 in (89 mm) by 1.9 in (48 mm), 71:40 (~16:9) aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,136 × 640 px (WSVGA) screen resolution at 326 ppi, pixel size 78 µm, 800:1 contrast ratio, 500 ​cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | In addition to 6S: 625 ​cd⁄m² max brightness | In addition to 6S Plus: 625 ​cd⁄m² max brightness | In addition to 7: True Tone display | In addition to 7 Plus: True Tone display | 5.8 in (150 mm), 5.31 in (135 mm) by 2.45 in (62 mm), ~19.5:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), AMOLED screen, 2,436 × 1,125 px screen resolution at 458 ppi, 1,000,000:1 contrast ratio, 625 ​cd⁄m² max brightness, fingerprint-resistant oleophobic coating, True Tone display, Dolby Vision and HDR10 support |
 
+> From Wikipedia, the free encyclopedia
+
 ## Table With Lone Text
 
 | Language | Demo |

test/_posts/2016-06-16-code-blocks.md

@@ -43,7 +43,7 @@ in the output!).
     This one is separate.
 ```
 
-<br/>
+---
 
 ```
 (() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
@@ -55,7 +55,7 @@ in the output!).
     (() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
     ```
 
-<br/>
+---
 
 ```javascript
 (() => console.log('hello, world!'))();
@@ -67,7 +67,7 @@ in the output!).
     (() => console.log('hello, world!'))();
     ```
 
-<br/>
+---
 
 ```none
 (() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
@@ -111,7 +111,7 @@ var space = ' ';
 {% endraw %}
 ```
 
-<br/>
+---
 
 {% highlight javascript %}
 (() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
@@ -133,7 +133,7 @@ Here comes some code.
     Here comes some code.
     ~~~
 
-<br/>
+---
 
 ~~~~~~~~~~~~
 ~~~~~~~
@@ -167,7 +167,7 @@ end
     ~~~
     {: .language-ruby}
 
-<br/>
+---
 
 ~~~ ruby
 def what?

test/_posts/2016-07-07-images.md

@@ -39,7 +39,7 @@ smile, smile, smile. :smile:
 
     ![Lenna](path-to-image.jpg){:width="128px" height="128px"}
 
-<br/>
+---
 
 ![Lenna](//ww1.sinaimg.cn/large/73bd9e13ly1fof1u4iaorj2074074gp3.jpg "Lenna@64x64"){:width="64px" height="64px"}
 

test/_posts/2016-09-09-emphasis.md

@@ -22,7 +22,7 @@ __Should Old Acquaintance be forgot__
     **Should Old Acquaintance be forgot**
     __Should Old Acquaintance be forgot__
 
-<br/>
+---
 
 This is a ***text with light and strong emphasis***.
 

test/_posts/2016-10-10-paragraphs.md

@@ -9,6 +9,12 @@ Electroencephalography (EEG) is an electrophysiological monitoring method to rec
 
 <!--more-->
 
+EEG is most often used to diagnose epilepsy, which causes abnormalities in EEG readings. It is also used to diagnose sleep disorders, depth of anesthesia, coma, encephalopathies, and brain death. EEG used to be a first-line method of diagnosis for tumors, stroke and other focal brain disorders, but this use has decreased with the advent of high-resolution anatomical imaging techniques such as magnetic resonance imaging (MRI) and computed tomography (CT). Despite limited spatial resolution, EEG continues to be a valuable tool for research and diagnosis. It is one of the few mobile techniques available and offers millisecond-range temporal resolution which is not possible with CT, PET or MRI.
+
+Derivatives of the EEG technique include evoked potentials (EP), which involves averaging the EEG activity time-locked to the presentation of a stimulus of some sort (visual, somatosensory, or auditory). Event-related potentials (ERPs) refer to averaged EEG responses that are time-locked to more complex processing of stimuli; this technique is used in cognitive science, cognitive psychology, and psychophysiological research.
+
 ## Very Long Word
 
-MethionylglutaminylarginyltyrosylglutamylserylleucylphenylalanylalanylglutaminylleucyllysylglutamylarginyllysylglutamylglycylalanylphenylalanylvalylprolyphenylalanYlvalythreonylleucylglycylaspartylprolylglycylisoleucylglutamylglutaminylsErylleucyllysylisoleucylaspartylthreonylleucylIsoleucylglutamylalanylglycylalanylasparthlalanylleucylglutamylleucylglycylisoleucylprolylphenylalanylseRylaspartylprolylleucylalanylaspartylglycylpRolylthreOnylisoleucylglutaminylasPfraginylalanylthreonylleucylarfinylalanylphenylalanylalanylalanylglycylvalythreonylprolylalanylglutaminylcysteinylphenylalanylglutamylmethionylleucylalanylleuOylisoleucylarginylglutaminyllysyhistidylprolylthreonylisoleucylprolylisoleucylglycylleucylmethionyltyrosylalanylasparaginylleucylvalylphenylalanylasparaginyllysyglycylisoleucylaspartylglutamylphenylalanylthrosylalanylglutaminylcysteinylglutamyllysylvalylglycylvalylaspartylserylvalylleucylvalylalnylaspartylvalylprolylvalylglUtaminylglutamylserylalanylprolylphenylalanylarginylglutaminylalanylalanylleucylarginylhistidylasparaginyvalylalanylprolylisoleucylprolylisoleucylphenylalanylisoleucylphenylalanylisoleucylcysteinylprolylprolylaspartylalanylaspartylaspartylaspartylleucylleucylarginylglutaminylisoleucylalanylseryltyrosylglycylarginylglycyltyrosylthreonyltyrOsylleucylleucylserylarginylalanylglycylvalylthreonylglycylalanylglutamYlasparainylarginylalanylalanylleucylprolylleucylasparaginylhistidylleucylValylalanyllysylleucyllysylglutamyltyrosylasparaginylalanylalanylprolylprolylleucylglutaminylglgycylphenylalanylglycylisoleucylserylalanylprolylaspartylglutaminylvalyllysylalanylalanylisoleucylaspartylalanylglycylalanylalanylglycylalanylisoleucylserylglycylserylalanylisoleucylvalyllysylisoIeucylisoleucylglutamylglutaminylHistidylasparaginyliSoleucylglutamylprolylglutamyllysylmethionylleucylalanylalanylleucyllysylvalylphenylalanylcalylglutaminylprolylmethionlysylalanylalanylthreonylarginylserine
+MethionylglutaminylarginyltyrosylglutamylserylleucylphenylalanylalanylglutaminylleucyllysylglutamylarginyllysylglutamylglycylalanylphenylalanylvalylprolyphenylalanYlvalythreonylleucylglycylaspartylprolylglycylisoleucylglutamylglutaminylsErylleucyllysylisoleucylaspartylthreonylleucylIsoleucylglutamylalanylglycylalanylasparthlalanylleucylglutamylleucylglycylisoleucylprolylphenylalanylseRylaspartylprolylleucylalanylaspartylglycylpRolylthreOnylisoleucylglutaminylasPfraginylalanylthreonylleucylarfinylalanylphenylalanylalanylalanylglycylvalythreonylprolylalanylglutaminylcysteinylphenylalanylglutamylmethionylleucylalanylleuOylisoleucylarginylglutaminyllysyhistidylprolylthreonylisoleucylprolylisoleucylglycylleucylmethionyltyrosylalanylasparaginylleucylvalylphenylalanylasparaginyllysyglycylisoleucylaspartylglutamylphenylalanylthrosylalanylglutaminylcysteinylglutamyllysylvalylglycylvalylaspartylserylvalylleucylvalylalnylaspartylvalylprolylvalylglUtaminylglutamylserylalanylprolylphenylalanylarginylglutaminylalanylalanylleucylarginylhistidylasparaginyvalylalanylprolylisoleucylprolylisoleucylphenylalanylisoleucylphenylalanylisoleucylcysteinylprolylprolylaspartylalanylaspartylaspartylaspartylleucylleucylarginylglutaminylisoleucylalanylseryltyrosylglycylarginylglycyltyrosylthreonyltyrOsylleucylleucylserylarginylalanylglycylvalylthreonylglycylalanylglutamYlasparainylarginylalanylalanylleucylprolylleucylasparaginylhistidylleucylValylalanyllysylleucyllysylglutamyltyrosylasparaginylalanylalanylprolylprolylleucylglutaminylglgycylphenylalanylglycylisoleucylserylalanylprolylaspartylglutaminylvalyllysylalanylalanylisoleucylaspartylalanylglycylalanylalanylglycylalanylisoleucylserylglycylserylalanylisoleucylvalyllysylisoIeucylisoleucylglutamylglutaminylHistidylasparaginyliSoleucylglutamylprolylglutamyllysylmethionylleucylalanylalanylleucyllysylvalylphenylalanylcalylglutaminylprolylmethionlysylalanylalanylthreonylarginylserine
+
+> From Wikipedia, the free encyclopedia

test/_posts/2017-08-08-additional-styles.md

@@ -78,15 +78,15 @@ Error Text.
 
     ![Lenna](path-to-image.jpg){:.border.rounded}
 
-<br/>
+---
 
 ![Lenna](//ww1.sinaimg.cn/large/73bd9e13ly1fof1u4iaorj2074074gp3.jpg "Lenna_circle+shadow"){:.circle.shadow}
 
 **markdown:**
 
     ![Lenna](path-to-image.jpg){:.circle.shadow}
 
-<br/>
+---
 
 ![Lenna](//ww1.sinaimg.cn/large/73bd9e13ly1fof1u4iaorj2074074gp3.jpg "Lenna_circle+border+shadow"){:.circle.border.shadow}