From 7dc64b44cb81280decb9b1ead0ddd3aafd8d85e7 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Mon, 22 May 2023 19:08:29 +0200 Subject: [PATCH] Convert indentation to tabs --- .editorconfig | 9 + .vscode/launch.json | 22 +- .vscode/settings.json | 26 +- examples/index.css | 6 +- examples/index.html | 3690 ++++++++++---------- examples/index.js | 158 +- index.html | 16 +- package.json | 120 +- src/mixins/fonts.less | 24 +- src/mixins/hsl.less | 38 +- src/rulesets/base.less | 1789 +++++----- src/rulesets/classic.less | 264 +- src/rulesets/colors/colors-amber.less | 36 +- src/rulesets/colors/colors-pixeldawn.less | 88 +- src/rulesets/colors/colors-purplestar.less | 38 +- src/rulesets/colors/colors-royalblue.less | 36 +- src/rulesets/fonts/fonts-fira-ghpages.less | 388 +- src/rulesets/fun.less | 22 +- src/rulesets/glass.less | 107 +- src/rulesets/layouts/layouts-center.less | 6 +- 20 files changed, 3513 insertions(+), 3370 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..d1bb991 --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/.vscode/launch.json b/.vscode/launch.json index cf2a1b3..63d4252 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -1,12 +1,12 @@ { - "version": "0.2.0", - "configurations": [ - { - "name": "Preview example page", - "type": "firefox", - "request": "launch", - "reAttach": true, - "file": "${workspaceFolder}/examples/index.html", - }, - ] -} \ No newline at end of file + "version": "0.2.0", + "configurations": [ + { + "name": "Preview example page", + "type": "firefox", + "request": "launch", + "reAttach": true, + "file": "${workspaceFolder}/examples/index.html" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 4e59cdc..e9f7520 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,14 +1,14 @@ { - "files.exclude": { - "**/.git": true, - "**/.svn": true, - "**/.hg": true, - "**/CVS": true, - "**/.DS_Store": true, - "**/Thumbs.db": true, - ".idea": true, - "dist": true, - "node_modules": true, - ".nojekyll": true, - } -} \ No newline at end of file + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/Thumbs.db": true, + ".idea": true, + "dist": true, + "node_modules": true, + ".nojekyll": true + } +} diff --git a/examples/index.css b/examples/index.css index 56170fe..db97f11 100644 --- a/examples/index.css +++ b/examples/index.css @@ -1,7 +1,7 @@ #body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { - min-width: 360px; + min-width: 360px; } #body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { - min-width: unset; -} \ No newline at end of file + min-width: unset; +} diff --git a/examples/index.html b/examples/index.html index f63b89f..dd3c033 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,1807 +1,1907 @@ - - - - Bluelib - - - - - - - - - - - - - - - - - - - - - - Bluelib - - - -
-

- Bluelib -

-
-
-
-

- Welcome to Bluelib! -

-
-

- What is Bluelib? -

-

- Bluelib is a modular CSS library for web pages which aims to provide great customization and flexibility while trying to keep HTML as "basic" as possible. -

-

- This page itself acts both as a documentation of the library and as a live preview of its capabilities. -

-

- If you're on a browser which supports that, you can right click any element of this page and then click Inspect Element to see how something is done. -

-
-

- This page is also used for development, therefore it uses un-minified sources and imports some development scripts. -

-

- Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser! -

-
-
-
-
-
-

- Table of contents -

-
    -
  1. Welcome to Bluelib!
    2. -
  2. Rulesets, selectorsets, targets
    3. -
  3. Installation and usage
    4. -
  4. Panels
    5. -
  5. Chapters
    6. -
  6. Modifiers
    7. -
  7. Separators
    8. -
  8. Lists
    9. -
  9. Glossaries
    10. -
  10. Text elements
    11. -
  11. Tables
    12. -
  12. Images
    13. -
  13. Inputs
    14. -
  14. Forms
    15. -
-
-
-

- Glossary -

- -
-
-
-

- Rulesets, selectorsets, targets -

-
-

- Targets -

-

- A Bluelib target is a CSS document where CSS rulesets of a certain type are grouped together. -

-

- It is composed by two parts: the ruleset, determining the CSS rules to use, and the selectorset, determining the elements to apply the CSS rules on. -

-
-

- Targets always have a predictable name, which is: -

-
-

- dist/RULESET.SELECTORSET.css -

-
-

- Be sure to choose the ones matching your needs! -

-
-

- By running dist/_build.sh, new targets are generated and compiled from Less to CSS. -

-

- The cartesian product is applied between all rulesets in src/rulesets and all selectorsets in src/selectorsets, compiling a new target for each pair. -

-
-
-

- Available rulesets -

-
-
-
- The base ruleset, providing the layout and basic high contrast theming. -
-
-
- Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. -
-
-
- Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background. -
-
-
- Experimental. Ruleset with bizzare or buggy but fun rules. -
-
Layouts
-
-
-
-
- Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two. -
-
-
-
Colors
-
-
-
-
- Steffo's signature color theme, based upon RYG⁵'s logo colors. -
-
-
- Nemesis' own color theme, with a "coffee-like" look. -
-
-
- A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise. -
-
-
- A purple-ish theme for Star Shard Studio. -
-
-
-
Fonts
-
-
-
-
- Font theme based upon Mozilla's Fira font. -
-
-
-
-
-
-

- Available selectorsets -

-
-
-
- Simple selectors for usage in plain HTML pages, with short and human-friendly class names. -
-
-
- All selectors use class names, allowing the usage of the target with CSS Modules. Useful for React or similar web app projects. -
-
-
-
-
-

- Installation and usage -

-
-

- Via UNPKG -

-

- The easiest way to use Bluelib on your website is by using UNPKG. -

-

- Simply link the stylesheets in the header of your project like this: -

-
- <link rel="stylesheet" href="https://unpkg.com/@steffo/bluelib@VERSION/dist/RULESET.SELECTORSET.css" type="text/css"/> -
-

- To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this: -

-
- <link rel="stylesheet" href="https://unpkg.com/@steffo/bluelib@VERSION/dist/RULESET.SELECTORSET.min.css" type="text/css"/> -
-
-
-

- Coming soon -

-

- More installation methods coming soon! -

-
-
-
-

- Panels -

-
-

- Panel -

-

- A Panel is a container styled with a slight background color and no borders. -

-
- Hello world! I am a Panel! -
-
-
-

- Box -

-

- A Box is a container adding borders of all four sides to the base appearence of a Panel. -

-
- This Box contains a hidden Snake. 🐍 -
-
-
-

- Dialog -

-

- A Dialog is a container adding a left border to the base appearence of a Panel. -

-
- Snake? Snake??? SNAKEEEEEEE! -
-
-
-

- Parenthesis -

-

- A Parenthesis is a container styled as a Panel and with smaller text. -

-
- I think we lost the Snake... -
-
-
-

- Panel usage -

-

- When using Bluelib, text should always be either an header or inside a Panel. -

-

- Since Panels often denote "sections" of text, they should usually be <section> elements. -

-

- When they are only used cosmetically, <div> elements should be used instead. -

-

- When used to create forms, they may also be <form> elements. -

-
-
-

- Box usage -

-

- A Box creates a visible separation between the content inside it and the content outside it, and should be used when this separation is desired, like when describing a topic (like here). -

-

- To achieve the best visual style, Boxes should always be the outmost panels: you should never place a Box inside a Panel or a Dialog, but you can place one inside another Box. -

-
-
-

- Dialog usage -

-

- A Dialog creates a visible indentation of the content inside it, and should be used when this indentation is desired, like in quotes or examples. -

-

- When containing a quote, they should use <blockquote> elements. -

-

- Like Boxes, Dialogs should never be placed into containers with less borders than them, such as Panels. -

-
-
-

- Parenthesis usage -

-

- A Parenthesis removes importance from its contents, and therefore makes for a great container for notes or additional information about a topic. -

-

- Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them. -

-
-
-
-
-

- Nesting -

-

- As you have seen in the sections before, panels can be nested many times (until the text becomes undistinguishable)! -

-
-

- Like this! -

-
-

- How deep does this Panel hole go? -

-
-

- BWOON. -

-
-

- BWOON. -

-
-

- BWOON. -

-
- - - PANELCEPTION. - - -
-
-
-
-
-
-
-
-
-

- Chapters -

-
-

- Chapter -

-

- A chapter is a grouping of an heading and multiple panels containing tightly related information. -

-

- They split their children into a preset amount of columns: this one, for example, splits panels into two columns. -

-

- The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code. -

-
-
-

- Panel heights -

-

- In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left. -

-
-
-

- Element floats -

-

- A float is a utility class to align items in panels without having to write CSS. -

-

- For example, if a panel has some empty space, elements can be made to float to the bottom, which can be useful for example for buttons in sibling panels. -

-
-
-

- Auto-wrapping -

-

- Panels in a numbered chapter will automatically wrap if their contents won't fit horizontally. -

-

- Wrapped panels' heights ignore the height of panels in other rows. -

-

- To have a constant height, one has to be set manually. -

-
-
-

- Auto-sizing -

-

- Panels in a "zero" chapter will instead automatically resize to fit everything in a single row. -

-
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
- 8 -
-
- 9 -
-
- 10 -
-
-

- To set a constant width, one has to be set manually. -

-
-
-
-

- Modifiers -

-
-

- Fade -

-

- The fade modifier reduces the opacity of the elements it is applied to. -

-
-

- I'm a faded box! -

-
-

- I'm faded too! -

-
-

- But they can be faded more. -

-
-
-
-
-
-

- Mark -

-

- The mark modifier distinguishes the elements it is applied to from the surrounding ones by applying a strong color contrast. -

-
-

- Think of it like an highlighter, but for anything! -

-
-

- Which can be nested to negate its effect. -

-
-

- Up to 3 times and not any more. -

-
-
-
-
-
-

- To do -

-

- The todo modifier emphasises that the contents of the elements it is applied to are not correct or final. -

-
-

- Like this! -

-
-

- As with other modifiers, it is inherited. -

-
-

- And it does nothing if reapplied. -

-
-
-
-
-
-

- Color modifiers -

-

- The color modifiers change the colors of the elements they are applied to. -

-
-
-

- Red -

-

- * warns angrily! -

-
-
-

- Yellow -

-

- * warns. -

-
-
-

- Green -

-

- * is a success! -

-
-
-

- Cyan -

-

- * informs... -

-
-
-

- Blue -

-

- * annotates -

-
-
-

- Magenta -

-

- * asks a question? -

-
-
-
-
-
-

- Separators -

-
-

- Separator -

-

- A separator is a horizontal line that fills all the horizontal space available on a panel, forcing a line wrap. -

-
-
- Top Text -
-
-
-

- Light separator -

-

- A light separator is a less eye-catching separator, to be used if the regular separator distracts too much from the flow of the text. -

-
-
- Bottom Text -
-
-
-

- Heavy separator -

-

- A heavy separator is a very eye-catching separator, to be used if the regular separator isn't apparent enough. -

-
-
- Bottom Text 2: Electric Boogaloo -
-
-
-
-

- Lists -

-
-

- Ordered list -

-

- A ordered list displays a series of items whose order is relevant. -

-
    -
  1. First
    2. -
  2. Second
    3. -
  3. Third
    4. -
  4. Fourth
    5. -
  5. Fifth
    6. -
  6. Sixth
    7. -
  7. Seventh
    8. -
  8. Eight
    9. -
  9. Ninth
    10. -
  10. Tenth
    11. -
  11. Eleventh
    12. -
  12. Twelfth
    13. -
-
-
-

- Unordered list -

-

- An unordered list displays a series of items whose order is irrelevant. -

-
    -
  • First
    • -
  • Second
    • -
  • Third
    • -
  • Fourth
    • -
  • Fifth
    • -
  • Sixth
    • -
  • Seventh
    • -
  • Eight
    • -
  • Ninth
    • -
  • Tenth
    • -
  • Eleventh
    • -
  • Twelfth
    • -
-
-
-
-

- Glossaries -

-
-

- Definition list -

-

- A definition list displays a series of term-description pairs. -

-
-
- Term -
-
- Description -
-
- Other term -
-
- Other description -
-
-
-
-

- Collapsible details -

-

- A details element hides its contents, displaying only a summary until either the marker or the summary itself is activated. -

-
- Something -

- Something else -

-
-
- Something more -

- Something different -

-
-
-
-
-

- Text elements -

-
-

- Anchors -

-

- An anchor is an interactable element which can be clicked to go to a different page, or a different part of the same page, or to perform an action with a different application! -

-
-

- Do you want to go to example.org? -

-

- Or perhaps to the chapter about glossaries? -

-

- Or perhaps to - download Big Buck Bunny with a torrent client? -

-
-
-
-
-
-

- Idiomatic expressions -

-

- An idiomatic expression should be used when a domain-specific term is used. -

-
-

- This is an idiomatic expression. -

-
-
-
-

- Emphasis -

-

- An emphasis should be used when a certain word should be stressed more than the others in a text. -

-
-

- You're doing what?! -

-
-
-
-

- Bring attention -

-

- An attention-bringer element denotes parts of text as more important than the others. -

-
-

- I used attention-bringers basically everywhere in this page. -

-
-
-
-

- Strong importance -

-

- A strong importance element denotes parts of text that are even more important than the ones denoted by attention-bringers. -

-
-

- Pls notice me senpai!!1! -

-
-
-
-

- Unarticulated annotations -

-

- An unarticulated annotation denotes parts of text that were given an annotation without any comment. -

-
-

- Just look at the headers of level 3 of these panels! -

-
-
-
-

- Strike -

-

- A strike marks a part of text as incorrect. -

-
-

- I'm plotting to conquer the world completely innocent and not an evil villain! -

-
-
-
-

- Inserted and deleted text -

-

- When comparing changes to a text, parts of it can be marked as inserted or deleted. -

-
-

- Bluelib 5.0.0 -

-
    -
  • Added: more bugs
    • -
  • Removed: cool features
    • -
-
-
-
-

- Small comment -

-

- A small comment element denotes a part of a text as less important than the others. -

-

- It can be considered the opposite of attention-bringers, and similar to the parenthesis panel. -

-
-

- Bluelib is great! I'm joking, of course. -

-
-
-
-

- Preformatted text -

-

- A preformatted text element denotes text where lines and positioning are significant; this prevents them from being rearranged by the browser. -

-

- It should be used for poetry, code, ASCII art, kaomoji, etc. -

-
+ + + + Bluelib + + + + + + + + + + + + + + + + + + + + + + Bluelib + + + +
+

+ Bluelib +

+
+
+
+

+ Welcome to Bluelib! +

+
+

+ What is Bluelib? +

+

+ Bluelib is a modular CSS library for web pages which aims to provide great customization and + flexibility while trying to keep HTML as "basic" as possible. +

+

+ This page itself acts both as a documentation of the library and as a live preview of its capabilities. +

+

+ If you're on a browser which supports that, you can right click any element of this page and then click + Inspect Element to see how something is done. +

+
+

+ This page is also used for development, therefore it uses un-minified sources and imports some development scripts. +

+

+ Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser! +

+
+
+
+
+
+

+ Table of contents +

+
    +
  1. Welcome to Bluelib!
    2. +
  2. Rulesets, selectorsets, targets
    3. +
  3. Installation and usage
    4. +
  4. Panels
    5. +
  5. Chapters
    6. +
  6. Modifiers
    7. +
  7. Separators
    8. +
  8. Lists
    9. +
  9. Glossaries
    10. +
  10. Text elements
    11. +
  11. Tables
    12. +
  12. Images
    13. +
  13. Inputs
    14. +
  14. Forms
    15. +
+
+
+

+ Glossary +

+ +
+
+
+

+ Rulesets, selectorsets, targets +

+
+

+ Targets +

+

+ A Bluelib target is a CSS document where CSS rulesets of a certain type are grouped together. +

+

+ It is composed by two parts: the ruleset, determining the CSS rules to use, and the + selectorset, determining the elements to apply the CSS rules on. +

+
+

+ Targets always have a predictable name, which is: +

+
+

+ dist/RULESET.SELECTORSET.css +

+
+

+ Be sure to choose the ones matching your needs! +

+
+

+ By running dist/_build.sh, new targets are generated and compiled from Less to CSS. +

+

+ The cartesian product is applied between all rulesets in + src/rulesets and all selectorsets in src/selectorsets, compiling a new target for each pair. +

+
+
+

+ Available rulesets +

+
+
+ +
+
+ The base ruleset, providing the layout and basic high contrast theming. +
+
+ +
+
+ Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. +
+
+ +
+
+ Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background. +
+
+ +
+
+ Experimental. + Ruleset with bizzare or buggy but fun rules. +
+
Layouts
+
+
+
+ +
+
+ Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two. +
+
+
+
Colors
+
+
+
+ +
+
+ Steffo's signature color theme, based upon RYG⁵'s logo colors. +
+
+ +
+
+ Nemesis' own color theme, with a "coffee-like" look. +
+
+ +
+
+ A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise. +
+
+ +
+
+ A purple-ish theme for Star Shard Studio. +
+
+
+
Fonts
+
+
+
+
+ Font theme based upon Mozilla's Fira font. +
+
+
+
+
+
+

+ Available selectorsets +

+
+
+
+ Simple selectors for usage in plain HTML pages, with short and human-friendly class names. +
+
+
+ All selectors use class names, allowing the usage of the target with + CSS Modules. Useful for React or similar web app projects. +
+
+
+
+
+

+ Installation and usage +

+
+

+ Via UNPKG +

+

+ The easiest way to use Bluelib on your website is by using UNPKG. +

+

+ Simply link the stylesheets in the header of your project like this: +

+
+ <link + + rel="stylesheet" + href="https://unpkg.com/@steffo/bluelib + + @VERSION + + /dist/ + + RULESET.SELECTORSET.css" + type="text/css" + /> +
+

+ To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this: +

+
+ <link + + rel="stylesheet" + href="https://unpkg.com/@steffo/bluelib + + @VERSION + + /dist/ + + RULESET.SELECTORSET.min.css" + type="text/css" + /> +
+
+
+

+ Coming soon +

+

+ More installation methods coming soon! +

+
+
+
+

+ Panels +

+
+

+ Panel +

+

+ A Panel is a container styled with a slight background color and no borders. +

+
+ Hello world! I am a Panel! +
+
+
+

+ Box +

+

+ A Box is a container adding borders of all four sides to the base appearence of a Panel. +

+
+ This Box contains a hidden Snake. 🐍 +
+
+
+

+ Dialog +

+

+ A Dialog is a container adding a left border to the base appearence of a Panel. +

+
+ Snake? Snake??? SNAKEEEEEEE! +
+
+
+

+ Parenthesis +

+

+ A Parenthesis is a container styled as a Panel and with smaller text. +

+
+ I think we lost the Snake... +
+
+
+

+ Panel usage +

+

+ When using Bluelib, text should always be either an header or inside a Panel. +

+

+ Since Panels often denote "sections" of text, they should usually be <section> elements. +

+

+ When they are only used cosmetically, <div> elements should be used instead. +

+

+ When used to create forms, they may also be <form> elements. +

+
+
+

+ Box usage +

+

+ A Box creates a visible separation between the content inside it and the + content outside it, and should be used when this separation is desired, like when describing a topic (like here). +

+

+ To achieve the best visual style, Boxes should always be the outmost panels: you should never place a + Box inside a Panel or a Dialog, but you can place one inside another Box. +

+
+
+

+ Dialog usage +

+

+ A Dialog creates a visible indentation of the + content inside it, and should be used when this indentation is desired, like in quotes or examples. +

+

+ When containing a quote, they should use <blockquote> elements. +

+

+ Like Boxes, Dialogs should never be placed into containers with less borders than them, such as Panels. +

+
+
+

+ Parenthesis usage +

+

+ A Parenthesis + removes importance from its contents, and therefore makes for a great container for notes or additional information about a topic. +

+

+ Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them. +

+
+
+
+
+

+ Nesting +

+

+ As you have seen in the sections before, panels can be nested many times (until the text becomes undistinguishable)! +

+
+

+ Like this! +

+
+

+ How deep does this Panel hole go? +

+
+

+ BWOON. +

+
+

+ BWOON. +

+
+

+ BWOON. +

+
+ + + PANELCEPTION. + + +
+
+
+
+
+
+
+
+
+

+ Chapters +

+
+

+ Chapter +

+

+ A chapter is a grouping of an heading and multiple panels containing tightly related information. +

+

+ They split their children into a preset amount of columns: this one, for example, splits panels into two columns. +

+

+ The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code. +

+
+
+

+ Panel heights +

+

+ In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left. +

+
+
+

+ Element floats +

+

+ A float is a utility class to align items in panels without having to write CSS. +

+

+ For example, if a panel has some empty space, elements can be made to + float to the bottom, which can be useful for example for buttons in sibling panels. +

+
+
+

+ Auto-wrapping +

+

+ Panels in a numbered chapter will automatically wrap if their contents won't fit horizontally. +

+

+ Wrapped panels' heights ignore the height of panels in other rows. +

+

+ To have a constant height, one has to be set manually. +

+
+
+

+ Auto-sizing +

+

+ Panels in a "zero" chapter will instead automatically resize to fit everything in a single row. +

+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+

+ To set a constant width, one has to be set manually. +

+
+
+
+

+ Modifiers +

+
+

+ Fade +

+

+ The fade modifier reduces the opacity of the elements it is applied to. +

+
+

+ I'm a faded box! +

+
+

+ I'm faded too! +

+
+

+ But they can be faded more. +

+
+
+
+
+
+

+ Mark +

+

+ The mark modifier distinguishes the elements it is applied to from the surrounding ones by applying a + strong color contrast. +

+
+

+ Think of it like an highlighter, but for + anything + ! +

+
+

+ Which can be nested to + negate + its effect. +

+
+

+ Up to 3 times and + not any more + . +

+
+
+
+
+
+

+ To do +

+

+ The todo modifier emphasises that the contents of the elements it is applied to are not correct or final. +

+
+

+ Like this! +

+
+

+ As with other modifiers, it is inherited. +

+
+

+ And it does nothing if reapplied. +

+
+
+
+
+
+

+ Color modifiers +

+

+ The color modifiers change the colors of the elements they are applied to. +

+
+
+

+ Red +

+

+ * warns angrily! +

+
+
+

+ Yellow +

+

+ * warns. +

+
+
+

+ Green +

+

+ * is a success! +

+
+
+

+ Cyan +

+

+ * informs... +

+
+
+

+ Blue +

+

+ * annotates +

+
+
+

+ Magenta +

+

+ * asks a question? +

+
+
+
+
+
+

+ Separators +

+
+

+ Separator +

+

+ A separator is a + horizontal line that fills all the horizontal space available on a panel, forcing a line wrap. +

+
+
+ Top Text +
+
+
+

+ Light separator +

+

+ A light separator is a + less eye-catching separator, to be used if the regular separator distracts too much from the flow of the text. +

+
+
+ Bottom Text +
+
+
+

+ Heavy separator +

+

+ A heavy separator is a + very eye-catching separator, to be used if the regular separator isn't apparent enough. +

+
+
+ Bottom Text 2: Electric Boogaloo +
+
+
+
+

+ Lists +

+
+

+ Ordered list +

+

+ A ordered list displays a series of items whose order is relevant. +

+
    +
  1. First
    2. +
  2. Second
    3. +
  3. Third
    4. +
  4. Fourth
    5. +
  5. Fifth
    6. +
  6. Sixth
    7. +
  7. Seventh
    8. +
  8. Eight
    9. +
  9. Ninth
    10. +
  10. Tenth
    11. +
  11. Eleventh
    12. +
  12. Twelfth
    13. +
+
+
+

+ Unordered list +

+

+ An unordered list displays a series of items whose order is irrelevant. +

+
    +
  • First
    • +
  • Second
    • +
  • Third
    • +
  • Fourth
    • +
  • Fifth
    • +
  • Sixth
    • +
  • Seventh
    • +
  • Eight
    • +
  • Ninth
    • +
  • Tenth
    • +
  • Eleventh
    • +
  • Twelfth
    • +
+
+
+
+

+ Glossaries +

+
+

+ Definition list +

+

+ A definition list displays a series of term-description pairs. +

+
+
+ Term +
+
+ Description +
+
+ Other term +
+
+ Other description +
+
+
+
+

+ Collapsible details +

+

+ A details element hides its contents, displaying only a + summary until either the marker or the summary itself is activated. +

+
+ Something +

+ Something else +

+
+
+ Something more +

+ Something different +

+
+
+
+
+

+ Text elements +

+
+

+ Anchors +

+

+ An anchor is an interactable element which can be clicked to go to a different page, or a + different part of the same page, or to perform an action with a different application! +

+
+

+ Do you want to go to example.org? +

+

+ Or perhaps to the chapter about glossaries? +

+

+ Or perhaps to + download Big Buck Bunny with a torrent client? +

+
+
+
+
+
+

+ Idiomatic expressions +

+

+ An idiomatic expression should be used when a domain-specific term is used. +

+
+

+ This is an idiomatic expression. +

+
+
+
+

+ Emphasis +

+

+ An emphasis should be used when a certain word should be stressed more than the others in a text. +

+
+

+ You're doing what?! +

+
+
+
+

+ Bring attention +

+

+ An attention-bringer element denotes parts of text as more important than the others. +

+
+

+ I used attention-bringers basically everywhere in this page. +

+
+
+
+

+ Strong importance +

+

+ A strong importance element denotes parts of text that are + even more important than the ones denoted by attention-bringers. +

+
+

+ Pls notice me senpai!!1! +

+
+
+
+

+ Unarticulated annotations +

+

+ An unarticulated annotation denotes parts of text that were given an + annotation without any comment. +

+
+

+ Just look at the headers of level 3 of these panels! +

+
+
+
+

+ Strike +

+

+ A strike marks a part of text as incorrect. +

+
+

+ I'm plotting to conquer the world completely innocent and not an evil villain! +

+
+
+
+

+ Inserted and deleted text +

+

+ When comparing changes to a text, parts of it can be marked as inserted or + deleted. +

+
+

+ Bluelib 5.0.0 +

+
    +
  • Added: + more bugs +
    • +
  • Removed: + cool features +
    • +
+
+
+
+

+ Small comment +

+

+ A small comment element denotes a part of a text as less important than the others. +

+

+ It can be considered the opposite of attention-bringers, and similar to the parenthesis panel. +

+
+

+ Bluelib is great! I'm joking, of course. +

+
+
+
+

+ Preformatted text +

+

+ A preformatted text element denotes text where + lines and positioning are significant; this prevents them from being rearranged by the browser. +

+

+ It should be used for poetry, code, ASCII art, kaomoji, etc. +

+ 
   mm    mmmm    mmm  mmmmm  mmmmm
 ##   #"   " m"   "   #      #
 #  #  "#mmm  #        #      #
 #mm#      "# #        #      #
 #    # "mmm#"  "mmm" mm#mm  mm#mm
-
-
-
-

- Code -

-

- A code element denotes that its contents are some kind of code (probably belonging to a programming language). -

-

- If displayed as a block instead of inline, it should be used with a preformatted text element. -

-
-

- How to create a section.panel with Bluelib: -

- 
<div class="panel">
+
+
+
+

+ Code +

+

+ A code element denotes that its contents are some kind of + code (probably belonging to a programming language). +

+

+ If displayed as a block instead of inline, it should be used with a preformatted text element. +

+
+

+ How to create a section.panel with Bluelib: +

+ 
<div class="panel">
 <p>
 Contents
 </p>
 </div>
-
-
-
-

- Keyboard input and sample output -

-

- Input samples and output samples from a computer have elements which denote them, and are formatted appropriately. -

-

- A sample inside another creates emphasises the individual element, creating a combination. -

-
-

- If you press Ctrl+Alt+Del, something will happen! -

-

- If you're on Windows, a menu will appear, and one of the options will say Task Manager. -

-
-
-
-

- Variables -

-

- A variable denotes a placeholder for something in a formula or algorithm. -

-
-

- Sum: Whatever + Anything = Something -

-
-
-
-

- Quotes and citations -

-

- A quote element indicates an inline quote, and may be optionally include a citation element indicating the source of the quote. -

-
-

- Objection!
- —Phoenix Wright, Ace Attorney -

-
-
-
-

- Definitions -

-

- A definition element indicates the term that is being defined in the contained paragraph. -

-
-

- This definition example is getting a bit too meta for my tastes. -

-
-
-
-

- Abbreviations -

-

- An abbreviation element marks its contents as an acronym or abbreviation and allows the user to view the expanded abbreviation by hovering it with the mouse. -

-

- Note that no mobile browsers currently support this feature, so you'll have to manually provide an alternative for mobile users to see the full abbreviation. -

-
-

- Two companies against each other: BLU vs. RED! -

-
-
-
-

- Ruby -

-

- A ruby text element is text with small annotations above, commonly used in East Asian texts. -

-
-

- - Mo /ˈmɒ/ - de /dɪ/ - na /nə/ - -

-

- - 漢 (kan) - 字 (ji) - -

-

- - 明日 (ashita) - -

-
-
-
-
-

- Tables -

-
-

- Table -

-

- A table is an element whose children are aligned in a grid. -

- - - - - - - - - - - - - - - - - - - - - -
EmojiMeaning
🙂Slightly Smiling Face
🌑New Moon
🌚New Moon with Face
-
-
-

- Table caption -

-

- Tables can have captions attached to their top. -

- - - - - - - - - - - - - - - - - - - - - - -
- Apple emoji meanings -
EmojiMeaning
🍎Red Apple
🍏Green Apple
Hopefully a square with F8FF written inside it
-

- Tables can also have headings and captions attached to their bottom. -

- - - - - - - - - - - - - - -
- Pear emoji meanings -
🍐Pear
EmojiMeaning
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- Table panels -

-

- A table panel is a special table which is rendered as a panel. -

-

- This table in particular is rendered as a box panel, and is about what two brothers think of the following objects: -

-
MarioLuigi
TablesThey're cool and allow you to do cool stuffThey need chairs to be useful
FlexboxesThey're very usefulNot enough flexible for me
GridsI love themBleargh
Overall<30/10
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- Table dialogs -

-

- Panel tables can also be dialogs and parentheses. -

-

- This table in particular is a dialog panel, and is about example features for a robot: -

-
FeatureDescription
BaseAll the base features of your home robot!
ExtraEverything a robot should be able to do, plus an infinite bubblewrap dispenser!
SuperThe robot is now armed with a non-free printer, and is ready to conquer the world!
UltimateA time machine has been embedded into the robot, and it is free to use it at will.
- - - - - - - - - - - - - - - - - - - -
-

- Cell modifiers -

-

- Cells in tables have modifiers applied like all elements. -

-

- This table in particular is for a game of tic-tac-toe. -

-
OX
XXO
XO
-
-
-

- Images -

-
-

- Default -

-

- Images are automatically centered and resized to fit the panel they are in. -

- Neon Ice Cream -
-
-

- Limited -

-

- Images can be limited to prevent them from taking up too much screen space, like the previous one did. -

-
-

- Half -

-

- The following image has a limit of half the vertical viewport: -

- Neon ice cream -
-

- Quarter -

-

- The following image has a limit of a quarter of the vertical viewport: -

- Neon ice cream -
-
-
-

- Inputs -

-
-

- Input -

-

- An Input is an interactive element which allows the user to interact with the web page. -

-
-
-
-
-

- Field -

-

- A Field is an Input which allows the user to enter single-line free-form text. -

-
-

- -

-

- -

-

- -

-
-
-

- Special types of Fields -

-

- A Field may require a particular type of data, such as an email or a phone number. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Area -

-

- An Area is a resizable Input which allows the user to enter multi-line free-form text. -

-
-

- -

-
-
-
-

- Select -

-

- A Select is an Input which allow the user to select between one of multiple options. -

-
-

- -

-
-
-
-

- Multiselect -

-

- A Multiselect is an Input which allows the user to enable or disable multiple options. -

-

- Be aware that the average user will probably not know how to interact with the Multiselect: to select options not adjacent to each other on a desktop browser, it requires holding the Ctrl key. -

-
-

- -

-
-
-
-

- Radio -

-

- Radios are Inputs which, like a Select, allow the user to select between one of multiple options when grouped together. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Checkbox -

-

- Checkboxes are Inputs which, like a Multiselect, allows the user to enable or disable multiple options when grouped together. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Color -

-

- A color input is an Input which allows the user to select a RGB color. -

-

- Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. -

-
-

- -

-
-
-
-

- File -

-

- A file input is an Input which allows the user to upload a file from their computer. -

-

- Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. -

-
-

- -

-
-
-
-

- Range -

-

- A Range is an Input which allows the user to inaccurately select a value from a given range. -

-
-

- -

-
-
-
-

- Button -

-

- A Button is an Input which the user can click to trigger an action. -

-
-

- -

-

- - -

-
-
-
-
-

- Forms -

-
-

- Form -

-

- An form is a non-interactive element which positions Inputs in commonly used ways. -

-
-
-

- Flex form -

-

- A flex form is a block form aligning labels and inputs to a pseudo-grid. -

-
-

- Life University Enrolment Form -

-

- Please enter your personal details here: -

- - - -

- Now, please enter some information about yourself: -

-
- Interests -
- - - - - - -
- -
-
- Riches -
- - - -
- -
-

- Finally, some more flavour questions: -

- - - -
- Your bets - - - - -
-

- Finally, you can submit the form, and see whether you'll be accepted or not: -

- -
-
-
-
- - +
+
+
+

+ Keyboard input and sample output +

+

+ Input samples and + output samples from a computer have elements which denote them, and are formatted appropriately. +

+

+ A sample inside another creates emphasises the individual element, creating a combination. +

+
+

+ If you press Ctrl+Alt+Del, something will happen! +

+

+ If you're on Windows, a menu will appear, and one of the options will say Task Manager. +

+
+
+
+

+ Variables +

+

+ A variable denotes a placeholder for something in a formula or algorithm. +

+
+

+ Sum: Whatever + Anything = Something +

+
+
+
+

+ Quotes and citations +

+

+ A quote element indicates an inline quote, and may be optionally include a + citation element indicating the source of the quote. +

+
+

+ Objection!
+ —Phoenix Wright, Ace Attorney +

+
+
+
+

+ Definitions +

+

+ A definition element indicates the term that is being defined in the contained paragraph. +

+
+

+ This definition example is getting a bit too meta for my tastes. +

+
+
+
+

+ Abbreviations +

+

+ An abbreviation element marks its contents as an acronym or + abbreviation and allows the user to view the expanded abbreviation by hovering it with the mouse. +

+

+ Note that no mobile browsers currently support this feature, so you'll have to + manually provide an alternative for mobile users to see the full abbreviation. +

+
+

+ Two companies against each other: BLU vs. + RED! +

+
+
+
+

+ Ruby +

+

+ A ruby text element is text with small annotations above, commonly used in East Asian texts. +

+
+

+ + Mo + / + ˈmɒ + / + de + / + dɪ + / + na + / + nə + / + +

+

+ + 漢 + ( + kan + ) + 字 + ( + ji + ) + +

+

+ + 明日 + ( + ashita + ) + +

+
+
+
+
+

+ Tables +

+
+

+ Table +

+

+ A table is an element whose children are aligned in a grid. +

+ + + + + + + + + + + + + + + + + + + + + +
EmojiMeaning
🙂Slightly Smiling Face
🌑New Moon
🌚New Moon with Face
+
+
+

+ Table caption +

+

+ Tables can have captions attached to their top. +

+ + + + + + + + + + + + + + + + + + + + + + +
+ Apple emoji meanings +
EmojiMeaning
🍎Red Apple
🍏Green Apple
Hopefully a square with F8FF written inside it
+

+ Tables can also have headings and captions attached to their bottom. +

+ + + + + + + + + + + + + + +
+ Pear emoji meanings +
🍐Pear
EmojiMeaning
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Table panels +

+

+ A table panel is a special table which is rendered as a panel. +

+

+ This table in particular is rendered as a box panel, and is about what two brothers think of the following objects: +

+
MarioLuigi
TablesThey're cool and allow you to do cool stuffThey need chairs to be useful
FlexboxesThey're very usefulNot enough flexible for me
GridsI love themBleargh
Overall<30/10
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Table dialogs +

+

+ Panel tables can also be dialogs and parentheses. +

+

+ This table in particular is a dialog panel, and is about example features for a robot: +

+
FeatureDescription
BaseAll the base features of your home robot!
ExtraEverything a robot should be able to do, plus an infinite bubblewrap dispenser!
SuperThe robot is now armed with a non-free printer, and is ready to conquer the world!
UltimateA time machine has been embedded into the robot, and it is free to use it at will.
+ + + + + + + + + + + + + + + + + + + +
+

+ Cell modifiers +

+

+ Cells in tables have modifiers applied like all elements. +

+

+ This table in particular is for a game of tic-tac-toe. +

+
OX
XXO
XO
+
+
+

+ Images +

+
+

+ Default +

+

+ Images are automatically centered and resized to fit the panel they are in. +

+ Neon Ice Cream +
+
+

+ Limited +

+

+ Images can be limited to + prevent them from taking up too much screen space, like the previous one did. +

+
+

+ Half +

+

+ The following image has a limit of half the vertical viewport: +

+ Neon ice cream +
+

+ Quarter +

+

+ The following image has a limit of a quarter of the vertical viewport: +

+ Neon ice cream +
+
+
+

+ Inputs +

+
+

+ Input +

+

+ An Input is an interactive element which allows the user to interact with the web page. +

+
+
+
+
+

+ Field +

+

+ A Field is an Input which allows the user to enter single-line free-form text. +

+
+

+ +

+

+ +

+

+ +

+
+
+

+ Special types of Fields +

+

+ A Field may require a particular + type of data, such as an email or a phone number. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Area +

+

+ An Area is a resizable Input which allows the user to enter multi-line free-form text. +

+
+

+ +

+
+
+
+

+ Select +

+

+ A Select is an Input which allow the user to select between one of multiple options. +

+
+

+ +

+
+
+
+

+ Multiselect +

+

+ A Multiselect is an Input which allows the user to enable or disable multiple options. +

+

+ Be aware that the average user will probably not know how to interact with the + Multiselect: to select options not adjacent to each other on a desktop browser, it requires holding the Ctrl key. +

+
+

+ +

+
+
+
+

+ Radio +

+

+ Radios are Inputs which, like a Select, allow the user to select between + one of multiple options when grouped together. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Checkbox +

+

+ Checkboxes are Inputs which, like a Multiselect, allows the user to + enable or disable multiple options when grouped together. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Color +

+

+ A color input is an Input which allows the user to select a RGB color. +

+

+ Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. +

+
+

+ +

+
+
+
+

+ File +

+

+ A file input is an Input which allows the user to upload a file from their computer. +

+

+ Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. +

+
+

+ +

+
+
+
+

+ Range +

+

+ A Range is an Input which allows the user to inaccurately select a value from a given range. +

+
+

+ +

+
+
+
+

+ Button +

+

+ A Button is an Input which the user can click to trigger an action. +

+
+

+ +

+

+ + +

+
+
+
+
+

+ Forms +

+
+

+ Form +

+

+ An form is a non-interactive element which positions Inputs in commonly used ways. +

+
+
+

+ Flex form +

+

+ A flex form is a block form aligning labels and inputs to a pseudo-grid. +

+
+

+ Life University Enrolment Form +

+

+ Please enter your personal details here: +

+ + + +

+ Now, please enter some information about yourself: +

+
+ Interests +
+ + + + + + +
+ +
+
+ Riches +
+ + + +
+ +
+

+ Finally, some more flavour questions: +

+ + + +
+ Your bets + + + + +
+

+ Finally, you can submit the form, and see whether you'll be accepted or not: +

+ +
+
+
+
+ + diff --git a/examples/index.js b/examples/index.js index 4e471ae..babbd7a 100644 --- a/examples/index.js +++ b/examples/index.js @@ -4,10 +4,10 @@ * @returns {boolean} `true` if the rendering is complete, `false` otherwise. */ function isLessDone() { - const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]') - const cssSheets = document.querySelectorAll('style') + const lessSheets = document.querySelectorAll("link[rel=\"stylesheet/less\"]") + const cssSheets = document.querySelectorAll("style") - return lessSheets.length === cssSheets.length + return lessSheets.length === cssSheets.length } @@ -17,19 +17,19 @@ function isLessDone() { * @returns {Promise} Awaitable that waits until {@link isLessDone Less is done}. */ async function sleepUntilLessIsDone() { - while(!isLessDone()) { - await new Promise(resolve => setTimeout(resolve, 100)) - } + while(!isLessDone()) { + await new Promise(resolve => setTimeout(resolve, 100)) + } } const enabledByDefault = [ - "less:dist-base:root", - "less:dist-classic:root", - "less:dist-glass:root", - "less:dist-layouts-center:root", - "less:dist-colors-royalblue:root", - "less:dist-fonts-fira-ghpages:root", + "less:dist-base:root", + "less:dist-classic:root", + "less:dist-glass:root", + "less:dist-layouts-center:root", + "less:dist-colors-royalblue:root", + "less:dist-fonts-fira-ghpages:root", ] @@ -40,86 +40,98 @@ let background = undefined async function enableChanges() { - await sleepUntilLessIsDone() + await sleepUntilLessIsDone() - lessStyles = [...document.styleSheets].filter( - (s) => s.ownerNode.id.startsWith("less:dist") - ).map( - (s) => ({[s.ownerNode.id]: s}) - ).reduce( - (p, c) => ({...p, ...c}), - {} - ) - console.debug("Found Less stylesheets:", lessStyles) + lessStyles = [...document.styleSheets].filter( + (s) => s.ownerNode.id.startsWith("less:dist"), + ).map( + (s) => ( + { [s.ownerNode.id]: s } + ), + ).reduce( + (p, c) => ( + { ...p, ...c } + ), + {}, + ) + console.debug("Found Less stylesheets:", lessStyles) - lessColors = [...document.styleSheets].filter( - (s) => s.ownerNode.id.startsWith("less:dist-colors") - ).map( - (s) => ({[s.ownerNode.id]: s}) - ).reduce( - (p, c) => ({...p, ...c}), - {} - ) - console.debug("Found Less colors:", lessColors) + lessColors = [...document.styleSheets].filter( + (s) => s.ownerNode.id.startsWith("less:dist-colors"), + ).map( + (s) => ( + { [s.ownerNode.id]: s } + ), + ).reduce( + (p, c) => ( + { ...p, ...c } + ), + {}, + ) + console.debug("Found Less colors:", lessColors) - lessFonts = [...document.styleSheets].filter( - (s) => s.ownerNode.id.startsWith("less:dist-fonts") - ).map( - (s) => ({[s.ownerNode.id]: s}) - ).reduce( - (p, c) => ({...p, ...c}), - {} - ) - console.debug("Found Less fonts:", lessFonts) + lessFonts = [...document.styleSheets].filter( + (s) => s.ownerNode.id.startsWith("less:dist-fonts"), + ).map( + (s) => ( + { [s.ownerNode.id]: s } + ), + ).reduce( + (p, c) => ( + { ...p, ...c } + ), + {}, + ) + console.debug("Found Less fonts:", lessFonts) - background = document.querySelector(".layout-center-background") - console.debug("Found background:", background) + background = document.querySelector(".layout-center-background") + console.debug("Found background:", background) - for(const [k, v] of Object.entries(lessStyles)) { - v.disabled = !enabledByDefault.includes(k) - } + for(const [k, v] of Object.entries(lessStyles)) { + v.disabled = !enabledByDefault.includes(k) + } - for(const input of document.querySelectorAll(".ruleset-toggle")) { - input.disabled = false - input.parentElement.classList.remove("fade") - } + for(const input of document.querySelectorAll(".ruleset-toggle")) { + input.disabled = false + input.parentElement.classList.remove("fade") + } } function toggleStyle(name) { - if(lessStyles === undefined) { - console.error("Less stylesheets are not yet available.") - return - } + if(lessStyles === undefined) { + console.error("Less stylesheets are not yet available.") + return + } - const style = lessStyles[name] - if(style === undefined) { - console.error("No such Less stylesheet.") - return - } + const style = lessStyles[name] + if(style === undefined) { + console.error("No such Less stylesheet.") + return + } - style.disabled = !style.disabled + style.disabled = !style.disabled } function selectColor(name, bgsrc) { - if(lessColors === undefined) { - console.error("Less stylesheets are not yet available.") - return - } + if(lessColors === undefined) { + console.error("Less stylesheets are not yet available.") + return + } - const style = lessStyles[name] - if(style === undefined) { - console.error("No such Less stylesheet.") - return - } + const style = lessStyles[name] + if(style === undefined) { + console.error("No such Less stylesheet.") + return + } - for(const c of Object.values(lessColors)) { - c.disabled = true - } + for(const c of Object.values(lessColors)) { + c.disabled = true + } - style.disabled = false - background.src = bgsrc + style.disabled = false + background.src = bgsrc } diff --git a/index.html b/index.html index 6f709e5..ba2fa28 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - - - Redirecting... - - - Redirecting to the Bluelib examples... - - \ No newline at end of file + + + Redirecting... + + + Redirecting to the Bluelib examples... + + diff --git a/package.json b/package.json index 0be4ae1..e7e0127 100644 --- a/package.json +++ b/package.json @@ -1,62 +1,62 @@ { - "name": "@steffo/bluelib", - "version": "8.1.0", - "description": "A stylesheet that supports fast dynamic recoloring via CSS variables", - "scripts": { - "dev": "web-dev-server --watch --port 8080", - "build": "cd dist && ./_build.sh && cd .." - }, - "keywords": [ - "bluelib", - "css", - "less" - ], - "homepage": "https://gh.steffo.eu/bluelib/", - "bugs": { - "url": "https://github.com/Steffo99/bluelib/issues", - "email": "me@steffo.eu" - }, - "author": { - "name": "Stefano Pigozzi", - "email": "me@steffo.eu", - "url": "https://www.steffo.eu" - }, - "contributors": [ - { - "name": "Stefano Pigozzi", - "email": "me@steffo.eu", - "url": "https://www.steffo.eu" - }, - { - "name": "Lorenzo Balugani", - "email": "lorenzo.balugani@fermitech.info", - "url": "https://www.fermitech.info" - }, - { - "name": "Francesca Peres", - "email": "Viktya@users.noreply.github.com" - } - ], - "funding": [ - { - "type": "individual", - "url": "https://ko-fi.com/steffo" - } - ], - "files": [ - "dist/**/*.less", - "dist/**/*.css", - "dist/**/*.css.map" - ], - "repository": { - "type": "git", - "url": "https://github.com/Steffo99/bluelib.git" - }, - "license": "AGPL-3.0-or-later", - "private": false, - "devDependencies": { - "@web/dev-server": "^0.1.34", - "less": "^4.1.3", - "less-plugin-clean-css": "^1.5.1" - } + "name": "@steffo/bluelib", + "version": "8.1.0", + "description": "A stylesheet that supports fast dynamic recoloring via CSS variables", + "scripts": { + "dev": "web-dev-server --watch --port 8080", + "build": "cd dist && ./_build.sh && cd .." + }, + "keywords": [ + "bluelib", + "css", + "less" + ], + "homepage": "https://gh.steffo.eu/bluelib/", + "bugs": { + "url": "https://github.com/Steffo99/bluelib/issues", + "email": "me@steffo.eu" + }, + "author": { + "name": "Stefano Pigozzi", + "email": "me@steffo.eu", + "url": "https://www.steffo.eu" + }, + "contributors": [ + { + "name": "Stefano Pigozzi", + "email": "me@steffo.eu", + "url": "https://www.steffo.eu" + }, + { + "name": "Lorenzo Balugani", + "email": "lorenzo.balugani@fermitech.info", + "url": "https://www.fermitech.info" + }, + { + "name": "Francesca Peres", + "email": "Viktya@users.noreply.github.com" + } + ], + "funding": [ + { + "type": "individual", + "url": "https://ko-fi.com/steffo" + } + ], + "files": [ + "dist/**/*.less", + "dist/**/*.css", + "dist/**/*.css.map" + ], + "repository": { + "type": "git", + "url": "https://github.com/Steffo99/bluelib.git" + }, + "license": "AGPL-3.0-or-later", + "private": false, + "devDependencies": { + "@web/dev-server": "^0.1.34", + "less": "^4.1.3", + "less-plugin-clean-css": "^1.5.1" + } } diff --git a/src/mixins/fonts.less b/src/mixins/fonts.less index 7ed7d84..b6e87c2 100644 --- a/src/mixins/fonts.less +++ b/src/mixins/fonts.less @@ -7,12 +7,12 @@ /// /// See `.use-font-group`. .create-font-group(@name; @style; @variant; @weight; @stretch; @size; @height; @family) { - --bfont-@{name}-style: @style; - --bfont-@{name}-variant: @variant; - --bfont-@{name}-weight: @weight; - --bfont-@{name}-stretch: @stretch; - --bfont-@{name}-height: @height; - --bfont-@{name}-family: @family; + --bfont-@{name}-style: @style; + --bfont-@{name}-variant: @variant; + --bfont-@{name}-weight: @weight; + --bfont-@{name}-stretch: @stretch; + --bfont-@{name}-height: @height; + --bfont-@{name}-family: @family; } @@ -20,10 +20,10 @@ /// /// See `.create-font-group`. .use-font-group(@name) { - font-style: var(~"--bfont-@{name}-style"); - font-variant: var(~"--bfont-@{name}-variant"); - font-weight: var(~"--bfont-@{name}-weight"); - font-stretch: var(~"--bfont-@{name}-stretch"); - line-height: var(~"--bfont-@{name}-height"); - font-family: var(~"--bfont-@{name}-family"); + font-style: var(~"--bfont-@{name}-style"); + font-variant: var(~"--bfont-@{name}-variant"); + font-weight: var(~"--bfont-@{name}-weight"); + font-stretch: var(~"--bfont-@{name}-stretch"); + line-height: var(~"--bfont-@{name}-height"); + font-family: var(~"--bfont-@{name}-family"); } diff --git a/src/mixins/hsl.less b/src/mixins/hsl.less index 8bf5824..5d3f9a6 100644 --- a/src/mixins/hsl.less +++ b/src/mixins/hsl.less @@ -7,17 +7,17 @@ /// Set the CSS variables of a certain color group to the given values. .create-hsl-group(@name; @hue; @saturation; @lightness) { - --bhsl-@{name}-hue: @hue; - --bhsl-@{name}-saturation: @saturation; - --bhsl-@{name}-lightness: @lightness; + --bhsl-@{name}-hue: @hue; + --bhsl-@{name}-saturation: @saturation; + --bhsl-@{name}-lightness: @lightness; } /// Set the CSS variables of a certain color group to the ones of another. .map-hsl-group(@to; @from) { - --bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue"); - --bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation"); - --bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness"); + --bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue"); + --bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation"); + --bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness"); } @@ -27,25 +27,17 @@ /// /// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on. .hsl-group(@name) { - @c: hsl( - var(~"--bhsl-@{name}-hue") - var(~"--bhsl-@{name}-saturation") - var(~"--bhsl-@{name}-lightness") - ); + @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") var(~"--bhsl-@{name}-lightness")); } + .hsl-group(@name; @alpha) { - @c: hsl( - var(~"--bhsl-@{name}-hue") - var(~"--bhsl-@{name}-saturation") - var(~"--bhsl-@{name}-lightness") - / @alpha - ); + @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") + var(~"--bhsl-@{name}-lightness") + / @alpha); } + .hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) { - @c: hsl( - calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") - calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}") - calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}") - / @alpha - ); + @c: hsl(calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}") + calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}") + / @alpha); } diff --git a/src/rulesets/base.less b/src/rulesets/base.less index 3faacfb..90613b7 100644 --- a/src/rulesets/base.less +++ b/src/rulesets/base.less @@ -5,900 +5,933 @@ @{bluelib} { - /// ===== Body ===== - /// The body element has some rulesets. - - // - - & { - // Set the current color - .map-hsl-group(current, foreground); - - // Set the background defined in the palette - background-color: .hsl-group(background)[@c]; - - // Make the element fill all available space - width: 100%; - height: 100%; - - // Set the default font family - .use-font-group(text) - } - - // - - /// ===== All ===== - /// By default, browsers style elements with some weird rulesets. - /// This is an attempt to correct them, and to implement some Bluelib magic. + /// ===== Body ===== + /// The body element has some rulesets. - // - - &, @{all} { - // Globally set the box-sizing to border-box, as content-box is completely insane - &, &::before, &::after { - box-sizing: border-box; - } + // - // Remove all default margins and paddings - margin: 0; - padding: 0; + & { + // Set the current color + .map-hsl-group(current, foreground); - // Bluelib magic! - // This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity. - // Thanks, CSS variables! - color: .hsl-group(current)[@c]; - border-color: .hsl-group(current)[@c]; - - // Set the default border properties for no unexpected behaviour from browser styles - border-width: 0; - border-style: solid; - - // Get the scrollbar color from the theme - scrollbar-color: .hsl-group(current)[@c] .hsl-group(background)[@c]; - - // TODO: I HATE HOW BROWSERS HANDLE THIS - &:focus-visible { - outline-width: 4px; - outline-style: solid; - outline-color: .hsl-group(current; 0.3)[@c]; - } - } - - // - - /// ===== Page ===== - /// These rulesets apply to the four page areas: main, aside, header and footer - - // - - @{page-header}, @{page-footer} { - text-align: center; - } - - @{page-footer} { - margin: 1rem 0; - font-size: x-small; - } - - // - - /// ===== Floats ===== - /// Floats allow for elements to be automatically positioned in a different position than normal. - - // - - @{float-top} { - margin-bottom: auto; - } - @{float-right} { - margin-left: auto; - } - @{float-bottom} { - margin-top: auto; - } - @{float-left} { - margin-right: auto; - } - @{float-hcenter} { - margin-left: auto; - margin-right: auto; - } - @{float-vcenter} { - margin-top: auto; - margin-bottom: auto; - } - - // - - /// ===== Headers ===== - /// Headers are the titles of the page. - - // - - @{header-1} { - // Make h1 larger than h2 - // Why is it not so by default?! - font-size: 2.5em; - } - - @{header-2} { - // Make h2 a bit larger as well - font-size: 1.75em; - } - - @{header} { - text-align: center; - - .map-hsl-group(current; primary); - - .use-font-group(header); - } - - // - - /// ===== Panels ===== - /// Panels are the main sectioning elements available in Bluelib. - /// Many instances of them should be present on the page! - /// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page. - - // - - // The base panel class. - @{panel} { - // And a padding to separate them from their contents - padding-top: 8px; - padding-right: 8px; - padding-left: 8px; - padding-bottom: 8px; - // Remove the border, just to be sure - border-width: 0; - border-style: solid; - - // Panels should try to fill the most space possible - width: 100%; - - // Have panels be column-flex objects to facilitate alignments - display: flex; - flex-direction: column; - gap: 8px; - - // Give the first panel in a stack a fixed background color, so it may be seen against a background - background-color: .hsl-group(background)[@c]; - - // Make borders togglable - &@{border-top}, &@{panel-box} { - border-top-width: 2px; - padding-top: 6px; - } - &@{border-right}, &@{panel-box} { - border-right-width: 2px; - padding-right: 6px; - } - &@{border-left}, &@{panel-box}, &@{panel-dialog} { - border-left-width: 2px; - padding-left: 6px; - } - &@{border-bottom}, &@{panel-box} { - border-bottom-width: 2px; - padding-bottom: 6px; - } - - // For compatibility, make panel-parenthesis available - &@{panel-parenthesis} { - font-size: smaller; - } - } - - // - - - /// ===== Chapters ===== - /// A chapter is a decorative element separating its children in a certain number of columns. - - // - - // Chapter zero means that the number of panels is not set and they should not be wrapped - @{chapter-0} { - flex-wrap: nowrap; - - > @{all} { - // Elements inside may be forced to shrink - flex-shrink: 1; - } - } - - // Set the basis of elements of the various chapter sizes - @{chapter-1} { - > @{all} { - flex-basis: calc(100% / 2); - } - } - @{chapter-2} { - > @{all} { - flex-basis: calc(100% / 3); - } - } - @{chapter-3} { - > @{all} { - flex-basis: calc(100% / 4); - } - } - @{chapter-4} { - > @{all} { - flex-basis: calc(100% / 5); - } - } - @{chapter-5} { - > @{all} { - flex-basis: calc(100% / 6); - } - } - @{chapter-6} { - > @{all} { - flex-basis: calc(100% / 7); - } - } - @{chapter-7} { - > @{all} { - flex-basis: calc(100% / 8); - } - } - @{chapter-8} { - > @{all} { - flex-basis: calc(100% / 9); - } - } - @{chapter-9} { - > @{all} { - flex-basis: calc(100% / 10); - } - } - - @{chapter} { - // Be a row flexbox to separate elements in columns - display: flex; - flex-wrap: wrap; - flex-direction: row; - gap: 8px; - justify-content: center; - align-items: stretch; - - // Add the gap as a vertical margin, so that multiple chapters can be placed next to each other - margin: 8px 0; - - > @{all} { - // Allow all children to grow - flex-grow: 1; - // But not to shrink - flex-shrink: 0; - } - - > @{header} { - // Headings should fill up all horizontal space available and force a wrap - flex-basis: 100%; - - margin-top: 1.2em; - } - } - - // - - /// ===== Separators ===== - /// Separators are horizontal lines separating elements. - - // - - @{separator} { - border-width: 1px; - border-style: dashed; - } - - @{separator-light} { - border-style: dotted; - } - - @{separator-heavy} { - border-style: solid; - } - - // - - /// ===== Images ===== - /// Images are changed to block elements and automatically resized to fit their container. - - // - - @{image} { - // Change images to block - display: block; - - // Limit their width - max-width: 100%; - // Resize the contained image to fully fit the element - object-fit: contain; - } - - @{image-limit-half} { - // Limit the image size to half of the vertical viewport - max-height: max(28.2vw, 50vh); - } - - @{image-limit-quarter} { - // Limit the image size to a quarter of the vertical viewport - max-height: max(14.1vw, 25vh); - } - - // - - /// ===== Tables ===== - /// Tables are elements whose children are aligned in a grid. - - // - - @{table} { - // Prevent ugly stacking borders - border-collapse: collapse; - - @{table-head}, @{table-data} { - // Leave a little breathing room between table elements, even if not as much as with a table panel - padding: 3px 7px; - border-width: 1px; - } - - @{table-caption} { - // Make captions have the same border as the cells - border-width: 1px; - - // Assign captions to their own font group - .use-font-group(caption); - - &@{table-caption-top} { - // Place captions on the correct side of the table - caption-side: top; - // Remove the bottom border as it cannot collapse - border-bottom-width: 0; - } - - &@{table-caption-bottom} { - // Place captions on the correct side of the table - caption-side: bottom; - // Remove the top border as it cannot collapse - border-top-width: 0; - } - } - - /// ----- Panels ----- - /// Tables can be integrated with panels! - - &@{panel} { - // Override the flex display of panels - display: table; - - @{table-head}, @{table-data} { - // Have more space between cells - padding: 8px; - } - - @{table-caption} { - // Behave as a regular panel and have text where it usually is - text-align: inherit; + // Set the background defined in the palette + background-color: .hsl-group(background)[@c]; - // Add a background color to top-level table panel captions as if they were panels themselves - background-color: .hsl-group(background)[@c]; + // Make the element fill all available space + width: 100%; + height: 100%; - // Use the same padding as cells - padding: 8px; - - // Since captions can't be made flex, go back to the old style of defining margins - @{all} { - margin-top: 8px; - margin-bottom: 8px; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - } - } - - &@{panel-box} { - @{table-row} { - border-width: 1px; - } + // Set the default font family + .use-font-group(text) + } - @{table-head}, @{table-data} { - border-width: 1px; - padding: 7px; - } + // - @{table-caption} { - border-width: 2px; - padding: 6px; + /// ===== All ===== + /// By default, browsers style elements with some weird rulesets. + /// This is an attempt to correct them, and to implement some Bluelib magic. - &@{table-caption-top} { - // Remove the bottom border again because specificity - border-bottom-width: 0; - } + // - &@{table-caption-bottom} { - // Remove the top border again because specificity - border-top-width: 0; - } - } - } + &, @{all} { + // Globally set the box-sizing to border-box, as content-box is completely insane + &, &::before, &::after { + box-sizing: border-box; + } - &@{panel-dialog} { - @{table-header} > @{table-row} { - border-bottom-width: 1px; - } - - @{table-body} > @{table-row} { - border-width: 0; - } - - @{table-footer} > @{table-row} { - border-top-width: 1px; - } - - @{table-head}, @{table-data} { - border-width: 0 0 0 1px; - padding: 8px 8px 8px 7px; - } - - @{table-caption} { - border-width: 0 0 0 2px; - padding: 8px 8px 8px 6px; - } - } - } - - // - - /// ===== Lists ===== - /// Lists are marked series of children elements - - // - - @{panel} { - > @{list-unordered}, > @{list-ordered} { - margin-left: 6ex; - } - } - - // - - /// ===== Glossaries ===== - /// Glossaries are key-value pairs of items - - // - - @{glossary-term} { - margin-top: 0.5em; - padding: 0.2em 0; - - .map-hsl-group(current; primary); - - .use-font-group(term); - } - - @{glossary-description} { - margin-left: 4.5ex; - margin-bottom: 0.5em; - } - - @{glossary-details} { - margin-left: 4.5ex; - } - - @{glossary-summary} { - cursor: pointer; - - margin-left: -4ex; - padding: 0.2em 0; - - .use-font-group(summary); + // Remove all default margins and paddings + margin: 0; + padding: 0; - // Prevent the user from accidentaly selecting the summary - user-select: none; - } + // Bluelib magic! + // This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity. + // Thanks, CSS variables! + color: .hsl-group(current)[@c]; + border-color: .hsl-group(current)[@c]; - // + // Set the default border properties for no unexpected behaviour from browser styles + border-width: 0; + border-style: solid; - /// ===== Modifiers ===== + // Get the scrollbar color from the theme + scrollbar-color: .hsl-group(current)[@c] .hsl-group(background)[@c]; - // + // TODO: I HATE HOW BROWSERS HANDLE THIS + &:focus-visible { + outline-width: 4px; + outline-style: solid; + outline-color: .hsl-group(current; 0.3)[@c]; + } + } - @{modifier-fade} { - opacity: 0.3; - } + // - @{modifier-mark} { - // Assign marks to their own font group - .use-font-group(mark); + /// ===== Page ===== + /// These rulesets apply to the four page areas: main, aside, header and footer - // Use the set color as background for marking - background-color: .hsl-group(mark-background)[@c]; - .map-hsl-group(current; mark-foreground); + // - // If applied twice, go back to "normality" - @{modifier-mark} { - background-color: .hsl-group(background)[@c]; - .map-hsl-group(current; foreground); + @{page-header}, @{page-footer} { + text-align: center; + } - // If applied thrice, mark again and not anymore - @{modifier-mark} { - background-color: .hsl-group(mark-background)[@c]; - .map-hsl-group(current; mark-foreground); - } - } - } - - @{modifier-todo} { - .map-hsl-group(current; todo-foreground); - - // Ensure it overrides properly the background color of panels - &, @{panel} { - border-style: dashed; - background-color: .hsl-group(todo-background)[@c]; - } - } - - @{property-disabled} { - border-style: dashed; - cursor: not-allowed; - } - - @{modifier-red} { - .map-hsl-group(current; red); - } - @{modifier-yellow} { - .map-hsl-group(current; yellow); - } - @{modifier-green} { - .map-hsl-group(current; green); - } - @{modifier-cyan} { - .map-hsl-group(current; cyan); - } - @{modifier-blue} { - .map-hsl-group(current; blue); - } - @{modifier-magenta} { - .map-hsl-group(current; magenta); - } - - // - - /// ===== Inputs ===== - - // - - @{input} { - // Disable the browser font override - font: inherit; - - // Make the element feel clickable - cursor: pointer; - - // Uniform the various properties of the elements - background-color: transparent; - - // Add some padding to avoid visual overload - padding: 0.125em 0.75ex; - - // Align all inputs to the middle - vertical-align: middle; - - // Remove default input minimum width - min-width: 0; - - // By default, no borders should be present - border-width: 0; - - border-color: .hsl-group(current; 0.4)[@c]; - - &::placeholder { - opacity: 1; - color: .hsl-group(current; 0.4)[@c]; - } - - &:hover:not(@{property-disabled}) { - border-color: .hsl-group(current; 0.7)[@c]; - - &::placeholder { - color: .hsl-group(current; 0.7)[@c]; - } - } - - &:active:not(@{property-disabled}), &:focus:not(@{property-disabled}) { - border-color: .hsl-group(current)[@c]; - } - } - - // Prevent the wild resizing of areas - @{input-area} { - resize: vertical; - } - - @{input-field}, @{input-select} { - // Fields and selects should have a bottom border - border-bottom-width: 2px; - } - @{input-area}, @{input-multiselect} { - // Areas and multiselects should have a left border - border-left-width: 2px; - } - - // Mark interactivity by changing the mouse cursor - @{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) { - cursor: text; - } - @{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) { - cursor: vertical-text; - } - @{input-range}:not(@{property-disabled}) { - cursor: ew-resize; - } - @{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) { - cursor: pointer; - } - - // Configure option display - @{input-select}, @{input-multiselect} { - & optgroup { - // Clearly display the grouping of options - padding-bottom: 0.25em; - - // Use the header font - .use-font-group(header); - - & option { - // Indent and pad - padding: 0.125em 0 0.125em 2ex; - } - } - - & option { - // Use the regular font - .use-font-group(text) - } - } - - // Override the default browser appearence for radios and checkboxes - @{input-radio}, @{input-checkbox} { - appearance: none; - - // Set a fixed size - width: 1em; - height: 1em; - - // Remove the padding - padding: 2px; - - // Override the default border width - border-width: 2px; - - // Prepare the element to display something inside - display: inline-flex; - justify-content: center; - align-items: center; - - &::before { - // Force the creation of a pseudo-element inside - display: block; - content: ""; - - width: 100%; - height: 100%; - } - - // If the element is checked, display it - &:checked::before { - background-color: .hsl-group(current)[@c]; - } - } - @{input-radio} { - // Radios should be round - border-radius: 100%; - - &::before { - border-radius: 100%; - } - } - - @{input-range} { - padding: 0; - - // appearance: none; - // - // &::-moz-range-thumb { - // width: 0; - // border-radius: 0; - // border-style: outset; - // - // border-color: .hsl-group(current)[@c]; - // border-width: 4px; - // - // background-color: .hsl-group(primary)[@c]; - // } - // - // &::-moz-range-track { - // height: 0.125em; - // background-color: .hsl-group(current)[@c]; - // } - // - // &::-moz-range-progress { - // height: 0.5em; - // background-color: .hsl-group(current)[@c]; - // } - } - - @{input-button} { - border-width: 2px; - - // Borders should reflect the interactible feeling of the element - border-style: outset; - - &:active { - border-style: inset; - } - } - - // Unmanaged inputs - @{input-file}, @{input-color} { - padding: 0; - } - - // Webkit hacks - @media screen and (-webkit-min-device-pixel-ratio:0) { - // Make the icons that webkit randomly add to fields AT LEAST use the correct color - @{input-field} { - &::-webkit-calendar-picker-indicator { - // smh why doesn't it support fill - filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)) - } - } - - // Draw a background color on the option dropdown menu - @{input-select} optgroup, @{input-select} option { - background-color: .hsl-group(background)[@c]; - - &::before { - // Remove the tabs that Chrome adds before the options - content: ""; - } - } - } - - // - - /// ===== Forms ===== - - // - - @{form-flex} { - display: flex; - flex-direction: column; - - justify-content: stretch; - - > @{form-flex-content} { - margin: 0.5em 0; - } - - > @{form-flex-choice} { - display: flex; - gap: 1ex; - min-height: 1.675em; // Not sure why this specific number, but it looks good... - - > @{all}:first-child, > @{all}:last-child { - margin: auto 0; - flex-basis: 15%; - flex-grow: 0; - flex-shrink: 0; - - .use-font-group(label); - .map-hsl-group(current; primary); - } - - > @{all} { - flex-grow: 1; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - align-items: stretch; - gap: 1ex; - } - - > @{all}:first-child { - text-align: right; - display: block; - } - - > @{all}:last-child { - text-align: left; - display: block; - } - } - } - - // - - /// ===== Text ===== - - // - - @{text-anchor} { - .map-hsl-group(current; link); - } - - @{text-idiomatic} { - .use-font-group(idiomatic); - } - @{text-emphasis} { - .use-font-group(emphasis); - } - - @{text-attention} { - .use-font-group(attention); - } - @{text-strong} { - .use-font-group(strong); - } - - @{text-inserted} { - .map-hsl-group(current; inserted); - } - @{text-deleted} { - .map-hsl-group(current; deleted); - } - - @{text-code}, @{text-preformatted}, @{text-input}, @{text-output} { - .use-font-group(code); - } - @{text-preformatted} { - overflow-x: scroll; - } - @{text-input}, @{text-output} { - padding: 0 0.25ex; - } - @{text-input} { - background-color: .hsl-group(sample-output)[@c]; - .map-hsl-group(current; sample-input); - - @{text-input} { - .use-font-group(boldcode); - } - } - @{text-output} { - background-color: .hsl-group(sample-input)[@c]; - .map-hsl-group(current; sample-output); - - @{text-output} { - .use-font-group(boldcode); - } - } - - @{text-variable} { - .use-font-group(variable); - } - - @{text-citation} { - .use-font-group(citation); - } - - @{text-definition} { - .use-font-group(term); - .map-hsl-group(current; primary); - } - - @{text-abbreviation} { - cursor: help; - } - - // -} \ No newline at end of file + @{page-footer} { + margin: 1rem 0; + font-size: x-small; + } + + // + + /// ===== Floats ===== + /// Floats allow for elements to be automatically positioned in a different position than normal. + + // + + @{float-top} { + margin-bottom: auto; + } + + @{float-right} { + margin-left: auto; + } + + @{float-bottom} { + margin-top: auto; + } + + @{float-left} { + margin-right: auto; + } + + @{float-hcenter} { + margin-left: auto; + margin-right: auto; + } + + @{float-vcenter} { + margin-top: auto; + margin-bottom: auto; + } + + // + + /// ===== Headers ===== + /// Headers are the titles of the page. + + // + + @{header-1} { + // Make h1 larger than h2 + // Why is it not so by default?! + font-size: 2.5em; + } + + @{header-2} { + // Make h2 a bit larger as well + font-size: 1.75em; + } + + @{header} { + text-align: center; + + .map-hsl-group(current; primary); + + .use-font-group(header); + } + + // + + /// ===== Panels ===== + /// Panels are the main sectioning elements available in Bluelib. + /// Many instances of them should be present on the page! + /// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page. + + // + + // The base panel class. + @{panel} { + // And a padding to separate them from their contents + padding-top: 8px; + padding-right: 8px; + padding-left: 8px; + padding-bottom: 8px; + // Remove the border, just to be sure + border-width: 0; + border-style: solid; + + // Panels should try to fill the most space possible + width: 100%; + + // Have panels be column-flex objects to facilitate alignments + display: flex; + flex-direction: column; + gap: 8px; + + // Give the first panel in a stack a fixed background color, so it may be seen against a background + background-color: .hsl-group(background)[@c]; + + // Make borders togglable + &@{border-top}, &@{panel-box} { + border-top-width: 2px; + padding-top: 6px; + } + + &@{border-right}, &@{panel-box} { + border-right-width: 2px; + padding-right: 6px; + } + + &@{border-left}, &@{panel-box}, &@{panel-dialog} { + border-left-width: 2px; + padding-left: 6px; + } + + &@{border-bottom}, &@{panel-box} { + border-bottom-width: 2px; + padding-bottom: 6px; + } + + // For compatibility, make panel-parenthesis available + &@{panel-parenthesis} { + font-size: smaller; + } + } + + // + + + /// ===== Chapters ===== + /// A chapter is a decorative element separating its children in a certain number of columns. + + // + + // Chapter zero means that the number of panels is not set and they should not be wrapped + @{chapter-0} { + flex-wrap: nowrap; + + > @{all} { + // Elements inside may be forced to shrink + flex-shrink: 1; + } + } + + // Set the basis of elements of the various chapter sizes + @{chapter-1} { + > @{all} { + flex-basis: calc(100% / 2); + } + } + + @{chapter-2} { + > @{all} { + flex-basis: calc(100% / 3); + } + } + + @{chapter-3} { + > @{all} { + flex-basis: calc(100% / 4); + } + } + + @{chapter-4} { + > @{all} { + flex-basis: calc(100% / 5); + } + } + + @{chapter-5} { + > @{all} { + flex-basis: calc(100% / 6); + } + } + + @{chapter-6} { + > @{all} { + flex-basis: calc(100% / 7); + } + } + + @{chapter-7} { + > @{all} { + flex-basis: calc(100% / 8); + } + } + + @{chapter-8} { + > @{all} { + flex-basis: calc(100% / 9); + } + } + + @{chapter-9} { + > @{all} { + flex-basis: calc(100% / 10); + } + } + + @{chapter} { + // Be a row flexbox to separate elements in columns + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 8px; + justify-content: center; + align-items: stretch; + + // Add the gap as a vertical margin, so that multiple chapters can be placed next to each other + margin: 8px 0; + + > @{all} { + // Allow all children to grow + flex-grow: 1; + // But not to shrink + flex-shrink: 0; + } + + > @{header} { + // Headings should fill up all horizontal space available and force a wrap + flex-basis: 100%; + + margin-top: 1.2em; + } + } + + // + + /// ===== Separators ===== + /// Separators are horizontal lines separating elements. + + // + + @{separator} { + border-width: 1px; + border-style: dashed; + } + + @{separator-light} { + border-style: dotted; + } + + @{separator-heavy} { + border-style: solid; + } + + // + + /// ===== Images ===== + /// Images are changed to block elements and automatically resized to fit their container. + + // + + @{image} { + // Change images to block + display: block; + + // Limit their width + max-width: 100%; + // Resize the contained image to fully fit the element + object-fit: contain; + } + + @{image-limit-half} { + // Limit the image size to half of the vertical viewport + max-height: max(28.2vw, 50vh); + } + + @{image-limit-quarter} { + // Limit the image size to a quarter of the vertical viewport + max-height: max(14.1vw, 25vh); + } + + // + + /// ===== Tables ===== + /// Tables are elements whose children are aligned in a grid. + + // + + @{table} { + // Prevent ugly stacking borders + border-collapse: collapse; + + @{table-head}, @{table-data} { + // Leave a little breathing room between table elements, even if not as much as with a table panel + padding: 3px 7px; + border-width: 1px; + } + + @{table-caption} { + // Make captions have the same border as the cells + border-width: 1px; + + // Assign captions to their own font group + .use-font-group(caption); + + &@{table-caption-top} { + // Place captions on the correct side of the table + caption-side: top; + // Remove the bottom border as it cannot collapse + border-bottom-width: 0; + } + + &@{table-caption-bottom} { + // Place captions on the correct side of the table + caption-side: bottom; + // Remove the top border as it cannot collapse + border-top-width: 0; + } + } + + /// ----- Panels ----- + /// Tables can be integrated with panels! + + &@{panel} { + // Override the flex display of panels + display: table; + + @{table-head}, @{table-data} { + // Have more space between cells + padding: 8px; + } + + @{table-caption} { + // Behave as a regular panel and have text where it usually is + text-align: inherit; + + // Add a background color to top-level table panel captions as if they were panels themselves + background-color: .hsl-group(background)[@c]; + + // Use the same padding as cells + padding: 8px; + + // Since captions can't be made flex, go back to the old style of defining margins + @{all} { + margin-top: 8px; + margin-bottom: 8px; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + } + + &@{panel-box} { + @{table-row} { + border-width: 1px; + } + + @{table-head}, @{table-data} { + border-width: 1px; + padding: 7px; + } + + @{table-caption} { + border-width: 2px; + padding: 6px; + + &@{table-caption-top} { + // Remove the bottom border again because specificity + border-bottom-width: 0; + } + + &@{table-caption-bottom} { + // Remove the top border again because specificity + border-top-width: 0; + } + } + } + + &@{panel-dialog} { + @{table-header} > @{table-row} { + border-bottom-width: 1px; + } + + @{table-body} > @{table-row} { + border-width: 0; + } + + @{table-footer} > @{table-row} { + border-top-width: 1px; + } + + @{table-head}, @{table-data} { + border-width: 0 0 0 1px; + padding: 8px 8px 8px 7px; + } + + @{table-caption} { + border-width: 0 0 0 2px; + padding: 8px 8px 8px 6px; + } + } + } + + // + + /// ===== Lists ===== + /// Lists are marked series of children elements + + // + + @{panel} { + > @{list-unordered}, > @{list-ordered} { + margin-left: 6ex; + } + } + + // + + /// ===== Glossaries ===== + /// Glossaries are key-value pairs of items + + // + + @{glossary-term} { + margin-top: 0.5em; + padding: 0.2em 0; + + .map-hsl-group(current; primary); + + .use-font-group(term); + } + + @{glossary-description} { + margin-left: 4.5ex; + margin-bottom: 0.5em; + } + + @{glossary-details} { + margin-left: 4.5ex; + } + + @{glossary-summary} { + cursor: pointer; + + margin-left: -4ex; + padding: 0.2em 0; + + .use-font-group(summary); + + // Prevent the user from accidentaly selecting the summary + user-select: none; + } + + // + + /// ===== Modifiers ===== + + // + + @{modifier-fade} { + opacity: 0.3; + } + + @{modifier-mark} { + // Assign marks to their own font group + .use-font-group(mark); + + // Use the set color as background for marking + background-color: .hsl-group(mark-background)[@c]; + .map-hsl-group(current; mark-foreground); + + // If applied twice, go back to "normality" + @{modifier-mark} { + background-color: .hsl-group(background)[@c]; + .map-hsl-group(current; foreground); + + // If applied thrice, mark again and not anymore + @{modifier-mark} { + background-color: .hsl-group(mark-background)[@c]; + .map-hsl-group(current; mark-foreground); + } + } + } + + @{modifier-todo} { + .map-hsl-group(current; todo-foreground); + + // Ensure it overrides properly the background color of panels + &, @{panel} { + border-style: dashed; + background-color: .hsl-group(todo-background)[@c]; + } + } + + @{property-disabled} { + border-style: dashed; + cursor: not-allowed; + } + + @{modifier-red} { + .map-hsl-group(current; red); + } + + @{modifier-yellow} { + .map-hsl-group(current; yellow); + } + + @{modifier-green} { + .map-hsl-group(current; green); + } + + @{modifier-cyan} { + .map-hsl-group(current; cyan); + } + + @{modifier-blue} { + .map-hsl-group(current; blue); + } + + @{modifier-magenta} { + .map-hsl-group(current; magenta); + } + + // + + /// ===== Inputs ===== + + // + + @{input} { + // Disable the browser font override + font: inherit; + + // Make the element feel clickable + cursor: pointer; + + // Uniform the various properties of the elements + background-color: transparent; + + // Add some padding to avoid visual overload + padding: 0.125em 0.75ex; + + // Align all inputs to the middle + vertical-align: middle; + + // Remove default input minimum width + min-width: 0; + + // By default, no borders should be present + border-width: 0; + + border-color: .hsl-group(current; 0.4)[@c]; + + &::placeholder { + opacity: 1; + color: .hsl-group(current; 0.4)[@c]; + } + + &:hover:not(@{property-disabled}) { + border-color: .hsl-group(current; 0.7)[@c]; + + &::placeholder { + color: .hsl-group(current; 0.7)[@c]; + } + } + + &:active:not(@{property-disabled}), &:focus:not(@{property-disabled}) { + border-color: .hsl-group(current)[@c]; + } + } + + // Prevent the wild resizing of areas + @{input-area} { + resize: vertical; + } + + @{input-field}, @{input-select} { + // Fields and selects should have a bottom border + border-bottom-width: 2px; + } + + @{input-area}, @{input-multiselect} { + // Areas and multiselects should have a left border + border-left-width: 2px; + } + + // Mark interactivity by changing the mouse cursor + @{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) { + cursor: text; + } + + @{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) { + cursor: vertical-text; + } + + @{input-range}:not(@{property-disabled}) { + cursor: ew-resize; + } + + @{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) { + cursor: pointer; + } + + // Configure option display + @{input-select}, @{input-multiselect} { + & optgroup { + // Clearly display the grouping of options + padding-bottom: 0.25em; + + // Use the header font + .use-font-group(header); + + & option { + // Indent and pad + padding: 0.125em 0 0.125em 2ex; + } + } + + & option { + // Use the regular font + .use-font-group(text) + } + } + + // Override the default browser appearence for radios and checkboxes + @{input-radio}, @{input-checkbox} { + appearance: none; + + // Set a fixed size + width: 1em; + height: 1em; + + // Remove the padding + padding: 2px; + + // Override the default border width + border-width: 2px; + + // Prepare the element to display something inside + display: inline-flex; + justify-content: center; + align-items: center; + + &::before { + // Force the creation of a pseudo-element inside + display: block; + content: ""; + + width: 100%; + height: 100%; + } + + // If the element is checked, display it + &:checked::before { + background-color: .hsl-group(current)[@c]; + } + } + + @{input-radio} { + // Radios should be round + border-radius: 100%; + + &::before { + border-radius: 100%; + } + } + + @{input-range} { + padding: 0; + + // appearance: none; + // + // &::-moz-range-thumb { + // width: 0; + // border-radius: 0; + // border-style: outset; + // + // border-color: .hsl-group(current)[@c]; + // border-width: 4px; + // + // background-color: .hsl-group(primary)[@c]; + // } + // + // &::-moz-range-track { + // height: 0.125em; + // background-color: .hsl-group(current)[@c]; + // } + // + // &::-moz-range-progress { + // height: 0.5em; + // background-color: .hsl-group(current)[@c]; + // } + } + + @{input-button} { + border-width: 2px; + + // Borders should reflect the interactible feeling of the element + border-style: outset; + + &:active { + border-style: inset; + } + } + + // Unmanaged inputs + @{input-file}, @{input-color} { + padding: 0; + } + + // Webkit hacks + @media screen and (-webkit-min-device-pixel-ratio: 0) { + // Make the icons that webkit randomly add to fields AT LEAST use the correct color + @{input-field} { + &::-webkit-calendar-picker-indicator { + // smh why doesn't it support fill + filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)) + } + } + + // Draw a background color on the option dropdown menu + @{input-select} optgroup, @{input-select} option { + background-color: .hsl-group(background)[@c]; + + &::before { + // Remove the tabs that Chrome adds before the options + content: ""; + } + } + } + + // + + /// ===== Forms ===== + + // + + @{form-flex} { + display: flex; + flex-direction: column; + + justify-content: stretch; + + > @{form-flex-content} { + margin: 0.5em 0; + } + + > @{form-flex-choice} { + display: flex; + gap: 1ex; + min-height: 1.675em; // Not sure why this specific number, but it looks good... + + > @{all}:first-child, > @{all}:last-child { + margin: auto 0; + flex-basis: 15%; + flex-grow: 0; + flex-shrink: 0; + + .use-font-group(label); + .map-hsl-group(current; primary); + } + + > @{all} { + flex-grow: 1; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: stretch; + gap: 1ex; + } + + > @{all}:first-child { + text-align: right; + display: block; + } + + > @{all}:last-child { + text-align: left; + display: block; + } + } + } + + // + + /// ===== Text ===== + + // + + @{text-anchor} { + .map-hsl-group(current; link); + } + + @{text-idiomatic} { + .use-font-group(idiomatic); + } + + @{text-emphasis} { + .use-font-group(emphasis); + } + + @{text-attention} { + .use-font-group(attention); + } + + @{text-strong} { + .use-font-group(strong); + } + + @{text-inserted} { + .map-hsl-group(current; inserted); + } + + @{text-deleted} { + .map-hsl-group(current; deleted); + } + + @{text-code}, @{text-preformatted}, @{text-input}, @{text-output} { + .use-font-group(code); + } + + @{text-preformatted} { + overflow-x: scroll; + } + + @{text-input}, @{text-output} { + padding: 0 0.25ex; + } + + @{text-input} { + background-color: .hsl-group(sample-output)[@c]; + .map-hsl-group(current; sample-input); + + @{text-input} { + .use-font-group(boldcode); + } + } + + @{text-output} { + background-color: .hsl-group(sample-input)[@c]; + .map-hsl-group(current; sample-output); + + @{text-output} { + .use-font-group(boldcode); + } + } + + @{text-variable} { + .use-font-group(variable); + } + + @{text-citation} { + .use-font-group(citation); + } + + @{text-definition} { + .use-font-group(term); + .map-hsl-group(current; primary); + } + + @{text-abbreviation} { + cursor: help; + } + + // +} diff --git a/src/rulesets/classic.less b/src/rulesets/classic.less index e332dd6..dd8e70e 100644 --- a/src/rulesets/classic.less +++ b/src/rulesets/classic.less @@ -5,164 +5,166 @@ @{bluelib} { - & { - // Sets the border radius of all panels - --b-border-radius: 8px; + & { + // Sets the border radius of all panels + --b-border-radius: 8px; - // Set the shadow drawn on element placed directly on the background - --b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c]; - } + // Set the shadow drawn on element placed directly on the background + --b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c]; + } - &, @{all} { - // Lower the default border opacity - border-color: .hsl-group(current; 0.15)[@c]; - } + &, @{all} { + // Lower the default border opacity + border-color: .hsl-group(current; 0.15)[@c]; + } - // Give headers a slight shadow so they are easier to read outside of panels - @{header} { - text-shadow: var(--b-outer-shadow); - } + // Give headers a slight shadow so they are easier to read outside of panels + @{header} { + text-shadow: var(--b-outer-shadow); + } - // But do not give it to headers inside panels - @{panel} { - @{header} { - text-shadow: none; - } - } + // But do not give it to headers inside panels + @{panel} { + @{header} { + text-shadow: none; + } + } - @{panel}, @{table}@{panel} > @{table-caption} { - border-radius: var(--b-border-radius); + @{panel}, @{table}@{panel} > @{table-caption} { + border-radius: var(--b-border-radius); - // And a shadow effect - box-shadow: var(--b-outer-shadow); + // And a shadow effect + box-shadow: var(--b-outer-shadow); - // Do not give the same effects to nested panels - @{panel} { - background-color: .hsl-group(current; 0.075)[@c]; - backdrop-filter: none; - box-shadow: none; - } - } + // Do not give the same effects to nested panels + @{panel} { + background-color: .hsl-group(current; 0.075)[@c]; + backdrop-filter: none; + box-shadow: none; + } + } - // Make sure mark still works, even considering specificity - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(mark-background)[@c]; + // Make sure mark still works, even considering specificity + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(mark-background)[@c]; - // Make the modifier toggle properly - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(background)[@c]; + // Make the modifier toggle properly + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(background)[@c]; - // Make the modifier toggle properly - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(mark-background)[@c]; - } - } - } + // Make the modifier toggle properly + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(mark-background)[@c]; + } + } + } - // Make sure to-do still works, even considering specificity - @{modifier-todo}, @{panel}@{modifier-todo} { - background-color: .hsl-group(todo-background)[@c]; - border-color: .hsl-group(current)[@c]; + // Make sure to-do still works, even considering specificity + @{modifier-todo}, @{panel}@{modifier-todo} { + background-color: .hsl-group(todo-background)[@c]; + border-color: .hsl-group(current)[@c]; - // Make the modifier inherit properly - @{panel} { - background-color: .hsl-group(todo-background)[@c]; - border-color: .hsl-group(current)[@c]; - } - } + // Make the modifier inherit properly + @{panel} { + background-color: .hsl-group(todo-background)[@c]; + border-color: .hsl-group(current)[@c]; + } + } - // Fixup table panels - @{table}@{panel} { - // Ensure table panels have no rounded borders - border-radius: 0; - - > @{table-caption} { - // And ensure neither do table panel captions - border-radius: 0; - - // Minimize the visibility of the caption's box shadow to prevent overlap with the table itself - box-shadow: var(--b-outer-shadow); - } - } + // Fixup table panels + @{table}@{panel} { + // Ensure table panels have no rounded borders + border-radius: 0; - @{table}@{panel-dialog} > @{table-caption} { - border-bottom-width: 2px; - } + > @{table-caption} { + // And ensure neither do table panel captions + border-radius: 0; - @{input} { - background-color: .hsl-group(current; 0.025)[@c]; + // Minimize the visibility of the caption's box shadow to prevent overlap with the table itself + box-shadow: var(--b-outer-shadow); + } + } - &:hover { - background-color: .hsl-group(current; 0.05)[@c]; - } + @{table}@{panel-dialog} > @{table-caption} { + border-bottom-width: 2px; + } - &:active { - background-color: .hsl-group(current; 0.075)[@c]; - } - } + @{input} { + background-color: .hsl-group(current; 0.025)[@c]; - @{input-field}, @{input-select} { - border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; - } - @{input-area}, @{input-multiselect} { - border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0; - } - @{input-button} { - border-radius: var(--b-border-radius); - } + &:hover { + background-color: .hsl-group(current; 0.05)[@c]; + } - @{list-unordered}, @{list-ordered} { - > *::marker { - color: .hsl-group(current; 0.5)[@c]; - } - } + &:active { + background-color: .hsl-group(current; 0.075)[@c]; + } + } - @{glossary-summary} { - color: .hsl-group(current; 0.7)[@c]; + @{input-field}, @{input-select} { + border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; + } - &::marker { - color: .hsl-group(current; 0.5)[@c]; - } + @{input-area}, @{input-multiselect} { + border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0; + } - &:hover { - color: .hsl-group(current)[@c]; - } + @{input-button} { + border-radius: var(--b-border-radius); + } - &:hover::marker { - color: .hsl-group(current; 0.7)[@c]; - } + @{list-unordered}, @{list-ordered} { + > *::marker { + color: .hsl-group(current; 0.5)[@c]; + } + } - &:active::marker { - color: .hsl-group(current)[@c]; - } - } + @{glossary-summary} { + color: .hsl-group(current; 0.7)[@c]; - // FIXME: may not work well for lighter themes - @{text-anchor} { - &:hover { - color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c]; - } + &::marker { + color: .hsl-group(current; 0.5)[@c]; + } - &:active { - color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c]; - } - } + &:hover { + color: .hsl-group(current)[@c]; + } - @{text-input}, @{text-output} { - border-radius: calc(var(--b-border-radius) / 4); - } + &:hover::marker { + color: .hsl-group(current; 0.7)[@c]; + } - @{text-variable} { - color: .hsl-group(current; 0.7)[@c]; - } + &:active::marker { + color: .hsl-group(current)[@c]; + } + } - @{text-quote} { - &::before, &::after { - color: .hsl-group(current; 0.7)[@c]; - } - } + // FIXME: may not work well for lighter themes + @{text-anchor} { + &:hover { + color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c]; + } - @{text-ruby-annotation} { - color: .hsl-group(current; 0.7)[@c]; - } -} \ No newline at end of file + &:active { + color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c]; + } + } + + @{text-input}, @{text-output} { + border-radius: calc(var(--b-border-radius) / 4); + } + + @{text-variable} { + color: .hsl-group(current; 0.7)[@c]; + } + + @{text-quote} { + &::before, &::after { + color: .hsl-group(current; 0.7)[@c]; + } + } + + @{text-ruby-annotation} { + color: .hsl-group(current; 0.7)[@c]; + } +} diff --git a/src/rulesets/colors/colors-amber.less b/src/rulesets/colors/colors-amber.less index 26e2dbf..5e87653 100644 --- a/src/rulesets/colors/colors-amber.less +++ b/src/rulesets/colors/colors-amber.less @@ -5,27 +5,27 @@ */ @{bluelib} { - .create-hsl-group(background; 0deg; 8%; 14%); - .create-hsl-group(foreground; 19deg; 91%; 46%); - .create-hsl-group(primary; 0deg; 42%; 94%); - .create-hsl-group(link; 50deg; 100%; 80%); + .create-hsl-group(background; 0deg; 8%; 14%); + .create-hsl-group(foreground; 19deg; 91%; 46%); + .create-hsl-group(primary; 0deg; 42%; 94%); + .create-hsl-group(link; 50deg; 100%; 80%); - .create-hsl-group(mark-foreground; 19deg; 64%; 14%); - .create-hsl-group(mark-background; 19deg; 100%; 81%); + .create-hsl-group(mark-foreground; 19deg; 64%; 14%); + .create-hsl-group(mark-background; 19deg; 100%; 81%); - .create-hsl-group(todo-foreground; 43deg; 100%; 65%); - .create-hsl-group(todo-background; 204deg; 11%; 18%); + .create-hsl-group(todo-foreground; 43deg; 100%; 65%); + .create-hsl-group(todo-background; 204deg; 11%; 18%); - .create-hsl-group(sample-input; 0deg; 100%; 0%); - .create-hsl-group(sample-output; 0deg; 100%; 100%); + .create-hsl-group(sample-input; 0deg; 100%; 0%); + .create-hsl-group(sample-output; 0deg; 100%; 100%); - .create-hsl-group(red; 0deg; 100%; 66%); - .create-hsl-group(yellow; 60deg; 100%; 66%); - .create-hsl-group(green; 120deg; 100%; 66%); - .create-hsl-group(cyan; 180deg; 100%; 66%); - .create-hsl-group(blue; 240deg; 100%; 66%); - .create-hsl-group(magenta; 300deg; 100%; 66%); + .create-hsl-group(red; 0deg; 100%; 66%); + .create-hsl-group(yellow; 60deg; 100%; 66%); + .create-hsl-group(green; 120deg; 100%; 66%); + .create-hsl-group(cyan; 180deg; 100%; 66%); + .create-hsl-group(blue; 240deg; 100%; 66%); + .create-hsl-group(magenta; 300deg; 100%; 66%); - .map-hsl-group(inserted; green); - .map-hsl-group(deleted; red); + .map-hsl-group(inserted; green); + .map-hsl-group(deleted; red); } diff --git a/src/rulesets/colors/colors-pixeldawn.less b/src/rulesets/colors/colors-pixeldawn.less index 2a7908a..04bc49b 100644 --- a/src/rulesets/colors/colors-pixeldawn.less +++ b/src/rulesets/colors/colors-pixeldawn.less @@ -4,58 +4,58 @@ */ @{bluelib} { - .create-hsl-group(background; 14deg; 85%; 74%); - .create-hsl-group(foreground; 340deg; 40%; 20%); - .create-hsl-group(primary; 220deg; 92%; 11%); - .create-hsl-group(link; 237deg; 80%; 41%); + .create-hsl-group(background; 14deg; 85%; 74%); + .create-hsl-group(foreground; 340deg; 40%; 20%); + .create-hsl-group(primary; 220deg; 92%; 11%); + .create-hsl-group(link; 237deg; 80%; 41%); - .create-hsl-group(mark-foreground; 194deg; 64%; 14%); - .create-hsl-group(mark-background; 194deg; 100%; 81%); + .create-hsl-group(mark-foreground; 194deg; 64%; 14%); + .create-hsl-group(mark-background; 194deg; 100%; 81%); - .create-hsl-group(todo-foreground; 43deg; 100%; 65%); - .create-hsl-group(todo-background; 204deg; 11%; 18%); + .create-hsl-group(todo-foreground; 43deg; 100%; 65%); + .create-hsl-group(todo-background; 204deg; 11%; 18%); - .create-hsl-group(sample-input; 0deg; 100%; 0%); - .create-hsl-group(sample-output; 0deg; 100%; 100%); + .create-hsl-group(sample-input; 0deg; 100%; 0%); + .create-hsl-group(sample-output; 0deg; 100%; 100%); - .create-hsl-group(red; 0deg; 100%; 15%); - .create-hsl-group(yellow; 60deg; 100%; 15%); - .create-hsl-group(green; 120deg; 100%; 15%); - .create-hsl-group(cyan; 180deg; 100%; 15%); - .create-hsl-group(blue; 240deg; 100%; 15%); - .create-hsl-group(magenta; 300deg; 100%; 15%); + .create-hsl-group(red; 0deg; 100%; 15%); + .create-hsl-group(yellow; 60deg; 100%; 15%); + .create-hsl-group(green; 120deg; 100%; 15%); + .create-hsl-group(cyan; 180deg; 100%; 15%); + .create-hsl-group(blue; 240deg; 100%; 15%); + .create-hsl-group(magenta; 300deg; 100%; 15%); - .map-hsl-group(inserted; green); - .map-hsl-group(deleted; red); + .map-hsl-group(inserted; green); + .map-hsl-group(deleted; red); - &:is(@{bluelib}) { - --b-panel-initial-opacity: 0.500; - --b-border-radius: 0; - --b-outer-shadow: none; + &:is(@{bluelib}) { + --b-panel-initial-opacity: 0.500; + --b-border-radius: 0; + --b-outer-shadow: none; - @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { - color: white; - text-shadow: 2px 2px 0 #9832ce; - } + @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { + color: white; + text-shadow: 2px 2px 0 #9832ce; + } - @{panel} { - @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { - color: .hsl-group(current)[@c]; - text-shadow: none; - } - } - } + @{panel} { + @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { + color: .hsl-group(current)[@c]; + text-shadow: none; + } + } + } - /* - @{panel} { - - @{panel} { - background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important; + /* + @{panel} { - @{panel} { - background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important; - } - } - } - */ + @{panel} { + background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important; + + @{panel} { + background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important; + } + } + } + */ } diff --git a/src/rulesets/colors/colors-purplestar.less b/src/rulesets/colors/colors-purplestar.less index 0e61739..e911510 100644 --- a/src/rulesets/colors/colors-purplestar.less +++ b/src/rulesets/colors/colors-purplestar.less @@ -4,28 +4,28 @@ */ @{bluelib} { - .create-hsl-group(background; 262deg; 85%; 13%); - .create-hsl-group(foreground; 262deg; 100%; 78%); - .create-hsl-group(primary; 53deg; 100%; 100%); - // .create-hsl-group(link; 292deg; 65%; 50%); - .create-hsl-group(link; 53deg; 100%; 72%); + .create-hsl-group(background; 262deg; 85%; 13%); + .create-hsl-group(foreground; 262deg; 100%; 78%); + .create-hsl-group(primary; 53deg; 100%; 100%); + // .create-hsl-group(link; 292deg; 65%; 50%); + .create-hsl-group(link; 53deg; 100%; 72%); - .create-hsl-group(mark-foreground; 53deg; 64%; 14%); - .create-hsl-group(mark-background; 53deg; 100%; 72%); + .create-hsl-group(mark-foreground; 53deg; 64%; 14%); + .create-hsl-group(mark-background; 53deg; 100%; 72%); - .create-hsl-group(todo-foreground; 43deg; 100%; 65%); - .create-hsl-group(todo-background; 204deg; 11%; 18%); + .create-hsl-group(todo-foreground; 43deg; 100%; 65%); + .create-hsl-group(todo-background; 204deg; 11%; 18%); - .create-hsl-group(sample-input; 0deg; 100%; 0%); - .create-hsl-group(sample-output; 0deg; 100%; 100%); + .create-hsl-group(sample-input; 0deg; 100%; 0%); + .create-hsl-group(sample-output; 0deg; 100%; 100%); - .create-hsl-group(red; 0deg; 100%; 75%); - .create-hsl-group(yellow; 60deg; 100%; 75%); - .create-hsl-group(green; 120deg; 100%; 75%); - .create-hsl-group(cyan; 180deg; 100%; 75%); - .create-hsl-group(blue; 240deg; 100%; 75%); - .create-hsl-group(magenta; 300deg; 100%; 75%); + .create-hsl-group(red; 0deg; 100%; 75%); + .create-hsl-group(yellow; 60deg; 100%; 75%); + .create-hsl-group(green; 120deg; 100%; 75%); + .create-hsl-group(cyan; 180deg; 100%; 75%); + .create-hsl-group(blue; 240deg; 100%; 75%); + .create-hsl-group(magenta; 300deg; 100%; 75%); - .map-hsl-group(inserted; green); - .map-hsl-group(deleted; red); + .map-hsl-group(inserted; green); + .map-hsl-group(deleted; red); } diff --git a/src/rulesets/colors/colors-royalblue.less b/src/rulesets/colors/colors-royalblue.less index 142cab2..ea3c10a 100644 --- a/src/rulesets/colors/colors-royalblue.less +++ b/src/rulesets/colors/colors-royalblue.less @@ -4,27 +4,27 @@ */ @{bluelib} { - .create-hsl-group(background; 224deg; 64%; 14%); - .create-hsl-group(foreground; 212deg; 100%; 81%); - .create-hsl-group(primary; 0deg; 0%; 100%); - .create-hsl-group(link; 180deg; 100%; 40%); + .create-hsl-group(background; 224deg; 64%; 14%); + .create-hsl-group(foreground; 212deg; 100%; 81%); + .create-hsl-group(primary; 0deg; 0%; 100%); + .create-hsl-group(link; 180deg; 100%; 40%); - .create-hsl-group(mark-foreground; 32deg; 64%; 14%); - .create-hsl-group(mark-background; 32deg; 100%; 81%); + .create-hsl-group(mark-foreground; 32deg; 64%; 14%); + .create-hsl-group(mark-background; 32deg; 100%; 81%); - .create-hsl-group(todo-foreground; 43deg; 100%; 65%); - .create-hsl-group(todo-background; 204deg; 11%; 18%); + .create-hsl-group(todo-foreground; 43deg; 100%; 65%); + .create-hsl-group(todo-background; 204deg; 11%; 18%); - .create-hsl-group(sample-input; 0deg; 100%; 0%); - .create-hsl-group(sample-output; 0deg; 100%; 100%); + .create-hsl-group(sample-input; 0deg; 100%; 0%); + .create-hsl-group(sample-output; 0deg; 100%; 100%); - .create-hsl-group(red; 0deg; 100%; 75%); - .create-hsl-group(yellow; 60deg; 100%; 75%); - .create-hsl-group(green; 120deg; 100%; 75%); - .create-hsl-group(cyan; 180deg; 100%; 75%); - .create-hsl-group(blue; 240deg; 100%; 75%); - .create-hsl-group(magenta; 300deg; 100%; 75%); + .create-hsl-group(red; 0deg; 100%; 75%); + .create-hsl-group(yellow; 60deg; 100%; 75%); + .create-hsl-group(green; 120deg; 100%; 75%); + .create-hsl-group(cyan; 180deg; 100%; 75%); + .create-hsl-group(blue; 240deg; 100%; 75%); + .create-hsl-group(magenta; 300deg; 100%; 75%); - .map-hsl-group(inserted; green); - .map-hsl-group(deleted; red); + .map-hsl-group(inserted; green); + .map-hsl-group(deleted; red); } diff --git a/src/rulesets/fonts/fonts-fira-ghpages.less b/src/rulesets/fonts/fonts-fira-ghpages.less index 02d706d..3542ced 100644 --- a/src/rulesets/fonts/fonts-fira-ghpages.less +++ b/src/rulesets/fonts/fonts-fira-ghpages.less @@ -8,260 +8,260 @@ @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Hair.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Hair.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Hair.ttf') format('truetype'); - font-weight: 100; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Hair.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Hair.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Hair.ttf') format('truetype'); + font-weight: 100; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-HairItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-HairItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-HairItalic.ttf') format('truetype'); - font-weight: 100; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-HairItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-HairItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-HairItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLight.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLight.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLight.ttf') format('truetype'); - font-weight: 200; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLight.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLight.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLightItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLightItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLightItalic.ttf') format('truetype'); - font-weight: 200; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLightItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLightItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Light.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Light.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Light.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Light.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-LightItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-LightItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-LightItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-LightItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Regular.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Regular.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Regular.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Regular.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Italic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Italic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Italic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Italic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Medium.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Medium.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Medium.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Medium.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-MediumItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-MediumItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-MediumItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-MediumItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBold.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBold.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBold.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBold.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBoldItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBoldItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype'); - font-weight: 600; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBoldItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBoldItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Bold.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Bold.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Bold.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Bold.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-BoldItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-BoldItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBold.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBold.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBold.ttf') format('truetype'); - font-weight: 800; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBold.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBold.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBoldItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBoldItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype'); - font-weight: 800; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBoldItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBoldItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype'); + font-weight: 800; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-Heavy.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-Heavy.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-Heavy.ttf') format('truetype'); - font-weight: 900; - font-style: normal; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-Heavy.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-Heavy.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-Heavy.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Sans'; - src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraSans-HeavyItalic.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraSans-HeavyItalic.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraSans-HeavyItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; - font-display: swap; + font-family: 'Fira Sans'; + src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraSans-HeavyItalic.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraSans-HeavyItalic.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraSans-HeavyItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Fira Mono'; - src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraMono-Regular.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraMono-Regular.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraMono-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; + font-family: 'Fira Mono'; + src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraMono-Regular.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraMono-Regular.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraMono-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Fira Mono'; - src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot'); - src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'), - url('https://mozilla.github.io/Fira/woff2/FiraMono-Bold.woff2') format('woff2'), - url('https://mozilla.github.io/Fira/woff/FiraMono-Bold.woff') format('woff'), - url('https://mozilla.github.io/Fira/ttf/FiraMono-Bold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; - font-display: swap; + font-family: 'Fira Mono'; + src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot'); + src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'), + url('https://mozilla.github.io/Fira/woff2/FiraMono-Bold.woff2') format('woff2'), + url('https://mozilla.github.io/Fira/woff/FiraMono-Bold.woff') format('woff'), + url('https://mozilla.github.io/Fira/ttf/FiraMono-Bold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; } @{bluelib} { - // @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( 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( 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( 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( 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( 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( 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); + // @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(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(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(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(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(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(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); } diff --git a/src/rulesets/fun.less b/src/rulesets/fun.less index e60c8ec..9739dcc 100644 --- a/src/rulesets/fun.less +++ b/src/rulesets/fun.less @@ -5,21 +5,21 @@ //noinspection CssInvalidAtRule @property --bhsl-current-hue { - syntax: ''; - initial-value: 0deg; - inherits: true; + syntax: ''; + initial-value: 0deg; + inherits: true; } @keyframes rainbow { - 0% { - --bhsl-current-hue: 0deg; - } + 0% { + --bhsl-current-hue: 0deg; + } - 100% { - --bhsl-current-hue: 360deg; - } + 100% { + --bhsl-current-hue: 360deg; + } } @{animation-rainbow} { - animation: 2s linear infinite rainbow; -} \ No newline at end of file + animation: 2s linear infinite rainbow; +} diff --git a/src/rulesets/glass.less b/src/rulesets/glass.less index 786b897..f12dd54 100644 --- a/src/rulesets/glass.less +++ b/src/rulesets/glass.less @@ -4,71 +4,66 @@ */ @{bluelib} { - & { - // Sets the backdrop-filter blur radius of all panels - --b-panel-blur: 16px; + & { + // Sets the backdrop-filter blur radius of all panels + --b-panel-blur: 16px; - // Set the opacity of the glass panels - --b-panel-initial-opacity: 0.300; - --b-panel-nested-opacity: 0.075; - } + // Set the opacity of the glass panels + --b-panel-initial-opacity: 0.300; + --b-panel-nested-opacity: 0.075; + } - // Ensure that browsers not supporting backdrop-filter do not apply this style - @supports (backdrop-filter: blur(var(--b-panel-blur))) { + // Ensure that browsers not supporting backdrop-filter do not apply this style + @supports (backdrop-filter: blur(var(--b-panel-blur))) { - @{panel}, @{table}@{panel} > @{table-caption} { - background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c]; - backdrop-filter: - blur(var(--b-panel-blur)) - hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue))) - ; + @{panel}, @{table}@{panel} > @{table-caption} { + background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c]; + backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue))); - @{panel} { - background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c]; - backdrop-filter: none; - } - } + @{panel} { + background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c]; + backdrop-filter: none; + } + } - // Make sure mark still works, even considering specificity - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(mark-background)[@c]; - backdrop-filter: none; + // Make sure mark still works, even considering specificity + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(mark-background)[@c]; + backdrop-filter: none; - // Make the modifier toggle properly - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(background)[@c]; + // Make the modifier toggle properly + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(background)[@c]; - // Make the modifier toggle properly - @{modifier-mark}, @{panel}@{modifier-mark} { - background-color: .hsl-group(mark-background)[@c]; - } - } - } + // Make the modifier toggle properly + @{modifier-mark}, @{panel}@{modifier-mark} { + background-color: .hsl-group(mark-background)[@c]; + } + } + } - // Make sure to-do still works, even considering specificity - @{modifier-todo}, @{panel}@{modifier-todo} { - background-color: .hsl-group(todo-background)[@c]; + // Make sure to-do still works, even considering specificity + @{modifier-todo}, @{panel}@{modifier-todo} { + background-color: .hsl-group(todo-background)[@c]; - // Make the modifier inherit properly - @{panel} { - background-color: .hsl-group(todo-background)[@c]; - backdrop-filter: none; - } - } + // Make the modifier inherit properly + @{panel} { + background-color: .hsl-group(todo-background)[@c]; + backdrop-filter: none; + } + } - // Make to-do have a glass background too - @{panel}@{modifier-todo} { - background-color: .hsl-group(todo-background; 0.3)[@c]; - backdrop-filter: - blur(var(--b-panel-blur)) - grayscale(100%) - ; - } - @{panel} { - @{panel}@{modifier-todo} { - background-color: .hsl-group(todo-background)[@c]; - } - } + // Make to-do have a glass background too + @{panel}@{modifier-todo} { + background-color: .hsl-group(todo-background; 0.3)[@c]; + backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%); + } - } + @{panel} { + @{panel}@{modifier-todo} { + background-color: .hsl-group(todo-background)[@c]; + } + } + + } } diff --git a/src/rulesets/layouts/layouts-center.less b/src/rulesets/layouts/layouts-center.less index b4037f8..23d8d17 100644 --- a/src/rulesets/layouts/layouts-center.less +++ b/src/rulesets/layouts/layouts-center.less @@ -31,7 +31,7 @@ justify-content: space-between; align-items: stretch; - > @{layout-center-background} { + > @{layout-center-background} { position: fixed; z-index: -100; @@ -39,8 +39,8 @@ left: 0; width: 110vw; height: 110vh; - + object-fit: cover; object-position: center; } -} \ No newline at end of file +}