mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
🔧 Split into skeleton and skin
kind of?
This commit is contained in:
parent
1004dcb61b
commit
182fa340ae
4 changed files with 594 additions and 214 deletions
179
bluelib.css
179
bluelib.css
|
|
@ -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;
|
||||
}
|
||||
227
index.html
227
index.html
|
|
@ -2,44 +2,233 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="bluelib.css">
|
||||
<link rel="stylesheet" href="skeleton.css">
|
||||
<link rel="stylesheet" href="skin.css">
|
||||
<title>Bluelib 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="theme-bluelib">
|
||||
<main>
|
||||
<hgroup>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
</h1>
|
||||
<h2>
|
||||
A new beginning
|
||||
RYG style, in pure CSS
|
||||
</h2>
|
||||
</hgroup>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
With no weird stuff
|
||||
Welcome to bluelib!
|
||||
</h3>
|
||||
<h4>
|
||||
Just pure CSS
|
||||
</h4>
|
||||
<h5>
|
||||
It's magic, isn't it?
|
||||
</h5>
|
||||
<h6>
|
||||
yes it is
|
||||
</h6>
|
||||
<div class="panel" title="WOAH">
|
||||
<p>
|
||||
Following are some examples on the things you can do with bluelib.
|
||||
</p>
|
||||
<p>
|
||||
To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
|
||||
</p>
|
||||
<img src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
|
||||
</section>
|
||||
<h2>
|
||||
This.
|
||||
Panels
|
||||
</h2>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Is a panel.
|
||||
Panel
|
||||
</h3>
|
||||
<p>
|
||||
Dear God...
|
||||
This is a panel.
|
||||
</p>
|
||||
<p>
|
||||
But wait, there's more!
|
||||
It usually represents a section of text about a topic described by the title above.
|
||||
</p>
|
||||
</section>
|
||||
<table class="panel">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>This...</th>
|
||||
<th>...is a...</th>
|
||||
<th>table!</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tables are containers too!</td>
|
||||
<td>They will be themed automatically.</td>
|
||||
<td>Columns will be automatically scaled based on their content.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote class="panel">
|
||||
<h3>
|
||||
Blockquote
|
||||
</h3>
|
||||
<p>
|
||||
This is a blockquote.
|
||||
</p>
|
||||
<p>
|
||||
Noooooooooooo...
|
||||
Blockquotes are specially formatted panels, useful for quotes!
|
||||
</p>
|
||||
</blockquote>
|
||||
<aside class="panel">
|
||||
<h3>
|
||||
Aside
|
||||
</h3>
|
||||
<p>
|
||||
This is an aside.
|
||||
</p>
|
||||
<p>
|
||||
Asides are panels with no border and smaller text, useful to describe less important things while inside
|
||||
a panel.
|
||||
</p>
|
||||
</aside>
|
||||
<h2>
|
||||
Nesting containers
|
||||
</h2>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Level one
|
||||
</h3>
|
||||
<p>
|
||||
Containers can be nested effortlessly!
|
||||
</p>
|
||||
<p>
|
||||
Drop one outside of any paragraphs and they will nest automatically.
|
||||
</p>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Level two
|
||||
</h3>
|
||||
<p>
|
||||
You can add text above...
|
||||
</p>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Level three
|
||||
</h3>
|
||||
<p>
|
||||
How deep does the rabbit hole go?
|
||||
</p>
|
||||
<blockquote class="panel">
|
||||
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
||||
<aside class="panel">
|
||||
BWOON.
|
||||
<aside class="panel">
|
||||
BWOON.
|
||||
<aside class="panel">
|
||||
BWOON.
|
||||
</aside>
|
||||
</aside>
|
||||
</aside>
|
||||
</blockquote>
|
||||
</section>
|
||||
<p>
|
||||
...or below!
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<h2>
|
||||
Layout
|
||||
</h2>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Splitter and splitted
|
||||
</h3>
|
||||
<p>
|
||||
You can split elements into multiple columns.
|
||||
</p>
|
||||
<p>
|
||||
The columns will grow automatically to on the height of the tallest.
|
||||
</p>
|
||||
<div class="splitter">
|
||||
<section class="splitted panel">
|
||||
<h3>
|
||||
Shorter panel
|
||||
</h3>
|
||||
<p>
|
||||
That's it.
|
||||
</p>
|
||||
</section>
|
||||
<section class="splitted panel">
|
||||
<h3>
|
||||
Taller panel
|
||||
</h3>
|
||||
<p><a href="https://bit.ly/3ou3jzG">
|
||||
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.
|
||||
</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<h3>
|
||||
Horizonal rows
|
||||
</h3>
|
||||
<p>
|
||||
You can add horizontal rows to the page:
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
They are very useful as separators!
|
||||
</p>
|
||||
</section>
|
||||
<h2>
|
||||
Formatting
|
||||
</h2>
|
||||
<div class="splitter">
|
||||
<section class="splitted panel">
|
||||
<h3>
|
||||
Colors
|
||||
</h3>
|
||||
<p>
|
||||
You can use colored text:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="color-red">Red</span></li>
|
||||
<li><span class="color-orange">Orange</span></li>
|
||||
<li><span class="color-yellow">Yellow</span></li>
|
||||
<li><span class="color-lime">Lime</span></li>
|
||||
<li><span class="color-cyan">Cyan</span></li>
|
||||
<li><span class="color-blue">Blue</span></li>
|
||||
<li><span class="color-magenta">Magenta</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="splitted panel">
|
||||
<h3>
|
||||
Size
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text size:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="size-xxl">XXL</span></li>
|
||||
<li><span class="size-xl">XL</span></li>
|
||||
<li><span class="size-l">L</span></li>
|
||||
<li><span class="size-m">M</span></li>
|
||||
<li><span class="size-s">S</span></li>
|
||||
<li><span class="size-xs">XS</span></li>
|
||||
<li><span class="size-xxs">XXS</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="splitted panel">
|
||||
<h3>
|
||||
Alignment
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text alignment (<i>only in block elements</i> such as div):
|
||||
</p>
|
||||
<div class="align-left">Left</div>
|
||||
<div class="align-center">Center</div>
|
||||
<div class="align-right">Right</div>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
|
||||
</h2>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
240
skeleton.css
vendored
Normal file
240
skeleton.css
vendored
Normal file
|
|
@ -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;
|
||||
}
|
||||
130
skin.css
Normal file
130
skin.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in a new issue