From 62dbbdc03aac97f0a19bd5cea3ddb93a835a453d Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 24 Jan 2021 04:50:18 +0100
Subject: [PATCH] Done most of the stuff

---
 .idea/codeStyles/codeStyleConfig.xml    |   5 +
 .idea/watcherTasks.xml                  |  29 ++-
 bluelib-2.iml                           |   4 +-
 index.html                              |  76 +++----
 skeleton.css                            | 287 ------------------------
 skin.css                                | 130 -----------
 src/skeleton/skeleton-class.css         | 215 +++++++++++++-----
 src/skeleton/skeleton-class.css.map     |   2 +-
 src/skeleton/skeleton-root.css          | 173 ++++++++++++++
 src/skeleton/skeleton-root.css.map      |   2 +-
 src/skeleton/skeleton-root.less         |  78 +++++++
 src/skeleton/skeleton.less              |  77 +------
 src/skins/rygblue/rygblue-class.css     |  66 ++++++
 src/skins/rygblue/rygblue-class.css.map |   1 +
 src/skins/rygblue/rygblue-class.less    |   5 +
 src/skins/rygblue/rygblue-root.css      |  96 ++++++++
 src/skins/rygblue/rygblue-root.css.map  |   1 +
 src/skins/rygblue/rygblue-root.less     |  83 +++++++
 src/skins/rygblue/rygblue.less          | 220 ++++++++++++++++++
 19 files changed, 960 insertions(+), 590 deletions(-)
 create mode 100644 .idea/codeStyles/codeStyleConfig.xml
 delete mode 100644 skeleton.css
 delete mode 100644 skin.css
 create mode 100644 src/skins/rygblue/rygblue-class.css
 create mode 100644 src/skins/rygblue/rygblue-class.css.map
 create mode 100644 src/skins/rygblue/rygblue-class.less
 create mode 100644 src/skins/rygblue/rygblue-root.css
 create mode 100644 src/skins/rygblue/rygblue-root.css.map
 create mode 100644 src/skins/rygblue/rygblue-root.less
 create mode 100644 src/skins/rygblue/rygblue.less

diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index 030e7b6..27a5fde 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -1,4 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="Less" />
+  <component name="ProjectTasksOptions" suppressed-tasks="Less">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$ $FileNameWithoutExtension$.css --source-map" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="less" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Less" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array>
+          <FilterInfo>
+            <option name="description" value="" />
+            <option name="name" value="" />
+            <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
+          </FilterInfo>
+        </array>
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="lessc" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Source" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
 </project>
\ No newline at end of file
diff --git a/bluelib-2.iml b/bluelib-2.iml
index 80cc739..673966e 100644
--- a/bluelib-2.iml
+++ b/bluelib-2.iml
@@ -2,7 +2,9 @@
 <module type="WEB_MODULE" version="4">
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/targets" isTestSource="false" />
+    </content>
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7849717..8eac8f9 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="skeleton.css">
-    <link rel="stylesheet" href="skin.css">
+    <link rel="stylesheet" href="src/skeleton/skeleton-root.css">
+    <link rel="stylesheet" href="src/skins/rygblue/rygblue-root.css">
     <title>Bluelib 2</title>
 </head>
 <body class="theme-bluelib">
@@ -16,7 +16,7 @@
                 RYG style, in pure CSS
             </h2>
         </hgroup>
-        <section class="panel">
+        <section class="panel panel-box">
             <h3>
                 Welcome to bluelib!
             </h3>
@@ -31,7 +31,7 @@
         <h2>
             Panels
         </h2>
-        <section class="panel">
+        <section class="panel panel-box">
             <h3>
                 Panel
             </h3>
@@ -42,7 +42,7 @@
                 It usually represents a section of text about a topic described by the title above.
             </p>
         </section>
-        <table class="panel">
+        <table class="panel panel-table">
             <thead>
                 <tr>
                     <th>This...</th>
@@ -58,7 +58,7 @@
                 </tr>
             </tbody>
         </table>
-        <blockquote class="panel">
+        <blockquote class="panel panel-blockquote">
             <h3>
                 Blockquote
             </h3>
@@ -69,7 +69,7 @@
                 Blockquotes are specially formatted panels, useful for quotes!
             </p>
         </blockquote>
-        <aside class="panel">
+        <aside class="panel panel-aside">
             <h3>
                 Aside
             </h3>
@@ -84,7 +84,7 @@
         <h2>
             Nesting containers
         </h2>
-        <section class="panel">
+        <section class="panel panel-box">
             <h3>
                 Level one
             </h3>
@@ -94,27 +94,27 @@
             <p>
                 Drop one outside of any paragraphs and they will nest automatically.
             </p>
-            <section class="panel">
+            <section class="panel panel-box">
                 <h3>
                     Level two
                 </h3>
                 <p>
                     You can add text above...
                 </p>
-                <section class="panel">
+                <section class="panel panel-box">
                     <h3>
                         Level three
                     </h3>
                     <p>
                         How deep does the rabbit hole go?
                     </p>
-                    <blockquote class="panel">
+                    <blockquote class="panel panel-blockquote">
                         <b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
-                        <aside class="panel">
+                        <aside class="panel panel-aside">
                             BWOON.
-                            <aside class="panel">
+                            <aside class="panel panel-aside">
                                 BWOON.
-                                <aside class="panel">
+                                <aside class="panel panel-aside">
                                     BWOON.
                                 </aside>
                             </aside>
@@ -129,7 +129,7 @@
         <h2>
             Layout
         </h2>
-        <section class="panel">
+        <section class="panel panel-aside">
             <h3>
                 Splitter and splitted
             </h3>
@@ -139,8 +139,8 @@
             <p>
                 The columns will grow automatically to on the height of the tallest.
             </p>
-            <div class="splitter">
-                <section class="splitted panel">
+            <div class="panel panel-split">
+                <section class="panel panel-box">
                     <h3>
                         Shorter panel
                     </h3>
@@ -148,7 +148,7 @@
                         That's it.
                     </p>
                 </section>
-                <section class="splitted panel">
+                <section class="panel panel-box">
                     <h3>
                         Taller panel
                     </h3>
@@ -164,33 +164,7 @@
                 </section>
             </div>
         </section>
-        <section class="limited panel">
-            <h3>
-                Limiting panels
-            </h3>
-            <p>
-                Panels can be limited to force them to stay under 420px in width.
-            </p>
-        </section>
-        <div class="splitter">
-            <section class="splitted limited panel">
-                <h3>
-                    Split limited panels
-                </h3>
-                <p>
-                    This applies to panels inside a splitter too!
-                </p>
-            </section>
-            <section class="splitted limited panel">
-                <h3>
-                    Autocenter
-                </h3>
-                <p>
-                    The splitter will try to keep the limited panels centered.
-                </p>
-            </section>
-        </div>
-        <section class="panel">
+        <section class="panel panel-box">
             <h3>
                 Horizonal rows
             </h3>
@@ -205,8 +179,8 @@
         <h2>
             Formatting
         </h2>
-        <div class="splitter">
-            <section class="splitted panel">
+        <div class="panel panel-split">
+            <section class="panel panel-box">
                 <h3>
                     Colors
                 </h3>
@@ -223,7 +197,7 @@
                     <li><span class="color-magenta">Magenta</span></li>
                 </ul>
             </section>
-            <section class="splitted panel">
+            <section class="panel panel-box">
                 <h3>
                     Size
                 </h3>
@@ -240,7 +214,7 @@
                     <li><span class="size-xxs">XXS</span></li>
                 </ul>
             </section>
-            <section class="splitted panel">
+            <section class="panel panel-box">
                 <h3>
                     Alignment
                 </h3>
@@ -251,14 +225,14 @@
                 <div class="align-center">Center</div>
                 <div class="align-right">Right</div>
             </section>
-            <section class="splitted panel">
+            <section class="panel panel-box">
                 <h3>
                     Spoilers
                 </h3>
                 <p>
                     You can define <span class="spoiler">spoilers</span>.
                 </p>
-                <section class="splitted spoiler panel">
+                <section class="spoiler panel panel-box">
                     <h3>
                         Spoiler panels
                     </h3>
diff --git a/skeleton.css b/skeleton.css
deleted file mode 100644
index dbf546a..0000000
--- a/skeleton.css
+++ /dev/null
@@ -1,287 +0,0 @@
-/*
-    This file should contain ONLY positioning and layout rules.
-    Colors and theme should go in skin.css!
-*/
-
-
-/*
-    From here on, rules will be defined as
-
-    inherits1, inherits2, inherits3, ...,
-    .rulename {
-        ...
-    }
-*/
-
-/* Use border boxes in all elements instead of the insane content box measuring */
-* {
-    box-sizing: border-box;
-
-    /* Set the default border color and style on all elements, and allow skins to override them */
-    border-style: solid;
-    border-width: 0;  /* Removing this means all elements will have a 2px border-width */
-}
-
-/* --- Main container --- */
-
-main,
-.main {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1280px;
-}
-
-/* --- Horizontal split --- */
-
-.splitter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 8px 0;
-    justify-content: center;
-}
-
-.splitted {  /* Yes I know split is irregular, but it allows to disambiguate better between splitter and split */
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: 0;
-}
-
-/* --- Text positions --- */
-
-.align-left {
-    text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6,  /* Align titles to the center */
-.align-center {
-    text-align: center;
-}
-
-.align-right {
-    text-align: right;
-}
-
-/* --- Text style --- */
-
-h1,
-.size-xxl {
-    font-size: xx-large;
-}
-
-h2,
-.size-xl {
-    font-size: x-large;
-}
-
-h3,
-.size-l {
-    font-size: large;
-}
-
-h4,
-.size-m {
-    font-size: medium;
-}
-
-h5,
-.size-s {
-    font-size: small;
-}
-
-h6,
-.size-xs {
-    font-size: x-small;
-}
-
-.size-xxs {
-    font-size: xx-small;
-}
-
-b,
-.style-bold {
-    font-weight: bold;
-}
-
-i,
-.style-italic {
-    font-style: italic;
-}
-
-/* --- Text colors --- */
-
-.color-red {
-    color: red;
-}
-
-.color-orange {
-    color: orange;
-}
-
-.color-yellow {
-    color: #dddd00;  /* Yellow isn't readable on a white background */
-}
-
-.color-lime {
-    color: lime;
-}
-
-.color-cyan {
-    color: cyan;
-}
-
-.color-blue {
-    color: blue;
-}
-
-.color-magenta {
-    color: magenta;
-}
-
-/* --- Text mode --- */
-
-pre, code, kbd,
-.monospace {
-    font-family: monospace;
-}
-
-.spoiler {
-    filter: blur(5px);
-    cursor: help;
-}
-
-.spoiler:hover {
-    filter: none;
-}
-
-/* --- Containers --- */
-
-.panel {
-    margin: 8px 0;
-    padding: 8px;
-    border-radius: 4px;
-    border-width: 2px;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.025);
-}
-
-/* Dirty hack to have uniform margins */
-.splitter > .panel, .panel > .panel, .panel > .splitter {
-    margin: 0;
-}
-
-.panel p:first-child, /* Remove the margin from the first paragraph of a panel */
-.no-margin-top {
-    margin-top: 0;
-}
-
-.panel p:last-child, /* Remove the margin from the last paragraph of a panel */
-.no-margin-bottom {
-    margin-bottom: 0;
-}
-
-.no-margin-vertical {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.no-margin-left {
-    margin-left: 0;
-}
-
-.no-margin-right {
-    margin-right: 0;
-}
-
-.no-margin-horizontal {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.no-margin-all {
-    margin: 0;
-}
-
-.panel h1:first-child, /* Add a slight margin to the first title of a panel */
-.panel h2:first-child, /*                                                   */
-.panel h3:first-child, /*                                                   */
-.panel h4:first-child, /*                                                   */
-.panel h5:first-child, /*                                                   */
-.panel h6:first-child, /*                                                   */
-.slight-margin-top {
-    margin-top: 4px;
-}
-
-.panel h1:last-child, /* Add a slight margin to the last title of a panel */
-.panel h2:last-child, /*                                                  */
-.panel h3:last-child, /*                                                  */
-.panel h4:last-child, /*                                                  */
-.panel h5:last-child, /*                                                  */
-.panel h6:last-child, /*                                                  */
-.slight-margin-bottom {
-    margin-bottom: 4px;
-}
-
-/* Blockquote panels */
-blockquote.panel,
-.panel.panel-blockquote {
-    border-radius: 4px;
-    border-left-width: 2px;
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-right-width: 0;
-}
-
-/* Table panels */
-table.panel,
-.panel-table.panel {
-    border-spacing: 0;
-    border-width: 2px;
-    border-collapse: collapse;
-}
-
-/* Aside panels */
-aside.panel,
-.aside.panel {
-    border-width: 0;
-    font-size: smaller;
-}
-
-th, td,
-.table-cell {
-    padding: 4px;
-    border-width: 1px;
-}
-
-/* Limited panels */
-.limited {
-    max-width: 420px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-img.limited {
-    max-width: 420px;
-    max-height: 420px;
-}
-
-/* --- Separators --- */
-
-hr,
-.separator {
-    border-width: 1px;
-}
-
-/* --- Lists --- */
-
-li,
-.list-element {
-    margin: 10px 0;
-}
-
-/* --- Misc --- */
-
-*[title],
-.with-title-text {
-    cursor: help;
-}
diff --git a/skin.css b/skin.css
deleted file mode 100644
index b3f38b8..0000000
--- a/skin.css
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
-    This file should contain ONLY coloring and theming rules.
-    Positioning and layout rules should go in skeleton.css!
-*/
-
-:root {
-    /*
-    CSS variables go here!
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-    */
-
-    /* The main colors of the stylesheet */
-    --background: #0d193b;
-    --foreground: #a0ccff;
-    --accent: #ffffff;
-
-    /* Panel background */
-    --panel: rgba(160, 204, 255, 0.02);  /* It's --foreground, but with 2% alpha */
-    --border: rgba(160, 204, 255, 0.10);  /* It's --foreground, but with 10% alpha */
-
-    /* Pastel colors */
-    --red: #ff7d7d;
-    --orange: #ffbb7d;
-    --yellow: #ffff7d;
-    --lime: #7dff7d;
-    --cyan: #7dffff;
-    --blue: #7d7dff;
-    --magenta: #ff7dff;
-
-    /* Link colors */
-    --link: #00caca;
-    --link-hover: #00ffff;
-    --link-active: #a0ffff;
-
-    /* Fonts */
-    --font-text: sans-serif;
-    --font-title: sans-serif;
-    --font-code: monospace;
-}
-
-/*
-    From here on, rules will be defined as
-
-    inherits1, inherits2, inherits3, ...,
-    .rule-name {
-        ...
-    }
-*/
-
-/* --- Main colors and font --- */
-
-* {
-    border-color: var(--border);
-}
-
-body {
-    background-color: var(--background);
-    color: var(--foreground);
-    font-family: var(--font-text);
-}
-
-/* --- Text colors --- */
-
-.color-red {
-    color: var(--red);
-}
-
-.color-orange {
-    color: var(--orange);
-}
-
-.color-yellow {
-    color: var(--yellow);
-}
-
-.color-lime {
-    color: var(--lime);
-}
-
-.color-cyan {
-    color: var(--cyan);
-}
-
-.color-blue {
-    color: var(--blue);
-}
-
-.color-magenta {
-    color: var(--magenta);
-}
-
-
-/* --- Titles --- */
-
-h1, h2, h3, h4, h5, h6, th,
-.title {
-    color: var(--accent);
-    font-family: var(--font-title);
-}
-
-/* --- Links --- */
-
-a,
-.link {
-    color: var(--link);
-    text-decoration: none;
-}
-
-a:hover,
-.link:hover {
-    color: var(--link-hover);
-}
-
-a:active,
-.link:active {
-    color: var(--link-active);
-}
-
-/* --- Code blocks --- */
-
-pre, code, samp,
-.monospace {
-    font-family: var(--font-code);
-}
-
-/* --- Panels --- */
-
-.panel {
-    background-color: var(--panel);
-}
diff --git a/src/skeleton/skeleton-class.css b/src/skeleton/skeleton-class.css
index 8334a05..53d4b82 100644
--- a/src/skeleton/skeleton-class.css
+++ b/src/skeleton/skeleton-class.css
@@ -1,3 +1,165 @@
+.bluelib-skeleton {
+  box-sizing: border-box;
+}
+.bluelib-skeleton .container-main {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1280px;
+}
+.bluelib-skeleton .panel {
+  margin: 8px 0;
+  width: 100%;
+}
+.bluelib-skeleton .panel > .panel {
+  margin: 0;
+}
+.bluelib-skeleton .panel > .paragraph:first-child {
+  margin-top: 0;
+}
+.bluelib-skeleton .panel > .paragraph:last-child {
+  margin-bottom: 0;
+}
+.bluelib-skeleton .panel > .title:first-child {
+  margin-top: 4px;
+}
+.bluelib-skeleton .panel > .title:last-child {
+  margin-bottom: 4px;
+}
+.bluelib-skeleton .panel-box {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+}
+.bluelib-skeleton .panel-blockquote {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  border-left-width: 2px;
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-right-width: 0;
+}
+.bluelib-skeleton .panel-aside {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  border-width: 0;
+  font-size: smaller;
+}
+.bluelib-skeleton .panel-table {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  display: table;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.bluelib-skeleton .panel-split {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+.bluelib-skeleton .panel-split > * {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+}
+.bluelib-skeleton .status-disabled {
+  cursor: not-allowed;
+}
+.bluelib-skeleton .status-hoverable {
+  cursor: help;
+}
+.bluelib-skeleton .status-clickable {
+  cursor: pointer;
+}
+.bluelib-skeleton .spoiler {
+  filter: blur(5px);
+  cursor: help;
+}
+.bluelib-skeleton .spoiler:hover {
+  filter: none;
+}
+.bluelib-skeleton .element-title {
+  text-align: center;
+}
+.bluelib-skeleton .element-separator {
+  border-width: 1px;
+}
+.bluelib-skeleton .element-list-item {
+  margin: 10px 0;
+}
+.bluelib-skeleton .align-left {
+  text-align: left;
+}
+.bluelib-skeleton .align-center {
+  text-align: center;
+}
+.bluelib-skeleton .align-right {
+  text-align: right;
+}
+.bluelib-skeleton .size-xxl {
+  font-size: xx-large;
+}
+.bluelib-skeleton .size-xl {
+  font-size: x-large;
+}
+.bluelib-skeleton .size-l {
+  font-size: large;
+}
+.bluelib-skeleton .size-m {
+  font-size: medium;
+}
+.bluelib-skeleton .size-s {
+  font-size: small;
+}
+.bluelib-skeleton .size-xs {
+  font-size: x-small;
+}
+.bluelib-skeleton .size-xxs {
+  font-size: xx-small;
+}
+.bluelib-skeleton .style-bold {
+  font-weight: bold;
+}
+.bluelib-skeleton .style-italic {
+  font-style: italic;
+}
+.bluelib-skeleton .style-underline {
+  text-decoration-line: underline;
+}
+.bluelib-skeleton .style-strike {
+  text-decoration-line: line-through;
+}
+.bluelib-skeleton .style-monospace {
+  font-family: monospace;
+}
+.bluelib-skeleton .color-red {
+  color: red;
+}
+.bluelib-skeleton .color-orange {
+  color: orange;
+}
+.bluelib-skeleton .color-yellow {
+  color: #dddd00;
+}
+.bluelib-skeleton .color-lime {
+  color: lime;
+}
+.bluelib-skeleton .color-cyan {
+  color: cyan;
+}
+.bluelib-skeleton .color-blue {
+  color: blue;
+}
+.bluelib-skeleton .color-magenta {
+  color: magenta;
+}
 .bluelib {
   box-sizing: border-box;
 }
@@ -136,6 +298,9 @@
 .bluelib .style-strike {
   text-decoration-line: line-through;
 }
+.bluelib .style-monospace {
+  font-family: monospace;
+}
 .bluelib .color-red {
   color: red;
 }
@@ -157,54 +322,4 @@
 .bluelib .color-magenta {
   color: magenta;
 }
-.bluelib h1,
-.bluelib h2,
-.bluelib h3,
-.bluelib h4,
-.bluelib h5,
-.bluelib h6 {
-  text-align: center;
-}
-.bluelib hr {
-  border-width: 1px;
-}
-.bluelib h1 {
-  font-size: xx-large;
-}
-.bluelib h2 {
-  font-size: x-large;
-}
-.bluelib h3 {
-  font-size: large;
-}
-.bluelib h4 {
-  font-size: medium;
-}
-.bluelib h5 {
-  font-size: small;
-}
-.bluelib h6 {
-  font-size: x-small;
-}
-.bluelib b {
-  font-weight: bold;
-}
-.bluelib i {
-  font-style: italic;
-}
-.bluelib u {
-  text-decoration-line: underline;
-}
-.bluelib li {
-  margin: 10px 0;
-}
-.bluelib *[title] {
-  cursor: help;
-}
-.bluelib *[disabled] {
-  cursor: not-allowed;
-}
-.bluelib *[onclick] {
-  cursor: pointer;
-}
 /*# sourceMappingURL=skeleton-class.css.map */
\ No newline at end of file
diff --git a/src/skeleton/skeleton-class.css.map b/src/skeleton/skeleton-class.css.map
index a191931..71734aa 100644
--- a/src/skeleton/skeleton-class.css.map
+++ b/src/skeleton/skeleton-class.css.map
@@ -1 +1 @@
-{"version":3,"sources":["skeleton-class.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,QCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,QCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,QCmBI,OAII;EACI,SAAA;;AAKA,QAVR,OASI,aACK;EACG,aAAA;;AAGJ,QAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,QArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,QAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,QCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,QC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,QCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,QC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,QCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,QCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,QCqGI;EACI,mBAAA;;ADtGR,QCyGI;EACI,YAAA;;AD1GR,QC6GI;EACI,eAAA;;AD9GR,QCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,QAJJ,SAIK;EACG,YAAA;;ADxHZ,QC8HI;EAuBI,kBAAA;;ADrJR,QCsII;EACI,iBAAA;;ADvIR,QC0II;EACI,cAAA;;AD3IR,QCgJI;EACI,gBAAA;;ADjJR,QCoJI;EACI,kBAAA;;ADrJR,QCwJI;EACI,iBAAA;;ADzJR,QC8JI;EACI,mBAAA;;AD/JR,QCkKI;EACI,kBAAA;;ADnKR,QCsKI;EACI,gBAAA;;ADvKR,QC0KI;EACI,iBAAA;;AD3KR,QC8KI;EACI,gBAAA;;AD/KR,QCkLI;EACI,kBAAA;;ADnLR,QCsLI;EACI,mBAAA;;ADvLR,QC4LI;EACI,iBAAA;;AD7LR,QCgMI;EACI,kBAAA;;ADjMR,QCoMI;EACI,+BAAA;;ADrMR,QCwMI;EACI,kCAAA;;ADzMR,QC8MI;EACI,UAAA;;AD/MR,QCkNI;EACI,aAAA;;ADnNR,QCsNI;EACI,cAAA;;ADvNR,QC0NI;EACI,WAAA;;AD3NR,QC8NI;EACI,WAAA;;AD/NR,QCkOI;EACI,WAAA;;ADnOR,QCsOI;EACI,cAAA;;ADvOR,QC4OI;AD5OJ,QC4OQ;AD5OR,QC4OY;AD5OZ,QC4OgB;AD5OhB,QC4OoB;AD5OpB,QC4OwB;EAvFhB,kBAAA;;ADrJR,QCgPI;EAzGI,iBAAA;;ADvIR,QCwPI;EAzFI,mBAAA;;AD/JR,QC4PI;EAzFI,kBAAA;;ADnKR,QCgQI;EAzFI,gBAAA;;ADvKR,QCoQI;EAzFI,iBAAA;;AD3KR,QCwQI;EAzFI,gBAAA;;AD/KR,QC4QI;EAzFI,kBAAA;;ADnLR,QCgRI;EAnFI,iBAAA;;AD7LR,QCoRI;EAnFI,kBAAA;;ADjMR,QCwRI;EAnFI,+BAAA;;ADrMR,QC4RI;EAjJI,cAAA;;AD3IR,QCgSI,EAAC;EAtLG,YAAA;;AD1GR,QCoSI,EAAC;EA9LG,mBAAA;;ADtGR,QCwSI,EAAC;EA1LG,eAAA","file":"skeleton-class.css"}
\ No newline at end of file
+{"version":3,"sources":["skeleton.less","skeleton-class.less"],"names":[],"mappings":"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","file":"skeleton-class.css"}
\ No newline at end of file
diff --git a/src/skeleton/skeleton-root.css b/src/skeleton/skeleton-root.css
index a24204b..b600638 100644
--- a/src/skeleton/skeleton-root.css
+++ b/src/skeleton/skeleton-root.css
@@ -1,3 +1,165 @@
+.bluelib-skeleton {
+  box-sizing: border-box;
+}
+.bluelib-skeleton .container-main {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1280px;
+}
+.bluelib-skeleton .panel {
+  margin: 8px 0;
+  width: 100%;
+}
+.bluelib-skeleton .panel > .panel {
+  margin: 0;
+}
+.bluelib-skeleton .panel > .paragraph:first-child {
+  margin-top: 0;
+}
+.bluelib-skeleton .panel > .paragraph:last-child {
+  margin-bottom: 0;
+}
+.bluelib-skeleton .panel > .title:first-child {
+  margin-top: 4px;
+}
+.bluelib-skeleton .panel > .title:last-child {
+  margin-bottom: 4px;
+}
+.bluelib-skeleton .panel-box {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+}
+.bluelib-skeleton .panel-blockquote {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  border-left-width: 2px;
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-right-width: 0;
+}
+.bluelib-skeleton .panel-aside {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  border-width: 0;
+  font-size: smaller;
+}
+.bluelib-skeleton .panel-table {
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: rgba(0, 0, 0, 0.025);
+  display: table;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.bluelib-skeleton .panel-split {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+.bluelib-skeleton .panel-split > * {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+}
+.bluelib-skeleton .status-disabled {
+  cursor: not-allowed;
+}
+.bluelib-skeleton .status-hoverable {
+  cursor: help;
+}
+.bluelib-skeleton .status-clickable {
+  cursor: pointer;
+}
+.bluelib-skeleton .spoiler {
+  filter: blur(5px);
+  cursor: help;
+}
+.bluelib-skeleton .spoiler:hover {
+  filter: none;
+}
+.bluelib-skeleton .element-title {
+  text-align: center;
+}
+.bluelib-skeleton .element-separator {
+  border-width: 1px;
+}
+.bluelib-skeleton .element-list-item {
+  margin: 10px 0;
+}
+.bluelib-skeleton .align-left {
+  text-align: left;
+}
+.bluelib-skeleton .align-center {
+  text-align: center;
+}
+.bluelib-skeleton .align-right {
+  text-align: right;
+}
+.bluelib-skeleton .size-xxl {
+  font-size: xx-large;
+}
+.bluelib-skeleton .size-xl {
+  font-size: x-large;
+}
+.bluelib-skeleton .size-l {
+  font-size: large;
+}
+.bluelib-skeleton .size-m {
+  font-size: medium;
+}
+.bluelib-skeleton .size-s {
+  font-size: small;
+}
+.bluelib-skeleton .size-xs {
+  font-size: x-small;
+}
+.bluelib-skeleton .size-xxs {
+  font-size: xx-small;
+}
+.bluelib-skeleton .style-bold {
+  font-weight: bold;
+}
+.bluelib-skeleton .style-italic {
+  font-style: italic;
+}
+.bluelib-skeleton .style-underline {
+  text-decoration-line: underline;
+}
+.bluelib-skeleton .style-strike {
+  text-decoration-line: line-through;
+}
+.bluelib-skeleton .style-monospace {
+  font-family: monospace;
+}
+.bluelib-skeleton .color-red {
+  color: red;
+}
+.bluelib-skeleton .color-orange {
+  color: orange;
+}
+.bluelib-skeleton .color-yellow {
+  color: #dddd00;
+}
+.bluelib-skeleton .color-lime {
+  color: lime;
+}
+.bluelib-skeleton .color-cyan {
+  color: cyan;
+}
+.bluelib-skeleton .color-blue {
+  color: blue;
+}
+.bluelib-skeleton .color-magenta {
+  color: magenta;
+}
 :root {
   box-sizing: border-box;
 }
@@ -136,6 +298,9 @@
 :root .style-strike {
   text-decoration-line: line-through;
 }
+:root .style-monospace {
+  font-family: monospace;
+}
 :root .color-red {
   color: red;
 }
@@ -195,6 +360,14 @@
 :root u {
   text-decoration-line: underline;
 }
+:root pre,
+:root code,
+:root kbd {
+  font-family: monospace;
+}
+:root strike {
+  text-decoration-line: line-through;
+}
 :root li {
   margin: 10px 0;
 }
diff --git a/src/skeleton/skeleton-root.css.map b/src/skeleton/skeleton-root.css.map
index 2174bab..d6bbdd0 100644
--- a/src/skeleton/skeleton-root.css.map
+++ b/src/skeleton/skeleton-root.css.map
@@ -1 +1 @@
-{"version":3,"sources":["skeleton-root.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,KCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,KCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,KCmBI,OAII;EACI,SAAA;;AAKA,KAVR,OASI,aACK;EACG,aAAA;;AAGJ,KAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,KArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,KAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,KCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,KC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,KCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,KC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,KCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,KCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,KCqGI;EACI,mBAAA;;ADtGR,KCyGI;EACI,YAAA;;AD1GR,KC6GI;EACI,eAAA;;AD9GR,KCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,KAJJ,SAIK;EACG,YAAA;;ADxHZ,KC8HI;EAuBI,kBAAA;;ADrJR,KCsII;EACI,iBAAA;;ADvIR,KC0II;EACI,cAAA;;AD3IR,KCgJI;EACI,gBAAA;;ADjJR,KCoJI;EACI,kBAAA;;ADrJR,KCwJI;EACI,iBAAA;;ADzJR,KC8JI;EACI,mBAAA;;AD/JR,KCkKI;EACI,kBAAA;;ADnKR,KCsKI;EACI,gBAAA;;ADvKR,KC0KI;EACI,iBAAA;;AD3KR,KC8KI;EACI,gBAAA;;AD/KR,KCkLI;EACI,kBAAA;;ADnLR,KCsLI;EACI,mBAAA;;ADvLR,KC4LI;EACI,iBAAA;;AD7LR,KCgMI;EACI,kBAAA;;ADjMR,KCoMI;EACI,+BAAA;;ADrMR,KCwMI;EACI,kCAAA;;ADzMR,KC8MI;EACI,UAAA;;AD/MR,KCkNI;EACI,aAAA;;ADnNR,KCsNI;EACI,cAAA;;ADvNR,KC0NI;EACI,WAAA;;AD3NR,KC8NI;EACI,WAAA;;AD/NR,KCkOI;EACI,WAAA;;ADnOR,KCsOI;EACI,cAAA;;ADvOR,KC4OI;AD5OJ,KC4OQ;AD5OR,KC4OY;AD5OZ,KC4OgB;AD5OhB,KC4OoB;AD5OpB,KC4OwB;EAvFhB,kBAAA;;ADrJR,KCgPI;EAzGI,iBAAA;;ADvIR,KCwPI;EAzFI,mBAAA;;AD/JR,KC4PI;EAzFI,kBAAA;;ADnKR,KCgQI;EAzFI,gBAAA;;ADvKR,KCoQI;EAzFI,iBAAA;;AD3KR,KCwQI;EAzFI,gBAAA;;AD/KR,KC4QI;EAzFI,kBAAA;;ADnLR,KCgRI;EAnFI,iBAAA;;AD7LR,KCoRI;EAnFI,kBAAA;;ADjMR,KCwRI;EAnFI,+BAAA;;ADrMR,KC4RI;EAjJI,cAAA;;AD3IR,KCgSI,EAAC;EAtLG,YAAA;;AD1GR,KCoSI,EAAC;EA9LG,mBAAA;;ADtGR,KCwSI,EAAC;EA1LG,eAAA","file":"skeleton-root.css"}
\ No newline at end of file
+{"version":3,"sources":["skeleton.less","skeleton-root.less"],"names":[],"mappings":"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","file":"skeleton-root.css"}
\ No newline at end of file
diff --git a/src/skeleton/skeleton-root.less b/src/skeleton/skeleton-root.less
index 62f7937..7eb424f 100644
--- a/src/skeleton/skeleton-root.less
+++ b/src/skeleton/skeleton-root.less
@@ -2,4 +2,82 @@
 
 :root {
     .bluelib-skeleton();
+
+    // === INHERITANCES ===
+
+    h1, h2, h3, h4, h5, h6 {
+        .bluelib-skeleton.element-title();
+    }
+
+    hr {
+        .bluelib-skeleton.element-separator();
+    }
+
+    p {
+        .bluelib-skeleton.element-paragraph();
+    }
+
+    h1 {
+        .bluelib-skeleton.size-xxl();
+    }
+
+    h2 {
+        .bluelib-skeleton.size-xl();
+    }
+
+    h3 {
+        .bluelib-skeleton.size-l();
+    }
+
+    h4 {
+        .bluelib-skeleton.size-m();
+    }
+
+    h5 {
+        .bluelib-skeleton.size-s();
+    }
+
+    h6 {
+        .bluelib-skeleton.size-xs();
+    }
+
+    b {
+        .bluelib-skeleton.style-bold();
+    }
+
+    i {
+        .bluelib-skeleton.style-italic();
+    }
+
+    u {
+        .bluelib-skeleton.style-underline();
+    }
+
+    pre, code, kbd {
+        .bluelib-skeleton.style-monospace();
+    }
+
+    strike {
+        .bluelib-skeleton.style-strike();
+    }
+
+    li {
+        .bluelib-skeleton.element-list-item();
+    }
+
+    a {
+        .bluelib-skeleton.element-anchor();
+    }
+
+    *[title] {
+        .bluelib-skeleton.status-hoverable();
+    }
+
+    *[disabled] {
+        .bluelib-skeleton.status-disabled();
+    }
+
+    *[onclick] {
+        .bluelib-skeleton.status-clickable();
+    }
 }
diff --git a/src/skeleton/skeleton.less b/src/skeleton/skeleton.less
index 9bebe9e..b0193f3 100644
--- a/src/skeleton/skeleton.less
+++ b/src/skeleton/skeleton.less
@@ -1,7 +1,6 @@
 // This mixin should contain ONLY positioning and layout rules.
 // They will be compiled later to different targets.
-
-.bluelib-skeleton() {
+.bluelib-skeleton {
     // Reset the insane box-sizing default
     box-sizing: border-box;
 
@@ -142,6 +141,10 @@
         margin: 10px 0;
     }
 
+    .element-anchor {
+
+    }
+
     // --- Alignment ---
 
     .align-left {
@@ -204,6 +207,10 @@
         text-decoration-line: line-through;
     }
 
+    .style-monospace {
+        font-family: monospace;
+    }
+
     // --- Colors ---
 
     .color-red {
@@ -233,70 +240,4 @@
     .color-magenta {
         color: magenta;
     }
-
-    // === INHERITANCES ===
-
-    h1, h2, h3, h4, h5, h6 {
-        .element-title();
-    }
-
-    hr {
-        .element-separator();
-    }
-
-    p {
-        .element-paragraph();
-    }
-
-    h1 {
-        .size-xxl();
-    }
-
-    h2 {
-        .size-xl();
-    }
-
-    h3 {
-        .size-l();
-    }
-
-    h4 {
-        .size-m();
-    }
-
-    h5 {
-        .size-s();
-    }
-
-    h6 {
-        .size-xs();
-    }
-
-    b {
-        .style-bold();
-    }
-
-    i {
-        .style-italic();
-    }
-
-    u {
-        .style-underline();
-    }
-
-    li {
-        .element-list-item();
-    }
-
-    *[title] {
-        .status-hoverable();
-    }
-
-    *[disabled] {
-        .status-disabled();
-    }
-
-    *[onclick] {
-        .status-clickable();
-    }
 }
diff --git a/src/skins/rygblue/rygblue-class.css b/src/skins/rygblue/rygblue-class.css
new file mode 100644
index 0000000..53d31fe
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.css
@@ -0,0 +1,66 @@
+.bluelib-skin-rygblue {
+  background-color: #0d193b;
+  color: #a0ccff;
+  font-family: sans-serif;
+}
+.bluelib-skin-rygblue .panel-box {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+.bluelib-skin-rygblue .panel-blockquote {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+.bluelib-skin-rygblue .panel-aside {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+.bluelib-skin-rygblue .panel-table {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+.bluelib-skin-rygblue .element-title {
+  color: #ffffff;
+  font-family: sans-serif;
+}
+.bluelib-skin-rygblue .element-anchor {
+  color: #00caca;
+  text-decoration: none;
+}
+.bluelib-skin-rygblue .element-anchor:hover {
+  color: #00ffff;
+}
+.bluelib-skin-rygblue .element-anchor:active {
+  color: #a0ffff;
+}
+.bluelib-skin-rygblue .style-bold {
+  color: #ffffff;
+}
+.bluelib-skin-rygblue .style-strike {
+  text-decoration-color: #ff7d7d;
+}
+.bluelib-skin-rygblue .style-monospace {
+  font-family: sans-serif;
+}
+.bluelib-skin-rygblue .color-red {
+  color: #ff7d7d;
+}
+.bluelib-skin-rygblue .color-orange {
+  color: #ffbb7d;
+}
+.bluelib-skin-rygblue .color-yellow {
+  color: #ffff7d;
+}
+.bluelib-skin-rygblue .color-lime {
+  color: #7dff7d;
+}
+.bluelib-skin-rygblue .color-cyan {
+  color: #7dffff;
+}
+.bluelib-skin-rygblue .color-blue {
+  color: #7d7dff;
+}
+.bluelib-skin-rygblue .color-magenta {
+  color: #ff7dff;
+}
+/*# sourceMappingURL=rygblue-class.css.map */
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-class.css.map b/src/skins/rygblue/rygblue-class.css.map
new file mode 100644
index 0000000..5cb81ca
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["rygblue-class.less","rygblue.less"],"names":[],"mappings":"AAEA;ECyBI,yBAAA;EACA,cAAA;EACA,uBAAA;;AD3BJ,qBC4CI;EACI,2CAAA;EACA,sCAAA;;AD9CR,qBCkDI;EALI,2CAAA;EACA,sCAAA;;AD9CR,qBCuDI;EAVI,2CAAA;EACA,sCAAA;;AD9CR,qBC4DI;EAfI,2CAAA;EACA,sCAAA;;AD9CR,qBC2FI;EACI,cAAA;EACA,uBAAA;;AD7FR,qBC4GI;EACI,cAAA;EACA,qBAAA;;AAEA,qBAJJ,gBAIK;EACG,cAAA;;AAGJ,qBARJ,gBAQK;EACG,cAAA;;ADrHZ,qBCuKI;EACI,cAAA;;ADxKR,qBCmLI;EACI,8BAAA;;ADpLR,qBCuLI;EACI,uBAAA;;ADxLR,qBC8LI;EACI,cAAA;;AD/LR,qBCkMI;EACI,cAAA;;ADnMR,qBCsMI;EACI,cAAA;;ADvMR,qBC0MI;EACI,cAAA;;AD3MR,qBC8MI;EACI,cAAA;;AD/MR,qBCkNI;EACI,cAAA;;ADnNR,qBCsNI;EACI,cAAA","file":"rygblue-class.css"}
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-class.less b/src/skins/rygblue/rygblue-class.less
new file mode 100644
index 0000000..8d7dc6a
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.less
@@ -0,0 +1,5 @@
+@import "rygblue";
+
+.bluelib-skin-rygblue {
+    .bluelib-skin-rygblue();
+}
diff --git a/src/skins/rygblue/rygblue-root.css b/src/skins/rygblue/rygblue-root.css
new file mode 100644
index 0000000..209f48a
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.css
@@ -0,0 +1,96 @@
+:root {
+  background-color: #0d193b;
+  color: #a0ccff;
+  font-family: sans-serif;
+}
+:root .panel-box {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+:root .panel-blockquote {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+:root .panel-aside {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+:root .panel-table {
+  background-color: rgba(160, 204, 255, 0.02);
+  border-color: rgba(160, 204, 255, 0.1);
+}
+:root .element-title {
+  color: #ffffff;
+  font-family: sans-serif;
+}
+:root .element-anchor {
+  color: #00caca;
+  text-decoration: none;
+}
+:root .element-anchor:hover {
+  color: #00ffff;
+}
+:root .element-anchor:active {
+  color: #a0ffff;
+}
+:root .style-bold {
+  color: #ffffff;
+}
+:root .style-strike {
+  text-decoration-color: #ff7d7d;
+}
+:root .style-monospace {
+  font-family: sans-serif;
+}
+:root .color-red {
+  color: #ff7d7d;
+}
+:root .color-orange {
+  color: #ffbb7d;
+}
+:root .color-yellow {
+  color: #ffff7d;
+}
+:root .color-lime {
+  color: #7dff7d;
+}
+:root .color-cyan {
+  color: #7dffff;
+}
+:root .color-blue {
+  color: #7d7dff;
+}
+:root .color-magenta {
+  color: #ff7dff;
+}
+:root h1,
+:root h2,
+:root h3,
+:root h4,
+:root h5,
+:root h6 {
+  color: #ffffff;
+  font-family: sans-serif;
+}
+:root b {
+  color: #ffffff;
+}
+:root pre,
+:root code,
+:root kbd {
+  font-family: sans-serif;
+}
+:root strike {
+  text-decoration-color: #ff7d7d;
+}
+:root a {
+  color: #00caca;
+  text-decoration: none;
+}
+:root a:hover {
+  color: #00ffff;
+}
+:root a:active {
+  color: #a0ffff;
+}
+/*# sourceMappingURL=rygblue-root.css.map */
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-root.css.map b/src/skins/rygblue/rygblue-root.css.map
new file mode 100644
index 0000000..a7b9a36
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["rygblue-root.less","rygblue.less"],"names":[],"mappings":"AAEA;ECyBI,yBAAA;EACA,cAAA;EACA,uBAAA;;AD3BJ,KC4CI;EACI,2CAAA;EACA,sCAAA;;AD9CR,KCkDI;EALI,2CAAA;EACA,sCAAA;;AD9CR,KCuDI;EAVI,2CAAA;EACA,sCAAA;;AD9CR,KC4DI;EAfI,2CAAA;EACA,sCAAA;;AD9CR,KC2FI;EACI,cAAA;EACA,uBAAA;;AD7FR,KC4GI;EACI,cAAA;EACA,qBAAA;;AAEA,KAJJ,gBAIK;EACG,cAAA;;AAGJ,KARJ,gBAQK;EACG,cAAA;;ADrHZ,KCuKI;EACI,cAAA;;ADxKR,KCmLI;EACI,8BAAA;;ADpLR,KCuLI;EACI,uBAAA;;ADxLR,KC8LI;EACI,cAAA;;AD/LR,KCkMI;EACI,cAAA;;ADnMR,KCsMI;EACI,cAAA;;ADvMR,KC0MI;EACI,cAAA;;AD3MR,KC8MI;EACI,cAAA;;AD/MR,KCkNI;EACI,cAAA;;ADnNR,KCsNI;EACI,cAAA;;ADvNR,KAKI;AALJ,KAKQ;AALR,KAKY;AALZ,KAKgB;AALhB,KAKoB;AALpB,KAKwB;ECuFhB,cAAA;EACA,uBAAA;;AD7FR,KAyCI;EC+HI,cAAA;;ADxKR,KAqDI;AArDJ,KAqDS;AArDT,KAqDe;ECmIP,uBAAA;;ADxLR,KAyDI;EC2HI,8BAAA;;ADpLR,KAiEI;EC4CI,cAAA;EACA,qBAAA;;AAEA,KD/CJ,EC+CK;EACG,cAAA;;AAGJ,KDnDJ,ECmDK;EACG,cAAA","file":"rygblue-root.css"}
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-root.less b/src/skins/rygblue/rygblue-root.less
new file mode 100644
index 0000000..9f7c34b
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.less
@@ -0,0 +1,83 @@
+@import "rygblue";
+
+:root {
+    .bluelib-skin-rygblue();
+
+    // === INHERITANCES ===
+
+    h1, h2, h3, h4, h5, h6 {
+        .bluelib-skin-rygblue.element-title();
+    }
+
+    hr {
+        .bluelib-skin-rygblue.element-separator();
+    }
+
+    p {
+        .bluelib-skin-rygblue.element-paragraph();
+    }
+
+    h1 {
+        .bluelib-skin-rygblue.size-xxl();
+    }
+
+    h2 {
+        .bluelib-skin-rygblue.size-xl();
+    }
+
+    h3 {
+        .bluelib-skin-rygblue.size-l();
+    }
+
+    h4 {
+        .bluelib-skin-rygblue.size-m();
+    }
+
+    h5 {
+        .bluelib-skin-rygblue.size-s();
+    }
+
+    h6 {
+        .bluelib-skin-rygblue.size-xs();
+    }
+
+    b {
+        .bluelib-skin-rygblue.style-bold();
+    }
+
+    i {
+        .bluelib-skin-rygblue.style-italic();
+    }
+
+    u {
+        .bluelib-skin-rygblue.style-underline();
+    }
+
+    pre, code, kbd {
+        .bluelib-skin-rygblue.style-monospace();
+    }
+
+    strike {
+        .bluelib-skin-rygblue.style-strike();
+    }
+
+    li {
+        .bluelib-skin-rygblue.element-list-item();
+    }
+
+    a {
+        .bluelib-skin-rygblue.element-anchor();
+    }
+
+    *[title] {
+        .bluelib-skin-rygblue.status-hoverable();
+    }
+
+    *[disabled] {
+        .bluelib-skin-rygblue.status-disabled();
+    }
+
+    *[onclick] {
+        .bluelib-skin-rygblue.status-clickable();
+    }
+}
diff --git a/src/skins/rygblue/rygblue.less b/src/skins/rygblue/rygblue.less
new file mode 100644
index 0000000..a4d831c
--- /dev/null
+++ b/src/skins/rygblue/rygblue.less
@@ -0,0 +1,220 @@
+// This mixin should contain ONLY coloring and theming rules.
+// They will be compiled later to different targets.
+.bluelib-skin-rygblue() {
+    // === LESS VARIABLES ===
+
+    @color-background: #0d193b;
+    @color-foreground: #a0ccff;
+    @color-accent: #ffffff;
+
+    @color-red: #ff7d7d;
+    @color-orange: #ffbb7d;
+    @color-yellow: #ffff7d;
+    @color-lime: #7dff7d;
+    @color-cyan: #7dffff;
+    @color-blue: #7d7dff;
+    @color-magenta: #ff7dff;
+
+    @color-link: #00caca;
+    @color-link-hover: #00ffff;
+    @color-link-active: #a0ffff;
+
+    @font-text: sans-serif;
+    @font-title: sans-serif;
+    @font-code: sans-serif;
+
+    // === RULES ===
+
+    background-color: @color-background;
+    color: @color-foreground;
+    font-family: @font-text;
+
+    // --- Containers ---
+
+    .container-main {
+
+    }
+
+
+    // --- Panels ---
+    // Remember to use BOTH the panel AND the panel-* class when using a panel element!
+
+    .panel {
+
+    }
+
+    // A generic content box
+    .panel-box {
+        background-color: fade(@color-foreground, 2%);
+        border-color: fade(@color-foreground, 10%);
+    }
+
+    // Should be the same as a box, but with a quote-like border
+    .panel-blockquote {
+        .panel-box();
+    }
+
+    // Should be the same as a box, but with smaller text and no border
+    .panel-aside {
+        .panel-box();
+    }
+
+    // Should be the same as a box, but display its contents differently
+    .panel-table {
+        .panel-box();
+    }
+
+    // Evenly split the panels contained inside
+    .panel-split {
+
+    }
+
+    // --- Element status ---
+
+    .status-disabled {
+
+    }
+
+    .status-hoverable {
+
+    }
+
+    .status-clickable {
+
+    }
+
+    // --- Spoilers ---
+
+    .spoiler {
+        
+    }
+
+    // --- Elements ---
+
+    .element-title {
+        color: @color-accent;
+        font-family: @font-title;
+    }
+
+    .element-paragraph {
+
+    }
+
+    .element-separator {
+
+    }
+
+    .element-list-item {
+
+    }
+
+    .element-anchor {
+        color: @color-link;
+        text-decoration: none;
+
+        &:hover {
+            color: @color-link-hover;
+        }
+
+        &:active {
+            color: @color-link-active;
+        }
+    }
+
+    // --- Alignment ---
+
+    .align-left {
+
+    }
+
+    .align-center {
+
+    }
+
+    .align-right {
+
+    }
+
+    // --- Sizes ---
+
+    .size-xxl {
+
+    }
+
+    .size-xl {
+
+    }
+
+    .size-l {
+
+    }
+
+    .size-m {
+
+    }
+
+    .size-s {
+
+    }
+
+    .size-xs {
+
+    }
+
+    .size-xxs {
+
+    }
+
+    // --- Styles ---
+
+    .style-bold {
+        color: #ffffff;
+    }
+
+    .style-italic {
+
+    }
+
+    .style-underline {
+
+    }
+
+    .style-strike {
+        text-decoration-color: @color-red;
+    }
+
+    .style-monospace {
+        font-family: @font-code;
+    }
+
+
+    // --- Colors ---
+
+    .color-red {
+        color: @color-red;
+    }
+
+    .color-orange {
+        color: @color-orange;
+    }
+
+    .color-yellow {
+        color: @color-yellow;
+    }
+
+    .color-lime {
+        color: @color-lime;
+    }
+
+    .color-cyan {
+        color: @color-cyan;
+    }
+
+    .color-blue {
+        color: @color-blue;
+    }
+
+    .color-magenta {
+        color: @color-magenta;
+    }
+}
\ No newline at end of file