From fbd6663a28322f37df9000004c254d22c9da26b8 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 1 Sep 2017 00:50:43 +0800
Subject: [PATCH] New h3 styles

---
 _sass/2017/components/h2-section.scss      |  2 +-
 _sass/2017/components/h3-section-list.scss | 11 --------
 _sass/2017/components/h3-section.scss      | 29 +++++++++++++++++++++-
 _sass/2017/markdown/headings.scss          |  2 +-
 _sass/2017/style.scss                      |  1 +
 _sass/2017/utils/heading-style.scss        | 15 -----------
 _sass/2017/utils/section-gutter.scss       |  3 +++
 7 files changed, 34 insertions(+), 29 deletions(-)
 create mode 100644 _sass/2017/utils/section-gutter.scss

diff --git a/_sass/2017/components/h2-section.scss b/_sass/2017/components/h2-section.scss
index acf81f809..0d357d45d 100644
--- a/_sass/2017/components/h2-section.scss
+++ b/_sass/2017/components/h2-section.scss
@@ -10,7 +10,7 @@
 
   @media (min-width: 481px) {
     & + & {
-      margin-top: 32px;
+      margin-top: 48px;
     }
   }
 }
diff --git a/_sass/2017/components/h3-section-list.scss b/_sass/2017/components/h3-section-list.scss
index e5929c109..81cba15f2 100644
--- a/_sass/2017/components/h3-section-list.scss
+++ b/_sass/2017/components/h3-section-list.scss
@@ -1,7 +1,3 @@
-@mixin section-gutter($property, $multiplier: 1) {
-  #{$property}: 12px * $multiplier;
-}
-
 /*
  * H3 section list:
  * The body that is isotoped.
@@ -33,7 +29,6 @@
   @media (min-width: 769px) {
     & > .h3-section {
       padding-top: 0;
-      padding-bottom: 16px;
     }
   }
 }
@@ -79,12 +74,6 @@
   }
 }
 
-.h3-section-list.-wide-second {
-  & > .h3-section:nth-child(2) {
-    width: 100%;
-  }
-}
-
 /*
  * Three column, left reference
  */
diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss
index 2ce3352cf..645fb83fc 100644
--- a/_sass/2017/components/h3-section.scss
+++ b/_sass/2017/components/h3-section.scss
@@ -37,6 +37,29 @@
   }
 }
 
+/*
+ * Heading
+ */
+
+.h3-section > h3 {
+  & {
+    @include section-gutter(margin-bottom, $multiplier: 1);
+    @include section-gutter(margin-top, $multiplier: .5);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &::after {
+    @include section-gutter(margin-left, $multiplier: 2);
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, rgba($base-a, 0.3), transparent 80%);
+  }
+}
+
 /*
  * Children
  */
@@ -110,7 +133,7 @@
 }
 
 /*
- * Prime
+ * Variant: Prime
  */
 
 .h3-section.-prime > .body {
@@ -120,6 +143,10 @@
   }
 }
 
+/*
+ * Variant: Also see :\
+ */
+
 ul.-also-see.-also-see.-also-see {
   display: flex;
   flex-wrap: wrap;
diff --git a/_sass/2017/markdown/headings.scss b/_sass/2017/markdown/headings.scss
index f5d2c2567..0e359cac8 100644
--- a/_sass/2017/markdown/headings.scss
+++ b/_sass/2017/markdown/headings.scss
@@ -4,7 +4,7 @@
 
 .MarkdownBody h2 {
   @include heading-style;
-  @include font-size(5);
+  @include font-size(6);
   line-height: 1.2;
   font-weight: 300;
   font-family: $heading-font;
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index b98af4486..5cda48d62 100644
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -6,6 +6,7 @@
 @import './utils/font-size';
 @import './utils/gutter';
 @import './utils/heading-style';
+@import './utils/section-gutter';
 @import './utils/section-with-container';
 @include ion-font;
 @import './base/base';
diff --git a/_sass/2017/utils/heading-style.scss b/_sass/2017/utils/heading-style.scss
index 12570b0e3..c124006b0 100644
--- a/_sass/2017/utils/heading-style.scss
+++ b/_sass/2017/utils/heading-style.scss
@@ -2,31 +2,16 @@
   margin: 0;
   padding: 0;
   margin-bottom: 16px + 8px;
-  padding-bottom: 16px + 8px;
   margin-top: 64px;
   position: relative;
 
-  // Line
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(to right, $dark-line-color 50%, transparent);
-  }
-
   @media (max-width: 768px) {
     margin-bottom: 8px;
     margin-top: 32px;
-    padding-bottom: 8px;
   }
 
   @media (max-width: 480px) {
     margin-bottom: 8px;
     margin-top: 32px;
-    padding-bottom: 8px;
   }
 }
diff --git a/_sass/2017/utils/section-gutter.scss b/_sass/2017/utils/section-gutter.scss
new file mode 100644
index 000000000..56b8b8cfc
--- /dev/null
+++ b/_sass/2017/utils/section-gutter.scss
@@ -0,0 +1,3 @@
+@mixin section-gutter($property, $multiplier: 1) {
+  #{$property}: 16px * $multiplier;
+}