adding

dist/index.html

@@ -30,14 +30,39 @@
     <div class="container m-top-7">
         <div class="grid">
             <div class="col-12">
-
+                <h2 class="m-bottom-0">Heading</h2>
+                <hr>
+                <h1>Heading 1</h1>
+                <h2>Heading 2</h2>
+                <h3>Heading 3</h3>
+                <h4>Heading 4</h4>
+                <h5>Heading 5</h5>
+                <h6>Heading 6</h6>
+            </div>
+        </div>
+        <div class="grid">
+            <div class="col-12">
                 <p>
                     <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
                 </p>
+                <p>
+                    Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
+                </p>
+                <p>
+                    The Basic Idea was a quick
+                </p>
 
-                <div class="">
+                <div class="center">
-                    <a href=""></a>
+                    <a href="#">
-                    <a href="https://gitea.teantakelfabrik.de/"></a>
+                        <svg class="icon icon--success" aria-hidden="true">
+                            <use xlink:href="symbol-defs.svg#icon-check"></use>
+                        </svg>
+                    </a>
+                    <a href="https://gitea.teantakelfabrik.de/">
+                        <svg class="icon icon--success" aria-hidden="true">
+                            <use xlink:href="symbol-defs.svg#icon-check"></use>
+                        </svg>
+                    </a>
                 </div>
 
                 <h2>Buttons</h2>

dist/plain-ui.css

@@ -1613,6 +1613,19 @@
  *
  *
  */
+:root {
+  --primary: #3e3e3e;
+  --primary-active: #585858;
+  --link: #3e3e3e;
+  --link-hover: #d95959;
+  --danger: #d95959;
+  --success: #64ac64;
+  --white: #ffffff;
+  --black: #000000;
+  --text: #363636;
+  --background: #f9f9f9;
+}
+
 /**
  *  padding & margin
  *
@@ -1640,23 +1653,6 @@
  *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
-/**
- *  Heading
- *
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-/**
- *  typograhy
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
 html {
   font-size: 100%;
   line-height: 1.15;
@@ -1689,6 +1685,10 @@ table {
   border-spacing: 0;
 }
 
+figure {
+  margin: 0 0 15px;
+}
+
 figcaption {
   margin: 10px 0;
 }
@@ -1697,6 +1697,7 @@ figcaption {
  *  form elements
  *
  *
+ *
  */
 button,
 input,
@@ -1769,7 +1770,8 @@ hr {
   height: 0;
   overflow: visible;
   border: 0;
-  margin: 0.3em 0;
+  border-top: 1px solid #b3b2af;
+  margin: 0 0 1rem;
 }
 
 progress {
@@ -1784,6 +1786,31 @@ summary {
   display: list-item;
 }
 
+code,
+pre,
+kbd,
+samp {
+  font-family: "IBM Plex Mono", sans-serif;
+  font-size: 1rem;
+}
+
+/**
+ *  Heading
+ *
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ *  typograhy
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
 h1, .h1,
 h2, .h2,
 h3, .h3,
@@ -1975,6 +2002,30 @@ dt {
   font-weight: bold;
 }
 
+a {
+  color: var(--link);
+  transition: color 0.5s;
+}
+a:hover {
+  color: var(--link-hover);
+}
+a:focus {
+  outline: none;
+}
+
+/**
+ *  body
+ *
+ */
+body {
+  font-family: "IBM Plex Mono", sans-serif;
+  color: var(--text);
+  background-color: var(--background);
+  direction: ltr;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
 /**
  *
  *
@@ -4462,30 +4513,6 @@ dt {
   padding-right: 10.125rem;
 }
 
-a {
-  color: #fff;
-}
-a:focus {
-  outline: none;
-}
-
-/**
- *  body
- *
- *
- *
- *  line-height and breakpoints
- *  font-size and breakpoints
- *
- */
-body {
-  font-family: "IBM Plex Mono", sans-serif;
-  background-color: #f9f9f9;
-  direction: ltr;
-  font-size: 1rem;
-  line-height: 1.4;
-}
-
 /**
  *  borders
  *

src/scss/_core.scss

@@ -13,43 +13,36 @@
     'core/heading',
     'core/typography';
 
-@include plain-ui__core__normalize();
 @include plain-ui__core__heading();
 @include plain-ui__core__typography();
 
-@mixin plain-ui__core() {
+a {
+    color: var(--link);
+    transition: color 0.5s;
 
-    a {
+    &:hover {
-        color: $plain-ui__link-light;
+        color: var(--link-hover);
-
-        &:hover {
-            color: $plain-ui__link-hover;
-        }
-
-        &:focus {
-            outline: none;
-        }
     }
 
-    /**
+    &:focus {
-     *  body
+        outline: none;
-     *
-     *
-     *
-     *  line-height and breakpoints
-     *  font-size and breakpoints
-     *
-     */
-    body {
-        font-family: $plain-ui__font-family;
-        //color: $plain-ui__text-light;
-        background-color: $plain-ui__background-light;
-        direction: $plain-ui__direction;
-
-        font-size: $plain-ui__font-size;
-        //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
-
-        line-height: $plain-ui__line-height;
-        //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
     }
+}
+
+/**
+ *  body
+ *
+ */
+body {
+    font-family: $plain-ui__font-family;
+    color: var(--text);
+
+    background-color: var(--background);
+    direction: $plain-ui__direction;
+
+    font-size: $plain-ui__font-size;
+    //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
+
+    line-height: $plain-ui__line-height;
+    //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
 }

src/scss/_variables.scss

@@ -76,6 +76,19 @@ $plain-ui__colors: (
     'white'      : #fff
 ) !default;
 
+:root {
+    --primary: #{$plain-ui__primary-light};
+    --primary-active: #{$plain-ui__primary-light-active};
+    --link: #{$plain-ui__primary-light};
+    --link-hover: #{$plain-ui__danger-light};
+    --danger: #{$plain-ui__danger-light};
+    --success: #{$plain-ui__success-light};
+    --white: #ffffff;
+    --black: #000000;
+    --text: #{$plain-ui__text-light};
+    --background: #{$plain-ui__background-light};
+}
+
 /**
  *  padding & margin
  *

src/scss/components/_content.scss

@@ -9,7 +9,9 @@
     .content {
         font-size: 1rem;
 
-        // list 
+        a {
+            text-decoration: underline;
+        }
 
         ul {
             li {

src/scss/core/_normalize.scss

@@ -9,8 +9,7 @@
  *
  */
 
-@mixin plain-ui__core__normalize()
+
-{
     html {
         font-size: 100%;
         line-height: 1.15; // Correct the line height in all browsers.
@@ -44,8 +43,7 @@
     }
 
     figure {
-        //margin: $plain-ui__margin;
+        margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
     }
 
     figcaption {
@@ -57,6 +55,7 @@
      *  form elements
      *
      *
+     *
      */
 
     // Remove the margin in Firefox and Safari.
@@ -138,38 +137,37 @@
      *
      */
 
-    hr {
+hr {
-        box-sizing: content-box; // Add the correct box sizing in Firefox.
+    box-sizing: content-box; // Add the correct box sizing in Firefox.
-        height: 0; // Add the correct box sizing in Firefox.
+    height: 0; // Add the correct box sizing in Firefox.
-        overflow: visible; // Show the overflow in Edge and IE.
+    overflow: visible; // Show the overflow in Edge and IE.
-
+
-        border: 0;
+    border: 0;
-        //border-top: 1px solid $plain-ui__secondary;
+    border-top: 1px solid $plain-ui__secondary;
-        margin: 0.3em 0;
+    margin: 0 0 1rem;
-    }
+}
-
+
-    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-    progress {
+progress {
-        vertical-align: baseline;
+    vertical-align: baseline;
-    }
+}
-
+
-    // Add the correct display in Firefox.
+// Add the correct display in Firefox.
-    details {
+details {
-        display: block;
+    display: block;
-    }
+}
-
+
-    // Add the correct display in all browsers.
+// Add the correct display in all browsers.
-    summary {
+summary {
-       display: list-item;
+    display: list-item;
-    }
+}
-
+
-    code,
+code,
-    pre,
+pre,
-    kbd,
+kbd,
-    samp {
+samp {
-        //font-family: $plain-ui__font-family-monospace;
+    font-family: $plain-ui__font-family;
-        //font-size: $plain-ui__font-size-monospace;
+    font-size: $plain-ui__font-size;
-
+
-        //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints);
+    //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints);
-    }
 }

src/scss/plain-ui.scss

@@ -29,7 +29,7 @@
     'helpers/sizing',
     'helpers/spacing';
 
-@include plain-ui__core();
+
 @include plain-ui__helpers__core();
 
 @include plain-ui__component__badge();