Updated headings

12 files changed, 126 insertions, 30 deletions

diff --git a/src/_base.scss b/src/_base.scss
index 365a46e..8cba1fb 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -45,12 +45,16 @@ h3,
 h4,
 h5,
 h6 {
-    margin:         0;
+    margin:         fn.dim(--heading --margin-top) 0 0;
     color:          fn.color(--fg-lo);
     font-size:      fn.dim(--font-size --100);
     font-weight:    bold;
     letter-spacing: 1px;
     text-transform: uppercase;
+
+    & + & {
+        margin-top: fn.dim(--heading --margin-top-sibling);
+    }
 }
 
 p {
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index fcd281b..b60374d 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -95,7 +95,12 @@
         --focus-outline-width: 3px,
 
         --paragraph: (
-            --margin-top: fn.dim(--size --150, null),
+            --margin-top: fn.dim(--size --300, null),
+        ),
+
+        --heading: (
+            --margin-top:         fn.dim(--size --500, null),
+            --margin-top-sibling: fn.dim(--size --325, null),
         ),
 
         --list: (
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 92e6d14..28c5399 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,3 +1,5 @@
 @use 'scopes/colored-links';
+@use 'scopes/invisible-links';
 @use 'scopes/code';
-@use 'scopes/blockquote';
+@use 'scopes/blockquotes';
+@use 'scopes/headings';
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 77e24b4..a9e0e71 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -5,15 +5,6 @@
 
 @include iro.props-namespace('heading') {
     @include iro.props-store((
-        --dims: (
-            --spacing: (
-                --top:         fn.global-dim(--size --500),
-                --top-sibling: fn.global-dim(--size --325),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
         --colors: (
             --light:  fn.global-color(--fg-hi),
             --strong: fn.global-color(--fg-lo),
@@ -25,16 +16,12 @@
         @include mx.set-font(--headline);
 
         display:        block;
+        margin-top:     fn.global-dim(--heading --margin-top);
         letter-spacing: normal;
         text-transform: none;
 
-        @include iro.bem-at-theme('typography') {
-            margin-top:    fn.dim(--spacing --top);
-            margin-bottom: 0;
-    
-            & + & {
-                margin-top: fn.dim(--spacing --top-sibling);
-            }
+        & + & {
+            margin-top: fn.global-dim(--heading --margin-top-sibling);
         }
 
         @include iro.bem-modifier('xxl') {
@@ -81,7 +68,7 @@
             color: fn.color(--light);
         }
 
-        @include iro.bem-elem('inner') {
+        @include iro.bem-elem('primary') {
             background-image: linear-gradient(
                 to top,
                 transparent .15em,
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquotes.scss
index e997b9b..8f25df9 100644
--- a/src/scopes/_blockquote.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@include iro.props-namespace('blockquote') {
+@include iro.props-namespace('blockquotes') {
     @include iro.props-store((
         --dims: (
             --pad-x:      fn.global-dim(--size --250),
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
new file mode 100644
index 0000000..b1ef537
--- /dev/null
+++ b/src/scopes/_headings.scss
@@ -0,0 +1,75 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+
+@include iro.props-namespace('headings') {
+    @include iro.bem-scope(iro.props-namespace()) {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            @include mx.set-font(--headline);
+
+            display:        block;
+            letter-spacing: normal;
+            text-transform: none;
+        }
+
+
+        h1 {
+            color:     fn.foreign-color(--heading, --strong);
+            font-size: fn.global-dim(--font-size --1000);
+        }
+
+        h2 {
+            color:     fn.foreign-color(--heading, --strong);
+            font-size: fn.global-dim(--font-size --700);
+        }
+
+        h3 {
+            color:     fn.foreign-color(--heading, --strong);
+            font-size: fn.global-dim(--font-size --400);
+        }
+
+        h4 {
+            color:     fn.foreign-color(--heading, --strong);
+            font-size: fn.global-dim(--font-size --200);
+        }
+
+        h5 {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --100),
+                --weight:      bold,
+                --transform:   uppercase,
+                --spacing:     1px
+            ));
+
+            color: fn.foreign-color(--heading, --strong);
+        }
+
+        h6 {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --50),
+                --weight:      500,
+                --transform:   uppercase,
+                --spacing:     1px
+            ));
+
+            color: fn.foreign-color(--heading, --light);
+        }
+
+        @include iro.bem-elem('primary') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                fn.foreign-color(--heading, --bg) .15em,
+                fn.foreign-color(--heading, --bg) .6em,
+                transparent .6em
+            );
+        }
+    }
+}
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss
new file mode 100644
index 0000000..71dd9da
--- /dev/null
+++ b/src/scopes/_invisible-links.scss
@@ -0,0 +1,15 @@
+@use 'iro-sass/src/index' as iro;
+
+@include iro.props-namespace('invisible-links') {
+    @include iro.bem-scope(iro.props-namespace()) {
+        :link,
+        :visited {
+            color:           currentColor;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
diff --git a/tpl/index.pug b/tpl/index.pug
index 7c3696e..7bb59a0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -36,7 +36,7 @@ mixin view(id, title)
         views.push({ id, title });
 
     +container(narrow=true class='u-p-700 c-view' id=id)
-        +h1-heading('xl')= title
+        +h1-heading('xl')(class='u-mt-0')= title
         +divider('medium')
         block
 
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index aa3fec9..47ffefa 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -32,11 +32,11 @@ mixin h6-heading(level)
     h6(class=classes)&attributes(attributes)
         block
 
-mixin div-heading(level, inner = false)
+mixin div-heading(level, primary = false)
     - let classes = ['o-heading', 'o-heading--' + level]
     div(class=classes)&attributes(attributes)
-        if inner
-            span.o-heading__inner
+        if primary
+            span.o-heading__primary
                 block
         else
             block
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug
index a346292..a5dc95c 100644
--- a/tpl/views/blockquote.pug
+++ b/tpl/views/blockquote.pug
@@ -1,6 +1,6 @@
 mixin view-blockquote 
     +view('blockquote', 'Blockquote')
-        .c-box.s-blockquote
-            p= loremIpsum
+        .c-box.s-blockquotes
+            p.u-mt-0= loremIpsum
             blockquote= loremIpsum
             p= loremIpsum
diff --git a/tpl/views/code.pug b/tpl/views/code.pug
index 552500d..21e16c8 100644
--- a/tpl/views/code.pug
+++ b/tpl/views/code.pug
@@ -1,7 +1,7 @@
 mixin view-code 
     +view('code', 'Code')
         .c-box.s-body
-            p= loremIpsum
+            p.u-mt-0= loremIpsum
             pre
                 code.
                     font-weight:    700;
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index efdfb69..07080d5 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -1,15 +1,23 @@
 mixin view-heading 
     +view('heading', 'Heading')
         .c-box
-            h1= 'H1 default'
+            h1.u-mt-0= 'H1 default'
             h2= 'H2 default'
             h3= 'H3 default'
             h4= 'H4 default'
             h5= 'H5 default'
             h6= 'H6 default'
 
+        .c-box.s-headings
+            h1.u-mt-0: span.s-headings__primary= 'H1 styled'
+            h2= 'H2 styled'
+            h3= 'H3 styled'
+            h4= 'H4 styled'
+            h5= 'H5 styled'
+            h6= 'H6 styled'
+
         .c-box
-            +div-heading('xxl', true)= 'XXL Heading'
+            +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading'
             +div-heading('xl')= 'XL Heading'
             +div-heading('lg')= 'LG Heading'
             +div-heading('md')= 'MD Heading'