From 182fa340ae113df25b03074e9294fced2da6a50f Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sat, 9 Jan 2021 23:16:07 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Split=20into=20skeleton=20and=20?= =?UTF-8?q?skin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit kind of? --- bluelib.css | 179 ----------------------------------- index.html | 259 ++++++++++++++++++++++++++++++++++++++++++++------- skeleton.css | 240 +++++++++++++++++++++++++++++++++++++++++++++++ skin.css | 130 ++++++++++++++++++++++++++ 4 files changed, 594 insertions(+), 214 deletions(-) delete mode 100644 bluelib.css create mode 100644 skeleton.css create mode 100644 skin.css 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. +

+ How to 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. +

+
+
+

+ Taller panel +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e + grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai + bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi, + eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti + membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette + calcio taccuino, con un morbido banane. +

+
+
+
+
+

+ 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); +}