🔧 Rework .split (now called .chapter)

src/rules/skeleton.less

@@ -449,49 +449,74 @@
     }
 
     // A panel which encloses its contents with a quote-like border.
-    @{panel-blockquote} {
+    @{panel-dialog} {
         border-radius: 4px;
         border-width: 0 0 0 2px;
         border-style: solid;
     }
 
     // A panel with no border whose contents are made smaller.
-    @{panel-aside} {
+    @{panel-parenthesis} {
         border-width: 0;
         font-size: smaller;
     }
 
     //</editor-fold>
 
-    /// ===== Splits =====
+    /// ===== Chapters =====
-    /// A split is an element which splits everything contained inside in multiple columns of equal width.
+    /// A chapter is an element represents a larger section of text.
 
-    //<editor-fold desc="Rules: Splits">
+    //<editor-fold desc="Rules: Chapters">
 
-    @{split} {
+    @{chapter} {
         display: flex;
         flex-wrap: wrap;
-        gap: 4px 8px;
+        gap: 8px;
-        justify-content: center;
+        justify-content: stretch;
+        align-items: stretch;
+
+        margin: 8px 0;
+
+        > @{all} {
+            // Allow all children to grow
+            flex-grow: 1;
+            // But not to shrink
+            flex-shrink: 0;
+        }
+
+        @{HEADING} {
+            // Headings should fill up all horizontal space available and force a wrap
+            flex-basis: 100%;
+
+            // They should have a bit of margin to separate them from the other elements
+            margin-top: 0.2rem;
+            margin-bottom: 0.2rem;
+
+            // Especially if they are the first or the last children of a chapter, where they have to separate the chapters from each other
+            &:first-child {
+                margin-top: 1rem;
+            }
+            &:last-child {
+                margin-bottom: 1rem;
+            }
+        }
 
         > @{panel} {
-            // Add a horizontal margin to panels
+            // Remove the innate margin panels have
             margin: 0;
-        }
+            // Have panels split the free space in equal parts
-
-        // Allow contained elements to grow
-        > @{all} {
-            flex-grow: 1;
-            flex-shrink: 0;
             flex-basis: 0;
         }
+
     }
 
     // Force a split to wrap
-    @{split-forcewrap} {
+    @{chapter-forcewrap} {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 100%;
+
+        position: relative;
     }
 
     //</editor-fold>
@@ -568,6 +593,9 @@
         // Disable the browser font override
         font: inherit;
 
+        // Use the maximum width possible
+        width: 100%;
+
         // They should have a solid border
         border-style: solid;
         // Unless they are disabled, then they should have a dashed one
@@ -650,6 +678,14 @@
         padding: 6px;
     }
 
+    @{input-area} {
+        cursor: text;
+
+        border-width: 0 0 0 2px;
+        border-radius: 0 4px 4px 0;
+        padding: 6px;
+    }
+
     /// Selects are inputs where one option between many can be selected
     @{input-select} {
         cursor: context-menu;
@@ -858,7 +894,6 @@
             grid-column: 2;
             // They should occupy all the available space
             justify-self: stretch;
-            width: 100%;
         }
 
         // Groups are similar to form-inputs, but may contain multiple inputs inside them
@@ -907,6 +942,10 @@
 
             margin-top: 8px;
             margin-bottom: 8px;
+
+            @{panel} {
+                margin: 0;
+            }
         }
     }
 

src/targets/skeleton.module.css

@@ -161,34 +161,48 @@
   border-width: 2px;
   border-style: solid;
 }
-.bluelib .panel-blockquote {
+.bluelib .panel-dialog {
   border-radius: 4px;
   border-width: 0 0 0 2px;
   border-style: solid;
 }
-.bluelib .panel-aside {
+.bluelib .panel-parenthesis {
   border-width: 0;
   font-size: smaller;
 }
-.bluelib .split {
+.bluelib .chapter {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 8px;
+  gap: 8px;
-  justify-content: center;
+  justify-content: stretch;
+  align-items: stretch;
+  margin: 8px 0;
 }
-.bluelib .split > .panel {
+.bluelib .chapter > *,
-  margin: 0;
+.bluelib .chapter .all {
-}
-.bluelib .split > *,
-.bluelib .split .all {
   flex-grow: 1;
   flex-shrink: 0;
+}
+.bluelib .chapter > .heading {
+  flex-basis: 100%;
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem;
+}
+.bluelib .chapter > .heading:first-child {
+  margin-top: 1rem;
+}
+.bluelib .chapter > .heading:last-child {
+  margin-bottom: 1rem;
+}
+.bluelib .chapter > .panel {
+  margin: 0;
   flex-basis: 0;
 }
-.bluelib .split-forcewrap {
+.bluelib .chapter-forcewrap {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 100%;
+  position: relative;
 }
 .bluelib .separator {
   border-width: 1px;
@@ -225,6 +239,7 @@
 }
 .bluelib .input {
   font: inherit;
+  width: 100%;
   border-style: solid;
   border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
   color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@@ -276,6 +291,12 @@
   border-radius: 4px 4px 0 0;
   padding: 6px;
 }
+.bluelib .input-area {
+  cursor: text;
+  border-width: 0 0 0 2px;
+  border-radius: 0 4px 4px 0;
+  padding: 6px;
+}
 .bluelib .input-select {
   cursor: context-menu;
   border-width: 0 0 2px 0;
@@ -399,7 +420,6 @@
 .bluelib .form .form-input {
   grid-column: 2;
   justify-self: stretch;
-  width: 100%;
 }
 .bluelib .form .form-group {
   grid-column: 2;
@@ -435,6 +455,9 @@
   margin-top: 8px;
   margin-bottom: 8px;
 }
+.bluelib .form .form-row .panel {
+  margin: 0;
+}
 .bluelib .heading {
   text-align: center;
   --bluelib-color-r: var(--bluelib-accent-r);
@@ -493,6 +516,15 @@
   --bluelib-color-b: var(--bluelib-download-b);
   text-decoration-style: solid;
 }
+.bluelib .ruby {
+  font-size: xx-large;
+}
+.bluelib .ruby-parenthesis {
+  color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
+}
+.bluelib .ruby-text {
+  color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
+}
 .bluelib .color-red {
   --bluelib-color-r: var(--bluelib-red-r);
   --bluelib-color-g: var(--bluelib-red-g);

src/targets/skeleton.root.css

@@ -160,19 +160,7 @@ body .layout-threecol-right,
   }
 }
 body .panel,
-.bluelib .panel,
+.bluelib .panel {
-body section,
-.bluelib section,
-body .panel-box,
-.bluelib .panel-box,
-body .panel-blockquote,
-.bluelib .panel-blockquote,
-body blockquote,
-.bluelib blockquote,
-body .panel-aside,
-.bluelib .panel-aside,
-body aside,
-.bluelib aside {
   margin: 8px 0;
   padding: 8px;
   width: 100%;
@@ -180,94 +168,105 @@ body aside,
   border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
 }
 body .panel > *:first-child,
-.bluelib .panel > *:first-child,
+.bluelib .panel > *:first-child {
-body section > *:first-child,
-.bluelib section > *:first-child,
-body .panel-box > *:first-child,
-.bluelib .panel-box > *:first-child,
-body .panel-blockquote > *:first-child,
-.bluelib .panel-blockquote > *:first-child,
-body blockquote > *:first-child,
-.bluelib blockquote > *:first-child,
-body .panel-aside > *:first-child,
-.bluelib .panel-aside > *:first-child,
-body aside > *:first-child,
-.bluelib aside > *:first-child {
   margin-top: 0;
 }
 body .panel > *:last-child,
-.bluelib .panel > *:last-child,
+.bluelib .panel > *:last-child {
-body section > *:last-child,
-.bluelib section > *:last-child,
-body .panel-box > *:last-child,
-.bluelib .panel-box > *:last-child,
-body .panel-blockquote > *:last-child,
-.bluelib .panel-blockquote > *:last-child,
-body blockquote > *:last-child,
-.bluelib blockquote > *:last-child,
-body .panel-aside > *:last-child,
-.bluelib .panel-aside > *:last-child,
-body aside > *:last-child,
-.bluelib aside > *:last-child {
   margin-bottom: 0;
 }
-body section,
-.bluelib section,
 body .panel-box,
 .bluelib .panel-box {
   border-radius: 4px;
   border-width: 2px;
   border-style: solid;
 }
-body .panel-blockquote,
+body .panel-dialog,
-.bluelib .panel-blockquote,
+.bluelib .panel-dialog {
-body blockquote,
-.bluelib blockquote {
   border-radius: 4px;
   border-width: 0 0 0 2px;
   border-style: solid;
 }
-body .panel-aside,
+body .panel-parenthesis,
-.bluelib .panel-aside,
+.bluelib .panel-parenthesis {
-body aside,
-.bluelib aside {
   border-width: 0;
   font-size: smaller;
 }
-body .split,
+body .chapter,
-.bluelib .split {
+.bluelib .chapter {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 8px;
+  gap: 8px;
-  justify-content: center;
+  justify-content: stretch;
+  align-items: stretch;
+  margin: 8px 0;
 }
-body .split > .panel,
+body .chapter > *,
-.bluelib .split > .panel,
+.bluelib .chapter > * {
-body .split section,
-.bluelib .split section,
-body .split .panel-box,
-.bluelib .split .panel-box,
-body .split .panel-blockquote,
-.bluelib .split .panel-blockquote,
-body .split blockquote,
-.bluelib .split blockquote,
-body .split .panel-aside,
-.bluelib .split .panel-aside,
-body .split aside,
-.bluelib .split aside {
-  margin: 0;
-}
-body .split > *,
-.bluelib .split > * {
   flex-grow: 1;
   flex-shrink: 0;
+}
+body .chapter > h1,
+.bluelib .chapter > h1,
+body .chapter > h2,
+.bluelib .chapter > h2,
+body .chapter > h3,
+.bluelib .chapter > h3,
+body .chapter > h4,
+.bluelib .chapter > h4,
+body .chapter > h5,
+.bluelib .chapter > h5,
+body .chapter > h6,
+.bluelib .chapter > h6,
+body .chapter > .heading,
+.bluelib .chapter > .heading {
+  flex-basis: 100%;
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem;
+}
+body .chapter > h1:first-child,
+.bluelib .chapter > h1:first-child,
+body .chapter > h2:first-child,
+.bluelib .chapter > h2:first-child,
+body .chapter > h3:first-child,
+.bluelib .chapter > h3:first-child,
+body .chapter > h4:first-child,
+.bluelib .chapter > h4:first-child,
+body .chapter > h5:first-child,
+.bluelib .chapter > h5:first-child,
+body .chapter > h6:first-child,
+.bluelib .chapter > h6:first-child,
+body .chapter > .heading:first-child,
+.bluelib .chapter > .heading:first-child {
+  margin-top: 1rem;
+}
+body .chapter > h1:last-child,
+.bluelib .chapter > h1:last-child,
+body .chapter > h2:last-child,
+.bluelib .chapter > h2:last-child,
+body .chapter > h3:last-child,
+.bluelib .chapter > h3:last-child,
+body .chapter > h4:last-child,
+.bluelib .chapter > h4:last-child,
+body .chapter > h5:last-child,
+.bluelib .chapter > h5:last-child,
+body .chapter > h6:last-child,
+.bluelib .chapter > h6:last-child,
+body .chapter > .heading:last-child,
+.bluelib .chapter > .heading:last-child {
+  margin-bottom: 1rem;
+}
+body .chapter > .panel,
+.bluelib .chapter > .panel {
+  margin: 0;
   flex-basis: 0;
 }
-body .split-forcewrap,
+body .chapter-forcewrap,
-.bluelib .split-forcewrap {
+.bluelib .chapter-forcewrap {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 100%;
+  position: relative;
 }
 body hr,
 .bluelib hr,
@@ -351,6 +350,10 @@ body input[type="url"],
 .bluelib input[type="url"],
 body input[type="week"],
 .bluelib input[type="week"],
+body textarea,
+.bluelib textarea,
+body .input-area,
+.bluelib .input-area,
 body select:not([multiple]),
 .bluelib select:not([multiple]),
 body .input-select,
@@ -378,6 +381,7 @@ body .input-radio,
 body .input,
 .bluelib .input {
   font: inherit;
+  width: 100%;
   border-style: solid;
   border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
   color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@@ -415,6 +419,10 @@ body input[type="url"][disabled],
 .bluelib input[type="url"][disabled],
 body input[type="week"][disabled],
 .bluelib input[type="week"][disabled],
+body textarea[disabled],
+.bluelib textarea[disabled],
+body .input-area[disabled],
+.bluelib .input-area[disabled],
 body select:not([multiple])[disabled],
 .bluelib select:not([multiple])[disabled],
 body .input-select[disabled],
@@ -473,6 +481,10 @@ body input[type="url"] .status-disabled,
 .bluelib input[type="url"] .status-disabled,
 body input[type="week"] .status-disabled,
 .bluelib input[type="week"] .status-disabled,
+body textarea .status-disabled,
+.bluelib textarea .status-disabled,
+body .input-area .status-disabled,
+.bluelib .input-area .status-disabled,
 body select:not([multiple]) .status-disabled,
 .bluelib select:not([multiple]) .status-disabled,
 body .input-select .status-disabled,
@@ -533,6 +545,10 @@ body input[type="url"]::placeholder,
 .bluelib input[type="url"]::placeholder,
 body input[type="week"]::placeholder,
 .bluelib input[type="week"]::placeholder,
+body textarea::placeholder,
+.bluelib textarea::placeholder,
+body .input-area::placeholder,
+.bluelib .input-area::placeholder,
 body select:not([multiple])::placeholder,
 .bluelib select:not([multiple])::placeholder,
 body .input-select::placeholder,
@@ -594,6 +610,10 @@ body input[type="url"]:hover,
 .bluelib input[type="url"]:hover,
 body input[type="week"]:hover,
 .bluelib input[type="week"]:hover,
+body textarea:hover,
+.bluelib textarea:hover,
+body .input-area:hover,
+.bluelib .input-area:hover,
 body select:not([multiple]):hover,
 .bluelib select:not([multiple]):hover,
 body .input-select:hover,
@@ -656,6 +676,10 @@ body input[type="url"]:hover::placeholder,
 .bluelib input[type="url"]:hover::placeholder,
 body input[type="week"]:hover::placeholder,
 .bluelib input[type="week"]:hover::placeholder,
+body textarea:hover::placeholder,
+.bluelib textarea:hover::placeholder,
+body .input-area:hover::placeholder,
+.bluelib .input-area:hover::placeholder,
 body select:not([multiple]):hover::placeholder,
 .bluelib select:not([multiple]):hover::placeholder,
 body .input-select:hover::placeholder,
@@ -716,6 +740,10 @@ body input[type="url"]:focus,
 .bluelib input[type="url"]:focus,
 body input[type="week"]:focus,
 .bluelib input[type="week"]:focus,
+body textarea:focus,
+.bluelib textarea:focus,
+body .input-area:focus,
+.bluelib .input-area:focus,
 body select:not([multiple]):focus,
 .bluelib select:not([multiple]):focus,
 body .input-select:focus,
@@ -778,6 +806,10 @@ body input[type="url"]:focus::placeholder,
 .bluelib input[type="url"]:focus::placeholder,
 body input[type="week"]:focus::placeholder,
 .bluelib input[type="week"]:focus::placeholder,
+body textarea:focus::placeholder,
+.bluelib textarea:focus::placeholder,
+body .input-area:focus::placeholder,
+.bluelib .input-area:focus::placeholder,
 body select:not([multiple]):focus::placeholder,
 .bluelib select:not([multiple]):focus::placeholder,
 body .input-select:focus::placeholder,
@@ -838,6 +870,10 @@ body input[type="url"][disabled]:hover,
 .bluelib input[type="url"][disabled]:hover,
 body input[type="week"][disabled]:hover,
 .bluelib input[type="week"][disabled]:hover,
+body textarea[disabled]:hover,
+.bluelib textarea[disabled]:hover,
+body .input-area[disabled]:hover,
+.bluelib .input-area[disabled]:hover,
 body select:not([multiple])[disabled]:hover,
 .bluelib select:not([multiple])[disabled]:hover,
 body .input-select[disabled]:hover,
@@ -896,6 +932,10 @@ body input[type="url"] .status-disabled:hover,
 .bluelib input[type="url"] .status-disabled:hover,
 body input[type="week"] .status-disabled:hover,
 .bluelib input[type="week"] .status-disabled:hover,
+body textarea .status-disabled:hover,
+.bluelib textarea .status-disabled:hover,
+body .input-area .status-disabled:hover,
+.bluelib .input-area .status-disabled:hover,
 body select:not([multiple]) .status-disabled:hover,
 .bluelib select:not([multiple]) .status-disabled:hover,
 body .input-select .status-disabled:hover,
@@ -954,6 +994,10 @@ body input[type="url"][disabled]:focus,
 .bluelib input[type="url"][disabled]:focus,
 body input[type="week"][disabled]:focus,
 .bluelib input[type="week"][disabled]:focus,
+body textarea[disabled]:focus,
+.bluelib textarea[disabled]:focus,
+body .input-area[disabled]:focus,
+.bluelib .input-area[disabled]:focus,
 body select:not([multiple])[disabled]:focus,
 .bluelib select:not([multiple])[disabled]:focus,
 body .input-select[disabled]:focus,
@@ -1012,6 +1056,10 @@ body input[type="url"] .status-disabled:focus,
 .bluelib input[type="url"] .status-disabled:focus,
 body input[type="week"] .status-disabled:focus,
 .bluelib input[type="week"] .status-disabled:focus,
+body textarea .status-disabled:focus,
+.bluelib textarea .status-disabled:focus,
+body .input-area .status-disabled:focus,
+.bluelib .input-area .status-disabled:focus,
 body select:not([multiple]) .status-disabled:focus,
 .bluelib select:not([multiple]) .status-disabled:focus,
 body .input-select .status-disabled:focus,
@@ -1074,6 +1122,10 @@ body input[type="url"][disabled]:hover::placeholder,
 .bluelib input[type="url"][disabled]:hover::placeholder,
 body input[type="week"][disabled]:hover::placeholder,
 .bluelib input[type="week"][disabled]:hover::placeholder,
+body textarea[disabled]:hover::placeholder,
+.bluelib textarea[disabled]:hover::placeholder,
+body .input-area[disabled]:hover::placeholder,
+.bluelib .input-area[disabled]:hover::placeholder,
 body select:not([multiple])[disabled]:hover::placeholder,
 .bluelib select:not([multiple])[disabled]:hover::placeholder,
 body .input-select[disabled]:hover::placeholder,
@@ -1132,6 +1184,10 @@ body input[type="url"] .status-disabled:hover::placeholder,
 .bluelib input[type="url"] .status-disabled:hover::placeholder,
 body input[type="week"] .status-disabled:hover::placeholder,
 .bluelib input[type="week"] .status-disabled:hover::placeholder,
+body textarea .status-disabled:hover::placeholder,
+.bluelib textarea .status-disabled:hover::placeholder,
+body .input-area .status-disabled:hover::placeholder,
+.bluelib .input-area .status-disabled:hover::placeholder,
 body select:not([multiple]) .status-disabled:hover::placeholder,
 .bluelib select:not([multiple]) .status-disabled:hover::placeholder,
 body .input-select .status-disabled:hover::placeholder,
@@ -1190,6 +1246,10 @@ body input[type="url"][disabled]:focus::placeholder,
 .bluelib input[type="url"][disabled]:focus::placeholder,
 body input[type="week"][disabled]:focus::placeholder,
 .bluelib input[type="week"][disabled]:focus::placeholder,
+body textarea[disabled]:focus::placeholder,
+.bluelib textarea[disabled]:focus::placeholder,
+body .input-area[disabled]:focus::placeholder,
+.bluelib .input-area[disabled]:focus::placeholder,
 body select:not([multiple])[disabled]:focus::placeholder,
 .bluelib select:not([multiple])[disabled]:focus::placeholder,
 body .input-select[disabled]:focus::placeholder,
@@ -1248,6 +1308,10 @@ body input[type="url"] .status-disabled:focus::placeholder,
 .bluelib input[type="url"] .status-disabled:focus::placeholder,
 body input[type="week"] .status-disabled:focus::placeholder,
 .bluelib input[type="week"] .status-disabled:focus::placeholder,
+body textarea .status-disabled:focus::placeholder,
+.bluelib textarea .status-disabled:focus::placeholder,
+body .input-area .status-disabled:focus::placeholder,
+.bluelib .input-area .status-disabled:focus::placeholder,
 body select:not([multiple]) .status-disabled:focus::placeholder,
 .bluelib select:not([multiple]) .status-disabled:focus::placeholder,
 body .input-select .status-disabled:focus::placeholder,
@@ -1308,6 +1372,10 @@ body input[type="url"]:optional,
 .bluelib input[type="url"]:optional,
 body input[type="week"]:optional,
 .bluelib input[type="week"]:optional,
+body textarea:optional,
+.bluelib textarea:optional,
+body .input-area:optional,
+.bluelib .input-area:optional,
 body select:not([multiple]):optional,
 .bluelib select:not([multiple]):optional,
 body .input-select:optional,
@@ -1366,6 +1434,10 @@ body input[type="url"]:optional::placeholder,
 .bluelib input[type="url"]:optional::placeholder,
 body input[type="week"]:optional::placeholder,
 .bluelib input[type="week"]:optional::placeholder,
+body textarea:optional::placeholder,
+.bluelib textarea:optional::placeholder,
+body .input-area:optional::placeholder,
+.bluelib .input-area:optional::placeholder,
 body select:not([multiple]):optional::placeholder,
 .bluelib select:not([multiple]):optional::placeholder,
 body .input-select:optional::placeholder,
@@ -1426,6 +1498,10 @@ body input[type="url"]:focus-visible,
 .bluelib input[type="url"]:focus-visible,
 body input[type="week"]:focus-visible,
 .bluelib input[type="week"]:focus-visible,
+body textarea:focus-visible,
+.bluelib textarea:focus-visible,
+body .input-area:focus-visible,
+.bluelib .input-area:focus-visible,
 body select:not([multiple]):focus-visible,
 .bluelib select:not([multiple]):focus-visible,
 body .input-select:focus-visible,
@@ -1491,6 +1567,15 @@ body input[type="week"],
   border-radius: 4px 4px 0 0;
   padding: 6px;
 }
+body textarea,
+.bluelib textarea,
+body .input-area,
+.bluelib .input-area {
+  cursor: text;
+  border-width: 0 0 0 2px;
+  border-radius: 0 4px 4px 0;
+  padding: 6px;
+}
 body select:not([multiple]),
 .bluelib select:not([multiple]),
 body .input-select,
@@ -1876,6 +1961,14 @@ body form input[type="week"],
 .bluelib form input[type="week"],
 body .form input[type="week"],
 .bluelib .form input[type="week"],
+body form > textarea,
+.bluelib form > textarea,
+body .form > textarea,
+.bluelib .form > textarea,
+body form .input-area,
+.bluelib form .input-area,
+body .form .input-area,
+.bluelib .form .input-area,
 body form > select:not([multiple]),
 .bluelib form > select:not([multiple]),
 body .form > select:not([multiple]),
@@ -1934,7 +2027,6 @@ body .form .form-input,
 .bluelib .form .form-input {
   grid-column: 2;
   justify-self: stretch;
-  width: 100%;
 }
 body form .form-group,
 .bluelib form .form-group,
@@ -1986,6 +2078,12 @@ body .form .form-row,
   margin-top: 8px;
   margin-bottom: 8px;
 }
+body form .form-row .panel,
+.bluelib form .form-row .panel,
+body .form .form-row .panel,
+.bluelib .form .form-row .panel {
+  margin: 0;
+}
 body h1,
 .bluelib h1,
 body h2,

src/vars/module.less

@@ -11,11 +11,11 @@
 
 @panel: ~".panel";
 @panel-box: ~".panel-box";
-@panel-blockquote: ~".panel-blockquote";
+@panel-dialog: ~".panel-dialog";
-@panel-aside: ~".panel-aside";
+@panel-parenthesis: ~".panel-parenthesis";
 
-@split: ~".split";
+@chapter: ~".chapter";
-@split-forcewrap: ~".split-forcewrap";
+@chapter-forcewrap: ~".chapter-forcewrap";
 
 @separator: ~".separator";
 @separator-light: ~".separator-light";
@@ -29,6 +29,7 @@
 
 @input: ~'.input';
 @input-field: ~'.input-field';
+@input-area: ~'.input-area';
 @input-select: ~'.input-select';
 @input-multiselect: ~'.input-multiselect';
 @input-option: ~'.input-option';
@@ -47,6 +48,7 @@
 @form-group-row: ~'.form-group-row';
 
 @heading: ~".heading";
+@HEADING: ~"> .heading";
 
 @anchor: ~"a, .anchor";
 @anchor-broken: ~'.anchor-broken';
@@ -57,14 +59,25 @@
 @ruby-parenthesis: ~".ruby-parenthesis";
 @ruby-text: ~".ruby-text";
 
-@element-paragraph: ~".element-paragraph";
+@semantic-abbr: ~"abbr, .semantic-abbr";
-@element-list-item: ~".element-list-item";
+@semantic-b: ~"b, .semantic-b";
-@style-bold: ~".style-bold";
+@semantic-cite: ~"cite, .semantic-cite";
-@style-italic: ~".style-italic";
+@semantic-code: ~"code, .semantic-code";
-@style-underline: ~".style-underline";
+@semantic-data: ~"data, .semantic-data";
-@style-strike: ~".style-strike";
+@semantic-dfn: ~"dfn, .semantic-dfn";
-@style-monospace: ~".style-monospace";
+@semantic-em: ~"em, .semantic-em";
-@style-keyboard: ~".style-keyboard";
+@semantic-i: ~"i, .semantic-i";
+@semantic-kbd: ~"kbd, .semantic-kbd";
+@semantic-mark: ~"mark, .semantic-mark";
+@semantic-q: ~"q, .semantic-q";
+@semantic-s: ~"s, .semantic-s";
+@semantic-samp: ~"samp, .semantic-samp";
+@semantic-small: ~"small, .semantic-small";
+@semantic-strong: ~"strong, .semantic-strong";
+@semantic-time: ~"time, .semantic-time";
+@semantic-u: ~"u, .semantic-u";
+@semantic-var: ~"var, .semantic-var";
+
 @color-red: ~".color-red";
 @color-orange: ~".color-orange";
 @color-yellow: ~".color-yellow";

src/vars/root.less

@@ -9,13 +9,13 @@
 @layout-threecol-center: ~".layout-threecol-center";
 @layout-threecol-right: ~".layout-threecol-right";
 
-@panel: ~".panel, @{panel-box}, @{panel-blockquote}, @{panel-aside}";
+@panel: ~".panel";
-@panel-box: ~"section, .panel-box";
+@panel-box: ~".panel-box";
-@panel-blockquote: ~".panel-blockquote, blockquote";
+@panel-dialog: ~".panel-dialog";
-@panel-aside: ~".panel-aside, aside";
+@panel-parenthesis: ~".panel-parenthesis";
 
-@split: ~".split";
+@chapter: ~".chapter";
-@split-forcewrap: ~".split-forcewrap";
+@chapter-forcewrap: ~".chapter-forcewrap";
 
 @separator: ~"hr, .separator";
 @separator-light: ~".separator-light";
@@ -27,9 +27,10 @@
 
 @status-disabled: ~"[disabled], .status-disabled";
 
-@input: ~'@{input-field}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';
+@input: ~'@{input-field}, @{input-area}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';
-@INPUT: ~'> @{input-field}, > @{input-select}, > @{input-multiselect}, > @{input-button}, > @{input-checkbox}, > @{input-radio}, > .input';
+@INPUT: ~'> @{input-field}, > @{input-area}, > @{input-select}, > @{input-multiselect}, > @{input-button}, > @{input-checkbox}, > @{input-radio}, > .input';
 @input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
+@input-area: ~'textarea, .input-area';
 @input-select: ~'select:not([multiple]), .input-select';
 @input-multiselect: ~'select[multiple], .input-multiselect';
 @input-option: ~'option, .input-option';
@@ -48,6 +49,7 @@
 @form-group-row: ~'.form-group-row';
 
 @heading: ~"h1, h2, h3, h4, h5, h6, .heading";
+@HEADING: ~"> h1, > h2, > h3, > h4, > h5, > h6, > .heading";
 
 @anchor: ~"a, .anchor";
 @anchor-broken: ~'a:not([href]), a[href=""], .anchor-broken';
@@ -77,19 +79,6 @@
 @semantic-u: ~"u, .semantic-u";
 @semantic-var: ~"var, .semantic-var";
 
-
-@style-b: ~"b, .style-bringattention";
-@style-strong: ~"strong, .style-strong";
-@style-emphasis: ~".style-italic, i, em";
-@style-annotated: ~".style-underline, u";
-@style-strike: ~".style-strike, strike, s, del";
-@style-monospace: ~".style-monospace, code";
-@style-keyboard: ~".style-keyboard, kbd";
-
-@element-paragraph: ~".element-paragraph, p";
-@element-list-item: ~".element-list-item, li";
-
-
 @color-red: ~".color-red";
 @color-orange: ~".color-orange";
 @color-yellow: ~".color-yellow";