@ui-doc/html-renderer 0.3.0 → 0.4.0

package/templates/partials/section.html

@@ -1 +1 @@
-<section class="text-flow">{{partial:section-inner}}</section>
+<section class="container">{{partial:section-inner}}</section>

package/templates/partials/spaces.html

@@ -4,8 +4,8 @@
     class="item"
     style="--space-value: {{var:value.output}};"
   >
-    <div class="bg"></div>
-    <div class="bg">
+    <div class="bg pxy"></div>
+    <div class="bg pxy info">
       <span class="name">{{var:name}}</span>
       <span class="value">{{var:value.output}}</span>
       <span class="text">{{var:text}}</span>

package/dist/types/index.d.ts

@@ -1,6 +0,0 @@
-export * from './base';
-export * from './lexer';
-export * from './parser';
-export * from './reader';
-export * from './renderer';
-export * from './token';

package/styles/02_objects/background.css

@@ -1,7 +0,0 @@
-.bg {
-  --selection-bg-color: var(--font-color);
-  --selection-color: var(--bg-color);
-
-  color: rgb(var(--font-color));
-  background: rgb(var(--bg-color));
-}

package/styles/02_objects/control.css

@@ -1,25 +0,0 @@
-.control {
-  --px: 0;
-  --py: 0;
-
-  @extend .pxy;
-  @extend .font;
-
-  cursor: pointer;
-
-  display: inline-block;
-
-  text-align: center;
-  text-decoration: none;
-
-  appearance: none;
-  background: rgb(var(--control-bg-color, transparent));
-  border: none;
-  border-radius: unset;
-  outline: none;
-
-  &[aria-disabled="true"],
-  &:disabled {
-    cursor: not-allowed;
-  }
-}

package/styles/02_objects/margin.css

@@ -1,44 +0,0 @@
-.margin,
-.mxy {
-  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))
-    var(--ml, var(--size-normal));
-}
-
-.mt {
-  margin-top: var(--mt, var(--size-normal));
-}
-
-.mr {
-  margin-right: var(--mr, var(--size-normal));
-}
-
-.mb {
-  margin-bottom: var(--mb, var(--size-normal));
-}
-
-.ml {
-  margin-left: var(--ml, var(--size-normal));
-}
-
-.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));
-}
-
-.my {
-  --mt: var(--my, var(--size-normal));
-  --mb: var(--my, var(--size-normal));
-
-  @extend .mt;
-  @extend .mb;
-}
-
-.mx {
-  --ml: var(--mx, var(--size-normal));
-  --mr: var(--mx, var(--size-normal));
-
-  @extend .ml;
-  @extend .mr;
-}

package/styles/02_objects/padding.css

@@ -1,44 +0,0 @@
-.padding,
-.pxy {
-  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))
-    var(--pl, var(--size-normal));
-}
-
-.pt {
-  padding-top: var(--pt, var(--size-normal));
-}
-
-.pr {
-  padding-right: var(--pr, var(--size-normal));
-}
-
-.pb {
-  padding-bottom: var(--pb, var(--size-normal));
-}
-
-.pl {
-  padding-left: var(--pl, var(--size-normal));
-}
-
-.pxy {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
-}
-
-.py {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
-
-  @extend .pt;
-  @extend .pb;
-}
-
-.px {
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
-
-  @extend .pl;
-  @extend .pr;
-}

package/styles/02_objects/text.css

@@ -1,3 +0,0 @@
-.tc {
-  color: rgb(var(--font-color));
-}

package/styles/02_objects/width.css

@@ -1,16 +0,0 @@
-[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%;
-}

package/styles/03_components/nav/main.css

@@ -1,39 +0,0 @@
-.nav-main {
-  @extend .bg;
-}
-
-.nav-main > .bar {
-  height: var(--nav-main-height);
-
-  > .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 {
-  position: absolute;
-  top: 0;
-  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));
-
-  display: flex;
-  flex-direction: row;
-
-  height: var(--nav-main-height);
-
-  > .control {
-    --px: var(--nav-main-menu-item-px);
-    --py: var(--nav-main-menu-item-py);
-    --font-size: var(--nav-main-menu-item-font-size);
-    --font-weight: var(--font-weight-bold);
-
-    &[aria-current] {
-      --font-color: var(--accent-color);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}

package/styles/03_components/text-flow.css

@@ -1,5 +0,0 @@
-.text-flow {
-  > * + * {
-    margin-top: var(--text-flow-space, 1em);
-  }
-}

package/styles/04_layouts/page.css

@@ -1,70 +0,0 @@
-html {
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable;
-  scroll-padding-top: var(--nav-main-height);
-  height: 100%;
-}
-
-html > body {
-  min-height: 100%;
-}
-
-body > header {
-  padding-top: var(--nav-main-height);
-
-  > .nav-main {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    width: 100%;
-  }
-}
-
-body > main {
-  --main-sidebar-width: 25ch;
-  --main-content-sidebar-space: var(--size-xl);
-
-  position: relative;
-}
-
-body > main > .sidebar {
-  position: absolute;
-  top: 0;
-  left: var(--width-calc);
-
-  width: var(--main-sidebar-width);
-  height: 100%;
-
-  > .scroll {
-    position: sticky;
-    top: var(--nav-main-height);
-
-    overflow-y: auto;
-
-    height: 100%;
-    max-height: calc(100vh - var(--nav-main-height));
-  }
-}
-
-body > main > .content {
-  container-name: content;
-  container-type: inline-size;
-  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
-
-  > .headline + .description {
-    margin-top: var(--size-md);
-  }
-
-  > section + section,
-  > section:first-of-type {
-    margin-top: var(--main-content-section-space, var(--size-lg));
-  }
-}
-
-footer {
-  --mt: var(--size-xl);
-
-  > .text {
-    text-align: right;
-  }
-}