diff --git a/bluelib.css b/bluelib.css
deleted file mode 100644
index 64f6d2e..0000000
--- a/bluelib.css
+++ /dev/null
@@ -1,179 +0,0 @@
-: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 */
-
- /* Link colors */
- --link: #00caca;
- --link-hover: #00ffff;
- --link-active: #a0ffff;
-
- /* Fonts */
- --font-text: sans-serif;
- --font-title: serif;
- --font-code: monospace;
-}
-
-* {
- /* Use border boxes instead of the insane content boxes */
- box-sizing: border-box;
-
- /* Set the default border color and style on all elements */
- border-color: var(--border);
- border-style: solid;
- border-width: 0;
-}
-
-body {
- background-color: var(--background);
- color: var(--foreground);
- font-family: var(--font-text);
-}
-
-h1, h2, h3, h4, h5, h6, thead,
-.title {
- color: var(--accent);
-
- font-family: var(--font-title);
- font-weight: normal;
-}
-
-h1, h2, h3, h4, h5, h6,
-.centered {
- text-align: center;
-}
-
-h1,
-.xxl {
- font-size: xx-large;
-}
-
-h2,
-.xl {
- font-size: x-large;
-}
-
-h3,
-.l {
- font-size: large;
-}
-
-h4,
-.m {
- font-size: medium;
-}
-
-h5,
-.s {
- font-size: small;
-}
-
-h6,
-.xs {
- font-size: x-small;
-}
-
-.xxs {
- font-size: xx-small;
-}
-
-a,
-.link {
- color: var(--link);
- text-decoration: none;
-}
-
-a:hover,
-.link:hover {
- color: var(--link-hover);
-}
-
-a:active,
-.link:active {
- color: var(--link-active);
-}
-
-pre, code,
-.monospace {
- font-family: var(--font-code);
-}
-
-blockquote, aside,
-.panel {
- padding: 8px;
- border-radius: 4px;
- border-width: 2px;
- background-color: var(--panel);
-}
-
-blockquote,
-.blockquote {
- padding: 4px 4px 4px 8px;
- margin: 8px 0;
- border-left-width: 2px;
- border-top-width: 0;
- border-bottom-width: 0;
- border-right-width: 0;
-}
-
-hr,
-.separator {
- border-width: 1px;
- margin-top: 24px;
- margin-bottom: 24px;
-}
-
-table,
-.table {
- border-spacing: 0;
- border-width: 2px;
- border-collapse: collapse;
-}
-
-thead,
-.table-head {
- background-color: var(--border);
-}
-
-th, td,
-.table-cell {
- padding: 4px;
- border-width: 1px;
-}
-
-li,
-.list-element {
- margin: 10px 0;
-}
-
-b,
-.bold {
- font-weight: bold;
- color: var(--accent);
-}
-
-i,
-.italic {
- font-style: italic;
- color: var(--accent);
-}
-
-abbr[title],
-.with-title-text {
- cursor: help;
-}
-
-aside,
-.aside {
- font-size: smaller;
-}
diff --git a/index.html b/index.html
index 18fb3e3..0e7390c 100644
--- a/index.html
+++ b/index.html
@@ -2,44 +2,233 @@
-
+
+
Bluelib 2
-
-
- Bluelib 2
-
-
- A new beginning
-
-
- With no weird stuff
-
-
- Just pure CSS
-
-
- It's magic, isn't it?
-
-
- yes it is
-
-
+
+
+
+
+ Bluelib 2
+
+
+ RYG style, in pure CSS
+
+
+
+
+ Welcome to bluelib!
+
+
+ Following are some examples on the things you can do with bluelib.
+
+
+ To see how something is done, Right Click on it and then press Inspect Element.
+
+ 
+
- This.
+ Panels
-
- Is a panel.
-
-
- Dear God...
-
-
- But wait, there's more!
-
-
- Noooooooooooo...
-
-
+ Panel
+
+
+ This is a panel.
+
+
+ It usually represents a section of text about a topic described by the title above.
+
+
+
+
+
+ | This... |
+ ...is a... |
+ table! |
+
+
+
+
+ | Tables are containers too! |
+ They will be themed automatically. |
+ Columns will be automatically scaled based on their content. |
+
+
+
+
+
+ Blockquote
+
+
+ This is a blockquote.
+
+
+ Blockquotes are specially formatted panels, useful for quotes!
+
+
+
+
+ Nesting containers
+
+
+
+ Level one
+
+
+ Containers can be nested effortlessly!
+
+
+ Drop one outside of any paragraphs and they will nest automatically.
+
+
+
+ Level two
+
+
+ You can add text above...
+
+
+
+ Level three
+
+
+ How deep does the rabbit hole go?
+
+
+ PANELCEPTION.
+
+
+
+
+ ...or below!
+
+
+
+
+ Layout
+
+
+
+ Splitter and splitted
+
+
+ You can split elements into multiple columns.
+
+
+ The columns will grow automatically to on the height of the tallest.
+
+
+
+
+ Shorter panel
+
+
+ That's it.
+
+
+
+
+ Horizonal rows
+
+
+ You can add horizontal rows to the page:
+
+
+
+ They are very useful as separators!
+
+
+
+ Formatting
+
+
+
+
+ Colors
+
+
+ You can use colored text:
+
+
+ - Red
+ - Orange
+ - Yellow
+ - Lime
+ - Cyan
+ - Blue
+ - Magenta
+
+
+
+
+ Size
+
+
+ You can set the text size:
+
+
+ - XXL
+ - XL
+ - L
+ - M
+ - S
+ - XS
+ - XXS
+
+
+
+
+ Alignment
+
+
+ You can set the text alignment (only in block elements such as div):
+
+ Left
+ Center
+ Right
+
+
+
+
+
\ No newline at end of file
diff --git a/skeleton.css b/skeleton.css
new file mode 100644
index 0000000..0c58124
--- /dev/null
+++ b/skeleton.css
@@ -0,0 +1,240 @@
+/*
+ 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 {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1280px;
+}
+
+/* --- Horizontal split --- */
+
+.splitter {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 8px 0;
+}
+
+.splitted {
+ 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;
+}
+
+/* --- Code blocks --- */
+
+.monospace {
+ font-family: monospace;
+}
+
+/* --- 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;
+}
+
+.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;
+}
+
+/* --- Separators --- */
+
+hr,
+.separator {
+ border-width: 1px;
+}
+
+/* --- Lists --- */
+
+li,
+.list-element {
+ margin: 10px 0;
+}
+
+/* --- Misc --- */
+abbr[title],
+.with-title-text {
+ cursor: help;
+}
diff --git a/skin.css b/skin.css
new file mode 100644
index 0000000..b3f38b8
--- /dev/null
+++ b/skin.css
@@ -0,0 +1,130 @@
+/*
+ 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);
+}