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

Convert indentation to tabs

Browse source
This commit is contained in:
Steffo 2023-05-22 19:08:29 +02:00
parent 0c95bd2b3f
commit 7dc64b44cb
Signed by: steffo
GPG key ID: 2A24051445686895
20 changed files with 3513 additions and 3370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.editorconfig Normal file
View file

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = tab
insert_final_newline = true
tab_width = 4

4
.vscode/launch.json vendored
View file

@ -6,7 +6,7 @@
"type": "firefox", "type": "firefox",
"request": "launch", "request": "launch",
"reAttach": true, "reAttach": true,
"file": "${workspaceFolder}/examples/index.html", "file": "${workspaceFolder}/examples/index.html"
}, }
] ]
} }

2
.vscode/settings.json vendored
View file

@ -9,6 +9,6 @@
".idea": true, ".idea": true,
"dist": true, "dist": true,
"node_modules": true, "node_modules": true,
".nojekyll": true, ".nojekyll": true
} }
} }

230
examples/index.html
View file

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="preload" href="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" as="image" /> <link rel="preload" href="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" as="image"/>
<title>Bluelib</title> <title>Bluelib</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Bluelib" /> <meta property="og:title" content="Bluelib"/>
<meta property="og:description" content="A versatile and easy to use CSS stylesheet that supports fast dynamic recoloring via CSS variables." /> <meta property="og:description" content="A versatile and easy to use CSS stylesheet that supports fast dynamic recoloring via CSS variables."/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website"/>
<meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html" /> <meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html"/>
<meta property="og:image" content="../media/opengraph.png" /> <meta property="og:image" content="../media/opengraph.png"/>
<link rel="icon" type="image/x-icon" href="../favicon.ico"> <link rel="icon" type="image/x-icon" href="../favicon.ico">
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/layouts-center.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/layouts-center.root.less">
@ -26,12 +26,12 @@
<script> <script>
less = { less = {
env: "development", env: "development",
}; }
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/less"></script> <script src="https://cdn.jsdelivr.net/npm/less"></script>
<title>Bluelib</title> <title>Bluelib</title>
</head> </head>
<body class="theme-bluelib layout-center"> <body class="theme-bluelib layout-center">
<img class="layout-center-background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg"> <img class="layout-center-background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
<header> <header>
<h1> <h1>
@ -48,13 +48,15 @@
What is Bluelib? What is Bluelib?
</h3> </h3>
<p> <p>
<dfn id="dfn-bluelib">Bluelib</dfn> is a modular <i>CSS</i> library for web pages which aims to provide <b>great customization</b> and <b>flexibility</b> while trying to keep <b>HTML as "basic" as possible</b>. <dfn id="dfn-bluelib">Bluelib</dfn> is a modular <i>CSS</i> library for web pages which aims to provide <b>great customization</b> and
<b>flexibility</b> while trying to keep <b>HTML as "basic" as possible</b>.
</p> </p>
<p> <p>
This page itself acts both as a <b>documentation</b> of the library and as a <b>live preview</b> of its capabilities. This page itself acts both as a <b>documentation</b> of the library and as a <b>live preview</b> of its capabilities.
</p> </p>
<p> <p>
If you're on a browser which supports that, you can right click any element of this page and then click <kbd>Inspect Element</kbd> to see how something is done. If you're on a browser which supports that, you can right click any element of this page and then click
<kbd>Inspect Element</kbd> to see how something is done.
</p> </p>
<div class="panel parenthesis float-bottom"> <div class="panel parenthesis float-bottom">
<p> <p>
@ -164,7 +166,8 @@
A Bluelib <dfn id="dfn-target">target</dfn> is a CSS document where CSS rulesets of a certain type are grouped together. A Bluelib <dfn id="dfn-target">target</dfn> is a CSS document where CSS rulesets of a certain type are grouped together.
</p> </p>
<p> <p>
It is composed by two parts: the <dfn id="dfn-ruleset">ruleset</dfn>, determining the CSS rules to use, and the <dfn id="dfn-selectorset">selectorset</dfn>, determining the elements to apply the CSS rules on. It is composed by two parts: the <dfn id="dfn-ruleset">ruleset</dfn>, determining the CSS rules to use, and the
<dfn id="dfn-selectorset">selectorset</dfn>, determining the elements to apply the CSS rules on.
</p> </p>
<hr/> <hr/>
<p> <p>
@ -183,7 +186,8 @@
By running <code>dist/_build.sh</code>, new targets are generated and compiled from <a href="https://lesscss.org/">Less</a> to CSS. By running <code>dist/_build.sh</code>, new targets are generated and compiled from <a href="https://lesscss.org/">Less</a> to CSS.
</p> </p>
<p> <p>
The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in <code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair. The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in
<code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
</p> </p>
</section> </section>
<section class="panel box rainbow" id="panel-rulesets todo"> <section class="panel box rainbow" id="panel-rulesets todo">
@ -191,26 +195,37 @@
Available rulesets Available rulesets
</h3> </h3>
<dl> <dl>
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:dist-base:root')"> Base</label></dt> <dt>
<label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:dist-base:root')"> Base</label>
</dt>
<dd> <dd>
The base <i>ruleset</i>, providing the layout and basic high contrast theming. The base <i>ruleset</i>, providing the layout and basic high contrast theming.
</dd> </dd>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:dist-classic:root')"> Classic</label></dt> <dt>
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:dist-classic:root')"> Classic</label>
</dt>
<dd> <dd>
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
</dd> </dd>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:dist-glass:root')"> Glass</label></dt> <dt>
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:dist-glass:root')"> Glass</label>
</dt>
<dd> <dd>
Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background. Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
</dd> </dd>
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label></dt> <dt>
<label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label>
</dt>
<dd> <dd>
<mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules. <mark>Experimental.</mark>
<i>Ruleset</i> with bizzare or buggy but fun rules.
</dd> </dd>
<dt>Layouts</dt> <dt>Layouts</dt>
<dd> <dd>
<dl> <dl>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label></dt> <dt>
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label>
</dt>
<dd> <dd>
Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two. Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two.
</dd> </dd>
@ -219,19 +234,27 @@
<dt>Colors</dt> <dt>Colors</dt>
<dd> <dd>
<dl> <dl>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt> <dt>
<label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label>
</dt>
<dd> <dd>
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors. <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
</dd> </dd>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt> <dt>
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label>
</dt>
<dd> <dd>
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look. <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
</dd> </dd>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt> <dt>
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label>
</dt>
<dd> <dd>
A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise. A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
</dd> </dd>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt> <dt>
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label>
</dt>
<dd> <dd>
A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>. A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
</dd> </dd>
@ -259,7 +282,8 @@
</dd> </dd>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> Module</label></dt> <dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> Module</label></dt>
<dd> <dd>
All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects. All selectors use class names, allowing the usage of the target with
<a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
</dd> </dd>
</dl> </dl>
</section> </section>
@ -279,13 +303,35 @@
Simply link the stylesheets in the header of your project like this: Simply link the stylesheets in the header of your project like this:
</p> </p>
<div class="panel"> <div class="panel">
<code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code> <code>&lt;link
<wbr>
rel=&quot;stylesheet&quot;<wbr>
href=&quot;https://unpkg.com/@steffo/bluelib
<wbr>
@<var>VERSION</var>
<wbr>
/dist/
<wbr>
<var>RULESET</var>.<var>SELECTORSET</var>.css&quot;<wbr>
type=&quot;text/css&quot;<wbr>
/&gt;</code>
</div> </div>
<p> <p>
To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this: To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this:
</p> </p>
<div class="panel"> <div class="panel">
<code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.min.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code> <code>&lt;link
<wbr>
rel=&quot;stylesheet&quot;<wbr>
href=&quot;https://unpkg.com/@steffo/bluelib
<wbr>
@<var>VERSION</var>
<wbr>
/dist/
<wbr>
<var>RULESET</var>.<var>SELECTORSET</var>.min.css&quot;<wbr>
type=&quot;text/css&quot;<wbr>
/&gt;</code>
</div> </div>
</section> </section>
<section class="panel box todo" id="panel-installtbd"> <section class="panel box todo" id="panel-installtbd">
@ -367,10 +413,12 @@
Box usage Box usage
</h3> </h3>
<p> <p>
A <i>Box</i> creates a visible <b>separation</b> between the <b>content inside it</b> and the <b>content outside it</b>, and should be used when this separation is desired, like when <b>describing a topic</b> (like here). A <i>Box</i> creates a visible <b>separation</b> between the <b>content inside it</b> and the
<b>content outside it</b>, and should be used when this separation is desired, like when <b>describing a topic</b> (like here).
</p> </p>
<p> <p>
To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a <i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>. To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a
<i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>.
</p> </p>
</section> </section>
<section class="panel box" id="panel-when-dialog"> <section class="panel box" id="panel-when-dialog">
@ -378,7 +426,8 @@
Dialog usage Dialog usage
</h3> </h3>
<p> <p>
A <i>Dialog</i> creates a visible <b>indentation</b> of the <b>content inside it</b>, and should be used when this indentation is desired, like in <b>quotes</b> or <b>examples</b>. A <i>Dialog</i> creates a visible <b>indentation</b> of the
<b>content inside it</b>, and should be used when this indentation is desired, like in <b>quotes</b> or <b>examples</b>.
</p> </p>
<p> <p>
When containing a quote, they should use <b><code>&lt;blockquote&gt;</code> elements</b>. When containing a quote, they should use <b><code>&lt;blockquote&gt;</code> elements</b>.
@ -392,7 +441,8 @@
Parenthesis usage Parenthesis usage
</h3> </h3>
<p> <p>
A <i>Parenthesis</i> <b>removes importance from its contents</b>, and therefore makes for a great container for notes or additional information about a topic. A <i>Parenthesis</i>
<b>removes importance from its contents</b>, and therefore makes for a great container for notes or additional information about a topic.
</p> </p>
<p> <p>
Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them. Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them.
@ -475,7 +525,8 @@
A <dfn id="dfn-float">float</dfn> is a utility class to align items in panels without having to write CSS. A <dfn id="dfn-float">float</dfn> is a utility class to align items in panels without having to write CSS.
</p> </p>
<p class="float-bottom"> <p class="float-bottom">
For example, if a panel has some empty space, elements can be made to <b>float to the bottom</b>, which can be useful for example for buttons in sibling panels. For example, if a panel has some empty space, elements can be made to
<b>float to the bottom</b>, which can be useful for example for buttons in sibling panels.
</p> </p>
</section> </section>
<section class="panel box" id="panel-autowrap"> <section class="panel box" id="panel-autowrap">
@ -568,19 +619,26 @@
Mark Mark
</h3> </h3>
<p> <p>
The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a <b>strong color contrast</b>. The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a
<b>strong color contrast</b>.
</p> </p>
<div class="panel box mark float-bottom"> <div class="panel box mark float-bottom">
<p> <p>
Think of it like an <b>highlighter</b>, but for <mark>anything</mark>! Think of it like an <b>highlighter</b>, but for
<mark>anything</mark>
!
</p> </p>
<div class="panel box mark"> <div class="panel box mark">
<p> <p>
Which can be nested to <mark>negate</mark> its effect. Which can be nested to
<mark>negate</mark>
its effect.
</p> </p>
<div class="panel box mark"> <div class="panel box mark">
<p> <p>
Up to 3 times and <mark>not any more</mark>. Up to 3 times and
<mark>not any more</mark>
.
</p> </p>
</div> </div>
</div> </div>
@ -677,7 +735,8 @@
Separator Separator
</h3> </h3>
<p> <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. 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> </p>
<hr class="float-bottom"> <hr class="float-bottom">
<blockquote class="panel dialog"> <blockquote class="panel dialog">
@ -689,7 +748,8 @@
Light separator Light separator
</h3> </h3>
<p> <p>
A <dfn id="dfn-separator-light">light separator</dfn> is a <b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text. A <dfn id="dfn-separator-light">light separator</dfn> is a
<b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text.
</p> </p>
<hr class="separator-light float-bottom"> <hr class="separator-light float-bottom">
<blockquote class="panel dialog"> <blockquote class="panel dialog">
@ -701,7 +761,8 @@
Heavy separator Heavy separator
</h3> </h3>
<p> <p>
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough. A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a
<b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough.
</p> </p>
<hr class="separator-heavy float-bottom"> <hr class="separator-heavy float-bottom">
<blockquote class="panel dialog"> <blockquote class="panel dialog">
@ -789,7 +850,8 @@
Collapsible details Collapsible details
</h3> </h3>
<p> <p>
A <dfn id="dfn-details">details</dfn> element <b>hides its contents</b>, displaying only a <dfn id="dfn-summary">summary</dfn> until either the marker or the summary itself <b>is activated</b>. A <dfn id="dfn-details">details</dfn> element <b>hides its contents</b>, displaying only a
<dfn id="dfn-summary">summary</dfn> until either the marker or the summary itself <b>is activated</b>.
</p> </p>
<details> <details>
<summary>Something</summary> <summary>Something</summary>
@ -814,7 +876,8 @@
<u>A</u>nchors <u>A</u>nchors
</h3> </h3>
<p> <p>
An <dfn id="dfn-anchor">anchor</dfn> is an interactable element which can be clicked to <b>go to a different page</b>, or a <b>different part of the same page</b>, or to <b>perform an action with a different application</b>! An <dfn id="dfn-anchor">anchor</dfn> is an interactable element which can be clicked to <b>go to a different page</b>, or a
<b>different part of the same page</b>, or to <b>perform an action with a different application</b>!
</p> </p>
<div class="panel"> <div class="panel">
<p> <p>
@ -875,7 +938,8 @@
<u>Strong</u> importance <u>Strong</u> importance
</h3> </h3>
<p> <p>
A <dfn id="dfn-strong">strong importance</dfn> element denotes parts of text that are <b>even more important</b> than the ones denoted by <i>attention-bringers</i>. A <dfn id="dfn-strong">strong importance</dfn> element denotes parts of text that are
<b>even more important</b> than the ones denoted by <i>attention-bringers</i>.
</p> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<p> <p>
@ -888,7 +952,8 @@
<u>U</u>narticulated annotations <u>U</u>narticulated annotations
</h3> </h3>
<p> <p>
An <dfn id="dfn-annotation">unarticulated annotation</dfn> denotes parts of text that were given an <b>annotation</b> without any comment. An <dfn id="dfn-annotation">unarticulated annotation</dfn> denotes parts of text that were given an
<b>annotation</b> without any comment.
</p> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<p> <p>
@ -914,15 +979,20 @@
<u>Ins</u>erted and <u>del</u>eted text <u>Ins</u>erted and <u>del</u>eted text
</h3> </h3>
<p> <p>
When comparing changes to a text, parts of it can be marked as <dfn id="dfn-inserted">inserted</dfn> or <dfn id="dfn-deleted">deleted</dfn>. When comparing changes to a text, parts of it can be marked as <dfn id="dfn-inserted">inserted</dfn> or
<dfn id="dfn-deleted">deleted</dfn>.
</p> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<h4 style="text-align: left;"> <h4 style="text-align: left;">
Bluelib 5.0.0 Bluelib 5.0.0
</h4> </h4>
<ul> <ul>
<li>Added: <ins>more bugs</ins></li> <li>Added:
<li>Removed: <del>cool features</del></li> <ins>more bugs</ins>
</li>
<li>Removed:
<del>cool features</del>
</li>
</ul> </ul>
</div> </div>
</section> </section>
@ -947,7 +1017,8 @@
<u>Pre</u>formatted text <u>Pre</u>formatted text
</h3> </h3>
<p> <p>
A <dfn id="dfn-preformatted">preformatted text</dfn> element denotes text where <b>lines and positioning are significant</b>; this prevents them from being <b>rearranged</b> by the browser. A <dfn id="dfn-preformatted">preformatted text</dfn> element denotes text where
<b>lines and positioning are significant</b>; this prevents them from being <b>rearranged</b> by the browser.
</p> </p>
<p> <p>
It should be used for <b>poetry</b>, <b>code</b>, <b>ASCII art</b>, <b>kaomoji</b>, etc. It should be used for <b>poetry</b>, <b>code</b>, <b>ASCII art</b>, <b>kaomoji</b>, etc.
@ -965,7 +1036,8 @@
<u>Code</u> <u>Code</u>
</h3> </h3>
<p> <p>
A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of <b>code</b> (probably belonging to a programming language). A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of
<b>code</b> (probably belonging to a programming language).
</p> </p>
<p> <p>
If displayed as a block instead of inline, it should be used with a <i>preformatted text</i> element. If displayed as a block instead of inline, it should be used with a <i>preformatted text</i> element.
@ -986,7 +1058,8 @@ Contents
<u>K</u>ey<u>b</u>oar<u>d</u> input and <u>samp</u>le output <u>K</u>ey<u>b</u>oar<u>d</u> input and <u>samp</u>le output
</h3> </h3>
<p> <p>
<dfn id="dfn-sample-input">Input samples</dfn> and <dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately. <dfn id="dfn-sample-input">Input samples</dfn> and
<dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately.
</p> </p>
<p> <p>
A <i>sample</i> inside another creates emphasises the individual element, creating a combination. A <i>sample</i> inside another creates emphasises the individual element, creating a combination.
@ -1018,7 +1091,8 @@ Contents
Quotes and citations Quotes and citations
</h3> </h3>
<p> <p>
A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a <dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>. A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a
<dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>.
</p> </p>
<div class="panel dialog float-bottom"> <div class="panel dialog float-bottom">
<p> <p>
@ -1045,14 +1119,17 @@ Contents
Abbreviations Abbreviations
</h3> </h3>
<p> <p>
An <dfn id="dfn-abbreviation">abbreviation</dfn> element marks its contents as an <b>acronym</b> or <b>abbreviation</b> and allows the user to view the expanded abbreviation by hovering it with the mouse. An <dfn id="dfn-abbreviation">abbreviation</dfn> element marks its contents as an <b>acronym</b> or
<b>abbreviation</b> and allows the user to view the expanded abbreviation by hovering it with the mouse.
</p> </p>
<p> <p>
Note that no mobile browsers currently support this feature, so you'll have to <b>manually provide an alternative</b> for mobile users to see the full abbreviation. Note that no mobile browsers currently support this feature, so you'll have to
<b>manually provide an alternative</b> for mobile users to see the full abbreviation.
</p> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<p> <p>
Two companies against each other: <abbr class="blue" title="Builders League United">BLU</abbr> vs. <abbr class="red" title="Reliable Excavation Demolition">RED</abbr>! Two companies against each other: <abbr class="blue" title="Builders League United">BLU</abbr> vs.
<abbr class="red" title="Reliable Excavation Demolition">RED</abbr>!
</p> </p>
</div> </div>
</section> </section>
@ -1066,20 +1143,38 @@ Contents
<div class="panel float-bottom"> <div class="panel float-bottom">
<p style="font-size: xx-large;"> <p style="font-size: xx-large;">
<ruby> <ruby>
Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp> Mo
de <rp>/</rp><rt>dɪ</rt><rp>/</rp> <rp>/</rp>
na <rp>/</rp><rt>nə</rt><rp>/</rp> <rt>ˈmɒ</rt>
<rp>/</rp>
de
<rp>/</rp>
<rt>dɪ</rt>
<rp>/</rp>
na
<rp>/</rp>
<rt>nə</rt>
<rp>/</rp>
</ruby> </ruby>
</p> </p>
<p style="font-size: xx-large;"> <p style="font-size: xx-large;">
<ruby> <ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 漢
字 <rp>(</rp><rt>ji</rt><rp>)</rp> <rp>(</rp>
<rt>kan</rt>
<rp>)</rp>
字
<rp>(</rp>
<rt>ji</rt>
<rp>)</rp>
</ruby> </ruby>
</p> </p>
<p style="font-size: xx-large;"> <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>
</div> </div>
@ -1304,7 +1399,8 @@ Contents
Limited Limited
</h3> </h3>
<p> <p>
Images can be <dfn id="dfn-limited">limited</dfn> to <b>prevent them from taking up too much screen space</b>, like the previous one did. Images can be <dfn id="dfn-limited">limited</dfn> to
<b>prevent them from taking up too much screen space</b>, like the previous one did.
</p> </p>
<hr/> <hr/>
<h4> <h4>
@ -1370,7 +1466,8 @@ Contents
Special types of <i>Field</i>s Special types of <i>Field</i>s
</h4> </h4>
<p> <p>
A <i>Field</i> may require a particular <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type">type</a> of data, such as an email or a phone number. A <i>Field</i> may require a particular
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type">type</a> of data, such as an email or a phone number.
</p> </p>
<form class="panel"> <form class="panel">
<p> <p>
@ -1474,7 +1571,8 @@ Contents
A <dfn id="dfn-multiselect">Multiselect</dfn> is an <i>Input</i> which allows the user to <b>enable or disable multiple options</b>. A <dfn id="dfn-multiselect">Multiselect</dfn> is an <i>Input</i> which allows the user to <b>enable or disable multiple options</b>.
</p> </p>
<p> <p>
Be aware that the average user will probably not know how to interact with the <i>Multiselect</i>: to select options not adjacent to each other on a desktop browser, it requires holding the <kbd>Ctrl</kbd> key. Be aware that the average user will probably not know how to interact with the
<i>Multiselect</i>: to select options not adjacent to each other on a desktop browser, it requires holding the <kbd>Ctrl</kbd> key.
</p> </p>
<form class="panel float-bottom"> <form class="panel float-bottom">
<p> <p>
@ -1511,7 +1609,8 @@ Contents
Radio Radio
</h3> </h3>
<p> <p>
<dfn id="dfn-radio">Radios</dfn> are <i>Input</i>s which, like a <i>Select</i>, allow the user to select between <b>one of multiple options</b> when grouped together. <dfn id="dfn-radio">Radios</dfn> are <i>Input</i>s which, like a <i>Select</i>, allow the user to select between
<b>one of multiple options</b> when grouped together.
</p> </p>
<form class="panel float-bottom"> <form class="panel float-bottom">
<p> <p>
@ -1551,7 +1650,8 @@ Contents
Checkbox Checkbox
</h3> </h3>
<p> <p>
<dfn id="dfn-checkbox">Checkboxes</dfn> are <i>Input</i>s which, like a <i>Multiselect</i>, allows the user to <b>enable or disable multiple options</b> when grouped together. <dfn id="dfn-checkbox">Checkboxes</dfn> are <i>Input</i>s which, like a <i>Multiselect</i>, allows the user to
<b>enable or disable multiple options</b> when grouped together.
</p> </p>
<form class="panel float-bottom"> <form class="panel float-bottom">
<p> <p>
@ -1803,5 +1903,5 @@ Contents
<a href="https://github.com/Steffo99/bluelib">GitHub</a> <a href="https://github.com/Steffo99/bluelib">GitHub</a>
</p> </p>
</footer> </footer>
</body> </body>
</html> </html>

40
examples/index.js
View file

@ -4,8 +4,8 @@
* @returns {boolean} `true` if the rendering is complete, `false` otherwise. * @returns {boolean} `true` if the rendering is complete, `false` otherwise.
*/ */
function isLessDone() { function isLessDone() {
const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]') const lessSheets = document.querySelectorAll("link[rel=\"stylesheet/less\"]")
const cssSheets = document.querySelectorAll('style') const cssSheets = document.querySelectorAll("style")
return lessSheets.length === cssSheets.length return lessSheets.length === cssSheets.length
} }
@ -43,32 +43,44 @@ async function enableChanges() {
await sleepUntilLessIsDone() await sleepUntilLessIsDone()
lessStyles = [...document.styleSheets].filter( lessStyles = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist") (s) => s.ownerNode.id.startsWith("less:dist"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
{ [s.ownerNode.id]: s }
),
).reduce( ).reduce(
(p, c) => ({...p, ...c}), (p, c) => (
{} { ...p, ...c }
),
{},
) )
console.debug("Found Less stylesheets:", lessStyles) console.debug("Found Less stylesheets:", lessStyles)
lessColors = [...document.styleSheets].filter( lessColors = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist-colors") (s) => s.ownerNode.id.startsWith("less:dist-colors"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
{ [s.ownerNode.id]: s }
),
).reduce( ).reduce(
(p, c) => ({...p, ...c}), (p, c) => (
{} { ...p, ...c }
),
{},
) )
console.debug("Found Less colors:", lessColors) console.debug("Found Less colors:", lessColors)
lessFonts = [...document.styleSheets].filter( lessFonts = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist-fonts") (s) => s.ownerNode.id.startsWith("less:dist-fonts"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
{ [s.ownerNode.id]: s }
),
).reduce( ).reduce(
(p, c) => ({...p, ...c}), (p, c) => (
{} { ...p, ...c }
),
{},
) )
console.debug("Found Less fonts:", lessFonts) console.debug("Found Less fonts:", lessFonts)

2
index.html
View file

@ -1,6 +1,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="refresh" content="0; url=examples/index.html" /> <meta http-equiv="refresh" content="0; url=examples/index.html"/>
<title>Redirecting...</title> <title>Redirecting...</title>
</head> </head>
<body> <body>

22
src/mixins/hsl.less
View file

@ -27,25 +27,17 @@
/// ///
/// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on. /// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on.
.hsl-group(@name) { .hsl-group(@name) {
@c: hsl( @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") var(~"--bhsl-@{name}-lightness"));
var(~"--bhsl-@{name}-hue")
var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness")
);
} }
.hsl-group(@name; @alpha) { .hsl-group(@name; @alpha) {
@c: hsl( @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-hue")
var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness") var(~"--bhsl-@{name}-lightness")
/ @alpha / @alpha);
);
} }
.hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) { .hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) {
@c: hsl( @c: hsl(calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}")
calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}") calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
/ @alpha / @alpha);
);
} }

35
src/rulesets/base.less
View file

@ -90,19 +90,24 @@
@{float-top} { @{float-top} {
margin-bottom: auto; margin-bottom: auto;
} }
@{float-right} { @{float-right} {
margin-left: auto; margin-left: auto;
} }
@{float-bottom} { @{float-bottom} {
margin-top: auto; margin-top: auto;
} }
@{float-left} { @{float-left} {
margin-right: auto; margin-right: auto;
} }
@{float-hcenter} { @{float-hcenter} {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@{float-vcenter} { @{float-vcenter} {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
@ -170,14 +175,17 @@
border-top-width: 2px; border-top-width: 2px;
padding-top: 6px; padding-top: 6px;
} }
&@{border-right}, &@{panel-box} { &@{border-right}, &@{panel-box} {
border-right-width: 2px; border-right-width: 2px;
padding-right: 6px; padding-right: 6px;
} }
&@{border-left}, &@{panel-box}, &@{panel-dialog} { &@{border-left}, &@{panel-box}, &@{panel-dialog} {
border-left-width: 2px; border-left-width: 2px;
padding-left: 6px; padding-left: 6px;
} }
&@{border-bottom}, &@{panel-box} { &@{border-bottom}, &@{panel-box} {
border-bottom-width: 2px; border-bottom-width: 2px;
padding-bottom: 6px; padding-bottom: 6px;
@ -213,41 +221,49 @@
flex-basis: calc(100% / 2); flex-basis: calc(100% / 2);
} }
} }
@{chapter-2} { @{chapter-2} {
> @{all} { > @{all} {
flex-basis: calc(100% / 3); flex-basis: calc(100% / 3);
} }
} }
@{chapter-3} { @{chapter-3} {
> @{all} { > @{all} {
flex-basis: calc(100% / 4); flex-basis: calc(100% / 4);
} }
} }
@{chapter-4} { @{chapter-4} {
> @{all} { > @{all} {
flex-basis: calc(100% / 5); flex-basis: calc(100% / 5);
} }
} }
@{chapter-5} { @{chapter-5} {
> @{all} { > @{all} {
flex-basis: calc(100% / 6); flex-basis: calc(100% / 6);
} }
} }
@{chapter-6} { @{chapter-6} {
> @{all} { > @{all} {
flex-basis: calc(100% / 7); flex-basis: calc(100% / 7);
} }
} }
@{chapter-7} { @{chapter-7} {
> @{all} { > @{all} {
flex-basis: calc(100% / 8); flex-basis: calc(100% / 8);
} }
} }
@{chapter-8} { @{chapter-8} {
> @{all} { > @{all} {
flex-basis: calc(100% / 9); flex-basis: calc(100% / 9);
} }
} }
@{chapter-9} { @{chapter-9} {
> @{all} { > @{all} {
flex-basis: calc(100% / 10); flex-basis: calc(100% / 10);
@ -555,18 +571,23 @@
@{modifier-red} { @{modifier-red} {
.map-hsl-group(current; red); .map-hsl-group(current; red);
} }
@{modifier-yellow} { @{modifier-yellow} {
.map-hsl-group(current; yellow); .map-hsl-group(current; yellow);
} }
@{modifier-green} { @{modifier-green} {
.map-hsl-group(current; green); .map-hsl-group(current; green);
} }
@{modifier-cyan} { @{modifier-cyan} {
.map-hsl-group(current; cyan); .map-hsl-group(current; cyan);
} }
@{modifier-blue} { @{modifier-blue} {
.map-hsl-group(current; blue); .map-hsl-group(current; blue);
} }
@{modifier-magenta} { @{modifier-magenta} {
.map-hsl-group(current; magenta); .map-hsl-group(current; magenta);
} }
@ -628,6 +649,7 @@
// Fields and selects should have a bottom border // Fields and selects should have a bottom border
border-bottom-width: 2px; border-bottom-width: 2px;
} }
@{input-area}, @{input-multiselect} { @{input-area}, @{input-multiselect} {
// Areas and multiselects should have a left border // Areas and multiselects should have a left border
border-left-width: 2px; border-left-width: 2px;
@ -637,12 +659,15 @@
@{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) { @{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) {
cursor: text; cursor: text;
} }
@{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) { @{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) {
cursor: vertical-text; cursor: vertical-text;
} }
@{input-range}:not(@{property-disabled}) { @{input-range}:not(@{property-disabled}) {
cursor: ew-resize; cursor: ew-resize;
} }
@{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) { @{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) {
cursor: pointer; cursor: pointer;
} }
@ -701,6 +726,7 @@
background-color: .hsl-group(current)[@c]; background-color: .hsl-group(current)[@c];
} }
} }
@{input-radio} { @{input-radio} {
// Radios should be round // Radios should be round
border-radius: 100%; border-radius: 100%;
@ -754,7 +780,7 @@
} }
// Webkit hacks // Webkit hacks
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
// Make the icons that webkit randomly add to fields AT LEAST use the correct color // Make the icons that webkit randomly add to fields AT LEAST use the correct color
@{input-field} { @{input-field} {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
@ -839,6 +865,7 @@
@{text-idiomatic} { @{text-idiomatic} {
.use-font-group(idiomatic); .use-font-group(idiomatic);
} }
@{text-emphasis} { @{text-emphasis} {
.use-font-group(emphasis); .use-font-group(emphasis);
} }
@ -846,6 +873,7 @@
@{text-attention} { @{text-attention} {
.use-font-group(attention); .use-font-group(attention);
} }
@{text-strong} { @{text-strong} {
.use-font-group(strong); .use-font-group(strong);
} }
@ -853,6 +881,7 @@
@{text-inserted} { @{text-inserted} {
.map-hsl-group(current; inserted); .map-hsl-group(current; inserted);
} }
@{text-deleted} { @{text-deleted} {
.map-hsl-group(current; deleted); .map-hsl-group(current; deleted);
} }
@ -860,12 +889,15 @@
@{text-code}, @{text-preformatted}, @{text-input}, @{text-output} { @{text-code}, @{text-preformatted}, @{text-input}, @{text-output} {
.use-font-group(code); .use-font-group(code);
} }
@{text-preformatted} { @{text-preformatted} {
overflow-x: scroll; overflow-x: scroll;
} }
@{text-input}, @{text-output} { @{text-input}, @{text-output} {
padding: 0 0.25ex; padding: 0 0.25ex;
} }
@{text-input} { @{text-input} {
background-color: .hsl-group(sample-output)[@c]; background-color: .hsl-group(sample-output)[@c];
.map-hsl-group(current; sample-input); .map-hsl-group(current; sample-input);
@ -874,6 +906,7 @@
.use-font-group(boldcode); .use-font-group(boldcode);
} }
} }
@{text-output} { @{text-output} {
background-color: .hsl-group(sample-input)[@c]; background-color: .hsl-group(sample-input)[@c];
.map-hsl-group(current; sample-output); .map-hsl-group(current; sample-output);

2
src/rulesets/classic.less
View file

@ -104,9 +104,11 @@
@{input-field}, @{input-select} { @{input-field}, @{input-select} {
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
} }
@{input-area}, @{input-multiselect} { @{input-area}, @{input-multiselect} {
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0; border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
} }
@{input-button} { @{input-button} {
border-radius: var(--b-border-radius); border-radius: var(--b-border-radius);
} }

22
src/rulesets/fonts/fonts-fira-ghpages.less
View file

@ -251,17 +251,17 @@
@{bluelib} { @{bluelib} {
// @name; @style; @variant; @weight;@stretch; @size; @height; @family // @name; @style; @variant; @weight;@stretch; @size; @height; @family
.create-font-group( text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif); .create-font-group(header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif);
.create-font-group( code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace); .create-font-group(code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace);
.create-font-group( boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace); .create-font-group(boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace);
.create-font-group( term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group(attention; normal; normal; 600; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(attention; normal; normal; 600; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
} }

11
src/rulesets/glass.less
View file

@ -18,10 +18,7 @@
@{panel}, @{table}@{panel} > @{table-caption} { @{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c]; background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
backdrop-filter: backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
@{panel} { @{panel} {
background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c]; background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
@ -59,11 +56,9 @@
// Make to-do have a glass background too // Make to-do have a glass background too
@{panel}@{modifier-todo} { @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background; 0.3)[@c]; background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter: backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
blur(var(--b-panel-blur))
grayscale(100%)
;
} }
@{panel} { @{panel} {
@{panel}@{modifier-todo} { @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];