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

🔧 Complete everything but semantics

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

174
index.html
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>. Images can be <dfn id="dfn-limited">limited</dfn> to <b>prevent them from taking up too much screen space</b>.
</p> </p>
<div class="chapter"> <div class="chapter">
<section class="panel panel-box"> <section class="panel panel-box" id="panel-limited-half">
<h3> <h3>
Half Half
</h3> </h3>
@ -233,7 +233,7 @@
</p> </p>
<img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/> <img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-limited-quarter">
<h3> <h3>
Quarter Quarter
</h3> </h3>
@ -268,7 +268,7 @@
<h2> <h2>
Inputs Inputs
</h2> </h2>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input">
<h3> <h3>
Input Input
</h3> </h3>
@ -278,8 +278,8 @@
<p> <p>
They come in multiple kinds: They come in multiple kinds:
</p> </p>
<section class="chapter"> <section class="chapter" id="chapter-input-kinds">
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-field">
<h3> <h3>
Field Field
</h3> </h3>
@ -289,7 +289,7 @@
<!--suppress HtmlFormInputWithoutLabel --> <!--suppress HtmlFormInputWithoutLabel -->
<input type="text" placeholder="This is called a placeholder, by the way."/> <input type="text" placeholder="This is called a placeholder, by the way."/>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-select">
<h3> <h3>
Select Select
</h3> </h3>
@ -308,7 +308,7 @@
</select> </select>
</section> </section>
<div class="chapter-forcewrap"></div> <div class="chapter-forcewrap"></div>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-area">
<h3> <h3>
Area Area
</h3> </h3>
@ -318,7 +318,7 @@
<!--suppress HtmlFormInputWithoutLabel --> <!--suppress HtmlFormInputWithoutLabel -->
<textarea placeholder="Write something here!"></textarea> <textarea placeholder="Write something here!"></textarea>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-multiselect">
<h3> <h3>
Multiselect Multiselect
</h3> </h3>
@ -337,7 +337,7 @@
</select> </select>
</section> </section>
<div class="chapter-forcewrap"></div> <div class="chapter-forcewrap"></div>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-radio">
<h3> <h3>
Radio Radio
</h3> </h3>
@ -360,7 +360,7 @@
</label> </label>
</p> </p>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-checkbox">
<h3> <h3>
Checkbox Checkbox
</h3> </h3>
@ -384,7 +384,7 @@
</p> </p>
</section> </section>
<div class="chapter-forcewrap"></div> <div class="chapter-forcewrap"></div>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-input-button">
<h3> <h3>
Button Button
</h3> </h3>
@ -404,7 +404,7 @@
<h2> <h2>
Forms Forms
</h2> </h2>
<section class="panel panel-box"> <section class="panel panel-box" id="chapter-form-labels-inputs">
<h3> <h3>
Forms, labels and inputs Forms, labels and inputs
</h3> </h3>
@ -446,7 +446,7 @@
</form> </form>
</section> </section>
<div class="chapter-forcewrap"></div> <div class="chapter-forcewrap"></div>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-form-groups">
<h3> <h3>
Form groups Form groups
</h3> </h3>
@ -507,7 +507,7 @@
</div> </div>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-form-groups-row">
<h3> <h3>
Row groups Row groups
</h3> </h3>
@ -537,7 +537,7 @@
</form> </form>
</section> </section>
<div class="chapter-forcewrap"></div> <div class="chapter-forcewrap"></div>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-form-row">
<h3> <h3>
Form rows Form rows
</h3> </h3>
@ -568,10 +568,11 @@
</form> </form>
</section> </section>
</section> </section>
<section class="chapter"> <section class="chapter" id="chapter-common-elements">
<h2> <h2>
Common elements Common elements
</h2><section class="panel panel-box"> </h2>
<section class="panel panel-box" id="panel-headings">
<h3> <h3>
Headings Headings
</h3> </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. 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> </blockquote>
</section> </section>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-anchors">
<h3> <h3>
Anchors Anchors
</h3> </h3>
@ -623,39 +624,158 @@
</section> </section>
</section> </section>
</section> </section>
<section class="chapter"> <section class="chapter" id="chapter-annotations">
<h2> <h2>
Annotations Annotations
</h2> </h2>
<section class="panel panel-box"> <section class="panel panel-box" id="panel-ruby">
<h3> <h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby">Ruby text</a> Ruby text
</h3> </h3>
<p> <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> <p style="font-size: xx-large;">
<ruby> <ruby>
Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp> Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp>
de <rp>/</rp><rt>dɪ</rt><rp>/</rp> de <rp>/</rp><rt>dɪ</rt><rp>/</rp>
na <rp>/</rp><rt>nə</rt><rp>/</rp> na <rp>/</rp><rt>nə</rt><rp>/</rp>
</ruby> </ruby>
</p> </p>
<p> <p style="font-size: xx-large;">
<ruby> <ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby> </ruby>
</p> </p>
<p> <p style="font-size: xx-large;">
<ruby> <ruby>
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp> 明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
</ruby> </ruby>
</p> </p>
</section> </section>
</section> <section class="panel panel-box" id="panel-todo">
<div class="split"> <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>
<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> </article>
</main> </main>
</div> </div>

25
src/rules/skeleton.less vendored
View file

@ -1014,10 +1014,6 @@
/// Bluelib makes the annotations slightly transparent to differentiate them from the rest of the text. /// 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 /// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
@{ruby} {
font-size: xx-large;
}
@{ruby-parenthesis} { @{ruby-parenthesis} {
color: @c1; color: @c1;
} }
@ -1026,6 +1022,20 @@
color: @c6; 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 =====
/// Semantics are special font effects applied to text with a certain meaning. /// 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.
//<editor-fold desc="Rules: Colors">
// --- Colors ---
@{color-red} { @{color-red} {
.map-var-rgb(bluelib-color, bluelib-red); .map-var-rgb(bluelib-color, bluelib-red);
@ -1136,5 +1147,7 @@
@{color-gray} { @{color-gray} {
.map-var-rgb(bluelib-color, bluelib-gray); .map-var-rgb(bluelib-color, bluelib-gray);
} }
//</editor-fold>
} }

2
src/targets/paper.module.css.map
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"}

2
src/targets/paper.root.css.map
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"}

10
src/targets/skeleton.module.css
View file

@ -516,15 +516,19 @@
--bluelib-color-b: var(--bluelib-download-b); --bluelib-color-b: var(--bluelib-download-b);
text-decoration-style: solid; text-decoration-style: solid;
} }
.bluelib .ruby {
font-size: xx-large;
}
.bluelib .ruby-parenthesis { .bluelib .ruby-parenthesis {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1); color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
.bluelib .ruby-text { .bluelib .ruby-text {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); 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-red {
--bluelib-color-r: var(--bluelib-red-r); --bluelib-color-r: var(--bluelib-red-r);
--bluelib-color-g: var(--bluelib-red-g); --bluelib-color-g: var(--bluelib-red-g);

2
src/targets/skeleton.module.css.map
View file

File diff suppressed because one or more lines are too long

14
src/targets/skeleton.root.css
View file

@ -2200,12 +2200,6 @@ body .anchor-download,
--bluelib-color-b: var(--bluelib-download-b); --bluelib-color-b: var(--bluelib-download-b);
text-decoration-style: solid; text-decoration-style: solid;
} }
body ruby,
.bluelib ruby,
body .ruby,
.bluelib .ruby {
font-size: xx-large;
}
body rp, body rp,
.bluelib rp, .bluelib rp,
body .ruby-parenthesis, body .ruby-parenthesis,
@ -2218,6 +2212,14 @@ body .ruby-text,
.bluelib .ruby-text { .bluelib .ruby-text {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); 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, body .color-red,
.bluelib .color-red { .bluelib .color-red {
--bluelib-color-r: var(--bluelib-red-r); --bluelib-color-r: var(--bluelib-red-r);

2
src/targets/skeleton.root.css.map
View file

File diff suppressed because one or more lines are too long

3
src/vars/module.less
View file

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

3
src/vars/root.less
View file

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