@ui-doc/html-renderer 0.2.0 → 0.4.0

package/dist/assets/ui-doc.css

@@ -1,57 +1,234 @@
+/**
+  * Text for the index page
+  *
+  * @page index UI-Doc
+  */
+
+/**
+  * Variables used in the project.
+  *
+  * @page variables Variables
+  * @order 10
+  */
+
+/**
+  * Resets used to normalize the browser styles.
+  *
+  * @page resets Resets
+  * @order 20
+  */
+
+/**
+  * The color variables are used to define the color palette.
+  *
+  * The color variables are defined by RGB value. When you want to use a color you need use the `rgb()` function. For example: `rgb(var(--color-black))`.
+  *
+  * @location variables.colors Colors
+  * @color {0 0 0|255 255 255} --color-black | Black
+  * @color {20 33 61|255 255 255} --color-blue | Blue
+  * @color {252 163 17} --color-yellow | Yellow
+  * @color {229 229 229} --color-gray | Gray
+  * @color {255 255 255} --color-white | White
+  */
+
+:root {
+  --color-black: 0 0 0;
+  --color-blue: 20 33 61;
+  --color-yellow: 252 163 17;
+  --color-gray: 229 229 229;
+  --color-white: 255 255 255;
+}
+
+/**
+  * Set of predefined font variables.
+  *
+  * @location variables.font Font
+  */
+
 :root {
+  /**
+    * Font weights are a set of predefined values that can be used to define the weight of a font:
+    * - **--font-weight-normal**
+    * - **--font-weight-bold**
+    *
+    * @location variables.font.weight Font weight
+    */
   --font-weight-normal: 400;
   --font-weight-bold: 700;
+
+  /**
+    * Font sizes are a set of predefined values that can be used to define the size of a font:
+    * - **--font-size-sm**
+    * - **--font-size-normal**
+    * - **--font-size-md**
+    *
+    * @location variables.font.size Font size
+    */
   --font-size-sm: 0.85em;
   --font-size-normal: 1em;
   --font-size-md: 1.2em;
-  --font-size-lg: 1.7em;
+}
+
+/**
+  * Space are a set of predefined values that can be used to define the space of an element.
+  * When spaces are used there is always a set of two variables you can use the `--space-unit` and `--space-<size>`.
+  * The `--space-unit` is the base unit that will be multiplied by the `--space-<size>`. Depending on the context
+  * you are using the space `<size>` changes.
+  *
+  * The predefined space can the be set in a specific context by defining the `--space-<size>` variable.
+  * For example the space unit is `1rem` and we are in the padding context, we can use `--space-pt: var(--space-md);` to change the padding
+  * top to the medium space.
+  *
+  * @location variables.spaces Spaces
+  * @space {0.35em} --space-xxs | Extra extra small
+  * @space {0.5em} --space-xs | Extra small
+  * @space {0.7em} --space-sm | Small
+  * @space {1em} --space-normal | Normal
+  * @space {1.3em} --space-md | Medium
+  * @space {1.8em} --space-lg | Large
+  * @space {3.2em} --space-xl | Extra large
+  * @space {4.8em} --space-xxl | Extra extra large
+  */
+
+:root {
+  --space-xxs: 0.35;
+  --space-xs: 0.5;
+  --space-sm: 0.7;
+  --space-normal: 1;
+  --space-md: 1.3;
+  --space-lg: 1.8;
+  --space-xl: 3.2;
+  --space-xxl: 4.8;
+}
+
+/**
+  * Widths are a set of predefined values that can be used to limit the content width.
+  *
+  * - `--width-min-offset-x` - The minimum space on the left and right side.
+  * - `--width-content` - The width of the content.
+  *
+  * @location variables.width Width (Content)
+  */
+
+:root {
+  --width-min-offset-x: 22px;
+  --width-content: 1200px;
+}
+
+/**
+  * There are some global veriables that are used in the project. These variables are a base set and can be changed depending on context and requirements. All components are using these variables to define the style or as a fallback if there more specific named variable is not present.
+  *
+  * @location variables.global Globals
+  */
+
+:root {
+  /**
+    * - `--font-space-unit` - The spacing unit when using font related spaces (see the spaces documentation for mor details).
+    * - `--font-size-base` - The base font size.
+    * - `--font-color` - used font color.
+    * - `--font-family` - uded font family.
+    * - `--font-weight` - used font weight.
+    * - `--font-size` - used font size.
+    * - `--font-line-height` - used font line height.
+    *
+    * @location variables.global.font Font
+    */
+  --font-space-unit: 1em;
   --font-size-base: 16px;
-  --font-color: 3 3 3;
+  --font-color: var(--color-black);
   --font-family: system-ui, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol";
   --font-weight: var(--font-weight-normal);
   --font-size: var(--font-size-normal);
   --font-line-height: 1.4;
-  --headline-weight: var(--font-weight-bold);
-  --bg-color: 255 255 255;
-  --accent-color: 3 3 200;
-  --border-color: 5 5 5;
+
+  /**
+    * - `--bg-color` - used background color
+    * - `--accent-color` - used accent color
+    * - `--selection-color` - used selection color
+    * - `--selection-bg-color` - used selection background color
+    * - `--animation-time` - used animation time
+    *
+    * @location variables.global.colors Colors
+    */
+  --bg-color: var(--color-white);
+  --accent-color: var(--color-yellow);
   --selection-color: var(--bg-color);
   --selection-bg-color: var(--font-color);
-  --size-base-unit: 1rem;
-  --size-xs: calc(0.5 * var(--size-base-unit));
-  --size-sm: calc(0.8 * var(--size-base-unit));
-  --size-normal: var(--size-base-unit);
-  --size-md: calc(1.2 * var(--size-base-unit));
-  --size-lg: calc(1.6 * var(--size-base-unit));
-  --size-xl: calc(2.4 * var(--size-base-unit));
-  --nav-main-menu-item-px: var(--size-sm);
-  --nav-main-menu-item-py: var(--size-xs);
-  --nav-main-menu-item-font-size: var(--font-size-md);
-  --nav-main-height: calc(
-    var(--nav-main-menu-item-py) * 2 + var(--nav-main-menu-item-font-size) * var(--font-line-height)
+  --space-unit: 1em;
+
+  /**
+    *
+    * - `--animation-time` - used animation time
+    *
+    * @location variables.global.animation Animation
+    */
+  --animation-time: 0.25s;
+
+  /**
+    * @location variables.global.nav-main Main navigation
+    */
+  --nav-main-bar-item-space-x: var(--space-normal);
+  --nav-main-bar-item-space-y: var(--space-sm);
+  --nav-main-bar-item-height: calc(
+    (var(--font-size) * var(--font-line-height)) +
+      (var(--space-unit) * var(--nav-main-bar-item-space-y) * 2)
   );
+  --nav-main-menu-space-t: var(--space-sm);
+  --nav-main-menu-space-b: var(--space-normal);
+  --nav-main-height: var(--nav-main-bar-item-height);
+
+  /**
+    * @location variables.global.nav-main Main navigation
+    */
+  --scroll-padding-top: var(--nav-main-height);
 
   color-scheme: light;
 }
+
 * {
   box-sizing: border-box;
-  margin: 0;
 }
-*::after, *::before {
+
+*::after,
+*::before {
   box-sizing: inherit;
 }
+
 ::-moz-selection {
   color: rgb(var(--selection-color));
-  background-color: rgb(var(--selection-bg-color));
+  background: rgb(var(--selection-bg-color));
 }
+
 ::selection {
   color: rgb(var(--selection-color));
-  background-color: rgb(var(--selection-bg-color));
+  background: rgb(var(--selection-bg-color));
 }
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: var(--scroll-padding-top, 0);
+}
+
 body {
-  background-color: rgb(var(--bg-color));
+  margin: 0;
+  background: rgb(var(--bg-color));
 }
+
+/**
+  * @location resets.typography Typography
+  */
+
+/**
+  * @location resets.typography.font Font Style
+  * @example
+  * <div style="font-weight: bold;">Bold | bold | 700</div>
+  * <div style="font-weight: normal;">Normal | normal | 400</div>
+  * <div style="font-weight: bold; font-style: italic;">Bold Italic</div>
+  * <div style="font-weight: normal; font-style: italic;">Normal Italic</div>
+  * @hideCode
+  */
+
 html {
   font-size: var(--font-size-base);
   -webkit-font-smoothing: antialiased;
@@ -61,140 +238,507 @@ html {
           text-size-adjust: 100%;
   word-break: break-word;
 }
-body, .font, .control {
+
+body,
+.font,
+.control,
+.btn {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--font-line-height);
   color: rgb(var(--font-color));
 }
-button, input, optgroup, select, textarea {
+
+button,
+input,
+optgroup,
+select,
+textarea {
   font-family: inherit;
 }
-h1, h2, h3, h4, h5, h6 {
+
+/**
+  * You can use html headline tags or the class `.headline` to define headlines. The hedline class comes in handy if you want to display
+  * a headline without the semantic meaning of a headline tag.
+  *
+  * @location resets.typography.headlines Headlines
+  * @example
+  * <h1>Headline h1</h1>
+  * <h2>Headline h2</h2>
+  * <h3>Headline h3</h3>
+  * <h4>Headline h4</h4>
+  * <h5>Headline h5</h5>
+  * <h6>Headline h6</h6>
+  * <span class="headline h1">Class Headline h1</span>
+  * <span class="headline h2">Class Headline h2</span>
+  * <span class="headline h3">Class Headline h3</span>
+  * <span class="headline h4">Class Headline h4</span>
+  * <span class="headline h5">Class Headline h5</span>
+  * <span class="headline h6">Class Headline h6</span>
+  */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.headline {
+  display: block;
+
+  margin-top: calc(var(--font-space-unit) * var(--headline-space, var(--space-normal)));
+  margin-bottom: 0;
+
   font-family: var(--headline-family, inherit);
   font-size: calc(var(--font-size-normal) * var(--headline-scale, 1));
-  font-weight: var(--headline-weight, inherit);
+  font-weight: var(--headline-weight, var(--font-weight-bold));
   line-height: var(--headline-line-height, inherit);
   color: rgb(var(--headline-color, inherit));
 }
-h1 {
+
+h1,
+.headline.h1 {
   --headline-scale: 2.5;
 }
-h2 {
+
+h2,
+.headline.h2 {
   --headline-scale: 2;
 }
-h3 {
+
+h3,
+.headline.h3 {
   --headline-scale: 1.75;
 }
-h4 {
+
+h4,
+.headline.h4 {
   --headline-scale: 1.5;
 }
+
+h5,
+.headline.h5 {
+  --headline-scale: 1.2;
+}
+
+h6,
+.headline.h6 {
+  --headline-scale: 1.1;
+}
+
+/**
+  * You can use the `.no-space` class to remove the margin from the headline class.
+  *
+  * @location resets.typography.headlines.no-space Headlines without space
+  * @example
+  * <span class="headline h1 no-space">Class Headline h1</span>
+  * <span class="headline h2 no-space">Class Headline h2</span>
+  */
+
+.headline.no-space {
+  --headline-space: 0;
+}
+
+/**
+  * @location resets.typography.text Text / Paragraph
+  * @example
+  * <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+  * <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+  * <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+  */
+
+/* p {} */
+
+/**
+  * @location resets.typography.link Link
+  * @example
+  * <a href="#">Link Text</a>
+  */
+
 a {
   color: rgb(var(--link-color, inherit));
-  -webkit-text-decoration: var(--link-decoration, none);
-          text-decoration: var(--link-decoration, none);
+  -webkit-text-decoration: var(--link-decoration, underline);
+          text-decoration: var(--link-decoration, underline);
+  transition: color ease var(--link-animation-time, var(--animation-time)) text-decoration ease
+    var(--link-animation-time, var(--animation-time));
 }
-b, strong {
+
+a:hover {
+    --link-color: var(--link-hover-color, var(--accent-color));
+    --link-decoration: var(--link-hover-decoration, none);
+  }
+
+/**
+  * @location resets.typography.format Format
+  * @example
+  * <span>Normal Text</span><br>
+  * <strong>Strong Text</strong><br>
+  * <small>Small Text</small><br>
+  * <em>Emphasis Text</em><br>
+  * <i>Italic Text</i>
+  */
+
+b,
+strong {
   --font-weight: var(--font-weight-bold);
 }
+
 small {
   --font-size: var(--font-size-sm);
 }
-.bg, .nav-main {
+
+/**
+  * Utility classes are building the base of all styles. They can be applyed everywhere to modify/control one specific thing.
+  *
+  * @page utils Utilities
+  * @order 30
+  */
+
+/**
+  * The `.bg` class can be used to set backgrounds, depending on the selected
+  * variant css variables will be changed, so all colors used inside will fit to
+  * the background.
+  *
+  * @location utils.background Background
+  */
+
+.bg {
   --selection-bg-color: var(--font-color);
   --selection-color: var(--bg-color);
 
   color: rgb(var(--font-color));
   background: rgb(var(--bg-color));
 }
-.tc {
-  color: rgb(var(--font-color));
-}
-.padding, .pxy, .control {
-  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))
-    var(--pl, var(--size-normal));
+
+/**
+  * Using `padding` to add paddings top, right, bottom and left to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **pt** - padding-top
+  * - **pr** - padding-right
+  * - **pb** - padding-bottom
+  * - **pl** - padding-left
+  *
+  * @location utils.padding Padding
+  * @example
+  * <div class="padding bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.padding,
+.pxy {
+  padding: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))))
+    var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))))
+    var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))))
+    var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));
 }
-.pt, .py {
-  padding-top: var(--pt, var(--size-normal));
+
+/**
+  * Using `pt` to add padding top to your element.
+  * Possible variables are:
+  * - **--pt** - set direclty a spacing unit
+  * - **--space-pt** - set a predefined space
+  *
+  * @location utils.padding.top Padding top
+  * @example
+  * <div class="pt bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.pt,
+.py {
+  padding-top: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))));
 }
-.pr, .px {
-  padding-right: var(--pr, var(--size-normal));
+
+/**
+  * Using `pr` to add padding right to your element.
+  * Possible variables are:
+  * - **--pr** - set direclty a spacing unit
+  * - **--space-pr** - set a predefined space
+  *
+  * @location utils.padding.right Padding right
+  * @example
+  * <div class="pr bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.pr,
+.px {
+  padding-right: var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))));
 }
-.pb, .py {
-  padding-bottom: var(--pb, var(--size-normal));
+
+/**
+  * Using `pb` to add padding bottom to your element.
+  * Possible variables are:
+  * - **--pb** - set direclty a spacing unit
+  * - **--space-pb** - set a predefined space
+  *
+  * @location utils.padding.bottom Padding bottom
+  * @example
+  * <div class="pb bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.pb,
+.py {
+  padding-bottom: var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))));
 }
-.pl, .px {
-  padding-left: var(--pl, var(--size-normal));
+
+/**
+  * Using `pl` to add padding left to your element.
+  * Possible variables are:
+  * - **--pl** - set direclty a spacing unit
+  * - **--space-pl** - set a predefined space
+  *
+  * @location utils.padding.left Padding left
+  * @example
+  * <div class="pl bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.pl,
+.px {
+  padding-left: var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));
 }
-.pxy, .control {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
+
+/**
+  * Using `pxy` to add padding for the x and y axies to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **my** - padding-top and padding-bottom
+  * - **mx** - padding-left and padding-right
+
+  * @location utils.padding.xy padding y-axis and x-axis
+  * @example
+  * <div class="pxy bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
+.pxy {
+  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
 }
+
+/**
+  * Using `py` to add paddings tob and bottom with same size to your element.
+  * Possible variables are:
+  * - **--py** - set direclty a spacing unit
+  * - **--space-py** - set a predefined space
+  *
+  * @location utils.padding.y Padding y-axis
+  * @example
+  * <div class="py bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
 .py {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
+  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
 }
+
+/**
+  * Using `px` to add paddings left and right with same size to your element.
+  * Possible variables are:
+  * - **--px** - set direclty a spacing unit
+  * - **--space-px** - set a predefined space
+  *
+  * @location utils.padding.x Padding x-axis
+  * @example
+  * <div class="px bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+
 .px {
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
+  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
 }
-.margin, .mxy {
-  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))
-    var(--ml, var(--size-normal));
+
+/**
+  * Using `margin` to add margins top, right, bottom and left to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **mt** - margin-top
+  * - **mr** - margin-right
+  * - **mb** - margin-bottom
+  * - **ml** - margin-left
+  *
+  * @location utils.margin Margin
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="margin bg bg-white">text</div>
+  * </div>
+  */
+
+.margin,
+.mxy {
+  margin: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))))
+    var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))))
+    var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))))
+    var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));
 }
-.mt, .my {
-  margin-top: var(--mt, var(--size-normal));
+
+/**
+  * Using `mt` to add margin top to your element.
+  * Possible variables are:
+  * - **--mt** - set direclty a spacing unit
+  * - **--space-mt** - set a predefined space
+  *
+  * @location utils.margin.top Margin top
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mt bg bg-white">text</div>
+  * </div>
+  */
+
+.mt,
+.my {
+  margin-top: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))));
 }
-.mr, .mx {
-  margin-right: var(--mr, var(--size-normal));
+
+/**
+  * Using `mr` to add margin right to your element.
+  * Possible variables are:
+  * - **--mr** - set direclty a spacing unit
+  * - **--space-mr** - set a predefined space
+  *
+  * @location utils.margin.right Margin right
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mr bg bg-white">text</div>
+  * </div>
+  */
+
+.mr,
+.mx {
+  margin-right: var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))));
 }
-.mb, .my {
-  margin-bottom: var(--mb, var(--size-normal));
+
+/**
+  * Using `mb` to add margin bottom to your element.
+  * Possible variables are:
+  * - **--mb** - set direclty a spacing unit
+  * - **--space-mb** - set a predefined space
+  *
+  * @location utils.margin.bottom Margin bottom
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mb bg bg-white">text</div>
+  * </div>
+  */
+
+.mb,
+.my {
+  margin-bottom: var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))));
 }
-.ml, .mx {
-  margin-left: var(--ml, var(--size-normal));
+
+/**
+  * Using `ml` to add margin left to your element.
+  * Possible variables are:
+  * - **--ml** - set direclty a spacing unit
+  * - **--space-ml** - set a predefined space
+  *
+  * @location utils.margin.left Margin left
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="ml bg bg-white">text</div>
+  * </div>
+  */
+
+.ml,
+.mx {
+  margin-left: var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));
 }
+
+/**
+  * Using `mxy` to add margin for the x and y axies to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **my** - margin-top and margin-bottom
+  * - **mx** - margin-left and margin-right
+
+  * @location utils.margin.xy Margin y-axis and x-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mxy bg bg-white">text</div>
+  * </div>
+  */
+
 .mxy {
-  --mt: var(--my, var(--size-normal));
-  --mb: var(--my, var(--size-normal));
-  --ml: var(--mx, var(--size-normal));
-  --mr: var(--mx, var(--size-normal));
+  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
 }
+
+/**
+  * Using `my` to add margins tob and bottom with same size to your element.
+  * Possible variables are:
+  * - **--my** - set direclty a spacing unit
+  * - **--space-my** - set a predefined space
+  *
+  * @location utils.margin.y Margin y-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="my bg bg-white">text</div>
+  * </div>
+  */
+
 .my {
-  --mt: var(--my, var(--size-normal));
-  --mb: var(--my, var(--size-normal));
+  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
 }
+
+/**
+  * Using `mx` to add margins left and right with same size to your element.
+  * Possible variables are:
+  * - **--mx** - set direclty a spacing unit
+  * - **--space-mx** - set a predefined space
+  *
+  * @location utils.margin.x Margin x-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mx bg bg-white">text</div>
+  * </div>
+  */
+
 .mx {
-  --ml: var(--mx, var(--size-normal));
-  --mr: var(--mx, var(--size-normal));
+  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
 }
-[class*="width-"] {
-  --width-calc: max(
-    var(--width-min-space-x, 32px),
-    calc((100% - var(--width-content, 1280px)) / 2)
-  );
 
-  padding-inline: var(--width-calc);
-}
-.width-content {
-  --width-content: 1280px;
-}
-.width-full {
-  --width: 100%;
-}
-.control {
-  --px: 0;
-  --py: 0;
+/**
+  * The `.control` class is used as base for all controls either by extending or using the class directly.
+  *
+  * @location utils.control Control
+  * @example
+  * <a class="control">Link control</a><br>
+  * <button type="button" class="control">Button control</button><br>
+  * <button type="button" class="control" disabled>Button control disabeled</button><br>
+  * <button type="button" class="control no-hover">Disable hover effect</button><br>
+  */
+
+.control,
+.btn {
+  --space-px: 0;
+  --space-py: 0;
 
   cursor: pointer;
 
   display: inline-block;
 
+  padding: var(--py, calc(var(--space-unit) * var(--space-py)))
+    var(--px, calc(var(--space-unit) * var(--space-px)));
+
   text-align: center;
   text-decoration: none;
+  word-break: keep-all;
 
   -webkit-appearance: none;
 
@@ -206,271 +750,646 @@ small {
   border-radius: unset;
   outline: none;
 }
-.control[aria-disabled="true"], .control:disabled {
+
+.control:hover:not([aria-disabled="true"], [disabled], .btn[class*="bg-"], .no-hover), .btn:hover:not([aria-disabled="true"], [disabled], .btn[class*="bg-"], .no-hover) {
+    --font-color: var(--control-hover-color, var(--accent-color));
+  }
+
+.control[aria-disabled="true"],
+  .control:disabled,
+  .btn[aria-disabled="true"],
+  .btn:disabled {
     cursor: not-allowed;
   }
-.example, .markup {
-  border: 1px solid rgb(var(--code-border-color, var(--border-color)));
+
+/**
+  * Limit width of content. Use the `--width-content` variable to set the width and the `--width-min-offset-x` to
+  * set the minimum required space on the left and right side. If you want to offset the content a little bit but
+  * keep the same settings from `--width-content` and `--width-min-offset-x` you can use the `--width-content-offset`
+  * variable.
+  *
+  * @location utils.width Width (Content)
+  */
+
+[class^="width-"],
+[class*=" width-"] {
+  /* use padding to get content to a specific width https://css-tricks.com/using-max-for-an-inner-element-max-width/ */
+  --width-calc: max(
+    calc(var(--width-min-offset-x) - var(--width-content-offset, 0px)),
+    calc((100% - var(--width-content)) / 2 - var(--width-content-offset, 0px))
+  );
+
+  padding-inline: var(--width-calc);
 }
-.example, .markup > .code > .hljs {
-  padding: 1em;
+
+/**
+  * @location utils.width.content Width base/default
+  * @example
+  * <div class="width-content">
+  *   <div class="bg bg-black" style="min-height: 1em"></div>
+  * </div>
+  */
+
+/* .width-content {} */
+
+/**
+  * @location utils.width.small Width small
+  * @example
+  * <div class="width-sm">
+  *   <div class="bg bg-black" style="min-height: 1em"></div>
+  * </div>
+  */
+
+.width-sm {
+  --width-content: var(--width-sm);
 }
-.example {
-  display: flex;
+
+/**
+  * Objects are build out of objects and define style for it's inner children.
+  *
+  * @page components Components
+  * @order 40
+  */
+
+/**
+  * Buttons extend the `.control` class and can be used with different html attributes.
+  *
+  * @location components.button Button
+  * @example
+  * <button class="btn">Button</button>
+  * <button class="btn" disabled>Button disabled</button>
+  * <a href="#" class="btn">Link Button</a>
+  * <input type="submit" class="btn" value="Submit button" />
+  */
+
+.btn {
+  --space-py: var(--btn-space-py, var(--space-xs));
+  --space-px: var(--btn-space-px, var(--space-sm));
+  --font-size: var(--btn-font-size, var(--font-size-normal));
+  --font-weight: var(--btn-font-weight, var(--font-weight-bold));
+
+  color: rgb(var(--btn-font-color, var(--font-color)));
+  background: rgb(var(--btn-bg-color, var(--bg-color)));
+  transition: all ease var(--btn-animation-time, var(--animation-time));
 }
-.example > iframe {
-    width: 100%;
-    border: none;
-  }
-.markup {
-  font-size: var(--font-size-xs);
+
+/**
+  * We are using the bg colors to modify the btn color. In combination with the accent color for hover effects.
+  *
+  * @location components.button.colors Colors
+  * @example
+  * <button class="btn bg-white">Button</button>
+  * <button class="btn bg-black">Button</button>
+  */
+
+.btn[class*="bg-"]:hover:not([aria-disabled="true"], [disabled], .no-hover) {
+  --btn-bg-color: var(--accent-color);
 }
-.markup > .code {
-    margin: 0;
+
+/**
+  * The hover effect when using bg colors is disabled when using disabled attributes. Or you can manually disable it with `.no-hover`.
+  *
+  * @location components.button.colors.hover Hover effect
+  * @example
+  * <button class="btn bg-black" aria-disabled="true">Disabled by aria</button>
+  * <button class="btn bg-black" disabled>Disabled</button>
+  * <button class="btn bg-black no-hover">No hover</button>
+  */
+
+/**
+  * You can use the container class to wrap your content in a container.
+  *
+  * @location components.container Container
+  * @code
+  * <div class="container"></div>
+  */
+
+.container > *:first-child {
+    margin-top: 0;
   }
-.example + .markup {
-  margin-top: 0;
-  border-top: none;
-}
-.text-flow > * + * {
-    margin-top: var(--text-flow-space, 1em);
+
+.container > *:last-child {
+    margin-bottom: 0;
   }
-.nav-main > .bar {
-  height: var(--nav-main-height);
+
+/**
+  * Use the auto grid class to define your custom grid layouts. Please note, all columns will have the same width.
+  * We are using css variables to define the grid:
+  * - `--grid-columns` (required): define how many columns your grid should have
+  * - `--grid-item-min-width` (required): define the min width of the containing items, when you use a count of 4 and a item
+  *   width of  200px but there are only 650px availabe only three columns will be used. All items won't get smaller as
+  *   this number.
+  *
+  * Modify the gap of your grid:
+  * - `--gap-x` (optional): column (x-axis) gap - space between items - eg. 3rem
+  * - `--gap-y` (optional): row (y-axis) gap - space between items - eg. 3rem
+  * - `--gap` (optional): Define column (x-axis) and row (y-axis) gap - eg. 3rem
+  * - `--gap-space-x` (optional): Define column (x-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space-y` (optional): Define row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space` (optional): Define column (x-axis) and row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  *
+  * If you need to redefine the gap in a inner auto grid you can use `unset` or `inital` as vairable value inn the inner grid to fallback to default.
+  *
+  * @location components.grid-auto Auto Grid
+  * @example
+  * <div class="grid-auto" style="--grid-columns: 3; --grid-item-min-width: 300px;">
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  * </div>
+  */
+
+.grid-auto {
+  /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
+  --grid-gap-x: var(
+    --gap-x,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-y: var(
+    --gap-y,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-count: calc(var(--grid-columns) - 1);
+  --grid-total-gap-width: calc(var(--grid-gap-count) * var(--grid-gap-x));
+  --grid-item-max-width: calc((100% - var(--grid-total-gap-width)) / var(--grid-columns));
+
+  display: grid;
+  grid-gap: var(--grid-gap-y) var(--grid-gap-x);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr)
+  );
 }
-.nav-main > .bar > .control.title {
-    --px: var(--nav-main-menu-item-px);
-    --py: var(--nav-main-menu-item-py);
-    --font-weight: var(--font-weight-bold);
-  }
-.nav-main > .menu {
+
+/**
+  * @location components.navigation.burger-control Navigation Burger Control
+  * @example
+  * <nav class="nav">
+  *   <button class="control burger" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="target" style="--nav-burger-control-size: 3em; --space-px: .4; --space-py: .6">
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *   </button>
+  *   <div id="target" hidden>Controlled Area</div>
+  * </nav>
+  */
+
+.nav-main .burger.control {
+  /* prettier-ignore */
+  --nav-burger-control-line-height-calc: var(--nav-burger-control-line-height, calc(
+    (
+      var(--nav-burger-control-size) -
+      (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) -
+      (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)
+    ) / 3
+  ));
+
+  position: relative;
+  width: calc(var(--nav-burger-control-size) * var(--nav-burger-control-width-multiplier, 1.4));
+  height: var(--nav-burger-control-size);
+}
+
+.nav-main .burger.control > .line {
   position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: block;
+
+  width: calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2);
+  height: var(--nav-burger-control-line-height-calc);
+
+  background: rgb(var(--font-color));
+
+  transition: all var(--nav-burger-animation-time, 0.3s) ease;
+}
+
+.nav-main .burger.control > .line:first-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+
+.nav-main .burger.control > .line:last-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+
+.nav-main .burger.control[aria-expanded="true"] > .line:first-child {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+.nav-main .burger.control[aria-expanded="true"] > .line:nth-child(2) {
+    display: none;
+  }
+
+.nav-main .burger.control[aria-expanded="true"] > .line:last-child {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+.nav-main {
+  --bg-color: var(--na-main-bg-color, var(--color-blue));
+  --font-color: var(--nav-main-bg-color, var(--color-white));
+  --accent-color: var(--nav-main-accent-color, var(--color-yellow));
+
+  position: sticky;
+  z-index: 100;
   top: 0;
-  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));
+}
 
+.nav-main > .bar,
+.nav-main > .bar > .menu {
   display: flex;
-  flex-direction: row;
+  gap: var(--nav-main-item-gap, calc(var(--space-unit) * var(--nav-main-item-gap-space, 0)));
+}
+
+.nav-main > .bar {
+  --width-content-offset: var(--nav-main-bar-item-space-x) * var(--space-unit);
 
-  height: var(--nav-main-height);
+  container-name: nav-bar;
+  container-type: inline-size;
+  justify-content: center;
+  background: rgb(var(--bg-color));
 }
-.nav-main > .menu > .control {
-    --px: var(--nav-main-menu-item-px);
-    --py: var(--nav-main-menu-item-py);
-    --font-size: var(--nav-main-menu-item-font-size);
+
+.nav-main > .bar > .logo,
+  .nav-main > .bar > .burger.control,
+  .nav-main > .bar > .menu > .control {
+    --space-px: var(--nav-main-bar-item-space-x);
+    --space-py: var(--nav-main-bar-item-space-y);
+  }
+
+.nav-main > .bar > .logo {
+    height: var(--nav-main-bar-item-height);
+  }
+
+.nav-main > .bar > .logo > svg {
+      width: auto;
+      height: 100%;
+    }
+
+.nav-main > .bar > .menu > .control {
     --font-weight: var(--font-weight-bold);
+
+    display: block;
   }
-.nav-main > .menu > .control[aria-current] {
+
+.nav-main > .bar > .menu > .control[aria-current="page"] {
       --font-color: var(--accent-color);
     }
-.nav-main > .menu > .control:hover {
-      text-decoration: underline;
+
+@container nav-bar (width > 1000px) {
+    .nav-main > .bar > .burger.control {
+      display: none;
+    }
+
+    .nav-main > .bar > .menu {
+      margin-left: auto;
+    }
+  }
+
+@container nav-bar (width <= 1000px) {
+
+.nav-main > .bar {
+    position: relative
+}
+
+    .nav-main > .bar > .burger.control {
+      --nav-burger-control-size: var(--nav-main-bar-item-height);
+
+      margin-left: auto;
+    }
+
+    .nav-main > .bar > .menu {
+      position: absolute;
+      top: calc(var(--nav-main-bar-item-height));
+      left: 0;
+
+      overflow-y: auto;
+      flex-direction: column;
+
+      width: 100%;
+      max-height: calc(100vh - var(--nav-main-height));
+      padding: calc(var(--space-unit) * var(--nav-main-menu-space-t)) var(--width-calc)
+        calc(var(--space-unit) * var(--nav-main-menu-space-b));
+
+      opacity: 1;
+      background: rgb(var(--bg-color));
+    }
+
+    .nav-main > .bar > .menu.menu-show-enter-active,
+    .nav-main > .bar > .menu.menu-show-leave-active {
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    .nav-main > .bar > .menu.menu-show-enter-from,
+    .nav-main > .bar > .menu.menu-show-leave-to {
+      opacity: 0;
     }
+
+    .nav-main > .bar > .menu[hidden],
+    .nav-main > .bar > .burger.control[aria-expanded="false"] ~ .menu {
+      display: none;
+    }
+  }
+
 .nav-list {
-  --nav-list-item-px: var(--size-sm);
-  --nav-list-item-py: var(--size-xs);
-  --nav-list-item-border-color: var(--border-color);
+  --nav-list-item-space-px: var(--space-sm);
+  --nav-list-item-space-py: var(--space-xs);
+  --nav-list-item-border-color: var(--border-color, var(--font-color));
 
   text-align: left;
 }
+
 .nav-list ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
+
 .nav-list > ul > li + li {
     margin-top: var(--nav-list-root-item-space, var(--size-sm));
   }
+
 .nav-list .control.active {
-      --font-color: var(--accent-color);
-    }
+    --font-color: var(--accent-color);
+  }
+
 .nav-list > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --pr: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-pr: var(--nav-list-item-space-px);
   --font-weight: var(--font-weight-bold);
   --font-size: var(--font-size-md);
 }
+
 .nav-list > ul > li > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --px: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-px: var(--nav-list-item-space-px);
 
   text-align: left;
   border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));
 }
+
 .nav-list > ul > li > ul > li > .control:hover {
     --border-opacity: 1;
   }
-.colors {
-  display: grid;
-  grid-template-columns: repeat(var(--colors-columns, 1), 1fr);
-  gap: var(--colors-gap, var(--size-normal));
+
+.example,
+.markup {
+  border: 1px solid rgb(var(--code-border-color, var(--border-color, var(--font-color))));
 }
-@container content (width > 300px) {
-.colors {
-    --colors-columns: 2
+
+.example {
+  display: flex;
 }
+
+.example > iframe {
+    width: 100%;
+    border: none;
   }
-@container content (width > 620px) {
-.colors {
-    --colors-columns: 3
+
+.markup {
+  font-size: var(--font-size-xs);
 }
+
+.markup > .code {
+    margin: 0;
   }
-@container content (width > 940px) {
+
+.example + .markup {
+  margin-top: 0;
+  border-top: none;
+}
+
 .colors {
-    --colors-columns: 4
+  --grid-columns: 4;
+  --grid-item-min-width: 200px;
 }
-  }
+
 .colors > .item {
+  --space-px: var(--space-md);
+  --space-py: var(--space-xl);
+
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
+  gap: calc(var(--space-xs) * var(--space-unit));
   justify-content: center;
 
-  padding: var(--size-xl) var(--size-md);
-
   text-align: center;
 
-  border: 1px solid rgb(var(--border-color, currentColor));
+  border: 1px solid rgb(var(--border-color, var(--font-color)));
 }
+
 .colors > .item > .text {
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-bold);
   }
+
+.icons {
+  --grid-columns: 4;
+  --grid-item-min-width: 200px;
+}
+
+.icons > .item {
+  --space-px: var(--space-md);
+  --space-py: var(--space-xl);
+
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--space-xs) * var(--space-unit));
+  justify-content: center;
+
+  text-align: center;
+
+  border: 1px solid rgb(var(--border-color, var(--font-color)));
+}
+
+.icons > .item > .show,
+  .icons > .item > .show::before,
+  .icons > .item > .text::before,
+  .icons > .item > .text::after {
+    font-family: var(--icons-font-family);
+  }
+
+.icons > .item > .show {
+    font-size: var(--icons-show-font-size, 3em);
+  }
+
+.icons > .item > .name {
+    font-weight: var(--font-weight-bold);
+  }
+
+.icons > .item.from-var > .show::before,
+    .icons > .item.from-var > .text::before,
+    .icons > .item.from-var > .text::after {
+      content: var(--icon);
+    }
+
+.icons > .item.from-data > .text::before,
+    .icons > .item.from-data > .text::after {
+      content: attr(data-icon);
+    }
+
 .spaces {
   --spaces-bg-color: var(--font-color);
   --spaces-font-color: var(--bg-color);
 
   display: flex;
   flex-direction: column;
-  gap: var(--spaces-gap, var(--size-xs));
+  gap: var(--spaces-gap, calc(var(--spaces-gap-space, var(--space-xs)) * var(--space-unit)));
 }
+
 .spaces > .item {
   display: flex;
 }
+
 .spaces > .item > .bg {
     --bg-color: var(--spaces-bg-color);
     --font-color: var(--spaces-font-color);
   }
-.spaces > .item > div {
-    padding: var(--size-sm) var(--size-normal);
+
+.spaces > .item > .pxy {
+    --space-px: var(--space-normal);
+    --space-py: var(--space-xs);
   }
+
 .spaces > .item > div:first-child {
-    margin-right: var(--space-value);
+    margin-right: calc(var(--space-value) * var(--space-unit));
   }
-.spaces > .item > div:last-child {
+
+.spaces > .item > .info {
     display: flex;
   }
-.spaces > .item > div:last-child > *:not(:last-child) {
-      margin-right: var(--size-xs);
-      padding-right: var(--size-xs);
+
+.spaces > .item > .info > *:not(:last-child) {
+      margin-right: calc(var(--space-xs) * var(--space-unit));
+      padding-right: calc(var(--space-xs) * var(--space-unit));
       border-right: 1px solid currentcolor;
     }
-.spaces > .item > div:last-child > .name {
+
+.spaces > .item > .info > .name {
       font-weight: var(--font-weight-bold);
     }
-.icons {
-  display: grid;
-  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);
-  gap: var(--icons-gap, var(--size-normal));
-}
-@container content (width > 300px) {
-.icons {
-    --icons-columns: 2
-}
-  }
-@container content (width > 620px) {
-.icons {
-    --icons-columns: 3
-}
-  }
-@container content (width > 940px) {
-.icons {
-    --icons-columns: 4
-}
-  }
-.icons > .item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-xs);
-  justify-content: center;
 
-  padding: var(--size-xl) var(--size-md);
+/**
+  * Layouts are the outermost layer of the design. They define the structure of the page.
+  *
+  * @page layout Layout
+  * @order 50
+  */
 
-  text-align: center;
-
-  border: 1px solid rgb(var(--border-color));
-}
-.icons > .item > .show, .icons > .item > .show::before, .icons > .item > .text::before, .icons > .item > .text::after {
-    font-family: var(--icons-font-family);
-  }
-.icons > .item > .show {
-    font-size: var(--icons-show-font-size, 3em);
-  }
-.icons > .item > .name {
-    font-weight: var(--font-weight-bold);
-  }
-.icons > .item.from-var > .show::before, .icons > .item.from-var > .text::before, .icons > .item.from-var > .text::after {
-      content: var(--icon);
-    }
-.icons > .item.from-data > .text::before, .icons > .item.from-data > .text::after {
-      content: attr(data-icon);
-    }
 html {
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable;
-  scroll-padding-top: var(--nav-main-height);
   height: 100%;
 }
-html > body {
+
+html > body:has(.expand-full-height) {
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
 }
-body > header {
-  padding-top: var(--nav-main-height);
+
+html > body:has(.expand-full-height) > .expand-full-height {
+    flex: 1 1;
+  }
+
+html > body > footer {
+  --bg-color: var(--footer-bg-color, var(--color-blue));
+  --font-color: var(--footer-font-color, var(--color-white));
 }
-body > header > .nav-main {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    width: 100%;
+
+html > body > footer > .text {
+    text-align: right;
   }
-body > main {
-  --main-sidebar-width: 25ch;
-  --main-content-sidebar-space: var(--size-xl);
 
-  position: relative;
+p > code {
+  display: inline-block;
+  padding: 0.1em 0.2em;
+  color: rgb(var(--inline-code-font-color, var(--font-color)));
+  background: rgb(var(--inline-code-bg-color, var(--color-gray)));
 }
-body > main > .sidebar {
-  position: absolute;
-  top: 0;
-  left: var(--width-calc);
 
-  width: var(--main-sidebar-width);
-  height: 100%;
+body.page {
+  --main-sidebar-width: 25ch;
+  --main-content-sidebar-space: var(--space-xl);
+}
+
+body.page > .content {
+  --space-py: var(--space-xl);
 }
-body > main > .sidebar > .scroll {
-    position: sticky;
-    top: var(--nav-main-height);
 
-    overflow-y: auto;
+body.page > .content .headline + .description {
+    margin-top: calc(var(--page-headline-description-space, var(--space-md)) * var(--space-unit));
+  }
+
+body.page > .content > main > section + section {
+    margin-top: calc(var(--page-content-section-space, var(--space-xl)) * var(--space-unit));
+  }
 
-    height: 100%;
-    max-height: calc(100vh - var(--nav-main-height));
+body.page > .content > main * + .example,
+  body.page > .content > main *:not(.example) + .markup {
+    margin-top: 1em;
   }
-body > main > .content {
+
+body.page > .content > main {
   container-name: content;
   container-type: inline-size;
-  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
 }
-body > main > .content > .headline + .description {
-    margin-top: var(--size-md);
-  }
-body > main > .content > section + section, body > main > .content > section:first-of-type {
-    margin-top: var(--main-content-section-space, var(--size-lg));
+
+@media screen and (width >= 1000px) {
+  body.page > .content:has(> .sidebar) {
+    display: grid;
+    grid-template-columns: var(--main-sidebar-width) 1fr;
+    grid-template-rows: auto 1fr;
+    gap: var(
+        --page-header-main-garp,
+        calc(var(--page-header-main-space, var(--space-lg)) * var(--space-unit))
+      )
+      var(
+        --page-content-sidebar-garp,
+        calc(var(--page-content-sidebar-space, var(--space-xl)) * var(--space-unit))
+      );
   }
-footer {
-  --mt: var(--size-xl);
+
+    body.page > .content:has(> .sidebar) > .sidebar {
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 2;
+    }
+
+    body.page > .content:has(> .sidebar) > header {
+      grid-column: 2 / span 1;
+      grid-row: 1 / span 1;
+    }
+
+    body.page > .content:has(> .sidebar) > main {
+      grid-column: 2 / span 1;
+      grid-row: 2 / span 1;
+    }
+
+    body.page > .content:has(> .sidebar) > .sidebar > .scrollbar {
+      position: sticky;
+      top: var(--nav-main-height);
+
+      overflow-y: auto;
+
+      height: 100%;
+      max-height: calc(100vh - var(--nav-main-height));
+    }
 }
-footer > .text {
-    text-align: right;
+
+@media screen and (width < 1000px) {
+  body.page > .content > .sidebar {
+    display: none;
   }
+}
 
 /*# sourceMappingURL=ui-doc.css.map */