✨ Complete the refactor!

index.html

@@ -687,7 +687,7 @@
                             Semantics
                         </h3>
                         <p>
-                            A <dfn id="dfn-semantic">semantic</dfn> is an inline element having a specific meaning defined by the HTML specification.
+                            A <dfn id="dfn-semantic">semantic</dfn> is an inline element having a specific meaning defined by the <a href="https://html.spec.whatwg.org/">HTML specification</a>.
                         </p>
                         <p>
                             Here's the full list of them:
@@ -710,7 +710,7 @@
                             </li>
                             <li>
                                 <p>
-                                    <code>Inline Code</code>
+                                    <code>Inline Code with <var>variable</var></code>
                                 </p>
                             </li>
                             <li>

src/rules/skeleton.less

@@ -134,15 +134,15 @@
     );
 
     @rgb-leaving: rgba(
-        calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
-        calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
-        calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
+        calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)),
+        calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)),
+        calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)),
         1.000
     );
     @rgb-towards: rgba(
-        calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
-        calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
-        calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
+        calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)),
+        calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)),
+        calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)),
         1.000
     );
 
@@ -954,15 +954,21 @@
     /// ===== Headings =====
     /// Headings are titles with a block display.
 
+    //<editor-fold desc="Rules: Headings">
+
     @{heading} {
         text-align: center;
         .map-var-rgb(bluelib-color, bluelib-accent);
         .use-var-font(bluelib-title);
     }
 
+    //</editor-fold>
+
     /// ===== Anchors =====
     /// Anchors are clickable links to another place, such as a paragraph or a page.
 
+    //<editor-fold desc="Rules: Anchors">
+
     @{anchor} {
         text-decoration-line: underline;
         text-decoration-thickness: 1px;
@@ -1009,11 +1015,15 @@
         text-decoration-style: solid;
     }
 
+    //</editor-fold>
+
     /// ===== Ruby =====
     /// Ruby text is used in various languages to add annotations to text.
     /// Bluelib makes the annotations slightly transparent to differentiate them from the rest of the text.
     /// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
 
+    //<editor-fold desc="Rules: Ruby">
+
     @{ruby-parenthesis} {
         color: @c1;
     }
@@ -1022,10 +1032,14 @@
         color: @c6;
     }
 
-    /// ===== Ruby =====
+    //</editor-fold>
+
+    /// ===== Todos =====
     /// Todos are used to mark unfinished parts of a website.
     /// Their color ignores the palette and derives from the 🚧 emoji
 
+    //<editor-fold desc="Rules: Todos">
+
     @{todo} {
         background-color: #292F33;
 
@@ -1036,9 +1050,13 @@
         border-color: #FFCC4D;
     }
 
+    //</editor-fold>
+
     /// ===== Semantics =====
     /// Semantics are special font effects applied to text with a certain meaning.
 
+    //<editor-fold desc="Rules: Semantics">
+
     @{semantic-abbr} {
         cursor: help;
         text-decoration: underline 1px dotted currentColor;
@@ -1050,7 +1068,7 @@
     }
 
     @{semantic-cite} {
-
+        font-variant: small-caps;
     }
 
     @{semantic-code} {
@@ -1058,16 +1076,16 @@
     }
 
     @{semantic-dfn} {
-        color: @rgb-accent;
+        text-decoration: underline 1px solid currentColor;
         font-style: italic;
     }
 
     @{semantic-em} {
-
+        color: @rgb-accent;
     }
 
     @{semantic-i} {
-
+        font-style: italic;
     }
 
     @{semantic-kbd} {
@@ -1076,11 +1094,15 @@
 
     @{semantic-mark} {
         background-color: @c2;
-        color: @cC;
+        color: @cF;
     }
 
     @{semantic-q} {
+        font-style: oblique;
 
+        &:before, &:after {
+            color: @c5;
+        }
     }
 
     @{semantic-s} {
@@ -1088,7 +1110,8 @@
     }
 
     @{semantic-samp} {
-
+        background-color: @rgb-leaving;
+        color: @rgb-towards;
     }
 
     @{semantic-small} {
@@ -1105,9 +1128,12 @@
     }
 
     @{semantic-var} {
-
+        font-style: normal;
+        color: @rgb-accent;
     }
 
+    //</editor-fold>
+
     /// ===== Colors =====
     /// Colors are classes which apply a certain color from the palette to the bluelib-color of the element which has them.
 

src/targets/paper.module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/paper.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;EDgBA,sBAAA;ECWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}
+{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/vars/module.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib/src/rules/paper.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;ECgBA,sBAAA;EDWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}

src/targets/skeleton.module.css

@@ -538,6 +538,10 @@
   font-weight: 500;
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
+.bluelib cite,
+.bluelib .semantic-cite {
+  font-variant: small-caps;
+}
 .bluelib code,
 .bluelib .semantic-code {
   font-family: var(--bluelib-code-family);
@@ -545,19 +549,47 @@
 }
 .bluelib dfn,
 .bluelib .semantic-dfn {
+  text-decoration: underline 1px solid currentColor;
+  font-style: italic;
+}
+.bluelib em,
+.bluelib .semantic-em {
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
+}
+.bluelib i,
+.bluelib .semantic-i {
   font-style: italic;
 }
 .bluelib mark,
 .bluelib .semantic-mark {
   background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
-  color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
+  color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
+}
+.bluelib q,
+.bluelib .semantic-q {
+  font-style: oblique;
+}
+.bluelib q:before,
+.bluelib .semantic-q:before,
+.bluelib q:after,
+.bluelib .semantic-q:after {
+  color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
+}
+.bluelib samp,
+.bluelib .semantic-samp {
+  background-color: rgba(calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), 1);
+  color: rgba(calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), 1);
 }
 .bluelib strong,
 .bluelib .semantic-strong {
   font-weight: 800;
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
+.bluelib var,
+.bluelib .semantic-var {
+  font-style: normal;
+  color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
+}
 .bluelib .color-red {
   --bluelib-color-r: var(--bluelib-red-r);
   --bluelib-color-g: var(--bluelib-red-g);

src/targets/skeleton.root.css

@@ -2233,6 +2233,12 @@ body .semantic-b,
   font-weight: 500;
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
+body cite,
+.bluelib cite,
+body .semantic-cite,
+.bluelib .semantic-cite {
+  font-variant: small-caps;
+}
 body code,
 .bluelib code,
 body .semantic-code,
@@ -2244,7 +2250,19 @@ body dfn,
 .bluelib dfn,
 body .semantic-dfn,
 .bluelib .semantic-dfn {
+  text-decoration: underline 1px solid currentColor;
+  font-style: italic;
+}
+body em,
+.bluelib em,
+body .semantic-em,
+.bluelib .semantic-em {
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
+}
+body i,
+.bluelib i,
+body .semantic-i,
+.bluelib .semantic-i {
   font-style: italic;
 }
 body mark,
@@ -2252,7 +2270,30 @@ body mark,
 body .semantic-mark,
 .bluelib .semantic-mark {
   background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
-  color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
+  color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
+}
+body q,
+.bluelib q,
+body .semantic-q,
+.bluelib .semantic-q {
+  font-style: oblique;
+}
+body q:before,
+.bluelib q:before,
+body .semantic-q:before,
+.bluelib .semantic-q:before,
+body q:after,
+.bluelib q:after,
+body .semantic-q:after,
+.bluelib .semantic-q:after {
+  color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
+}
+body samp,
+.bluelib samp,
+body .semantic-samp,
+.bluelib .semantic-samp {
+  background-color: rgba(calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), calc(255 * (((var(--bluelib-polarity) / 2) * -1) + 0.5)), 1);
+  color: rgba(calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), calc(255 * ((var(--bluelib-polarity) / 2) + 0.5)), 1);
 }
 body strong,
 .bluelib strong,
@@ -2261,6 +2302,13 @@ body .semantic-strong,
   font-weight: 800;
   color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
+body var,
+.bluelib var,
+body .semantic-var,
+.bluelib .semantic-var {
+  font-style: normal;
+  color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
+}
 body .color-red,
 .bluelib .color-red {
   --bluelib-color-r: var(--bluelib-red-r);