steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

🔧 Split into skeleton and skin

Browse source 
kind of?
This commit is contained in:
Steffo 2021-01-09 23:16:07 +01:00
parent 1004dcb61b
commit 182fa340ae
4 changed files with 594 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
bluelib.css
View file

@ -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;
}

259
index.html
View file

@ -2,44 +2,233 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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> <title>Bluelib 2</title>
</head> </head>
<body> <body class="theme-bluelib">
<h1> <main>
Bluelib 2 <hgroup>
</h1> <h1>
<h2> Bluelib 2
A new beginning </h1>
</h2> <h2>
<h3> RYG style, in pure CSS
With no weird stuff </h2>
</h3> </hgroup>
<h4> <section class="panel">
Just pure CSS <h3>
</h4> Welcome to bluelib!
<h5> </h3>
It's magic, isn't it? <p>
</h5> Following are some examples on the things you can do with bluelib.
<h6> </p>
yes it is <p>
</h6> To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
<div class="panel" title="WOAH"> </p>
<img src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
</section>
<h2> <h2>
This. Panels
</h2> </h2>
<h3> <section class="panel">
Is a panel. <h3>
</h3> Panel
<p> </h3>
Dear God... <p>
</p> This is a panel.
<p> </p>
But wait, there's more! <p>
</p> It usually represents a section of text about a topic described by the title above.
<p> </p>
Noooooooooooo... </section>
</p> <table class="panel">
</div> <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>
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> </body>
</html> </html>

240
skeleton.css vendored Normal file
View 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
View 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);
}