Updated headings

7 files changed, 109 insertions, 21 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;
+            }
+        }
+    }
+}