1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00

🔧 Complete everything but semantics

This commit is contained in:
Steffo 2021-08-01 02:56:42 +02:00 committed by Stefano Pigozzi
parent 6245fa9557
commit 19694a745d
10 changed files with 206 additions and 65 deletions

View file

@ -224,7 +224,7 @@
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">
<section class="panel panel-box" id="panel-limited-half">
<h3>
Half
</h3>
@ -233,7 +233,7 @@
</p>
<img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-limited-quarter">
<h3>
Quarter
</h3>
@ -268,7 +268,7 @@
<h2>
Inputs
</h2>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input">
<h3>
Input
</h3>
@ -278,8 +278,8 @@
<p>
They come in multiple kinds:
</p>
<section class="chapter">
<section class="panel panel-box">
<section class="chapter" id="chapter-input-kinds">
<section class="panel panel-box" id="panel-input-field">
<h3>
Field
</h3>
@ -289,7 +289,7 @@
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" placeholder="This is called a placeholder, by the way."/>
</section>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-select">
<h3>
Select
</h3>
@ -308,7 +308,7 @@
</select>
</section>
<div class="chapter-forcewrap"></div>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-area">
<h3>
Area
</h3>
@ -318,7 +318,7 @@
<!--suppress HtmlFormInputWithoutLabel -->
<textarea placeholder="Write something here!"></textarea>
</section>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-multiselect">
<h3>
Multiselect
</h3>
@ -337,7 +337,7 @@
</select>
</section>
<div class="chapter-forcewrap"></div>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-radio">
<h3>
Radio
</h3>
@ -360,7 +360,7 @@
</label>
</p>
</section>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-checkbox">
<h3>
Checkbox
</h3>
@ -384,7 +384,7 @@
</p>
</section>
<div class="chapter-forcewrap"></div>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-input-button">
<h3>
Button
</h3>
@ -404,7 +404,7 @@
<h2>
Forms
</h2>
<section class="panel panel-box">
<section class="panel panel-box" id="chapter-form-labels-inputs">
<h3>
Forms, labels and inputs
</h3>
@ -446,7 +446,7 @@
</form>
</section>
<div class="chapter-forcewrap"></div>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-form-groups">
<h3>
Form groups
</h3>
@ -507,7 +507,7 @@
</div>
</form>
</section>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-form-groups-row">
<h3>
Row groups
</h3>
@ -537,7 +537,7 @@
</form>
</section>
<div class="chapter-forcewrap"></div>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-form-row">
<h3>
Form rows
</h3>
@ -568,10 +568,11 @@
</form>
</section>
</section>
<section class="chapter">
<section class="chapter" id="chapter-common-elements">
<h2>
Common elements
</h2><section class="panel panel-box">
</h2>
<section class="panel panel-box" id="panel-headings">
<h3>
Headings
</h3>
@ -590,7 +591,7 @@
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">
<section class="panel panel-box" id="panel-anchors">
<h3>
Anchors
</h3>
@ -623,39 +624,158 @@
</section>
</section>
</section>
<section class="chapter">
<section class="chapter" id="chapter-annotations">
<h2>
Annotations
</h2>
<section class="panel panel-box">
<section class="panel panel-box" id="panel-ruby">
<h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby">Ruby text</a>
Ruby text
</h3>
<p>
Ruby text is made slightly transparent, to make the main text more evident.
A <dfn id="dfn-ruby">ruby</dfn> is a text with annotations either above or below the
</p>
<p>
<p style="font-size: xx-large;">
<ruby>
Mo <rp>/</rp><rt>ˈ</rt><rp>/</rp>
de <rp>/</rp><rt>dɪ</rt><rp>/</rp>
na <rp>/</rp><rt></rt><rp>/</rp>
</ruby>
</p>
<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>
<p style="font-size: xx-large;">
<ruby>
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
</ruby>
</p>
</section>
</section>
<div class="split">
<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-colors">
<h2>
Colors
</h2>
<section class="panel panel-box">
<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>

View file

@ -1014,10 +1014,6 @@
/// Bluelib makes the annotations slightly transparent to differentiate them from the rest of the text.
/// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
@{ruby} {
font-size: xx-large;
}
@{ruby-parenthesis} {
color: @c1;
}
@ -1026,6 +1022,20 @@
color: @c6;
}
/// ===== Ruby =====
/// Todos are used to mark unfinished parts of a website.
/// Their color ignores the palette and derives from the 🚧 emoji
@{todo} {
background-color: #292F33;
--bluelib-color-r: 255;
--bluelib-color-g: 204;
--bluelib-color-b: 77;
border-color: #FFCC4D;
}
/// ===== Semantics =====
/// Semantics are special font effects applied to text with a certain meaning.
@ -1101,9 +1111,10 @@
}
/// ===== Colors =====
/// Colors are classes which apply a certain color from the palette to the bluelib-color of the element which has them.
// --- Colors ---
//<editor-fold desc="Rules: Colors">
@{color-red} {
.map-var-rgb(bluelib-color, bluelib-red);
@ -1136,5 +1147,7 @@
@{color-gray} {
.map-var-rgb(bluelib-color, bluelib-gray);
}
//</editor-fold>
}

View file

@ -1 +1 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/vars/module.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib/src/rules/paper.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;ECgBA,sBAAA;EDWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/paper.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;EDgBA,sBAAA;ECWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}

View file

@ -1 +1 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/vars/root.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib/src/rules/paper.less"],"names":[],"mappings":"AAAC;AAAM;ECCH,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;ECgBA,sBAAA;EDWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.root.css"}
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/paper.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less"],"names":[],"mappings":"AAAC;AAAM;ECCH,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;EDgBA,sBAAA;ECWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.root.css"}

View file

@ -516,15 +516,19 @@
--bluelib-color-b: var(--bluelib-download-b);
text-decoration-style: solid;
}
.bluelib .ruby {
font-size: xx-large;
}
.bluelib .ruby-parenthesis {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .ruby-text {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
}
.bluelib .todo {
background-color: #292F33;
--bluelib-color-r: 255;
--bluelib-color-g: 204;
--bluelib-color-b: 77;
border-color: #FFCC4D;
}
.bluelib .color-red {
--bluelib-color-r: var(--bluelib-red-r);
--bluelib-color-g: var(--bluelib-red-g);

File diff suppressed because one or more lines are too long

View file

@ -2200,12 +2200,6 @@ body .anchor-download,
--bluelib-color-b: var(--bluelib-download-b);
text-decoration-style: solid;
}
body ruby,
.bluelib ruby,
body .ruby,
.bluelib .ruby {
font-size: xx-large;
}
body rp,
.bluelib rp,
body .ruby-parenthesis,
@ -2218,6 +2212,14 @@ body .ruby-text,
.bluelib .ruby-text {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
}
body .todo,
.bluelib .todo {
background-color: #292F33;
--bluelib-color-r: 255;
--bluelib-color-g: 204;
--bluelib-color-b: 77;
border-color: #FFCC4D;
}
body .color-red,
.bluelib .color-red {
--bluelib-color-r: var(--bluelib-red-r);

File diff suppressed because one or more lines are too long

View file

@ -55,10 +55,11 @@
@anchor-link: ~'.anchor-link';
@anchor-download: ~'.anchor-download';
@ruby: ~".ruby";
@ruby-parenthesis: ~".ruby-parenthesis";
@ruby-text: ~".ruby-text";
@todo: ~".todo";
@semantic-abbr: ~"abbr, .semantic-abbr";
@semantic-b: ~"b, .semantic-b";
@semantic-cite: ~"cite, .semantic-cite";

View file

@ -56,10 +56,11 @@
@anchor-link: ~'a[href^="http://"], a[href^="https://"], .anchor-link';
@anchor-download: ~'a[download], a[href]:not([href^="http://"]):not([href^="https://"]), .anchor-download';
@ruby: ~"ruby, .ruby";
@ruby-parenthesis: ~"rp, .ruby-parenthesis";
@ruby-text: ~"rt, .ruby-text";
@todo: ~".todo";
@semantic-abbr: ~"abbr, .semantic-abbr";
@semantic-b: ~"b, .semantic-b";
@semantic-cite: ~"cite, .semantic-cite";