From 7eb6cfcc316cd3066102f3835f1ec52972a6a3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Tue, 13 Jul 2021 00:03:20 +0200
Subject: [PATCH] adding

---
 dist/index.html          | 35 +++++++++---------
 dist/plain-ui.css        | 78 ++++++++++++++++++++--------------------
 src/scss/_variables.scss |  4 +--
 3 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 15a1b02..1d497fb 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,11 +15,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
                     Plain UI 0.1-alpha
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 
@@ -48,20 +62,19 @@
 
     <div class="container">
         <div class="grid">
-            <div class="col-12 col-md-8">
+            <div class="col-12">
                 <div class="content">
                     <div class="panel panel--border-highlight border-color-danger m-bottom-4">
                         <div class="panel__body">
                             <div class="content marginless-last-child">
                                 <p>
-                                    The Class "content" will trigger a few styles for
+                                    On development, a few styles and names will be change until release
                                 </p>
                             </div>
                         </div>
                     </div>
                     <p>
-                        <span class="bold">Plain UI</span> is a simple UI Framework. The first Idea to create this was
-                        a simple Solution to build Prototypes. But while i was working on this,
+                        <span class="bold">Plain UI</span> is a simple UI Framework. 
                     </p>
                     <p>
 
@@ -75,18 +88,6 @@
                         <li><span class="bold">Reflex Grid</span> </li>
                     </ul>
                 </div>
-                <div class="center">
-                    <a href="#">
-                        <svg class="icon fill-success" aria-hidden="true">
-                            <use xlink:href="symbol-defs.svg#icon-github"></use>
-                        </svg>
-                    </a>
-                    <a href="https://gitea.tentakelfabrik.de/">
-                        <svg class="icon fill-success" aria-hidden="true">
-                            <use xlink:href="symbol-defs.svg#icon-gitea"></use>
-                        </svg>
-                    </a>
-                </div>
             </div>
         </div>
     </div>
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 5097952..c997a94 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -1696,12 +1696,12 @@ body {
   color: var(--text);
   background-color: var(--body);
   direction: ltr;
-  font-size: 1rem;
+  font-size: 0.9rem;
   line-height: 1.618;
 }
 @media only screen and (min-width: 992px) {
   body {
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 }
 
@@ -1845,7 +1845,7 @@ kbd,
 pre,
 samp {
   font-family: "IBM Plex Mono", sans-serif;
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 /**
@@ -2036,7 +2036,7 @@ h1, .h1 {
 }
 @media only screen and (min-width: 992px) {
   h1, .h1 {
-    font-size: 2.7rem;
+    font-size: 2.82rem;
   }
 }
 
@@ -2045,7 +2045,7 @@ h2, .h2 {
 }
 @media only screen and (min-width: 992px) {
   h2, .h2 {
-    font-size: 2.4rem;
+    font-size: 2.52rem;
   }
 }
 
@@ -2054,7 +2054,7 @@ h3, .h3 {
 }
 @media only screen and (min-width: 992px) {
   h3, .h3 {
-    font-size: 2.16rem;
+    font-size: 2.28rem;
   }
 }
 
@@ -2063,7 +2063,7 @@ h4, .h4 {
 }
 @media only screen and (min-width: 992px) {
   h4, .h4 {
-    font-size: 1.92rem;
+    font-size: 2.04rem;
   }
 }
 
@@ -2072,7 +2072,7 @@ h5, .h5 {
 }
 @media only screen and (min-width: 992px) {
   h5, .h5 {
-    font-size: 1.68rem;
+    font-size: 1.8rem;
   }
 }
 
@@ -2081,7 +2081,7 @@ h6, .h6 {
 }
 @media only screen and (min-width: 992px) {
   h6, .h6 {
-    font-size: 1.44rem;
+    font-size: 1.56rem;
   }
 }
 
@@ -7790,147 +7790,147 @@ svg.field-choice__checked {
 }
 
 .size-default {
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 @media only screen and (min-width: 576px) {
   .size-xs-default {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .size-sm-default {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .size-md-default {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }
 @media only screen and (min-width: 1200px) {
   .size-lg-default {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }
 @media only screen and (min-width: 1600px) {
   .size-xlg-default {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }
 .size-small {
-  font-size: 0.75rem;
+  font-size: 0.675rem;
 }
 
 @media only screen and (min-width: 576px) {
   .size-xs-small {
-    font-size: 0.75rem;
+    font-size: 0.675rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .size-sm-small {
-    font-size: 0.75rem;
+    font-size: 0.675rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .size-md-small {
-    font-size: 0.75rem;
+    font-size: 0.675rem;
   }
 }
 @media only screen and (min-width: 1200px) {
   .size-lg-small {
-    font-size: 0.75rem;
+    font-size: 0.675rem;
   }
 }
 @media only screen and (min-width: 1600px) {
   .size-xlg-small {
-    font-size: 0.75rem;
+    font-size: 0.675rem;
   }
 }
 .size-medium {
-  font-size: 1.5rem;
+  font-size: 1.35rem;
 }
 
 @media only screen and (min-width: 576px) {
   .size-xs-medium {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .size-sm-medium {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .size-md-medium {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 }
 @media only screen and (min-width: 1200px) {
   .size-lg-medium {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 }
 @media only screen and (min-width: 1600px) {
   .size-xlg-medium {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 }
 .size-large {
-  font-size: 2rem;
+  font-size: 1.8rem;
 }
 
 @media only screen and (min-width: 576px) {
   .size-xs-large {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .size-sm-large {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .size-md-large {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 }
 @media only screen and (min-width: 1200px) {
   .size-lg-large {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 }
 @media only screen and (min-width: 1600px) {
   .size-xlg-large {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 }
 .size-big {
-  font-size: 3rem;
+  font-size: 2.7rem;
 }
 
 @media only screen and (min-width: 576px) {
   .size-xs-big {
-    font-size: 3rem;
+    font-size: 2.7rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .size-sm-big {
-    font-size: 3rem;
+    font-size: 2.7rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .size-md-big {
-    font-size: 3rem;
+    font-size: 2.7rem;
   }
 }
 @media only screen and (min-width: 1200px) {
   .size-lg-big {
-    font-size: 3rem;
+    font-size: 2.7rem;
   }
 }
 @media only screen and (min-width: 1600px) {
   .size-xlg-big {
-    font-size: 3rem;
+    font-size: 2.7rem;
   }
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 440773e..84b9407 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -30,9 +30,9 @@ $plain-ui__direction: ltr !default;
 
 $plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
 $plain-ui__font-weight: normal !default;
-$plain-ui__font-size: 1rem !default;
+$plain-ui__font-size: 0.9rem !default;
 $plain-ui__font-size-breakpoints: (
-    $plain-ui__md: 1.1rem
+    $plain-ui__md: 1rem
 ) !default;
 
 $plain-ui__font-sizes: (