mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-10-16 13:47:28 +00:00
1123 lines
58 KiB
HTML
1123 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<link rel="stylesheet" href="dist/skeleton.root.css" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/paper.root.css" title="Sheet of Paper" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/hacker.root.css" title="Hacker Terminal" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/sophon.root.css" title="The Sophonity" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/amber.root.css" title="Gestione Amber" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/pumpkin.root.css" title="Pumpkin Lantern" type="text/css">
|
||
<link rel="stylesheet alternate" href="dist/royalblue.root.css" title="Royal Blue" type="text/css">
|
||
<link rel="stylesheet" href="dist/royaldawn.root.css" title="Royal Dawn" type="text/css">
|
||
<title>Bluelib</title>
|
||
</head>
|
||
<body class="theme-bluelib">
|
||
<hgroup>
|
||
</hgroup>
|
||
<div class="layout layout-threecol">
|
||
<main class="main layout-threecol-center">
|
||
<article>
|
||
<h1>
|
||
Bluelib Example
|
||
</h1>
|
||
<section class="chapter">
|
||
<h2>
|
||
Panels
|
||
</h2>
|
||
<section class="panel" id="panel-panel">
|
||
<h3>
|
||
Panel
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-panel">panel</dfn> is a <b>base container</b> styled with a <b>slight background color</b> and no borders.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-box">
|
||
<h3>
|
||
Box
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-box">box</dfn> panel is a <b>generic container</b> styled as a <b>box with borders on all four sides</b>.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-dialog" id="panel-dialog">
|
||
<h3>
|
||
Dialog
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-dialog">dialog</dfn> panel is a <b>container for quotes or dialogues</b>, styled as a box with only the left border.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-parenthesis" id="panel-parenthesis">
|
||
<h3>
|
||
Parenthesis
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-parenthesis">parenthesis</dfn> panel is a <b>container for text tangentially related to the rest of the document</b>, styled as a box with smaller text and no borders.
|
||
</p>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-dimensions">
|
||
<h3>
|
||
Dimensions
|
||
</h3>
|
||
<p>
|
||
Panels always have a <b><code>8px</code> margin</b> and <b><code>8px</code> of padding</b>.
|
||
</p>
|
||
<blockquote class="panel panel-dialog">
|
||
Hi! This is me talking to you, the reader!
|
||
</blockquote>
|
||
<blockquote class="panel panel-dialog">
|
||
I'm testing panel dimensions!
|
||
</blockquote>
|
||
<blockquote class="panel panel-dialog">
|
||
See? The margin between these dialog panels is consistent!
|
||
</blockquote>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-nesting">
|
||
<h3>
|
||
Nesting
|
||
</h3>
|
||
<p>
|
||
Panels of any kind can be <b>infinitely nested</b>.
|
||
</p>
|
||
<section class="panel">
|
||
<p>
|
||
Like this!
|
||
</p>
|
||
<section class="panel">
|
||
<p>
|
||
How deep does this rabbit hole go?
|
||
</p>
|
||
<section class="panel">
|
||
<p>
|
||
BWOON.
|
||
</p>
|
||
<section class="panel">
|
||
<p>
|
||
BWOON.
|
||
</p>
|
||
<section class="panel">
|
||
<p>
|
||
BWOON.
|
||
</p>
|
||
<section class="panel">
|
||
<em>
|
||
<a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">
|
||
PANELCEPTION.
|
||
</a>
|
||
</em>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-chapters">
|
||
<h2>
|
||
Chapters
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-chapter">
|
||
<h3>
|
||
Chapter
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-chapter">chapter</dfn> is a grouping of an heading and multiple panels containing tightly related information.
|
||
</p>
|
||
<blockquote class="panel panel-dialog">
|
||
You're seeing one right now!
|
||
</blockquote>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-panelheights">
|
||
<h3>
|
||
Panel heights
|
||
</h3>
|
||
<p>
|
||
In a chapter, all panels on a row <b>inherit the height of the tallest panel in it</b>, so that no empty space is left.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-autowrap">
|
||
<h3>
|
||
Auto-wrapping
|
||
</h3>
|
||
<p>
|
||
Additionaly, panels in a chapter will <b>automatically wrap</b> if their contents won't fit horizontally.
|
||
</p>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-forcewrap">
|
||
<h3>
|
||
Force-wrapping
|
||
</h3>
|
||
<p>
|
||
You can override the automatic wrapping and manually decide where a chapter should wrap by inserting a <dfn id="dfn-forcewrap">force-wrap</dfn> element where you want the chapter to wrap.
|
||
</p>
|
||
<section class="panel panel-parenthesis">
|
||
Due to technical limitations, panels will have a <b><code>16px</code> vertical margin</b> when a chapter is force-wrapped.
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-separators">
|
||
<h2>
|
||
Separators
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-separator">
|
||
<h3>
|
||
Separator
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-separator">separator</dfn> is a <b>horizontal line</b> that fills all the horizontal space available on a panel, forcing a line wrap.
|
||
</p>
|
||
<hr>
|
||
<blockquote class="panel panel-dialog">
|
||
Top Text
|
||
</blockquote>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-separator-light">
|
||
<h3>
|
||
Light separator
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-separator-light">light separator</dfn> is a <b>slightly more transparent separator</b>, to be used if the regular color distracts too much from the flow of the text.
|
||
</p>
|
||
<hr class="separator-light">
|
||
<blockquote class="panel panel-dialog">
|
||
Bottom Text
|
||
</blockquote>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-separator-heavy">
|
||
<h3>
|
||
Heavy separator
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>non-transparent separator</b>, to be used if the regular color isn't apparent enough.
|
||
</p>
|
||
<hr class="separator-heavy">
|
||
<blockquote class="panel panel-dialog">
|
||
Bottom Text 2: Electric Boogaloo
|
||
</blockquote>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-images">
|
||
<h2>
|
||
Images
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-images-default">
|
||
<h3>
|
||
Default
|
||
</h3>
|
||
<p>
|
||
Images are <b>automatically centered and resized to fit</b> the panel they are in.
|
||
</p>
|
||
<img src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon Ice Cream"/>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-limited">
|
||
<h3>
|
||
Limited
|
||
</h3>
|
||
<p>
|
||
Images can be <dfn id="dfn-limited">limited</dfn> to <b>prevent them from taking up too much screen space</b>.
|
||
</p>
|
||
<div class="chapter">
|
||
<section class="panel panel-box" id="panel-limited-half">
|
||
<h3>
|
||
Half
|
||
</h3>
|
||
<p>
|
||
The following image has a limit of half the vertical viewport:
|
||
</p>
|
||
<img class="image-limit-half" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon ice cream"/>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-limited-quarter">
|
||
<h3>
|
||
Quarter
|
||
</h3>
|
||
<p>
|
||
The following image has a limit of a quarter of the vertical viewport:
|
||
</p>
|
||
<img class="image-limit-quarter" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon ice cream"/>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-figure">
|
||
<h3>
|
||
Figures
|
||
</h3>
|
||
<p>
|
||
Images can be wrapped in a figure element to semantically provide additional detail to them.
|
||
</p>
|
||
<figure>
|
||
<img class="image-limit-quarter" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon ice cream"/>
|
||
<figcaption>
|
||
Neon ice cream
|
||
</figcaption>
|
||
</figure>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-tables">
|
||
<h2>
|
||
Tables
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-table">
|
||
<h3>
|
||
Table
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-table">table</dfn> is an element displaying data aligned and ordered by rows and columns.
|
||
</p>
|
||
<table>
|
||
<caption class="table-caption-top">What do the brothers think of the following elements?</caption>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Mario</th>
|
||
<th>Luigi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Tables</th>
|
||
<td>They're cool and allow you to do cool stuff</td>
|
||
<td>They need chairs to be useful</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Flexboxes</th>
|
||
<td>They're very useful</td>
|
||
<td>Not enough flexible for me</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Grids</th>
|
||
<td>I love them</td>
|
||
<td>Bleargh</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<th scope="row">Overall</th>
|
||
<td><3</td>
|
||
<td>0/10</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
<p>
|
||
Elements in tables can be marked to increase their contrast with the rest.
|
||
</p>
|
||
<table>
|
||
<caption class="table-caption-top">
|
||
A game of tic-tac-toe.
|
||
</caption>
|
||
<tbody>
|
||
<tr>
|
||
<td>O</td>
|
||
<td></td>
|
||
<td class="table-mark">X</td>
|
||
</tr>
|
||
<tr>
|
||
<td>X</td>
|
||
<td class="table-mark">X</td>
|
||
<td>O</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-mark">X</td>
|
||
<td>O</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>
|
||
Captions can are above the table by default, but they can be moved below the table.
|
||
</p>
|
||
<table>
|
||
<caption class="table-caption-bottom">
|
||
HTML elements tier list
|
||
</caption>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">S</th>
|
||
<td><code><span></code></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">A</th>
|
||
<td><code><a></code></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">B</th>
|
||
<td><code><body></code></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">C</th>
|
||
<td><code><caption></code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-lists">
|
||
<h2>
|
||
Lists
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-list-unordered">
|
||
<h3>
|
||
Unordered lists
|
||
</h3>
|
||
<p>
|
||
An <dfn id="dfn-list-unordered">unordered list</dfn> displays a series of items whose order is irrelevant.
|
||
</p>
|
||
<ul>
|
||
<li>This</li>
|
||
<li>That</li>
|
||
<li>Wooper</li>
|
||
<li>Quagsire</li>
|
||
</ul>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-list-ordered">
|
||
<h3>
|
||
Ordered lists
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-list-ordered">ordered list</dfn> displays a series of items whose order is relevant.
|
||
</p>
|
||
<ol>
|
||
<li>Gold</li>
|
||
<li>Silver</li>
|
||
<li>Bronze</li>
|
||
<li>Iron</li>
|
||
</ol>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-list-description">
|
||
<h3>
|
||
Description lists
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-list-description">description list</dfn> displays a series of name-description pairs.
|
||
</p>
|
||
<dl>
|
||
<dt>
|
||
Key
|
||
</dt>
|
||
<dd>
|
||
Value
|
||
</dd>
|
||
<dt>
|
||
Other key
|
||
</dt>
|
||
<dd>
|
||
Other value
|
||
</dd>
|
||
</dl>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-status">
|
||
<h2>
|
||
Status
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-disabled">
|
||
<h3>
|
||
Disabled
|
||
</h3>
|
||
<p>
|
||
An element can be <dfn id="dfn-disabled">disabled</dfn> to make it <b>partially transparent</b>, <b>non-interactable</b> and <b>displaying the <code>not-allowed</code> cursor</b> when hovered.
|
||
</p>
|
||
<p>
|
||
Any element, from a <code><span></code> to a chapter, can be disabled.
|
||
</p>
|
||
<section class="panel panel-dialog status-disabled">
|
||
Please re-enable me, I did nothing wrong! I just said "AMOGU—"
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-inputs">
|
||
<h2>
|
||
Inputs
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-input">
|
||
<h3>
|
||
Input
|
||
</h3>
|
||
<p>
|
||
An <dfn id="dfn-input">input</dfn> is an interactive element that allows the reader of the page to interact with it.
|
||
</p>
|
||
<p>
|
||
They come in multiple kinds:
|
||
</p>
|
||
<section class="chapter" id="chapter-input-kinds">
|
||
<section class="panel panel-box" id="panel-input-field">
|
||
<h3>
|
||
Field
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-field">field</dfn> is an input where the user can <b>insert text</b> with their keyboard.
|
||
</p>
|
||
<!--suppress HtmlFormInputWithoutLabel -->
|
||
<input type="text" placeholder="This is called a placeholder, by the way."/>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-input-select">
|
||
<h3>
|
||
Select
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-select">select</dfn> is an input where the user can select <b>one between multiple options</b>.
|
||
</p>
|
||
<!--suppress HtmlFormInputWithoutLabel -->
|
||
<select>
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<optgroup label="3">
|
||
<option>3.1</option>
|
||
<option>3.2</option>
|
||
<option>3.3</option>
|
||
</optgroup>
|
||
</select>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-input-area">
|
||
<h3>
|
||
Area
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-area">area</dfn> is a <b>resizable</b> input where the user can <b>insert multiple lines of text</b> with their keyboard.
|
||
</p>
|
||
<!--suppress HtmlFormInputWithoutLabel -->
|
||
<textarea placeholder="Write something here!"></textarea>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-input-multiselect">
|
||
<h3>
|
||
Multiselect
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-multiselect">multiselect</dfn> is an input where the user can select <b>many options from a list</b>.
|
||
</p>
|
||
<!--suppress HtmlFormInputWithoutLabel -->
|
||
<select multiple>
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<optgroup label="3">
|
||
<option>3.1</option>
|
||
<option>3.2</option>
|
||
<option>3.3</option>
|
||
</optgroup>
|
||
</select>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-input-radio">
|
||
<h3>
|
||
Radio
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-radio">radio</dfn> is an input which the user can <b>either select or not</b>, deselecting the other radios with the same name.
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="radio" name="input-radio-example"/> 1
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="radio" name="input-radio-example"/> 2
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="radio" name="input-radio-example"/> 3
|
||
</label>
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-input-checkbox">
|
||
<h3>
|
||
Checkbox
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-checkbox">checkbox</dfn> is an input which the user can <b>either select or not</b>.
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="checkbox" name="input-checkbox-example"/> 1
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="checkbox" name="input-checkbox-example"/> 2
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
<input type="checkbox" name="input-checkbox-example"/> 3
|
||
</label>
|
||
</p>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-input-button">
|
||
<h3>
|
||
Button
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-input-button">button</dfn> is an input which the user can <b>interact with to trigger a reaction</b>.
|
||
</p>
|
||
<p>
|
||
<button>
|
||
Do nothing
|
||
</button>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-forms">
|
||
<h2>
|
||
Forms
|
||
</h2>
|
||
<section class="panel panel-box" id="chapter-form-labels-inputs">
|
||
<h3>
|
||
Forms, labels and inputs
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-form">form</dfn> is a grouping of <dfn id="dfn-label">labels</dfn> and <i>inputs</i> with the same purpose, with the <b>former describing what should be entered in the latter</b>.
|
||
</p>
|
||
<form>
|
||
<label for="input-username">Username</label>
|
||
<input id="input-username" type="text" placeholder="Required fields have regular text" required/>
|
||
<label for="input-phone">Phone</label>
|
||
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
|
||
<label for="input-fax">Fax</label>
|
||
<input id="input-fax" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
|
||
<label for="input-size">Shirt size</label>
|
||
<select id="input-size" required>
|
||
<optgroup label="Smaller">
|
||
<option>XXS</option>
|
||
<option>XS</option>
|
||
<option>S</option>
|
||
</optgroup>
|
||
<option>M</option>
|
||
<optgroup label="Larger">
|
||
<option>L</option>
|
||
<option>XL</option>
|
||
<option>XXL</option>
|
||
</optgroup>
|
||
</select>
|
||
<label for="input-colors">Colors</label>
|
||
<select id="input-colors" multiple required>
|
||
<option>Red</option>
|
||
<option>Yellow</option>
|
||
<option>Green</option>
|
||
<optgroup label="Blues">
|
||
<option>Blue</option>
|
||
<option>Purple</option>
|
||
<option>Cyan</option>
|
||
</optgroup>
|
||
</select>
|
||
</form>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-form-groups">
|
||
<h3>
|
||
Form groups
|
||
</h3>
|
||
<p>
|
||
Inputs such as <i>radios</i> or <i>checkboxes</i> should be <em>grouped</em> together when inserted in a form.
|
||
</p>
|
||
<form>
|
||
<label for="input-mood">Current mood</label>
|
||
<div id="input-mood" class="form-group">
|
||
<label>
|
||
<input type="radio" name="input-mood" value="happy"/>
|
||
Happy
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="input-mood" value="sad"/>
|
||
Sad
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="input-mood" value="angry"/>
|
||
Angry
|
||
</label>
|
||
</div>
|
||
</form>
|
||
<p>
|
||
Groups <b>automatically wrap</b> if the inputs don't fit on a single line.
|
||
</p>
|
||
<form>
|
||
<label for="input-pets">Owned pets</label>
|
||
<div id="input-pets" class="form-group">
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="cats"/>
|
||
Cats
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="dogs"/>
|
||
Dogs
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="sneks"/>
|
||
Sneks
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="bunnies"/>
|
||
Bunnies
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="frogs"/>
|
||
Frogs
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="ants"/>
|
||
Ants
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="input-pets" value="parrots"/>
|
||
Parrots
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-form-groups-row">
|
||
<h3>
|
||
Row groups
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-form-groups-row">row group</dfn> is a <b>form group</b> where the <b>inputs are arranged vertically</b> instead of horizontally.
|
||
</p>
|
||
<form>
|
||
<label for="input-roman">Fav. roman numeral</label>
|
||
<div id="input-roman" class="form-group">
|
||
<label class="form-group-row">
|
||
<input type="radio" name="input-roman" value="i" required/>
|
||
I (1)
|
||
</label>
|
||
<label class="form-group-row">
|
||
<input type="radio" name="input-roman" value="v" required/>
|
||
V (5)
|
||
</label>
|
||
<label class="form-group-row">
|
||
<input type="radio" name="input-roman" value="x" required/>
|
||
X (10)
|
||
</label>
|
||
<label class="form-group-row">
|
||
<input type="radio" name="input-roman" value="i" required/>
|
||
L (50)
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-form-row">
|
||
<h3>
|
||
Form rows
|
||
</h3>
|
||
<p>
|
||
Forms can also contain <dfn id="dfn-form-row">form rows</dfn>, elements which ignore the form columns and instead <b>take up the whole row</b>.
|
||
</p>
|
||
<form>
|
||
<label for="input-email">Email</label>
|
||
<input id="input-email" type="email" placeholder="Enter your email here" required/>
|
||
<label for="input-password">Password</label>
|
||
<input id="input-password" type="text" placeholder="Enter your password here" required/>
|
||
<div class="form-row">
|
||
<blockquote class="panel panel-parenthesis">
|
||
By logging in, you agree to sell your soul to the devil and to be tracked endlessly by all the corporations in the world.
|
||
</blockquote>
|
||
</div>
|
||
<label for="input-consent">Consent</label>
|
||
<div id="input-consent" class="form-group">
|
||
<label class="form-group-row">
|
||
<input type="checkbox" name="input-consent" value="accept"/>
|
||
I accept the conditions detailed above
|
||
</label>
|
||
</div>
|
||
<div class="form-row">
|
||
<input id="input-reset-2" type="reset" value="Reset"/>
|
||
<input id="input-submit-2" type="submit" value="Submit"/>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-common-elements">
|
||
<h2>
|
||
Common elements
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-headings">
|
||
<h3>
|
||
Headings
|
||
</h3>
|
||
<p>
|
||
An <dfn id="dfn-heading">heading</dfn> is the <b>title</b> of an article, chapter or panel.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<h1>Level-1</h1>
|
||
<h2>Level-2</h2>
|
||
<h3>Level-3</h3>
|
||
<h4>Level-4</h4>
|
||
<h5>Level-5</h5>
|
||
<h6>Level-6</h6>
|
||
</section>
|
||
<blockquote class="panel panel-dialog">
|
||
Generally, panels look nicer if they start with a level-3 heading, but you may use whichever you want, as Bluelib will automatically handle the margin.
|
||
</blockquote>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-anchors">
|
||
<h3>
|
||
Anchors
|
||
</h3>
|
||
<p>
|
||
An <dfn id="dfn-anchor">anchor</dfn> is a part of text which can be clicked to move to a different page or part of page.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
This is an <a href="https://example.org" target="_blank">example anchor</a>.
|
||
</section>
|
||
<p>
|
||
Visited anchors have a slightly different color.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
Take me to <a href="https://wikipedia.org" target="_blank">Wikipedia</a>!
|
||
</section>
|
||
<p>
|
||
Anchors with no destination are colored differently, so that the page author can notice and fix them.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<a>This link</a> leads nowhere.
|
||
</section>
|
||
<p>
|
||
Anchors which start a download or open an external program have also have slightly different color.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
Download <!--suppress HtmlUnknownTarget -->
|
||
<a download href="magnet:?xt=urn:btih:377852690518c09acdcdd970068a5eaa47dd0a9d&dn=gimp-2.10.24-setup-3.exe&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.coppersurfer.tk%3a6969%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=https%3a%2f%2fashrise.com%3a443%2fphoenix%2fannounce&tr=udp%3a%2f%2ftracker.openbittorrent.com%3a80%2fannounce&ws=https%3a%2f%2fartfiles.org%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fdownload.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.acc.umu.se%2fpub%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.cc.uoc.gr%2fmirrors%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.fau.de%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.gwdg.de%2fpub%2fmisc%2fgrafik%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.icm.edu.pl%2fpub%2fgraphics%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.lysator.liu.se%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.snt.utwente.nl%2fpub%2fsoftware%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fgimp.ip-connect.info%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.jaleco.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.klaus-uwe.me%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.umd.edu%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.dotsrc.org%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.syringanetworks.net%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.ukfast.co.uk%2fsites%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.xmission.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.mirrorservice.org%2fsites%2fftp.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.nic.funet.fi%2fpub%2fmirrors%2fftp.gimp.org%2fv2.10%2fwindows%2f">
|
||
GIMP 2.10.24
|
||
</a>
|
||
</section>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-details">
|
||
<h3>
|
||
Details and summaries
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-detail">detail</dfn> is an element which <b>collapses</b> the elements inside until its <dfn id="dfn-summary">summary</dfn> is clicked.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<details>
|
||
<summary>
|
||
There's something inside here...
|
||
</summary>
|
||
<section class="details-content">
|
||
You found a <b>HP Up</b>! Maximum HP increased by 25.
|
||
</section>
|
||
</details>
|
||
</section>
|
||
<p>
|
||
Multiple can be displayed aside each other, and can also be nested.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<details>
|
||
<summary>
|
||
There's something else inside...
|
||
</summary>
|
||
<section class="details-content">
|
||
You found <b>Pipis</b>. It exploded.
|
||
</section>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
There's another item...
|
||
</summary>
|
||
<section class="details-content">
|
||
You found <b>recursion</b>!
|
||
</section>
|
||
<details class="details-content">
|
||
<summary>
|
||
Recursion
|
||
</summary>
|
||
<section class="details-content">
|
||
No, Winnie, don't eat recursion...
|
||
</section>
|
||
<details class="details-content">
|
||
<summary>
|
||
Recursion
|
||
</summary>
|
||
<section class="details-content">
|
||
Please, stop...
|
||
</section>
|
||
<details class="details-content">
|
||
<summary>
|
||
Recursion
|
||
</summary>
|
||
<section class="details-content">
|
||
NOOOOOOOOOOOOOOO!
|
||
</section>
|
||
<details class="details-content">
|
||
<summary>
|
||
Recursion
|
||
</summary>
|
||
<section class="details-content">
|
||
Stack overflow.
|
||
</section>
|
||
</details>
|
||
</details>
|
||
</details>
|
||
</details>
|
||
</details>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-annotations">
|
||
<h2>
|
||
Annotations
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-ruby">
|
||
<h3>
|
||
Ruby text
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-ruby">ruby</dfn> is an inline element with annotations above the text.
|
||
</p>
|
||
<p style="font-size: xx-large;">
|
||
<ruby>
|
||
Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp>
|
||
de <rp>/</rp><rt>dɪ</rt><rp>/</rp>
|
||
na <rp>/</rp><rt>nə</rt><rp>/</rp>
|
||
</ruby>
|
||
</p>
|
||
<p style="font-size: xx-large;">
|
||
<ruby>
|
||
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
|
||
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
|
||
</ruby>
|
||
</p>
|
||
<p style="font-size: xx-large;">
|
||
<ruby>
|
||
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
|
||
</ruby>
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-todo">
|
||
<h3>
|
||
Todo
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-todo">todo</dfn> is a panel marked as incomplete by the page author.
|
||
</p>
|
||
<p>
|
||
Its colors are palette-independent and derive from the 🚧 Twemoji.
|
||
</p>
|
||
<div class="panel panel todo">
|
||
🚧 Write a description for this element.
|
||
</div>
|
||
<div class="panel panel-box todo">
|
||
🚧 Write a description for this element.
|
||
</div>
|
||
<div class="panel panel-dialog todo">
|
||
🚧 Write a description for this element.
|
||
</div>
|
||
<div class="panel panel-parenthesis todo">
|
||
🚧 Write a description for this element.
|
||
</div>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-semantics">
|
||
<h2>
|
||
Semantics
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-semantics">
|
||
<h3>
|
||
Semantics
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-semantic">semantic</dfn> is an inline element having a specific meaning defined by the <a href="https://html.spec.whatwg.org/">HTML specification</a>.
|
||
</p>
|
||
<p>
|
||
Here's the full list of them:
|
||
</p>
|
||
<ul class="list-gap-large">
|
||
<li>
|
||
<abbr>Abbreviation</abbr>
|
||
</li>
|
||
<li>
|
||
<b>Bring Attention</b>
|
||
</li>
|
||
<li>
|
||
<cite>Citation</cite>
|
||
</li>
|
||
<li>
|
||
<code>Code with <var>variable</var></code>
|
||
</li>
|
||
<li>
|
||
<dfn>Definition</dfn>
|
||
</li>
|
||
<li>
|
||
<em>Emphasis</em>
|
||
</li>
|
||
<li>
|
||
<i>Idiomatic Text</i>
|
||
</li>
|
||
<li>
|
||
<mark>Mark Text</mark>
|
||
</li>
|
||
<li>
|
||
<q>Inline Quotation</q>
|
||
</li>
|
||
<li>
|
||
<s>Strikethrough</s>
|
||
</li>
|
||
<li>
|
||
<samp>Sample Output</samp>
|
||
</li>
|
||
<li>
|
||
<small>Side Comment</small>
|
||
</li>
|
||
<li>
|
||
<strong>Strong Importance</strong>
|
||
</li>
|
||
<li>
|
||
<u>Unarticulated Annotation</u>
|
||
</li>
|
||
<li>
|
||
<var>Variable</var>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-keyboard">
|
||
<h3>
|
||
Keyboard
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-kbd">keyboard element</dfn> represents an interaction of the user with any kind of interface, such as a keyboard key like <kbd><kbd>Enter</kbd></kbd>, a combination of key presses like <kbd><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></kbd>, or the interaction with an UI element like the <kbd>Refresh</kbd> button.
|
||
</p>
|
||
<p>
|
||
Key presses and releases can be distinguished via special classes: <kbd class="semantic-kbd-press">Press <kbd>A</kbd></kbd> <kbd class="semantic-kbd-release">Release <kbd>A</kbd></kbd>
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-preformatted-and-code">
|
||
<h3>
|
||
Preformatted and code
|
||
</h3>
|
||
<p>
|
||
A <dfn id="dfn-pre">preformatted text element</dfn> displays its content as it is, preserving all spaces, newlines, and indentation.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<pre>This is regular preformatted text. :)</pre>
|
||
</section>
|
||
<p>
|
||
If code is being represented, it should be wrapped inside a code element.
|
||
</p>
|
||
<section class="panel panel-box">
|
||
<pre><code>This is preformatted code text. :)</code></pre>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
<section class="chapter" id="chapter-colors">
|
||
<h2>
|
||
Colors
|
||
</h2>
|
||
<section class="panel panel-box" id="panel-bluelib-color">
|
||
<h3>
|
||
Bluelib color
|
||
</h3>
|
||
<p>
|
||
All Bluelib elements get their <dfn id="dfn-bluelib-color">Bluelib color</dfn> dynamically from the <code>--bluelib-color-*</code> CSS variables, and then use it to <b>paint themselves</b>.
|
||
</p>
|
||
<p>
|
||
It is possible to change this color to alter the color of not only text, but panels and other elements as well!
|
||
</p>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box color-red" id="panel-red">
|
||
<h3>
|
||
Red
|
||
</h3>
|
||
<p>
|
||
This is a <b>red</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-orange" id="panel-orange">
|
||
<h3>
|
||
Orange
|
||
</h3>
|
||
<p>
|
||
This is an <b>orange</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-yellow" id="panel-yellow">
|
||
<h3>
|
||
Yellow
|
||
</h3>
|
||
<p>
|
||
This is a <b>yellow</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-lime" id="panel-lime">
|
||
<h3>
|
||
Lime
|
||
</h3>
|
||
<p>
|
||
This is a <b>lime</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-cyan" id="panel-cyan">
|
||
<h3>
|
||
Cyan
|
||
</h3>
|
||
<p>
|
||
This is a <b>cyan</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-blue" id="panel-blue">
|
||
<h3>
|
||
Blue
|
||
</h3>
|
||
<p>
|
||
This is a <b>blue</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-magenta" id="panel-magenta">
|
||
<h3>
|
||
Magenta
|
||
</h3>
|
||
<p>
|
||
This is a <b>magenta</b> box.
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box color-gray" id="panel-gray">
|
||
<h3>
|
||
Gray
|
||
</h3>
|
||
<p>
|
||
This is a <b>gray</b> box.
|
||
</p>
|
||
</section>
|
||
<div class="chapter-forcewrap"></div>
|
||
<section class="panel panel-box" id="panel-white" style="--bluelib-color-r: 255; --bluelib-color-g: 255; --bluelib-color-b: 255;">
|
||
<h3>
|
||
White
|
||
</h3>
|
||
<p>
|
||
This box has a custom color: it is always <b>white</b>!
|
||
</p>
|
||
</section>
|
||
<section class="panel panel-box" id="panel-black" style="--bluelib-color-r: 0; --bluelib-color-g: 0; --bluelib-color-b: 0;">
|
||
<h3>
|
||
Black
|
||
</h3>
|
||
<p>
|
||
This box has a custom color: it is always <b>black</b>!
|
||
</p>
|
||
</section>
|
||
</section>
|
||
</article>
|
||
</main>
|
||
</div>
|
||
<footer>
|
||
<p>
|
||
© <a href="https://steffo.eu">Stefano Pigozzi</a> -
|
||
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL 3.0</a> -
|
||
<a href="https://github.com/Steffo99/bluelib">GitHub</a>
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|