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 @@
-
+

Plain UI 0.1-alpha

+
@@ -48,20 +62,19 @@
-
+

- The Class "content" will trigger a few styles for + On development, a few styles and names will be change until release

- Plain UI 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, + Plain UI is a simple UI Framework.

@@ -75,18 +88,6 @@

  • Reflex Grid
  • -
    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: (