Fixed hidden linkes, Changed color palette, may change later

Update index.php, backgrounds.php, and 12 more files...

.gitattributes

@@ -0,0 +1,2 @@
+# Preventing this repo from turning into a PHP repository
+*.php linguist-vendored

.github/workflows/build-all.yml

@@ -0,0 +1,83 @@
+name: Build Everything
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  sass_compile:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    concurrency:
+      group: cicd-docs
+
+    steps:
+      - name: Checkout Git submodules
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.4'
+          extensions: none
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Install SASS Compiler
+        run: |
+          npm install -g sass
+
+      - name: Compile SASS
+        run: |
+          cd htdocs/css/
+          sass "../../scss/nibblepoker.scss" -q --no-source-map > "nibblepoker.css"
+          sass "../../scss/nibblepoker.scss" -q --no-source-map --style compressed > "nibblepoker.min.css"
+          sass "../../scss/debugger.scss" -q --no-source-map > "debugger.css"
+          sass "../../scss/debugger.scss" -q --no-source-map --style compressed > "debugger.min.css"
+
+      - name: Upload `.css` build artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ github.actor == 'aziascreations' }}
+        with:
+          name: nibblepoker.css
+          path: "./htdocs/css/nibblepoker.css"
+          if-no-files-found: error
+          retention-days: 90
+          compression-level: 9
+
+      - name: Upload `.min.css` build artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ github.actor == 'aziascreations' }}
+        with:
+          name: nibblepoker.min.css
+          path: "./htdocs/css/nibblepoker.min.css"
+          if-no-files-found: error
+          retention-days: 90
+          compression-level: 9
+
+      - name: Pre-render PHP File
+        run: |
+          cd htdocs
+          php ./index.php > ./index.html
+
+      - name: Remove trash
+        run: |
+          cd htdocs
+          rm -rf parts/
+          rm *.php
+
+      - name: Deploy demo page to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        if: ${{ github.ref == 'refs/heads/master' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./htdocs

.gitignore

@@ -4,9 +4,13 @@
 # NodeJS Trash
 node_modules/
 
+# Corporate-specific stuff
+*_corp_*
+
 # Build Artifacts
 *.css
 *.min.html
+*.html
 *.7z
 *.zip
 *.tar

.run/Docker - Local demo.run.xml

@@ -0,0 +1,16 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Docker - Local demo" type="docker-deploy" factoryName="docker-compose.yml" server-name="Docker">
+    <deployment type="docker-compose.yml">
+      <settings>
+        <option name="envFilePath" value="" />
+        <option name="services">
+          <list>
+            <option value="nibblepoker_css" />
+          </list>
+        </option>
+        <option name="sourceFilePath" value="docker-compose.yml" />
+      </settings>
+    </deployment>
+    <method v="2" />
+  </configuration>
+</component>

dockerize.cmd

@@ -1,21 +0,0 @@
-@echo off
-setlocal enabledelayedexpansion
-
-:: Going into the script's directory
-cd /D "%~dp0"
-
-
-:dockerize
-echo.
-echo Preparing the container
-echo -----------------------
-
-:dockerize-up
-pushd %CD%
-docker-compose -f docker-compose.dev.yml up -d --force-recreate
-popd
-
-:dockerize-end
-
-
-:end

htdocs/index.php

@@ -7,21 +7,22 @@
     <!--<meta name="viewport" content="width=device-width"/>-->
     <meta name="author" content="Herwin Bozet">
     <meta name="robots" content="index, follow">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="alternate icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/css/nibblepoker.min.css">
-    <link rel="stylesheet" href="/css/debugger.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <link rel="alternate icon" href="./favicon.ico">
+    <link rel="stylesheet" href="./css/nibblepoker.css">
+    <!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
+    <link rel="stylesheet" href="./css/debugger.min.css">
+    <link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.min.css">
     <title>NibblePoker's CSS Theme</title>
-    <meta name="description" content="...">
+    <meta name="description"
+          content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
     <meta property="og:title" content="NibblePoker"/>
     <meta property="og:type" content="website"/>
     <meta property="og:url" content="https://css.nibblepoker.com/"/>
     <meta property="og:image" content="???"/>
     <meta property="og:image:type" content="image/png"/>
-    <meta property="og:description" content="..."/>
+    <meta property="og:description"
+          content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
 </head>
 
 <body class="layout-generic">
@@ -31,7 +32,7 @@
 
 <header class="w-full p-m pl-s">
     <h1 class="t-size-17 t-w-500">
-        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation
+        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS v0.0.2
         <a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
     </h1>
 </header>
@@ -58,53 +59,68 @@
     <!-- Introduction -->
     <?php include("./parts/intro.php"); ?>
 
-    <!-- Text > Weights -->
+
+    <!-- Core > Text > Weights -->
     <?php include("./parts/text_weights.php"); ?>
 
-    <!-- Text > Styles -->
+    <!-- Core > Text > Styles -->
     <?php include("./parts/text_styles.php"); ?>
 
-    <!-- Text > Alignment -->
+    <!-- Core > Text > Alignment -->
     <?php include("./parts/text_alignment.php"); ?>
 
-    <!-- Text > Modifiers -->
+    <!-- Core > Text > Modifiers -->
     <?php include("./parts/text_modifiers.php"); ?>
 
-    <!-- Text > Links -->
+    <!-- Core > Text > Links -->
     <?php include("./parts/text_links.php"); ?>
 
-    <!-- Text > Misc -->
+    <!-- Core > Text > Misc -->
     <?php include("./parts/text_misc.php"); ?>
 
-    <!-- Spacing -->
+    <!-- Core > Spacing -->
     <?php include("./parts/spacing.php"); ?>
 
-    <!-- Rounding -->
+    <!-- Core > Rounding -->
     <?php include("./parts/rounding.php"); ?>
 
-    <!-- Lists > Base -->
+    <!-- Core > Borders -->
+    <?php include("./parts/core/borders.php"); ?>
+
+    <!-- Core > Lists > Base -->
     <?php include("./parts/lists_base.php"); ?>
 
-    <!-- Lists > Composed
+    <!-- Core > Lists > Composed
     <?php include("./parts/lists_composed.php"); ?>-->
 
-    <!-- Grids -->
+    <!-- Core > Grids -->
     <?php include("./parts/grids.php"); ?>
 
-    <!-- Tables -->
-    <?php include("./parts/tables_core.php"); ?>
+    <!-- Core > Tables -->
+    <?php include("./parts/core/tables.php"); ?>
 
-    <!-- Horizontal Rulers -->
+    <!-- Core > Inputs -->
+    <?php include("./parts/core/inputs.php"); ?>
+
+
+    <!-- Site > Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
 
-    <!-- Backgrounds -->
+    <!-- Site > Backgrounds -->
     <?php include("./parts/backgrounds.php"); ?>
 
-    <!-- Buttons -->
+    <!-- Site > Buttons -->
     <?php include("./parts/buttons.php"); ?>
 
-    <!-- Tables -->
-    <?php include("./parts/tables_site.php"); ?>
+    <!-- Site > Tables -->
+    <?php include("./parts/examples/tables.php"); ?>
+
+
+    <!-- Examples > Inputs -->
+    <?php include("./parts/examples/inputs.php"); ?>
+
+    <!-- Examples > Tables -->
+    <?php /* include("./parts/examples/cards.php"); */ ?>
 </main>
 
 <footer class="d-flex flex-align-center w-full p-s py-xs">
@@ -121,8 +137,8 @@
     </a>
 </footer>
 
-<script src="/js/sidebar.js"></script>
-<script src="/js/text-direction-switch.js"></script>
-<script src="/js/anchor-fix.js"></script>
+<script src="./js/sidebar.js"></script>
+<script src="./js/text-direction-switch.js"></script>
+<script src="./js/anchor-fix.js"></script>
 </body>
 </html>

htdocs/parts/backgrounds.php

@@ -14,23 +14,35 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 <section class="p-s">
 
     <h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
-    <div class="grid grid-col-3 grid-gap-l px-s">
+    <div class="grid grid-col-2 grid-gap-l px-s">
         <div>
-            <div class="p-l border r-xl bkgd-dark my-xs"></div>
-            <span class="code mb-s">.bkgd-dark</span>
-        </div>
-        <div>
-            <div class="p-l border r-xl bkgd-grey my-xs"></div>
-            <span class="code mb-s">.bkgd-grey</span>
-            <span class="code mb-s">.bkgd-gray</span>
+            <div class="p-l border r-xl bkgd-lightest my-xs"></div>
+            <span class="code mb-s">.bkgd-lightest</span>
         </div>
         <div>
             <div class="p-l border r-xl bkgd-light my-xs"></div>
             <span class="code mb-s">.bkgd-light</span>
         </div>
     </div>
+    <div class="grid grid-col-2 grid-gap-l px-s">
+        <div>
+            <div class="p-l border r-xl bkgd-grey my-xs"></div>
+            <span class="code mb-s">.bkgd-grey</span>
+            <span class="code mb-s">.bkgd-gray</span>
+        </div>
+    </div>
+    <div class="grid grid-col-2 grid-gap-l px-s">
+        <div>
+            <div class="p-l border r-xl bkgd-dark my-xs"></div>
+            <span class="code mb-s">.bkgd-dark</span>
+        </div>
+        <div>
+            <div class="p-l border r-xl bkgd-darkest my-xs"></div>
+            <span class="code mb-s">.bkgd-darkest</span>
+        </div>
+    </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Grid backgrounds</h3>
     <div class="grid grid-col-2 grid-gap-l px-s">
         <div>
             <p class="t-w-500">40% opacity (Title bars)</p>
@@ -56,7 +68,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </div>
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Special backgrounds</h3>
     <div class="grid grid-col-3 grid-gap-l px-s">
         <div>
             <p class="t-w-500">Transparent</p>
@@ -65,7 +77,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </div>
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Colored backgrounds</h3>
     <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
         <div>
             <p class="t-w-500">Blue</p>

htdocs/parts/core/borders.php

@@ -0,0 +1,97 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="core-borders"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Borders
+        <i class="fa-solid fa-border-inner f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-s">Border selection</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            Borders can be applied on a global/axis/sided basis using the standard size suffixes.<br>
+            The table below details them in order of application and definition at the CSS-level.
+        </p>
+
+        <table class="table-stylish table-p-xs border r-l table-v-center">
+            <thead>
+            <tr>
+                <th>Border Style</th>
+                <th>Enabling class</th>
+                <th>Disabling class</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><b>Global</b></td>
+                <td><span class="code">.b</span>, <span class="code">.border</span></td>
+                <td><span class="code">.b-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Horizontal</b></td>
+                <td><span class="code">.bx</span></td>
+                <td><span class="code">.bx-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Vertical</b></td>
+                <td><span class="code">.by</span></td>
+                <td><span class="code">.by-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Top</b></td>
+                <td><span class="code">.bt</span></td>
+                <td><span class="code">.bt-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Down</b></td>
+                <td><span class="code">.bb</span></td>
+                <td><span class="code">.bb-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Left</b></td>
+                <td><span class="code">.bl</span></td>
+                <td><span class="code">.bl-0</span></td>
+            </tr>
+            <tr>
+                <td><b>Right</b></td>
+                <td><span class="code">.br</span></td>
+                <td><span class="code">.br-0</span></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Border styles</h3>
+    <div class="px-s">
+        <table class="table-stylish table-p-xs border r-l table-v-center">
+            <thead>
+            <tr>
+                <th>Border style</th>
+                <th>Class</th>
+                <th>Example</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr><td><b>None</b></td><td><span class="code">.b-none</span></td><td><div class="bkgd-light b b-none p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Hidden</b></td><td><span class="code">.b-hidden</span></td><td><div class="bkgd-light b b-hidden p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Dotted</b></td><td><span class="code">.b-dotted</span></td><td><div class="bkgd-light b b-dotted p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Dashed</b></td><td><span class="code">.b-dashed</span></td><td><div class="bkgd-light b b-dashed p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Solid</b></td><td><span class="code">.b-solid</span></td><td><div class="bkgd-light b b-solid p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Double</b></td><td><span class="code">.b-double</span></td><td><div class="bkgd-light b b-double p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Groove</b></td><td><span class="code">.b-groove</span></td><td><div class="bkgd-light b b-groove p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Ridge</b></td><td><span class="code">.b-ridge</span></td><td><div class="bkgd-light b b-ridge p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Inset</b></td><td><span class="code">.b-inset</span></td><td><div class="bkgd-light b b-inset p-xxs">&nbsp;</div></td></tr>
+            <tr><td><b>Outset</b></td><td><span class="code">.b-outset</span></td><td><div class="bkgd-light b b-outset p-xxs">&nbsp;</div></td></tr>
+            </tbody>
+        </table>
+    </div>
+
+</section>

htdocs/parts/core/inputs.php

@@ -0,0 +1,77 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="core-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
+        ℹ️ Check the <a href="#examples-inputs">Examples &gt; Inputs</a> section for styled examples.
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum">
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+input[type=text]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-password">Password Input: </label>
+        <input id="demo-core-password" type="password" value="12345678">
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+input[type=password]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-number">Number Input: </label>
+        <input id="demo-core-number" type="number" value="42">
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+input[type=number]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-core-radio-1" name="demo-core-radio" checked>
+        <label for="demo-core-radio-1">Radio 1</label><br>
+        <input type="radio" id="demo-core-radio-2" name="demo-core-radio">
+        <label for="demo-core-radio-2">Radio 2</label><br>
+        <input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
+        <label for="demo-core-radio-3">Radio 3</label>
+        <code class="d-block p-xxs border r-s mt-xs">
+            (input[type=radio][name=myRadioInput]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-core-combo-1" checked>
+        <label for="demo-core-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-core-combo-2">
+        <label for="demo-core-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-core-combo-3" disabled>
+        <label for="demo-core-combo-3">Checkbox 3</label>
+        <code class="d-block p-xxs border r-s mt-xs">
+            (input[type=checkbox]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+textarea
+        </code>
+    </div>
+
+</section>

htdocs/parts/core/tables.php

@@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 </div>
 <section class="p-s">
 
-    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
-        ⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
+    <div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
+        ℹ️ Check the <a href="#tables-site">Examples &gt; Tables</a> section for styled examples.
     </div>
 
     <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>

htdocs/parts/examples/cards.php

@@ -0,0 +1,47 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="examples-cards"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Cards
+        <i class="fa-solid fa-address-card f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Vertical Card</h3>
+    <div class="px-s">
+        <p class="mb-xxs">
+            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
+        </p>
+
+        <div class="my-s border r-l bkgd-dark grid d-inline-block">
+            <div class="bb">
+                <img src="./img/maki-03.jpg" alt="Hungry Kitty Cat" class="r-r p-s px-l" height="128px">
+            </div>
+            <div class="bkgd-gray t-center">
+                <p>Hungry Cat</p>
+                <p>
+                    This kitty needs kibbles to stay healthy and
+                </p>
+            </div>
+            <div class="grid grid-col-3">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+
+        <code class="d-block p-xxs border r-s mt-s">
+            table<b>.table-stylish.table-p-s.border.r-l</b><br>
+            &nbsp;&nbsp;thead>th>td*2<br>
+            &nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+</section>

htdocs/parts/examples/inputs.php

@@ -0,0 +1,96 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="examples-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Text inputs</h3>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+input[type=text]<b>.p-xxs.border.r-m</b>
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs">
+            label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
+        </code>
+    </div>
+
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-site-combo-1" class="cb-pretty r-m border" checked>
+        <label for="demo-site-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
+        <label for="demo-site-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
+        <label for="demo-site-combo-3">Checkbox 3</label>
+
+        <code class="d-block p-xxs border r-s mt-xs">
+            (input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
+        </code>
+    </div>
+
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border" checked>
+        <label for="demo-site-radio-1-solid">Radio 1</label>
+        <br>
+        <input type="radio" id="demo-site-radio-2-solid" name="demo-site-radio-solid" class="radio-solid border">
+        <label for="demo-site-radio-2-solid">Radio 2</label>
+        <br>
+        <input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-subtle">
+        <label for="demo-site-radio-3-solid">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-4-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-dashed">
+        <label for="demo-site-radio-4-solid">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
+        <label for="demo-site-radio-5-solid">Radio 5</label>
+
+        <code class="d-block p-xxs border r-s mt-xs">
+            (input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border" checked>
+        <label for="demo-site-radio-1-3d">Radio 1</label>
+        <br>
+        <input type="radio" id="demo-site-radio-2-3d" name="demo-site-radio-3d" class="radio-3d border">
+        <label for="demo-site-radio-2-3d">Radio 2</label>
+        <br>
+        <input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-subtle">
+        <label for="demo-site-radio-3-3d">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-4-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-dashed">
+        <label for="demo-site-radio-4-3d">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
+        <label for="demo-site-radio-5-3d">Radio 5</label>
+
+        <code class="d-block p-xxs border r-s mt-xs">
+            (input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
+        </code>
+    </div>
+
+</section>

htdocs/parts/examples/tables.php

@@ -0,0 +1,126 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden'); die();
+}
+?>
+
+<a id="tables-site"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Tables
+        <i class="fa-solid fa-table f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
+        ⚠️ These styles have specific limitations you should be aware of ⚠️
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
+    <div class="px-s mb-m">
+        <p class="mb-xxs">
+            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
+        </p>
+        <p class="mb-xs">
+            However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
+            Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
+            A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
+        </p>
+        <table class="table-stylish table-p-s border r-l">
+            <thead>
+            <tr>
+                <th>Head 1</th>
+                <th>Head 2</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>Cell 1.1</td>
+                <td>Cell 1.2</td>
+            </tr>
+            <tr>
+                <td>Cell 2.1</td>
+                <td>Cell 2.2</td>
+            </tr>
+            </tbody>
+        </table>
+        <code class="d-block p-xxs border r-s mt-s">
+            table<b>.table-stylish.table-p-s.border.r-l</b><br>
+            &nbsp;&nbsp;thead>tr>th*2<br>
+            &nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Scrollable table</h3>
+    <div class="px-s">
+        <p class="mb-xxs mb-m">
+            Scrollable tables can be obtained by combining the overflow utility classes and the
+            <span class="code">.table-no-wrap</span> class to prevent cell from collapsing before scrolling.
+        </p>
+        <p class="mb-xxs mb-m">
+            This special class can be applied to the following elements: <br>
+            <span class="ml-s">
+                <span class="code">table</span>,
+                <span class="code">thead</span>,
+                <span class="code">tbody</span>,
+                <span class="code">tr</span>,
+                <span class="code">th</span>,
+                <span class="code">td</span>
+            </span>
+        </p>
+        <p class="mb-xxs mb-m">
+            In turn, every <span class="code">td</span> element under one of these elements will no longer wrap text.
+        </p>
+
+        <div class="w-full ox-scroll">
+            <table class="table-stylish table-p-s border r-l">
+                <thead>
+                <tr>
+                    <th>Table without the <span class="code">.table-no-wrap</span> class</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
+                        In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
+                        Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
+                        In hac habitasse platea dictumst.
+                        Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="w-full ox-scroll">
+            <table class="table-stylish table-p-s border r-l table-no-wrap">
+                <thead>
+                <tr>
+                    <th>Table with the <span class="code">.table-no-wrap</span> class</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
+                        In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
+                        Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
+                        In hac habitasse platea dictumst.
+                        Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <code class="d-block p-xxs border r-s mt-s">
+            <b>div.w-full.ox-scroll</b><br>
+            &nbsp;&nbsp;table.table-stylish.table-p-s.border.r-l<b>.table-no-wrap</b><br>
+            &nbsp;&nbsp;&nbsp;&nbsp;thead>tr>th*2<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+</section>

htdocs/parts/intro.php

@@ -7,6 +7,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 global $root_path;
 ?>
 
+<a id="intro"></a>
 <div class="p-xs b r-s bkgd-grid">
     <h2 class="t-w-500 t-size-14">Introduction</h2>
 </div>
@@ -15,45 +16,46 @@ global $root_path;
     <p class="ml-xs">
         <i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
         off-the-shelf stylesheets on low-end and mobile devices.<br>
-        However, it rapidly got used outside its intended environment and was spun-off into a separate a
-        publicly accessible and truly free project.
+        However, it rapidly got used in other public/private/professional projects, and it was spun-off into a
+        separate, publicly accessible, and truly free project.
     </p>
     <p class="ml-xs mt-s">
-        <i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
-        or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
-        Following that philosophy, <i>NibbleCSS</i> also makes use of
-        <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
+        <i>NibbleCSS</i> is also released into the public domain due to personal beliefs, and will always stay
+        that way.<br>
+        This project also uses <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>,
         which was also released into the public domain in 2011.
     </p>
 
-    <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
-    <div class="ml-xs">
-        <h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
-        <ul class="l-bullets l-bullet-manual">
-            <li>No implicit sizes, margins or paddings</li>
-            <li>No styles from class-less DOM, except for styling elements</li>
-            <li>Self-sufficient and embeddable as a single file or text blob</li>
-            <li>Competitive minified size</li>
-            <li>Standardized &amp; consistent naming scheme</li>
-        </ul>
-
-        <h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
-        <ul class="l-bullets l-bullet-manual">
-            <li>Prefabs for common elements</li>
+    <!--<s>
+        <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
+        <div class="ml-xs">
+            <h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
             <ul class="l-bullets l-bullet-manual">
-                <li>Bound to specific elements</li>
+                <li>No implicit sizes, margins or paddings</li>
+                <li>No styles from class-less DOM, except for styling elements</li>
+                <li>Self-sufficient and embeddable as a single file or text blob</li>
+                <li>Competitive minified size</li>
+                <li>Standardized &amp; consistent naming scheme</li>
             </ul>
-            <li>No forced smooth transition</li>
-        </ul>
 
-        <h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
-        <ul class="l-bullets l-bullet-manual">
-            <li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
+            <h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
             <ul class="l-bullets l-bullet-manual">
-                <li>Tested on an old Chuwi Ubook X internally</li>
+                <li>Prefabs for common elements</li>
+                <ul class="l-bullets l-bullet-manual">
+                    <li>Bound to specific elements</li>
+                </ul>
+                <li>No forced smooth transition</li>
             </ul>
-        </ul>
-    </div>
+
+            <h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
+            <ul class="l-bullets l-bullet-manual">
+                <li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
+                <ul class="l-bullets l-bullet-manual">
+                    <li>Tested on an old Chuwi Ubook X internally</li>
+                </ul>
+            </ul>
+        </div>
+    </s>-->
 
     <h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
     <table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
@@ -66,7 +68,7 @@ global $root_path;
             <tr>
                 <td>NibbleCSS</td>
                 <td>
-                    <a href="/css/nibblepoker.min.css"
+                    <a href="./css/nibblepoker.min.css"
                        title="Download the minified full stylesheet"
                        class="a-hidden"
                        download>
@@ -78,7 +80,7 @@ global $root_path;
                     </a>
                 </td>
                 <td>
-                    <a href="/css/nibblepoker.css"
+                    <a href="./css/nibblepoker.css"
                        title="Download the full stylesheet"
                        class="a-hidden"
                        download>
@@ -93,7 +95,7 @@ global $root_path;
             <tr>
                 <td>Debugger</td>
                 <td>
-                    <a href="/css/debugger.min.css"
+                    <a href="./css/debugger.min.css"
                        title="Download the minified debugging stylesheet"
                        class="a-hidden"
                        download>
@@ -105,7 +107,7 @@ global $root_path;
                     </a>
                 </td>
                 <td>
-                    <a href="/css/debugger.css"
+                    <a href="./css/debugger.css"
                        title="Download the debugging stylesheet"
                        class="a-hidden"
                        download>

htdocs/parts/sidebar.php

@@ -8,9 +8,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 <nav id="sidebar" class="sidebar">
 
     <div class="p-m pt-l">
-        <a href="/" class="no-select">
+        <a href="#intro" class="no-select">
             <img class="logo-sidebar-v2"
-                 src="/img/logo-large-fluent-unshaded.svg"
+                 src="./img/logo-large-fluent-unshaded.svg"
                  alt="Website's logo"
                  draggable="false">
         </a>
@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <div class="p-xs px-m bt bkgd-grey t-size-11">
             <a class="a-hidden" href="#text-weights">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
+                    <i class="fad fa-text-height pr-xs t-half-muted"></i>Weights
                 </p>
             </a>
             <a class="a-hidden" href="#text-styles">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
+                    <i class="fad fa-italic pr-xs t-half-muted"></i>Styles
                 </p>
             </a>
             <a class="a-hidden" href="#text-alignment">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
+                    <i class="fad fa-text-width pr-xs t-half-muted"></i>Alignment
                 </p>
             </a>
             <a class="a-hidden" href="#text-modifiers">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
+                    <i class="fad fa-subscript pr-xs t-half-muted"></i>Modifiers
                 </p>
             </a>
             <a class="a-hidden" href="#text-links">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
+                    <i class="fad fa-link pr-xs t-half-muted"></i>Links
                 </p>
             </a>
             <a class="a-hidden" href="#text-misc">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
+                    <i class="fad fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
                 </p>
             </a>
 
@@ -54,12 +54,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
             <a class="a-hidden" href="#spacing">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
+                    <i class="fad fa-ellipsis pr-xs t-half-muted"></i>Spacing
                 </p>
             </a>
             <a class="a-hidden" href="#rounding">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
+                    <i class="fad fa-bezier-curve pr-xs t-half-muted"></i>Rounding
+                </p>
+            </a>
+            <a class="a-hidden" href="#core-borders">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fad fa-border-inner pr-xs t-half-muted"></i>Borders
                 </p>
             </a>
 
@@ -67,17 +72,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
             <a class="a-hidden" href="#lists-basic">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
+                    <i class="fad fa-list pr-xs t-half-muted"></i>Lists
                 </p>
             </a>
             <a class="a-hidden" href="#grids">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
+                    <i class="fad fa-table-cells-large pr-xs t-half-muted"></i>Grids
                 </p>
             </a>
             <a class="a-hidden" href="#tables-core">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
+                    <i class="fad fa-table pr-xs t-half-muted"></i>Tables
+                </p>
+            </a>
+            <a class="a-hidden" href="#core-inputs">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
                 </p>
             </a>
         </div>
@@ -88,22 +98,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <div class="p-xs px-m bt bkgd-grey t-size-11">
             <a class="a-hidden" href="#horizontal-rulers">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
+                    <i class="fad fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
                 </p>
             </a>
             <a class="a-hidden" href="#backgrounds">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
+                    <i class="fad fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
                 </p>
             </a>
             <a class="a-hidden" href="#buttons">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
+                    <i class="fad fa-stop pr-xs t-half-muted"></i>Buttons
                 </p>
             </a>
             <a class="a-hidden" href="#tables-site">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
+                    <i class="fad fa-table pr-xs t-half-muted"></i>Tables
                 </p>
             </a>
         </div>
@@ -112,11 +122,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <details class="by t-noselect" open>
         <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
         <div class="p-xs px-m bt bkgd-grey t-size-11">
-            <a class="a-hidden" href="#lists-composed">
+            <a class="a-hidden" href="#examples-inputs">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Composed
+                    <i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
                 </p>
             </a>
+            <!--<a class="a-hidden" href="#examples-cards">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
+                </p>
+            </a>-->
         </div>
     </details>
+
 </nav>

htdocs/parts/tables_site.php

@@ -1,53 +0,0 @@
-<?php
-// Making sure the file is included and not accessed directly.
-if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-    header('HTTP/1.1 403 Forbidden'); die();
-}
-?>
-
-<a id="tables-site"></a>
-<div class="p-xs b r-s bkgd-grid mt-m">
-    <h2 class="t-w-500 t-size-14">Tables
-        <i class="fa-solid fa-table f-right"></i>
-    </h2>
-</div>
-<section class="p-s">
-
-    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
-        ⚠️ These styles require a special workaround to work properly ⚠️
-    </div>
-
-    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
-    <div class="px-s">
-        <p class="mb-xxs">
-            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
-        </p>
-        <p class="mb-xs">
-            However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
-            Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
-            A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
-        </p>
-        <table class="table-stylish table-p-s border r-l">
-            <thead>
-                <th>Head 1</th>
-                <th>Head 2</th>
-            </thead>
-            <tbody>
-            <tr>
-                <td>Cell 1.1</td>
-                <td>Cell 1.2</td>
-            </tr>
-            <tr>
-                <td>Cell 2.1</td>
-                <td>Cell 2.2</td>
-            </tr>
-            </tbody>
-        </table>
-        <code class="d-block p-xxs border r-s mt-s">
-            table<b>.table-stylish.table-p-s.border.o-hidden</b><br>
-            &nbsp;&nbsp;thead>th>td*2<br>
-            &nbsp;&nbsp;tbody>tr*2>td*2
-        </code>
-    </div>
-
-</section>

htdocs/parts/text_misc.php

@@ -20,9 +20,14 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tbody>
         <tr>
             <td><p class="t-bold">No wrap</p></td>
-            <td><p class="t-nowrap">Cannot really be shown</p></td>
+            <td><p class="t-nowrap">Cannot really be demonstrated</p></td>
             <td><span class="code">.t-nowrap</span></td>
         </tr>
+        <tr>
+            <td><p class="t-bold">No Select</p></td>
+            <td><p class="t-noselect">Cannot be selected</p></td>
+            <td><span class="code">.t-noselect</span></td>
+        </tr>
         <tr>
             <td><p class="t-bold">Half muted</p></td>
             <td><p class="t-half-muted">Half muted</p></td>

htdocs/parts/text_styles.php

@@ -49,6 +49,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             <td><span class="code">.t-overline</span></td>
             <td><span class="t-muted">N/A</span></td>
         </tr>
+        <tr>
+            <td><p class="t-bold">Monospace</p></td>
+            <td><p class="t-monospace">monospace text</p></td>
+            <td><span class="code">.t-monospace</span></td>
+            <td><span class="t-muted">N/A</span></td>
+        </tr>
         </tbody>
     </table>
 </section>

readme.md

@@ -1,29 +1,6 @@
-# NibblePoker's CSS Theme (W.I.P.)
+# NibblePoker's CSS Theme
 A simple and minimalist CSS stylesheet used across all my websites and web-based applications.
 
-## Structure
-This stylesheet is composed of 4 major parts that all work together towards a common goal
-all the while staying independent and usable individually if you ever wished to.
-
-### External
-The *External* rules regroup every external CSS stylesheets that are included in this one.\
-Currently, [reset.css](https://meyerweb.com/eric/tools/css/reset/) is the only such stylesheet.
-
-**See:** [scss/external/](scss/external)
-
-### Core
-The *Core* rules define mostly universal and portable CSS rules and other utilities for text,
-spacing and whatnot. \
-Internally, they are defined after everything else in order to let them override rules
-applied to the custom elements and site-centric rules.
-
-**See:** [scss/core/](scss/core)
-
-### Site
-
-### Custom
-
-
 
 ## License
 The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)

scss/borders/border-colors.scss

@@ -1,6 +1,10 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Borders > Colors */
 
 .border, code, .code, kbd {
-	border-color: #{$color-border-surround};
+	border-color: #{$color-border-code};
 	
 	//&.b-light {
 	//	border: 1px solid #{$color-border-light};
@@ -14,7 +18,7 @@ code, .code, kbd {
 main {
 	.border {
 		border-color: #{$color-border-main};
-		
+
 		//&.b-light {
 		//	border: 1px solid #{$color-border-light};
 		//}

scss/borders/border-styles.scss

@@ -0,0 +1,23 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Borders > Styles */
+
+// TODO: Improve if per-side border styles are required.
+
+@mixin border-style-maker($style-key, $style-css-value) {
+	.border-#{$style-key}, .b-#{$style-key} {
+		border-style: #{$style-css-value};
+	}
+}
+
+@include border-style-maker("none", "none");
+@include border-style-maker("hidden", "hidden");
+@include border-style-maker("dotted", "dotted");
+@include border-style-maker("dashed", "dashed");
+@include border-style-maker("solid", "solid");
+@include border-style-maker("double", "double");
+@include border-style-maker("groove", "groove");
+@include border-style-maker("ridge", "ridge");
+@include border-style-maker("inset", "inset");
+@include border-style-maker("outset", "outset");

scss/borders/border-targeting.scss

@@ -0,0 +1,57 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Borders > Targeting */
+
+.b, .border {
+	border: 1px solid #{$color-border-default};
+}
+
+.bx {
+	border-left: 1px solid #{$color-border-default};
+	border-right: 1px solid #{$color-border-default};
+}
+
+.by {
+	border-top: 1px solid #{$color-border-default};
+	border-bottom: 1px solid #{$color-border-default};
+}
+
+@mixin border-maker-enable($side-key, $side-css-key) {
+	.b#{$side-key} {
+		border-#{$side-css-key}: 1px solid #{$color-border-default};
+	}
+}
+
+@include border-maker-enable("t", "top");
+@include border-maker-enable("b", "bottom");
+@include border-maker-enable("l", "left");
+@include border-maker-enable("r", "right");
+
+
+/* Borders > Disabling */
+
+.b-0 {
+	border: 0;
+}
+
+.bx-0 {
+	border-left: 0;
+	border-right: 0;
+}
+
+.by-0 {
+	border-top: 0;
+	border-bottom: 0;
+}
+
+@mixin border-maker-disable($side-key, $side-css-key) {
+	.b#{$side-key}-0 {
+		border-#{$side-css-key}: 0;
+	}
+}
+
+@include border-maker-disable("t", "top");
+@include border-maker-disable("b", "bottom");
+@include border-maker-disable("l", "left");
+@include border-maker-disable("r", "right");

scss/config.scss

@@ -1,23 +1,24 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Config > NibbleCSS */
 
 // Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
-// See: core/sizing.scss
+// See: core/utils-sizing.scss
 $add-px-sizing-rules: false;
 
 $nibblepoker-background-root: "./";
 
 // Toggles the inclusion of the ".bkgd-grid" background rules.
-// See: site/backgrounds.scss
+// See: site/elements-backgrounds.scss
 $include-grid-backgrounds: true;
 
 $use-b64-backgrounds: true;
 
 // Toggles the generation of any table cell padding rules.
-// See: core/table.scss
+// See: core/tables-modifiers.scss
 $generate-table-padding-rules: true;
 
 // Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
-// See: core/table.scss
+// See: core/tables-modifiers.scss
 $generate-table-header-cell-padding-rules: true;

scss/core/border.scss

@@ -1,64 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Borders */
-
-.b, .border {
-	border: 1px solid #{$color-border-all};
-}
-
-.b-0 {
-	border: 0;
-}
-
-@mixin border-maker($side-key, $side-css-key) {
-	.b#{$side-key} {
-		border-#{$side-css-key}: 1px solid #{$color-border-all};
-	}
-	.b#{$side-key}-0 {
-		border-#{$side-css-key}: 0;
-	}
-}
-
-@include border-maker("t", "top");
-@include border-maker("b", "bottom");
-@include border-maker("l", "left");
-@include border-maker("r", "right");
-
-.bx {
-	border-left: 1px solid #{$color-border-all};
-	border-right: 1px solid #{$color-border-all};
-}
-.bx-0 {
-	border-left: 0;
-	border-right: 0;
-}
-
-.by {
-	border-top: 1px solid #{$color-border-all};
-	border-bottom: 1px solid #{$color-border-all};
-}
-.by-0 {
-	border-top: 0;
-	border-bottom: 0;
-}
-
-//.border {
-//	border: 1px solid;
-//
-//	//&.b-light {
-//	//	border: 1px solid #{$color-border-light};
-//	//}
-//}
-
-//main {
-//	.border {
-//		border: 1px solid #{$color-border-main};
-//	}
-//}
-
-//* {
-//	.dark-mode & {
-//		border-color: #{$color-border-all};
-//	}
-//}
-

scss/core/core-grids.scss

@@ -1,5 +1,6 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Core > Grids */
 
 .grid, .d-grid {

scss/core/lists.scss

@@ -1,55 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Lists */
-
-ul {
-  &.l-bullets, &.list-bullets {
-    list-style-type: disc;
-  }
-}
-
-ol {
-  &.l-bullets, &.list-bullets {
-    list-style-type: decimal;
-  }
-}
-
-ul, ol {
-  &.l-bullet-inside, &.list-bullet-inside {
-    list-style-position: inside;
-  }
-  &.l-bullet-outside, &.list-bullet-outside {
-    list-style-position: outside;
-  }
-  &.l-bullet-manual, &.list-bullet-manual {
-    list-style-position: outside;
-    padding-left: 1.5rem;
-  }
-}
-
-ul, ol, li {
-  &.list-bullet-none, &.l-bullet-none {
-    list-style-type: none;
-  }
-  &.list-bullet-disc, &.l-bullet-disc {
-    list-style-type: disc;
-  }
-  &.list-bullet-square, &.l-bullet-square {
-    list-style-type: square;
-  }
-  &.list-bullet-decimal, &.l-bullet-decimal {
-    list-style-type: decimal;
-  }
-  &.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
-    list-style-type: decimal-leading-zero;
-  }
-  &.list-bullet-georgian, &.l-bullet-georgian {
-    list-style-type: georgian;
-  }
-  &.list-bullet-chinese, &.l-bullet-chinese {
-    list-style-type: trad-chinese-informal;
-  }
-  &.list-bullet-kannada, &.l-bullet-kannada {
-    list-style-type: kannada;
-  }
-}

scss/core/position.scss

@@ -1,7 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Positions */
-
-.p-relative {
-	position: relative;
-}

scss/core/text.scss

@@ -1,172 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Text */
-
-/* Core > Text > Headings */
-
-h1, h2, h3, h4, h5, h6 {
-	font-weight: #{$text-header-weight};
-}
-
-
-/* Core > Text > Sizes */
-
-// ".t-size-6", ".t-size-8", ..., "t-size-40"
-@for $_ from 3 through 20 {
-	$sizeKey: $_ * 2;
-	$sizeValue: $sizeKey / 10;
-	
-	.t-size-#{$sizeKey} {
-		font-size: #{$sizeValue}rem !important;
-	}
-}
-
-// Adding special odd values
-.t-size-11 {
-	font-size: 1.1rem !important;
-}
-.t-size-13 {
-	font-size: 1.3rem !important;
-}
-.t-size-15 {
-	font-size: 1.5rem !important;
-}
-.t-size-17 {
-	font-size: 1.7rem !important;
-}
-
-// Jumbo sizes
-// ".t-size-35" & ".t-size-40"
-@for $_ from 7 through 8 {
-	$size: $_ * 5;
-
-	.t-size-#{$size} {
-		font-size: #{$size / 10}rem !important;
-	}
-}
-
-
-/* Core > Text > Weights */
-
-.t-w-normal, .t-normal {
-	font-weight: normal !important;
-}
-b, .t-w-bold, .t-bold {
-	font-weight: bold !important;
-}
-.t-w-bolder, .t-bolder {
-	font-weight: bolder !important;
-}
-.t-w-lighter, .t-lighter {
-	font-weight: lighter !important;
-}
-
-// ".t-w-100", ".t-w-200", ..., ".t-w-900"
-@for $_ from 1 through 9 {
-	$size: $_ * 100;
-	
-	.t-w-#{$size} {
-		font-weight: #{$size} !important;
-	}
-}
-// /!\ Firefox moment /!\
-// * The ".t-w-200" to ".t-w-500" classes barely any effect on weight...
-
-
-/* Core > Text > Styles */
-
-i, .t-italic {
-	font-style: italic;
-}
-
-.t-oblique {
-	font-style: oblique;
-}
-
-u, .t-underline {
-	text-decoration: underline;
-}
-
-s, .t-strikethrough {
-	text-decoration: line-through;
-}
-
-.t-overline {
-	text-decoration: overline;
-}
-
-
-/* Core > Text > Alignment */
-
-.t-justify {
-	text-align: justify;
-}
-
-.t-center {
-	text-align: center;
-}
-
-.t-left {
-	text-align: left;
-}
-
-.t-right {
-	text-align: right;
-}
-
-.t-start {
-	text-align: start;
-}
-
-.t-end {
-	text-align: end;
-}
-
-
-/* Core > Text > Modifiers */
-
-.t-ucase {
-	text-transform: uppercase;
-}
-
-.t-lcase {
-	text-transform: lowercase;
-}
-
-.t-capitalize {
-	text-transform: capitalize;
-}
-
-
-/* Core > Text > Misc */
-
-.t-nowrap {
-	white-space: nowrap;
-	text-wrap: nowrap;
-}
-
-
-/* Core > Text > Helpers */
-
-.t-half-muted {
-	opacity: 65%;
-}
-
-.t-muted {
-	//@if $undefined-toggle-css-variables {
-	//	color: var(--color-white-muted);
-	//} @else {
-	//	color: #{$color-white-muted};
-	//}
-	//color: #A9A9Aa;
-	opacity: 50%;
-}
-
-.t-super-muted {
-	// Should be 35% TBH
-	opacity: 45%;
-}
-
-.t-noselect {
-	user-select: none;
-}

scss/defaults/defaults-backgrounds.scss

@@ -0,0 +1,20 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Defaults > Backgrounds */
+
+body {
+	background-color: #{$color-background-body};
+}
+
+// Can be overriden in `elements/elements-backgrounds.scss` for the grids.
+header, nav, footer {
+	background-color: #{$color-background-surround};
+}
+
+main {
+	background-color: #{$color-background-main};
+	
+	// FIXME: Adapt when sidebar is closed !
+	// FIXME: Move it to the proper layout file then !!!
+	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
+}

scss/defaults/defaults-code.scss

@@ -1,18 +1,22 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-code, .code, kbd {
+
+/* Defaults > Code */
+
+code, .code, kbd, .t-monospace {
 	font-family: Consolas, "Courier New", monospace;
 }
 
 // For large blocks
-code {
-
+//code { }
+.code, kbd, code {
+	background-color: #{$color-background-code};
 }
 
-// For spans
+// For inline spans
+// We're applying the equivalent of `.r-s.px-xs.px-s`
+// Kinda goes against the core ideas, but it would be annoying without it.
 .code, kbd {
-	background-color: #{$color-background-code};
-	
 	border: 1px solid;
 	
 	// Using '.r-s'
@@ -28,11 +32,15 @@ code {
 	background: rgba(0,0,0,0) !important;
 }
 
+// FIXME: Makes the inline block ugly !!!
 code, .code, .code-line {
-	line-height: 1.35;
+	line-height: 1.175;
 }
 
 // FIXME: Use a proper class !!!
 .code:not(code) {
-	padding: calc(#{$border-base-radius} * 0.625);
+	//padding: calc(#{$border-base-radius} * 0.625);
+	padding: calc(#{$border-base-radius} * 0.55);
+	padding-top: calc(#{$border-base-radius} * 0.25);
+	padding-bottom: calc(#{$border-base-radius} * 0.25);
 }

scss/defaults/defaults-fonts.scss

@@ -0,0 +1,9 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Fonts */
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

scss/defaults/defaults-images.scss

@@ -1,4 +1,7 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Images */
 
 .img-text {
 	height: 1em;

scss/defaults/defaults-inputs.scss

@@ -0,0 +1,206 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Inputs */
+
+/* Defaults > Inputs > Commons */
+
+button, input, textarea, select {
+    border: 0;
+
+    // Removing ugly-ass white glow when editing text-related inputs.
+    // Shit looks straight out of winforms in 2023...
+    outline: none;
+
+    color: #{$color-text-inputs};
+    background-color: #{$color-background-input};
+
+    &:not(.no-focus) {
+        &:focus {
+            box-shadow: 0 0 3px 0 #{$color-glow-input};
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: #{$color-background-input-disabled} !important;
+    }
+}
+
+label {
+    cursor: pointer;
+    user-select: none;
+}
+
+
+/* Defaults > Inputs > Checkbox & Radio */
+
+input[type=checkbox], input[type=radio] {
+    width: 1.65em;
+    height: 1.65em;
+    background-color: #{$color-background-input-unchecked};
+
+    &:checked {
+        background-color: #{$color-background-input-checked};
+    }
+
+    position: relative;
+    vertical-align: middle;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+    &:disabled {
+        &:before {
+            opacity: 60%;
+        }
+    }
+}
+input[type="checkbox"] + label, input[type="radio"] + label {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
+    cursor: not-allowed;
+    opacity: 60%;
+}
+
+
+/* Defaults > Inputs > Checkbox */
+
+input[type=checkbox] {
+    &.cb-pretty, &.checkbox-pretty {
+        text-align: center;
+        padding: 0;
+
+        &:before {
+            content: "✘";
+        }
+
+        &:checked {
+            &:before {
+                content: "✔";
+            }
+        }
+    }
+}
+
+
+/* Defaults > Inputs > Radio */
+
+input[type=radio] {
+    border-radius: 50%;
+
+    // Special fix required for standalone pages.
+    // This rule somehow gets ignored if the stylesheet is placed in the DOM.
+    // Even tho it is present in reset.css and if it get marked as important...
+    &:before {
+        box-sizing: border-box;
+    }
+
+    &.radio-solid, &.radio-3d {
+        text-align: center;
+        padding: 0;
+
+        &:before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+            height: 60%;
+            border-radius: 50%;
+            background-color: transparent;
+            border-color: white;
+        }
+
+        &:checked {
+            &:before {
+                background-color: white;
+            }
+        }
+    }
+
+    &.radio-solid {
+        &:before {
+            border-style: double;
+            border-width: 2px;
+        }
+    }
+
+    &.radio-3d {
+        &:before {
+            border-style: inset;
+            border-width: 2px;
+        }
+
+        &:checked {
+            &:before {
+                border-style: outset;
+            }
+        }
+    }
+
+    &.radio-unchecked-subtle {
+        &:not(:checked) {
+            &:before {
+                opacity: 50%;
+            }
+        }
+    }
+
+    &.radio-unchecked-dashed {
+        &:not(:checked) {
+            &:before {
+                opacity: 75%;
+                clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+            }
+        }
+    }
+}
+
+
+/* Defaults > Inputs > Buttons */
+
+button {
+    cursor: pointer;
+    background-color: #{$color-background-button};
+
+    &:hover {
+        background-color: #{$color-background-button-hover};
+    }
+
+    &.btn-primary {
+        background-color: #{$color-background-button-primary};
+
+        &:hover {
+            background-color: #{$color-background-button-primary-hover};
+        }
+    }
+
+    &.btn-success {
+        background-color: #{$color-background-button-success};
+
+        &:hover {
+            background-color: #{$color-background-button-success-hover};
+        }
+    }
+
+    &.btn-error {
+        background-color: #{$color-background-button-error};
+
+        &:hover {
+            background-color: #{$color-background-button-error-hover};
+        }
+    }
+
+    &.btn-warning {
+        background-color: #{$color-background-button-warning};
+
+        &:hover {
+            background-color: #{$color-background-button-warning-hover};
+        }
+    }
+}

scss/defaults/defaults-tables.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Tables */
+
+/* Tables > Defaults */
 
 .table-stylish {
 	border-collapse: separate;
@@ -11,18 +12,18 @@
 	}
 	
 	tr {
-		background-color: #{$color-background-table-dual};
+		background-color: #{$color-background-table-tr-alt};
 	}
 	
 	tr:nth-child(2n), th {
-		background-color: #{$color-background-table-main};
+		background-color: #{$color-background-table-tr-main};
 	}
 	
 	td:not(:last-of-type), th:not(:last-of-type) {
-		border-right: 1.5px solid #{$color-table-border};
+		border-right: 1.5px solid #{$color-border-table};
 	}
 
 	tr:not(:last-of-type) td, th {
-		border-bottom: 1.5px solid #{$color-table-border};
+		border-bottom: 1.5px solid #{$color-border-table};
 	}
 }

scss/defaults/text/defaults-text-basics.scss

@@ -0,0 +1,61 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Text > Basics */
+
+* {
+	color: #{$color-text-generic};
+}
+
+nav, footer, header, .bkgd-grid {
+	* {
+		color: #{$color-text-surround};
+	}
+}
+
+p {
+	line-height: 1.2;
+}
+
+.t-logo-text {
+	font-size: 1.775em;
+	line-height: 1;
+}
+
+/* Site > Text > Targeted Rules > Sidebar */
+// Special rules for the sidebar and FontAwesome icons
+
+.sidebar-entry {
+	i {
+		width: 1.9rem !important;
+		// Required to prevent a size flicker when hiding/showing the sidebar.
+		// The about link is the most visible one.
+		min-width: 1.9rem !important;
+	}
+	
+	// Preventing a subtle line break when hiding/showing the sidebar.
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	
+	// Doesn't work, even with hyper-specific parent selectors...
+	//> i, > i:hover {
+	//	text-decoration: none !important;
+	//}
+}
+
+/* Site > Text > Targeted Rules > Headings */
+
+// And now for the headings, the exceptions keep popping up :,)
+// TODO: Add a simple and nicer divider.
+.heading-main {
+	> h2, > h3, >h4 {
+		> i {
+			//margin-left: 0.25rem;
+			margin-right: 0.4rem;
+			padding-right: 0.1rem;
+			width: 1.75rem !important;
+			text-align: center;
+		}
+	}
+}

scss/defaults/text/defaults-text-links.scss

@@ -0,0 +1,91 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Text > Links */
+
+a, .a {
+    // Base
+    text-decoration: underline;
+    color: #{$color-text-link};
+
+    & * {
+        color: #{$color-text-link};
+    }
+
+    &:hover {
+        color: #{$color-text-link-hover};
+        cursor: pointer;
+
+        & * {
+            color: #{$color-text-link-hover};
+            text-decoration: underline;
+        }
+    }
+
+    // Special case for buttons
+    //&.casper-link, &.button-link, &.text-link {
+    &.a-bland {
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;  // Only really applies to content listing entries...
+            & * {
+                text-decoration: none;
+            }
+        }
+    }
+
+    // Bland links
+    //&.casper-link, &.bland-link {
+    &.a-hidden {
+        text-decoration: none;
+        color: #{$color-text-generic};
+
+        & * {
+            color: #{$color-text-generic};
+        }
+
+        &:hover {
+            text-decoration: underline;
+            //color: #{$color-text-link-hover};
+            color: #{$color-text-generic};
+
+            & * {
+                //color: #{$color-text-link-hover};
+                color: #{$color-text-generic};
+            }
+
+            // FIXME: Not working, big F
+            //i {
+            //	text-decoration: none !important;
+            //}
+        }
+    }
+}
+
+nav, footer, header {
+    a, .a {
+        color: #{$color-text-surround-link};
+        & * {
+            color: #{$color-text-surround-link};
+        }
+        &:hover {
+            color: #{$color-text-surround-link-hover};
+            & * {
+                color: #{$color-text-surround-link-hover};
+            }
+        }
+        &.a-hidden {
+            text-decoration: none;
+            color: #{$color-text-surround};
+            & * {
+                color: #{$color-text-surround};
+            }
+            &:hover {
+                color: #{$color-text-surround-link-hover};
+                & * {
+                    color: #{$color-text-surround-link-hover};
+                }
+            }
+        }
+    }
+}

scss/defaults/text/defaults-text-weights.scss

@@ -0,0 +1,10 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Text > Weights */
+
+@if $text-weight-header != -1 {
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: #{$text-weight-header};
+    }
+}

scss/elements/elements-backgrounds.scss

@@ -0,0 +1,95 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Elements > Backgrounds */
+
+.bkgd-darkest {
+	background: $color-background-gray-darkest;
+}
+
+.bkgd-dark {
+	background: $color-background-gray-dark;
+}
+
+.bkgd-grey, .bkgd-gray {
+	background: $color-background-gray-medium;
+}
+
+.bkgd-light {
+	background: $color-background-gray-light;
+}
+
+.bkgd-lightest {
+	background: $color-background-gray-lightest;
+}
+
+@if($include-grid-backgrounds) {
+	// The element rules override rules in `defaults-elements-backgrounds.scss ~94`
+	.bkgd-grid10, .bkgd-surround, header, nav, footer {
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
+		}
+	}
+
+	.bkgd-grid20 {
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
+		}
+	}
+
+	.bkgd-grid30 {
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
+		}
+	}
+
+	.bkgd-grid40, .bkgd-grid {
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
+		}
+	}
+}
+
+.bkgd-transparent {
+	background: rgba(0, 0, 0, 0);
+}
+
+.bkgd-blue {
+	background-color: #{$color-background-blue};
+}
+
+.bkgd-blue-light {
+	background-color: #{$color-background-blue-light};
+}
+
+.bkgd-green {
+	background-color: #{$color-background-green};
+}
+
+.bkgd-green-light {
+	background-color: #{$color-background-green-light};
+}
+
+.bkgd-red {
+	background-color: #{$color-background-red};
+}
+
+.bkgd-red-light {
+	background-color: #{$color-background-red-light};
+}
+
+.bkgd-orange {
+	background-color: #{$color-background-orange};
+}
+
+.bkgd-orange-light {
+	background-color: #{$color-background-orange-light};
+}

scss/elements/elements-hr.scss

@@ -1,9 +1,10 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Horizontal Rule */
+
+/* Elements > Horizontal Rule */
 
 hr {
-	border-color: #{$color-border-all};
+	border-color: #{$color-border-hr};
 
 	&.subtle, &.hr-subtle {
 		//background-color: rgba(0,0,0,0) !important;
@@ -41,7 +42,7 @@ hr {
 			content: '\002702';
 			display: inline-block;
 			position: relative;
-			color: #{$color-border-all};
+			color: #{$color-border-hr};
 			font-size: 18px;
 			top: -8px;
 			left: 40px;

scss/elements/elements-lists.scss

@@ -0,0 +1,64 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Lists */
+
+ul {
+    &.l-bullets, &.list-bullets {
+        list-style-type: disc;
+    }
+}
+
+ol {
+    &.l-bullets, &.list-bullets {
+        list-style-type: decimal;
+    }
+}
+
+ul, ol {
+    &.l-bullet-inside, &.list-bullet-inside {
+        list-style-position: inside;
+    }
+
+    &.l-bullet-outside, &.list-bullet-outside {
+        list-style-position: outside;
+    }
+
+    &.l-bullet-manual, &.list-bullet-manual {
+        list-style-position: outside;
+        padding-left: 1.5rem;
+    }
+}
+
+ul, ol, li {
+    &.list-bullet-none, &.l-bullet-none {
+        list-style-type: none;
+    }
+
+    &.list-bullet-disc, &.l-bullet-disc {
+        list-style-type: disc;
+    }
+
+    &.list-bullet-square, &.l-bullet-square {
+        list-style-type: square;
+    }
+
+    &.list-bullet-decimal, &.l-bullet-decimal {
+        list-style-type: decimal;
+    }
+
+    &.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
+        list-style-type: decimal-leading-zero;
+    }
+
+    &.list-bullet-georgian, &.l-bullet-georgian {
+        list-style-type: georgian;
+    }
+
+    &.list-bullet-chinese, &.l-bullet-chinese {
+        list-style-type: trad-chinese-informal;
+    }
+
+    &.list-bullet-kannada, &.l-bullet-kannada {
+        list-style-type: kannada;
+    }
+}

scss/elements/elements-scrollbar.scss

@@ -1,6 +1,7 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Scrollbars */
+
+/* Elements > Scrollbars */
 
 //@media (min-width: 769px) {
 *::-webkit-scrollbar {
@@ -10,11 +11,11 @@
 }
 
 *::-webkit-scrollbar-track:vertical {
-	border-left: 1px solid #{$color-scrollbar-border};
+	border-left: 1px solid #{$color-border-scrollbar};
 }
 
 /**::-webkit-scrollbar-track:horizontal {
-	border-top: 1px solid #{$color-scrollbar-border};
+	border-top: 1px solid #{$color-border-scrollbar};
 }*/
 
 *::-webkit-scrollbar-thumb {

scss/elements/elements-video.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Video */
 
-// FIXME: Does not respect the core tenets !
+/* Elements > Video */
+
 video {
 	width: 100% !important;
 	height: auto !important;

scss/elements/elements-wedge.scss

@@ -1,13 +1,13 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
 /* Custom Elements > Wedge */
 
-wedge, .wedge {
+.wedge {
 	position: absolute;
 	//top: 0;
 	//right: 0;
 	
-	color: #{$color-text-regular-normal};
+	color: #{$color-text-generic};
 	background-color: #{$color-background-button};
 	
 	user-select: none;
@@ -25,7 +25,7 @@ wedge, .wedge {
 	}
 	
 	&.wedge-shadow {
-		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+		box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
 	}
 	
 	&.primary {

scss/extra/extra-np-content.scss

@@ -1,4 +1,8 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Extras > NP Website Content */
+// Overrides all other rules since this style is fixed.
 
 .content-search-entry {
 	min-height: #{$content-search-image-size};

scss/extra/extra-splide.scss

@@ -1,5 +1,6 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Extras > Splide */
 
 // Zoom-in effect for image galleries

scss/fixes/fixes-buttons.scss

@@ -0,0 +1,9 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Fixes > Buttons */
+
+// Ugly fix for download buttons
+button + button, .button-link + .button-link > button {
+    margin-left: 0.75rem;
+}

scss/fixes/fixes-mobile.scss

@@ -1,6 +1,7 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Fixes > Mobile */
+
+/* Fixes > Mobile */
 
 @media only screen and (max-width: 768px) {
 	// Overrides the ".p-l" class used on "main".
@@ -8,12 +9,8 @@
 		padding: calc(#{$margin-base-size} * 0.5) !important;
 	}
 	
-	// Overrides a style in "site/content.scss".
+	// Overrides a style in "site/extra-np-content.scss".
 	.content-search-entry > p {
 		width: 100% !important;
 	}
-	
-	.mobile-hide {
-		display: none;
-	}
 }

scss/inputs/inputs-langs.scss

@@ -0,0 +1,34 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Inputs > Lang Selector */
+
+#lang-selector {
+    position: relative;
+    white-space: nowrap;
+
+    > summary {
+        cursor: pointer;
+        list-style: none;
+        user-select: none;
+    }
+
+    > div {
+        position: absolute;
+        z-index: #{$z-index-lang-dropdown};
+        top: 2rem;
+        right: 0;
+        min-width: 100%;
+
+        // Visibility transition
+        //height: 0;
+        //transition: height 0.4s;
+        //transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
+    }
+
+    // TODO: Maybe force it to be visible when closes ?
+
+    //&[open] > div {
+    //	height: auto;
+    //}
+}

scss/inputs/inputs-textarea.scss

@@ -0,0 +1,20 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Inputs > Text Area */
+
+.ta-resize {
+    resize: both;
+}
+
+.ta-resize-h {
+    resize: horizontal;
+}
+
+.ta-resize-v {
+    resize: vertical;
+}
+
+.ta-resize-none {
+    resize: none;
+}

scss/layouts/layout_commons.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Layouts */
+/* Layouts */
 
-/* Site > Layouts > Commons */
+/* Layouts > Commons */
 
 html, body {
 	// Do not use 100vh, it includes the search bar  !

scss/layouts/layout_generic.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Layouts > Generic */
+/* Layouts > Generic */
 
-/* Site > Layouts > Generic > Main Grid */
+/* Layouts > Generic > Main Grid */
 
 body.layout-generic {
 	display: grid;
@@ -51,13 +51,13 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Mobile Fixes */
+/* Layouts > Generic > Mobile Fixes */
 
 @media only screen and (max-width: 768px) {
 	body.layout-generic {
 		& > nav {
 			//border-right: 1px solid #{$color-border-all};
-			border-right: 1px solid #{$color-border-main};
+			border-right: 1px solid #{$color-border-nav};
 		}
 		
 		& > header {
@@ -72,7 +72,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Sidebar */
+/* Layouts > Generic > Sidebar */
 
 body.layout-generic {
 	.sidebar {
@@ -96,7 +96,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
+/* Layouts > Generic > Sidebar > Mobile Fixes */
 
 // Inverting the sidebar's states for mobile devices
 @media only screen and (max-width: 768px) {
@@ -128,7 +128,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Main Extras */
+/* Layouts > Generic > Main Extras */
 
 @media only screen and (max-width: 768px) {
 	body.layout-generic {
@@ -151,7 +151,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Transitions */
+/* Layouts > Generic > Transitions */
 
 body.layout-generic {
 	main, .sidebar {

scss/nibblepoker.scss

@@ -2,75 +2,99 @@
  * -----------------------------------------------------------------------------
  * NibblePoker CSS Theme
  * -----------------------------------------------------------------------------
- * Author: Herwin Bozet
+ * Author: Herwin Bozet (@NibblePoker)
  * License: CC0 1.0 (Public Domain)
- * Source: ???
+ * Sources:
+ *   - https://github.com/aziascreations/CSS-NibblePoker/
+ *   - https://git.nibblepoker.lu/aziascreations/CSS-NibblePoker
  * -----------------------------------------------------------------------------
  */
 
+/* Externals */
+@import 'externals/reset';  // Doesn't reset checkboxes !
+
+
 /* Config */
 @import 'config';
 
-/* Externals */
-@import 'external/reset';  // Doesn't reset checkboxes !
-
 /* Variables */
 @import 'variables';
 
-/* Site */
 
-/* Site > Layouts */
-@import 'site/layouts/commons';  // Sets up the page's default sizing rules
-@import 'site/layouts/generic';  // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
+/* Layouts */
+@import 'layouts/layout_commons';  // Sets up the page's default sizing rules
+@import 'layouts/layout_generic';  // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
 
-/* Site > Styles */
-@import 'site/base';  // Needs a rework, Defines some basic common broad styling/coloring rules
-@import 'site/text';  // Has some hardcoded width for font-awesome icons in sidebar and headings
 
-/* Site > Elements */
-@import 'site/hr';         // Custom horizontal rulers
-@import 'site/scrollbar';  // Personalizes the scrollbars (Horizontal is still unfinished !)
-@import 'site/input';      // Has ugly fix for download buttons
-@import 'site/table';      // Uses copied paddings for cells & ugly rounding fix
-@import 'site/code';       // Uses forced borders, roundings and paddings
-@import 'site/video';
+/* Defaults */
+/* Defaults > Text */
+@import 'defaults/text/defaults-text-basics';
+@import 'defaults/text/defaults-text-links';
+@import 'defaults/text/defaults-text-weights';
 
-/* Site > Misc */
-@import 'site/borders';  // Applies the colors mostly, the size are in the elements !
-@import 'site/backgrounds';
+@import 'defaults/defaults-backgrounds';  // Defines some basic styling/coloring rules
+@import 'defaults/defaults-fonts';
+@import 'defaults/defaults-images';
+@import 'defaults/defaults-inputs';  // Has ugly fix for download buttons
+@import 'defaults/defaults-code';    // Uses forced borders, roundings and paddings
+@import 'defaults/defaults-tables';  // Uses copied paddings for cells & ugly rounding fix
 
-/* Site > Fixes */
-@import 'site/mobile';  // Has !important overrides for obvious reasons
-
-/* Site > Unsorted */
-@import 'site/image';
-@import 'site/wedge';
-@import 'site/content';  // Uses fixed sizes and floats
-@import 'site/modal';
 
 /* Core */
-@import 'core/border'; // Border rules (.border, .bt-0, ...)
-@import 'core/float';  // Floating rules (.f-right, ...)
-@import 'core/sizing'; // Rules for setting elements size (.w-full, ...)
-@import 'core/flex';   // /!\ Needs an overhaul !!!
-@import 'core/grid';   // /!\ Needs an overhaul !!!
-@import 'core/text';   // Text-related rules (.t-bold, t-ucase, t-size-14, ...)
-//@import 'core/containers';  // Cannot remember why it was used, if ever
-@import 'core/display';   // /!\ Needs improvement !!!
-@import 'core/position';   // /!\ Needs improvement !!!
-@import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
-@import 'core/lists';
-@import 'core/table';
+@import 'core/core-grids';  // /!\ Needs an overhaul, especially for mobile !!!
 
-/* Core > Rounding */
-@import 'core/rounding/global';
-@import 'core/rounding/sided';
-@import 'core/rounding/corner';
+/* Elements */
+@import 'elements/elements-backgrounds';
+@import 'elements/elements-lists';
+@import 'elements/elements-wedge';  // Wedges shown in code blocks and other notifications.
+@import 'elements/elements-hr';  // Custom horizontal rulers
+@import 'elements/elements-video';
+@import 'elements/elements-scrollbar';  // /!\ Horizontal unfinished, and thy look bad in some contexts /!\
 
-/* Core > Spacing */
-@import 'core/spacing/global';
-@import 'core/spacing/axis';
-@import 'core/spacing/sided';
+/* Inputs */
+@import 'inputs/inputs-langs';
+@import 'inputs/inputs-textarea';
+
+/* Tables */
+@import 'tables/tables-modifiers';
+
+/* Borders */
+@import 'borders/border-targeting';  // Border rules (.border, .bt-0, ...)
+@import 'borders/border-styles';     // Types of borders
+@import 'borders/border-colors';     // Default colors for some elements (Overrides global color in border-targeting)
+
+/* Text */
+@import 'text/text-sizes';
+@import 'text/text-weights';
+@import 'text/text-alignment';
+@import 'text/text-styling';
+@import 'text/text-misc';
+
+/* Spacing */
+@import 'spacing/spacing_global';
+@import 'spacing/spacing_axis';
+@import 'spacing/spacing_sided';
+
+/* Rounding */
+@import 'rounding/rounding_global';
+@import 'rounding/rounding_sided';
+@import 'rounding/rounding_corner';
+
+/* Overrides */
+@import 'utils/utils-float';     // Floating rules (.f-right, ...)
+@import 'utils/utils-cursor';
+@import 'utils/utils-text';
+@import 'utils/utils-display';   // /!\ Needs more classes !
+@import 'utils/utils-overflow';  // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
+@import 'utils/utils-flex';      // /!\ Needs an overhaul !!!
+@import 'utils/utils-sizing';    // Rules for setting elements size (.w-full, ...)
+@import 'utils/utils-position';
+@import 'utils/utils-mobile';
 
 /* Extras */
-@import 'site/splide';
+@import 'extra/extra-splide';  // Picture gallery
+@import 'extra/extra-np-content';  // Uses fixed sizes and floats
+
+/* Fixes */
+@import 'fixes/fixes-mobile';  // Hotfixes for mobile-related issues
+@import 'fixes/fixes-buttons';  // Ugly fix for download buttons

scss/old/parts/theme_nibblepoker_v2.scss

@@ -0,0 +1,111 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+@use 'sass:color';
+
+
+// External palettes
+
+/* Variables > Palettes > Apollo */
+// https://lospec.com/palette-list/apollo
+$color-apollo-01: #253a5e;
+$color-apollo-02: #3c5e8b;
+$color-apollo-03: #4f8fba;
+$color-apollo-04: #73bed3;
+$color-apollo-05: #a4dddb;
+$color-apollo-07: #25562e;
+$color-apollo-08: #468232;
+$color-apollo-20: #884b2b;
+$color-apollo-21: #be772b;
+$color-apollo-26: #752438;
+$color-apollo-27: #a53030;
+$color-apollo-45: #ebede9;
+
+$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%);  // Primary button
+$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%);  // Primary button hover
+
+
+// Flat colors
+$color-background-gray-light: #24252B;
+$color-background-gray-dark: #1D1E22;
+$color-background-gray-medium: mix($color-background-gray-light, $color-background-gray-dark, 50%);
+
+$color-background-blue: #{$color-apollo-custom-30};
+$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
+
+$color-background-green: #{$color-apollo-07};
+$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
+
+$color-background-red: #{$color-apollo-26};
+$color-background-red-light: #{$color-apollo-27};
+
+$color-background-orange: #{$color-apollo-20};
+$color-background-orange-light: #{$color-apollo-21};
+
+
+// Body parts
+$color-background-body: $color-background-gray-dark;
+
+$color-background-main: $color-background-gray-medium;
+$color-background-surround: $color-background-gray-dark;
+
+$color-background-grid-image: $color-background-surround;
+
+
+// Cards & Other elements
+$color-background-heading: $color-background-surround;
+$color-background-code: $color-background-surround;
+
+$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
+$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
+
+$color-background-input: $color-background-surround;
+$color-background-input-checked: $color-apollo-08;
+$color-background-input-unchecked: $color-apollo-27;
+$color-background-input-disabled: $color-background-surround;
+
+$color-background-button: #2d2f36;
+$color-background-button-hover: #373841;
+
+$color-background-button-primary: $color-background-blue;
+$color-background-button-primary-hover: $color-background-blue-light;
+
+$color-background-button-success: $color-background-green;
+$color-background-button-success-hover: $color-background-green-light;
+
+$color-background-button-error: $color-background-red;
+$color-background-button-error-hover: $color-background-red-light;
+
+$color-background-button-warning: $color-background-orange;
+$color-background-button-warning-hover: $color-background-orange-light;
+
+
+// Borders
+$color-border-light: #141417;
+$color-border-normal: #141417;
+$color-border-dark: #141417;
+
+$color-border-default: $color-border-normal;
+
+$color-border-main: $color-border-normal;
+$color-border-nav: $color-border-normal;
+$color-border-hr: $color-border-normal;
+$color-border-scrollbar: $color-border-normal;
+$color-border-table: $color-border-normal;
+$color-border-code: $color-border-normal;
+
+
+// Text
+$color-text-generic: $color-apollo-45;
+$color-text-surround: $color-text-generic;
+$color-text-inputs: $color-text-generic;
+$color-text-muted: #{$color-text-generic}E0;
+$color-text-muted-super: #{$color-text-generic}C0;
+
+$color-text-link: #{$color-apollo-04};
+$color-text-link-hover: #{$color-apollo-05};
+
+$color-text-surround-link: #{$color-apollo-04};
+$color-text-surround-link-hover: #{$color-apollo-05};
+
+
+// Specials
+$color-glow-input: $color-apollo-02;

scss/old/parts/theme_nibblepoker_v3.scss

@@ -0,0 +1,237 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+@use 'sass:color';
+
+
+// External palettes
+
+/* Variables > Palettes > Apollo */
+// https://lospec.com/palette-list/apollo
+$color-apollo-00: #172038;
+$color-apollo-01: #253a5e;
+$color-apollo-02: #3c5e8b;
+$color-apollo-03: #4f8fba;
+$color-apollo-04: #73bed3;
+$color-apollo-05: #a4dddb;
+$color-apollo-06: #19332d;
+$color-apollo-07: #25562e;
+$color-apollo-08: #468232;
+$color-apollo-09: #75a743;
+$color-apollo-10: #a8ca58;
+$color-apollo-11: #d0da91;
+$color-apollo-12: #4d2b32;
+$color-apollo-13: #7a4841;
+$color-apollo-14: #ad7757;
+$color-apollo-15: #c09473;
+$color-apollo-16: #d7b594;
+$color-apollo-17: #e7d5b3;
+$color-apollo-18: #341c27;
+$color-apollo-19: #602c2c;
+$color-apollo-20: #884b2b;
+$color-apollo-21: #be772b;
+$color-apollo-22: #de9e41;
+$color-apollo-23: #e8c170;
+$color-apollo-24: #241527;
+$color-apollo-25: #411d31;
+$color-apollo-26: #752438;
+$color-apollo-27: #a53030;
+$color-apollo-28: #cf573c;
+$color-apollo-29: #da863e;
+$color-apollo-30: #1e1d39;
+$color-apollo-31: #402751;
+$color-apollo-32: #7a367b;
+$color-apollo-33: #a23e8c;
+$color-apollo-34: #c65197;
+$color-apollo-35: #df84a5;
+$color-apollo-36: #090a14;
+$color-apollo-37: #10141f;
+$color-apollo-38: #151d28;
+$color-apollo-39: #202e37;
+$color-apollo-40: #394a50;
+$color-apollo-41: #577277;
+$color-apollo-42: #819796;
+$color-apollo-43: #a8b5b2;
+$color-apollo-44: #c7cfcc;
+$color-apollo-45: #ebede9;
+
+// https://lospec.com/palette-list/endesga-32
+
+// https://lospec.com/palette-list/endesga-64
+$color-endesga64-00: #ff0040;
+$color-endesga64-01: #131313;
+$color-endesga64-02: #1b1b1b;
+$color-endesga64-03: #272727;
+$color-endesga64-04: #3d3d3d;
+$color-endesga64-05: #5d5d5d;
+$color-endesga64-06: #858585;
+$color-endesga64-07: #b4b4b4;
+$color-endesga64-08: #ffffff;
+$color-endesga64-09: #c7cfdd;
+$color-endesga64-10: #92a1b9;
+$color-endesga64-11: #657392;
+$color-endesga64-12: #424c6e;
+$color-endesga64-13: #2a2f4e;
+$color-endesga64-14: #1a1932;
+$color-endesga64-15: #0e071b;
+$color-endesga64-16: #1c121c;
+$color-endesga64-17: #391f21;
+$color-endesga64-18: #5d2c28;
+$color-endesga64-19: #8a4836;
+$color-endesga64-20: #bf6f4a;
+$color-endesga64-21: #e69c69;
+$color-endesga64-22: #f6ca9f;
+$color-endesga64-23: #f9e6cf;
+$color-endesga64-24: #edab50;
+$color-endesga64-25: #e07438;
+$color-endesga64-26: #c64524;
+$color-endesga64-27: #8e251d;
+$color-endesga64-28: #ff5000;
+$color-endesga64-29: #ed7614;
+$color-endesga64-30: #ffa214;
+$color-endesga64-31: #ffc825;
+$color-endesga64-32: #ffeb57;
+$color-endesga64-33: #d3fc7e;
+$color-endesga64-34: #99e65f;
+$color-endesga64-35: #5ac54f;
+$color-endesga64-36: #33984b;
+$color-endesga64-37: #1e6f50;
+$color-endesga64-38: #134c4c;
+$color-endesga64-39: #0c2e44;
+$color-endesga64-40: #00396d;
+$color-endesga64-41: #0069aa;
+$color-endesga64-42: #0098dc;
+$color-endesga64-43: #00cdf9;
+$color-endesga64-44: #0cf1ff;
+$color-endesga64-45: #94fdff;
+$color-endesga64-46: #fdd2ed;
+$color-endesga64-47: #f389f5;
+$color-endesga64-48: #db3ffd;
+$color-endesga64-49: #7a09fa;
+$color-endesga64-50: #3003d9;
+$color-endesga64-51: #0c0293;
+$color-endesga64-52: #03193f;
+$color-endesga64-53: #3b1443;
+$color-endesga64-54: #622461;
+$color-endesga64-55: #93388f;
+$color-endesga64-56: #ca52c9;
+$color-endesga64-57: #c85086;
+$color-endesga64-58: #f68187;
+$color-endesga64-59: #f5555d;
+$color-endesga64-60: #ea323c;
+$color-endesga64-61: #c42430;
+$color-endesga64-62: #891e2b;
+$color-endesga64-63: #571c27;
+
+$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%);  // Primary button
+$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%);  // Primary button hover
+
+
+
+
+// Flat colors
+
+//$color-background-gray-light: #404040;
+//$color-background-gray-idk01: #2e2e2e;
+//$color-background-gray-medium: mix(#232323, #2e2e2e, 33.3%);
+//$color-background-gray-dark: #232323;
+
+$color-background-gray-lightest: mix($color-endesga64-05, $color-endesga64-06, 50%);
+$color-background-gray-light: mix($color-endesga64-04, $color-endesga64-05, 50%);
+$color-background-gray-lm: $color-endesga64-04;
+$color-background-gray-medium: mix($color-endesga64-03, $color-endesga64-04, 50%);
+$color-background-gray-md: $color-endesga64-03;
+$color-background-gray-dark: mix($color-endesga64-02, $color-endesga64-03, 50%);
+$color-background-gray-darkest: $color-endesga64-01;
+
+$color-background-light-10: #f7f7f7;
+$color-background-light-20: #c4c4c4;
+$color-background-light-30: #7f7f7f;
+
+$color-background-purple-10: #3E3546;
+$color-background-purple-20: #6B3E75;
+$color-background-purple-30: #905EA9;
+
+
+$color-background-blue: #{$color-apollo-custom-30};
+$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
+
+$color-background-green: #{$color-apollo-07};
+$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
+
+$color-background-red: #{$color-apollo-26};
+$color-background-red-light: #{$color-apollo-27};
+
+$color-background-orange: #{$color-apollo-20};
+$color-background-orange-light: #{$color-apollo-21};
+
+
+// Body parts
+$color-background-body: $color-background-gray-dark;
+
+$color-background-main: $color-background-gray-medium;
+$color-background-surround: $color-background-gray-dark;
+
+$color-background-grid-image: $color-background-surround;
+
+
+// Cards & Other elements
+$color-background-heading: $color-background-surround;
+$color-background-code: $color-background-surround;
+
+$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
+$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
+
+$color-background-input: $color-background-surround;
+$color-background-input-checked: $color-apollo-08;
+$color-background-input-unchecked: $color-apollo-27;
+$color-background-input-disabled: $color-background-surround;
+
+//$color-background-button: #2d2f36;
+//$color-background-button-hover: #373841;
+
+$color-background-button: $color-background-gray-md;
+$color-background-button-hover: $color-background-gray-lm;
+
+$color-background-button-primary: $color-background-blue;
+$color-background-button-primary-hover: $color-background-blue-light;
+
+$color-background-button-success: $color-background-green;
+$color-background-button-success-hover: $color-background-green-light;
+
+$color-background-button-error: $color-background-red;
+$color-background-button-error-hover: $color-background-red-light;
+
+$color-background-button-warning: $color-background-orange;
+$color-background-button-warning-hover: $color-background-orange-light;
+
+
+// Borders
+$color-border-light: $color-background-gray-darkest;
+$color-border-normal: $color-background-gray-darkest;
+$color-border-dark: $color-background-gray-darkest;
+
+$color-border-default: $color-border-normal;
+
+$color-border-main: $color-border-normal;
+$color-border-nav: $color-border-normal;
+$color-border-hr: $color-border-normal;
+$color-border-scrollbar: $color-border-normal;
+$color-border-table: $color-border-normal;
+$color-border-code: $color-border-normal;
+
+
+// Text
+$color-text-generic: $color-apollo-45;
+$color-text-surround: $color-text-generic;
+$color-text-inputs: $color-text-generic;
+$color-text-muted: #{$color-text-generic}E0;
+$color-text-muted-super: #{$color-text-generic}C0;
+
+$color-text-link: #{$color-apollo-04};
+$color-text-link-hover: #{$color-apollo-05};
+
+$color-text-surround-link: #{$color-apollo-04};
+$color-text-surround-link-hover: #{$color-apollo-05};
+
+
+// Specials
+$color-glow-input: $color-apollo-02;

scss/old/parts/theme_unset.scss

@@ -0,0 +1,91 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+@use 'sass:color';
+
+// The only goal for this file is to set all colors to `deeppink`.
+// Other theme files should override all the colors variables defined in here.
+
+
+// Flat colors
+$color-background-gray-light: deeppink;
+$color-background-gray-medium: deeppink;
+$color-background-gray-dark: deeppink;
+
+$color-background-blue: deeppink;
+$color-background-blue-light: deeppink;
+
+$color-background-green: deeppink;
+$color-background-green-light: deeppink;
+
+$color-background-red: deeppink;
+$color-background-red-light: deeppink;
+
+$color-background-orange: deeppink;
+$color-background-orange-light: deeppink;
+
+
+// Body parts
+$color-background-main: deeppink;
+$color-background-surround: deeppink;
+$color-background-body: deeppink;
+
+// Cards & Other elements
+$color-background-heading: deeppink;
+$color-background-code: deeppink;
+
+$color-background-table-tr-main: deeppink;
+$color-background-table-tr-alt: deeppink;
+
+$color-background-input: deeppink;
+$color-background-input-checked: deeppink;
+$color-background-input-unchecked: deeppink;
+$color-background-input-disabled: deeppink;
+
+$color-background-button: deeppink;
+$color-background-button-hover: deeppink;
+
+$color-background-button-primary: deeppink;
+$color-background-button-primary-hover: deeppink;
+
+$color-background-button-success: deeppink;
+$color-background-button-success-hover: deeppink;
+
+$color-background-button-error: deeppink;
+$color-background-button-error-hover: deeppink;
+
+$color-background-button-warning: deeppink;
+$color-background-button-warning-hover: deeppink;
+
+$color-background-grid-image: deeppink;
+
+
+// Borders
+$color-border-light: #00EB6C;
+$color-border-normal: #00EB6C;
+$color-border-dark: #00EB6C;
+
+$color-border-default: #00EB6C;
+
+$color-border-main: #00EB6C;
+$color-border-nav: #00EB6C;
+$color-border-hr: #00EB6C;
+$color-border-scrollbar: #00EB6C;
+$color-border-table: #00EB6C;
+$color-border-code: #00EB6C;
+
+
+// Text
+$color-text-generic: #00EB6C;
+$color-text-surround: #00EB6C;
+$color-text-inputs: #00EB6C;
+$color-text-muted: #{$color-text-generic}E0;
+$color-text-muted-super: #{$color-text-generic}C0;
+
+$color-text-link: #00EB6C;
+$color-text-link-hover: #00EB6C;
+
+$color-text-surround-link: #00EB6C;
+$color-text-surround-link-hover: #00EB6C;
+
+
+// Specials
+$color-glow-input: yellow;

scss/old/trash/containers.scss

@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
 /* Core > Containers */
 

scss/old/trash/modal.scss

@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
 .modal {
 	position: absolute;

scss/old/trash/palettes.scss

@@ -0,0 +1,113 @@
+
+@use 'sass:color';
+
+/* Variables > Palettes > Apollo */
+// https://lospec.com/palette-list/apollo
+$color-apollo-00: #172038;
+$color-apollo-01: #253a5e;
+$color-apollo-02: #3c5e8b;
+$color-apollo-03: #4f8fba;
+$color-apollo-04: #73bed3;
+$color-apollo-05: #a4dddb;
+$color-apollo-06: #19332d;
+$color-apollo-07: #25562e;
+$color-apollo-08: #468232;
+$color-apollo-09: #75a743;
+$color-apollo-10: #a8ca58;
+$color-apollo-11: #d0da91;
+$color-apollo-12: #4d2b32;
+$color-apollo-13: #7a4841;
+$color-apollo-14: #ad7757;
+$color-apollo-15: #c09473;
+$color-apollo-16: #d7b594;
+$color-apollo-17: #e7d5b3;
+$color-apollo-18: #341c27;
+$color-apollo-19: #602c2c;
+$color-apollo-20: #884b2b;
+$color-apollo-21: #be772b;
+$color-apollo-22: #de9e41;
+$color-apollo-23: #e8c170;
+$color-apollo-24: #241527;
+$color-apollo-25: #411d31;
+$color-apollo-26: #752438;
+$color-apollo-27: #a53030;
+$color-apollo-28: #cf573c;
+$color-apollo-29: #da863e;
+$color-apollo-30: #1e1d39;
+$color-apollo-31: #402751;
+$color-apollo-32: #7a367b;
+$color-apollo-33: #a23e8c;
+$color-apollo-34: #c65197;
+$color-apollo-35: #df84a5;
+$color-apollo-36: #090a14;
+$color-apollo-37: #10141f;
+$color-apollo-38: #151d28;
+$color-apollo-39: #202e37;
+$color-apollo-40: #394a50;
+$color-apollo-41: #577277;
+$color-apollo-42: #819796;
+$color-apollo-43: #a8b5b2;
+$color-apollo-44: #c7cfcc;
+$color-apollo-45: #ebede9;
+
+$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
+
+$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
+$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
+$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
+$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
+
+$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
+$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
+
+$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
+$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
+$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
+$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
+
+$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
+
+$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
+
+$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%);  // Primary button
+$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%);  // Primary button hover
+
+/* Variables > Palettes > Material UI */
+// https://materialui.co/colors
+
+$color-material-blueGrey-50: #eceff1;
+$color-material-blueGrey-100: #cfd8dc;
+$color-material-blueGrey-200: #b0bec5;
+$color-material-blueGrey-300: #90a4ae;
+$color-material-blueGrey-400: #78909c;
+$color-material-blueGrey-500: #607d8b;
+$color-material-blueGrey-600: #546e7a;
+$color-material-blueGrey-700: #455a64;
+$color-material-blueGrey-800: #37474f;
+$color-material-blueGrey-900: #263238;
+
+$color-material-blueGrey-1000: #151D21;
+$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%);
+//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%);
+$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%);
+
+/* Variables > Palettes > WinUI 3 */
+
+$color-winui-00: #191919;
+$color-winui-01: #1D1D1D;
+$color-winui-02: #202020;
+$color-winui-03: #232323;
+$color-winui-04: #272727;
+$color-winui-05: #323232;
+$color-winui-06: #3E3E3E;
+
+// https://flatuicolors.com/palette/defo
+
+/* Variables > Palettes > Misc */
+
+//$color-test-01: mix(#7b6aa5, #000000, 33%);
+//$color-test-02: #007c7d;
+
+/* Variables > Colors Mappings */
+
+$color-unset: $color-apollo-34;

scss/rounding/rounding_corner.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Corner */
+
+/*  Rounding > Corner */
 @mixin corner-rounding-maker($size-key, $size-value) {
 	.rtl-#{$size-key} {
 		border-top-left-radius: #{$size-value};
@@ -17,7 +18,7 @@
 }
 
 
-/* Utilities > Rounding > Corner > Variable Sizes */
+/*  Rounding > Corner > Variable Sizes */
 @include corner-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include corner-rounding-maker("m", #{$border-base-radius});
@@ -25,6 +26,6 @@
 @include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Corner > Fixed Sizes */
+/*  Rounding > Corner > Fixed Sizes */
 @include corner-rounding-maker("0", 0);
 @include corner-rounding-maker("r", 50%);

scss/rounding/rounding_global.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Global */
+
+/*  Rounding > Global */
 @mixin global-rounding-maker($size-key, $size-value) {
 	//, .rounding-#{$size-key}
 	.r-#{$size-key} {
@@ -9,7 +10,7 @@
 }
 
 
-/* Utilities > Rounding > Global > Variable Sizes */
+/*  Rounding > Global > Variable Sizes */
 @include global-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include global-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include global-rounding-maker("m", #{$border-base-radius});
@@ -17,6 +18,6 @@
 @include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Global > Fixed Sizes */
+/*  Rounding > Global > Fixed Sizes */
 @include global-rounding-maker("0", 0);
 @include global-rounding-maker("r", 50%);

scss/rounding/rounding_sided.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Sided */
+
+/*  Rounding > Sided */
 @mixin sided-rounding-maker($size-key, $size-value) {
 	.rt-#{$size-key} {
 		border-top-left-radius: #{$size-value};
@@ -21,7 +22,7 @@
 }
 
 
-/* Utilities > Rounding > Sided > Variable Sizes */
+/*  Rounding > Sided > Variable Sizes */
 @include sided-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include sided-rounding-maker("m", #{$border-base-radius});
@@ -29,6 +30,6 @@
 @include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Sided > Fixed Sizes */
+/*  Rounding > Sided > Fixed Sizes */
 @include sided-rounding-maker("0", 0);
 @include sided-rounding-maker("r", 50%);

scss/site/backgrounds.scss

@@ -1,81 +0,0 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
-
-/* Site > Misc > Backgrounds */
-
-.bkgd-dark {
-	background: #{$color-background-main-headings};
-}
-
-.bkgd-grey, .bkgd-gray {
-	background: mix($color-background-main, $color-background-surround, 50%);
-}
-
-.bkgd-light {
-	background: $color-background-main;
-}
-
-@if($include-grid-backgrounds) {
-	// The element rules override rules in `base.scss ~94`
-	.bkgd-grid10, .bkgd-surround, header, nav, footer {
-		//background: #{$color-background-surround};
-		background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
-
-		//background:
-		//	#{$color-background-surround}
-		//	url("data:image/png;base64,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")
-		//	repeat scroll center center;
-	}
-
-	.bkgd-grid20 {
-		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
-		// FIXME: Fix the code using this class !!!
-		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
-	}
-
-	.bkgd-grid30 {
-		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
-	}
-
-	.bkgd-grid40, .bkgd-grid {
-		background: #{$color-background-surround}
-		url("data:image/png;base64,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") repeat scroll center center;
-
-		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
-	}
-}
-
-.bkgd-transparent {
-	background: rgba(0, 0, 0, 0);
-}
-
-.bkgd-blue {
-	background-color: #{$color-background-button-primary};
-}
-
-.bkgd-blue-light {
-	background-color: #{$color-background-button-primary-hover};
-}
-
-.bkgd-green {
-	background-color: #{$color-background-button-success};
-}
-
-.bkgd-green-light {
-	background-color: #{$color-background-button-success-hover};
-}
-
-.bkgd-red {
-	background-color: #{$color-background-button-error};
-}
-
-.bkgd-red-light {
-	background-color: #{$color-background-button-error-hover};
-}
-
-.bkgd-orange {
-	background-color: #{$color-background-button-warning};
-}
-
-.bkgd-orange-light {
-	background-color: #{$color-background-button-warning-hover};
-}

scss/site/base.scss

@@ -1,41 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Site > Styles > Base */
-
-/* Site > Styles > Base > Coloring & Fonts (TODO: Needs a small rework) */
-
-body {
-	background-color: #{$color-background-body};
-	
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-// Overridden by a rule in background.scss !
-header, nav, footer {
-	background-color: #{$color-background-surround};
-}
-
-main {
-	background-color: #{$color-background-main};
-	
-	// FIXME: Adapt when sidebar is closed !
-	// FIXME: Move it to the proper layout file then !!!
-	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
-}
-
-
-/* Site > Styles > Base > Trash */
-
-// FIXME: Move it out too !
-// Allowed for right-align in headings with 'ml-auto' instead of 'f-right' !
-/*.heading-main {
-	> h2, > h3, > h4 {
-		display: flex;
-		align-items: center;
-		justify-content: left;
-	}
-	&.heading-dyn-width-1 {
-		min-width: 75%;
-	}
-}*/

scss/site/input.scss

@@ -1,140 +0,0 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
-
-/* Site > Elements > Inputs */
-
-/* Site > Elements > Inputs > Commons */
-
-button, input, textarea, select {
-	border: 0;
-	
-	// Removing ugly-ass white glow when editing text-related inputs.
-	// Shit looks straight out of winforms in 2023...
-	outline: none;
-	
-	color: #{$color-text-inputs};
-	background-color: #{$color-background-inputs};
-	
-	&:not(.no-focus) {
-		&:focus {
-			box-shadow: 0px 0px 3px 0px #{$color-input-glow};
-		}
-	}
-	
-	&:disabled {
-		cursor: not-allowed;
-	}
-}
-
-label {
-	cursor: pointer;
-	user-select: none;
-}
-
-/* Site > Elements > Inputs > Checkbox */
-
-input[type=checkbox] {
-	width: 1.65em;
-	height: 1.65em;
-	background-color: #{$color-background-checkbox-unchecked};
-	
-	cursor: pointer;
-	
-	&:checked {
-		background-color: #{$color-background-checkbox-checked};
-	}
-	
-	position: relative;
-	vertical-align: middle;
-}
-input[type="checkbox"] + label {
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-/* Site > Elements > Inputs > Buttons */
-
-button {
-	cursor: pointer;
-	background-color: #{$color-background-button};
-	
-	&:hover {
-		background-color: #{$color-background-button-hover};
-	}
-	
-	&.btn-primary {
-		background-color: #{$color-background-button-primary};
-		
-		&:hover {
-			background-color: #{$color-background-button-primary-hover};
-		}
-	}
-	
-	&.btn-success {
-		background-color: #{$color-background-button-success};
-		
-		&:hover {
-			background-color: #{$color-background-button-success-hover};
-		}
-	}
-	
-	&.btn-error {
-		background-color: #{$color-background-button-error};
-		
-		&:hover {
-			background-color: #{$color-background-button-error-hover};
-		}
-	}
-	
-	&.btn-warning {
-		background-color: #{$color-background-button-warning};
-		
-		&:hover {
-			background-color: #{$color-background-button-warning-hover};
-		}
-	}
-}
-
-// Ugly fix for download buttons
-button + button, .button-link + .button-link > button {
-	margin-left: 0.75rem;
-}
-
-/* Site > Elements > Inputs > Lang Selector */
-
-#lang-selector {
-	position: relative;
-	white-space: nowrap;
-	
-	> summary {
-		cursor: pointer;
-		list-style: none;
-		user-select: none;
-	}
-	
-	> div {
-		position: absolute;
-		z-index: #{$z-index-lang-dropdown};
-		top: 2rem;
-		right: 0;
-		min-width: 100%;
-		
-		// Visibility transition
-		//height: 0;
-		//transition: height 0.4s;
-		//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
-	}
-	
-	// TODO: Maybe force it to be visible when closes ?
-	
-	//&[open] > div {
-	//	height: auto;
-	//}
-}
-
-textarea {
-
-	&.no-resize {
-		resize: none;
-	}
-}

scss/site/text.scss

@@ -1,122 +0,0 @@
-// NibblePoker.lu CSS - MIT (C) 2023-2024 Bozet Herwin
-
-/* Site > Text */
-
-/* Site > Text > Commons */
-
-* {
-	color: #{$color-text-regular-normal};
-}
-
-
-/* Site > Text > Paragraphs */
-
-p {
-	line-height: 1.2;
-}
-
-
-/* Site > Text > Links */
-
-a, .a {
-	// Base
-	text-decoration: underline;
-	color: #{$color-link-blue};
-	
-	& * {
-		color: #{$color-link-blue};
-	}
-	
-	&:hover {
-		color: #{$color-link-blue-hover};
-		cursor: pointer;
-
-		& * {
-			color: #{$color-link-blue-hover};
-			text-decoration: underline;
-		}
-	}
-
-	// Special case for buttons
-	//&.casper-link, &.button-link, &.text-link {
-	&.a-bland {
-		text-decoration: none;
-		&:hover {
-			text-decoration: none;  // Only really applies to content listing entries...
-			& * {
-				text-decoration: none;
-			}
-		}
-	}
-	
-	// Bland links
-	//&.casper-link, &.bland-link {
-	&.a-hidden {
-		text-decoration: none;
-		color: #{$color-text-regular-normal};
-		
-		& * {
-			color: #{$color-text-regular-normal};
-		}
-		
-		&:hover {
-			text-decoration: underline;
-			color: #{$color-link-hover};
-			
-			& * {
-				color: #{$color-link-hover};
-			}
-			
-			// FIXME: Not working, big F
-			//i {
-			//	text-decoration: none !important;
-			//}
-		}
-	}
-}
-
-
-/* Site > Text > Targeted Rules */
-
-.t-logo-text {
-	font-size: 1.775em;
-	line-height: 1;
-}
-
-/* Site > Text > Targeted Rules > Sidebar */
-// Special rules for the sidebar and FontAwesome icons
-
-.sidebar-entry {
-	i {
-		width: 1.9rem !important;
-		// Required to prevent a size flicker when hiding/showing the sidebar.
-		// The about link is the most visible one.
-		min-width: 1.9rem !important;
-	}
-	
-	// Preventing a subtle line break when hiding/showing the sidebar.
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	
-	// Doesn't work, even with hyper-specific parent selectors...
-	//> i, > i:hover {
-	//	text-decoration: none !important;
-	//}
-}
-
-/* Site > Text > Targeted Rules > Headings */
-
-// And now for the headings, the exceptions keep popping up :,)
-// TODO: Add a simple and nicer divider.
-.heading-main {
-	> h2, > h3, >h4 {
-		> i {
-			//margin-left: 0.25rem;
-			margin-right: 0.4rem;
-			padding-right: 0.1rem;
-			width: 1.75rem !important;
-			text-align: center;
-		}
-	}
-}

scss/spacing/spacing_axis.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Sided */
+
+/* Spacing > Sided */
 @mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}x-#{$size-key} {
 		#{$type-property}-left: #{$size-value};
@@ -13,7 +14,7 @@
 }
 
 
-/* Utilities > Spacing > Sided > Variable Sizes */
+/* Spacing > Sided > Variable Sizes */
 @include axis-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include axis-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include axis-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -29,11 +30,11 @@
 @include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Sided > Fixed Sizes */
+/* Spacing > Sided > Fixed Sizes */
 @include axis-spacing-maker("m", "margin", "0", 0);
 @include axis-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Sided > Others */
+/* Spacing > Sided > Others */
 @include axis-spacing-maker("m", "margin", "auto", auto);
-@include axis-spacing-maker("p", "padding", "auto", auto);
+//@include axis-spacing-maker("p", "padding", "auto", auto);

scss/spacing/spacing_global.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Global */
+
+/* Spacing > Global */
 @mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}-#{$size-key} {
 		#{$type-property}: #{$size-value};
@@ -8,7 +9,7 @@
 }
 
 
-/* Utilities > Spacing > Global > Variable Sizes */
+/* Spacing > Global > Variable Sizes */
 @include global-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include global-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include global-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -24,17 +25,17 @@
 @include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Global > Fixed Sizes */
+/* Spacing > Global > Fixed Sizes */
 @include global-spacing-maker("m", "margin", "0", 0);
 @include global-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Global > Others */
+/* Spacing > Global > Others */
 @include global-spacing-maker("m", "margin", "auto", auto);
-@include global-spacing-maker("p", "padding", "auto", auto);
+//@include global-spacing-maker("p", "padding", "auto", auto);
 
 
-/* Utilities > Spacing > Global > Manual Extras */
+/* Spacing > Global > Manual Extras */
 .p-xxxs {
 	padding: calc(#{$margin-base-size} * 0.125);
 }

scss/spacing/spacing_sided.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Sided */
+
+/* Spacing > Sided */
 @mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}t-#{$size-key} {
 		#{$type-property}-top: #{$size-value};
@@ -17,7 +18,7 @@
 }
 
 
-/* Utilities > Spacing > Sided > Variable Sizes */
+/* Spacing > Sided > Variable Sizes */
 @include sided-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include sided-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include sided-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -33,11 +34,11 @@
 @include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Sided > Fixed Sizes */
+/* Spacing > Sided > Fixed Sizes */
 @include sided-spacing-maker("m", "margin", "0", 0);
 @include sided-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Sided > Others */
+/* Spacing > Sided > Others */
 @include sided-spacing-maker("m", "margin", "auto", auto);
-@include sided-spacing-maker("p", "padding", "auto", auto);
+//@include sided-spacing-maker("p", "padding", "auto", auto);

scss/tables/tables-modifiers.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Tables */
+
+/* Tables > Modifiers */
 
 tr, td {
   vertical-align: top;
@@ -18,6 +19,15 @@ tr, td {
   }
 }
 
+.table-no-wrap,
+.table-no-wrap > td, .table-no-wrap > th,
+.table-no-wrap > tr > td, .table-no-wrap > tr > th,
+.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th,
+.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th {
+  white-space: nowrap;
+  text-wrap: nowrap;
+}
+
 
 /* Core > Tables > Cell Padding */
 

scss/text/text-alignment.scss

@@ -0,0 +1,28 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Alignment */
+
+.t-justify {
+    text-align: justify;
+}
+
+.t-center {
+    text-align: center;
+}
+
+.t-left {
+    text-align: left;
+}
+
+.t-right {
+    text-align: right;
+}
+
+.t-start {
+    text-align: start;
+}
+
+.t-end {
+    text-align: end;
+}

scss/text/text-links.scss

@@ -0,0 +1,5 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Links */
+

scss/text/text-misc.scss

@@ -0,0 +1,40 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Misc */
+
+.t-ucase {
+    text-transform: uppercase;
+}
+
+.t-lcase {
+    text-transform: lowercase;
+}
+
+.t-capitalize {
+    text-transform: capitalize;
+}
+
+.t-nowrap {
+    white-space: nowrap;
+    text-wrap: nowrap;
+}
+
+.t-half-muted {
+    opacity: 65%;
+}
+
+.t-muted {
+    //@if $undefined-toggle-css-variables {
+    //	color: var(--color-white-muted);
+    //} @else {
+    //	color: #{$color-white-muted};
+    //}
+    //color: #A9A9Aa;
+    opacity: 50%;
+}
+
+.t-super-muted {
+    // Should be 35% TBH
+    opacity: 45%;
+}

scss/text/text-sizes.scss

@@ -0,0 +1,38 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Sizes */
+
+// ".t-size-6", ".t-size-8", ..., "t-size-40"
+@for $_ from 3 through 20 {
+    $sizeKey: $_ * 2;
+    $sizeValue: $sizeKey / 10;
+
+    .t-size-#{$sizeKey} {
+        font-size: #{$sizeValue}rem !important;
+    }
+}
+
+// Adding special odd values
+.t-size-11 {
+    font-size: 1.1rem !important;
+}
+.t-size-13 {
+    font-size: 1.3rem !important;
+}
+.t-size-15 {
+    font-size: 1.5rem !important;
+}
+.t-size-17 {
+    font-size: 1.7rem !important;
+}
+
+// Jumbo sizes
+// ".t-size-35" & ".t-size-40"
+@for $_ from 7 through 8 {
+    $size: $_ * 5;
+
+    .t-size-#{$size} {
+        font-size: #{$size / 10}rem !important;
+    }
+}

scss/text/text-styling.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Styling */
+
+i, .t-italic {
+    font-style: italic;
+}
+
+.t-oblique {
+    font-style: oblique;
+}
+
+u, .t-underline {
+    text-decoration: underline;
+}
+
+s, .t-strikethrough {
+    text-decoration: line-through;
+}
+
+.t-overline {
+    text-decoration: overline;
+}
+
+// Defined in core/defaults-code.scss !
+//.t-monospace {
+//	font-family: monospace, monospace;
+//}

scss/text/text-weights.scss

@@ -0,0 +1,32 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Weights */
+
+.t-w-normal, .t-normal {
+    font-weight: normal !important;
+}
+
+b, .t-w-bold, .t-bold {
+    font-weight: bold !important;
+}
+
+.t-w-bolder, .t-bolder {
+    font-weight: bolder !important;
+}
+
+.t-w-lighter, .t-lighter {
+    font-weight: lighter !important;
+}
+
+// ".t-w-100", ".t-w-200", ..., ".t-w-900"
+@for $_ from 1 through 9 {
+    $size: $_ * 100;
+
+    .t-w-#{$size} {
+        font-weight: #{$size} !important;
+    }
+}
+
+// /!\ Firefox moment /!\
+// * The ".t-w-200" to ".t-w-500" classes barely have any visible effect...

scss/utils/utils-cursor.scss

@@ -0,0 +1,45 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Cursors */
+
+@mixin cursor-maker($cursor-type) {
+  .c-#{$cursor-type}, .cursor-#{$cursor-type} {
+    cursor: #{$cursor-type} !important;
+  }
+}
+
+@include cursor-maker("auto");
+@include cursor-maker("default");
+@include cursor-maker("pointer");
+@include cursor-maker("context-menu");
+@include cursor-maker("help");
+@include cursor-maker("progress");
+@include cursor-maker("wait");
+@include cursor-maker("crosshair");
+@include cursor-maker("not-allowed");
+@include cursor-maker("zoom-in");
+@include cursor-maker("zoom-out");
+@include cursor-maker("grab");
+@include cursor-maker("cell");
+@include cursor-maker("text");
+@include cursor-maker("vertical-text");
+@include cursor-maker("alias");
+@include cursor-maker("copy");
+@include cursor-maker("move");
+@include cursor-maker("no-drop");
+@include cursor-maker("all-scroll");
+@include cursor-maker("col-resize");
+@include cursor-maker("row-resize");
+@include cursor-maker("n-resize");
+@include cursor-maker("e-resize");
+@include cursor-maker("s-resize");
+@include cursor-maker("w-resize");
+@include cursor-maker("ne-resize");
+@include cursor-maker("nw-resize");
+@include cursor-maker("se-resize");
+@include cursor-maker("sw-resize");
+@include cursor-maker("ew-resize");
+@include cursor-maker("ns-resize");
+@include cursor-maker("nesw-resize");
+@include cursor-maker("nwse-resize");

scss/utils/utils-display.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Display */
+
+/* Utils > Display */
 
 .d-none {
 	display: none;
@@ -14,9 +15,5 @@
 	display: inline-block;
 }
 
-.o-hidden {
-	overflow: hidden;
-}
-
 // Notes:
-// * 'core/grid.scss' defines '.d-grid' !  (Add here if grids are disabled !)
+// * 'core/core-grids.scss' defines '.d-grid' !  (Add here if grids are disabled !)

scss/utils/utils-flex.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Flex */
+
+/* Utils > Flex */
 
 // Display properties
 .d-flex {

scss/utils/utils-float.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Float */
+
+/* Utils > Float */
 
 .fl, .f-left {
 	float: left;

scss/utils/utils-mobile.scss

@@ -0,0 +1,10 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Mobile */
+
+@media only screen and (max-width: 768px) {
+	.mobile-hide {
+		display: none;
+	}
+}

scss/utils/utils-overflow.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Overflow */
+
+/* Utils > Overflow */
 
 @mixin overflow-maker($overflow-type) {
 	.o-#{$overflow-type} {

scss/utils/utils-position.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Positions */
+
+@mixin position-maker($position-type) {
+	.p-#{$position-type} {
+		position: #{$position-type};
+	}
+}
+
+@include position-maker(static);
+@include position-maker(relative);
+@include position-maker(absolute);
+@include position-maker(fixed);
+@include position-maker(sticky);
+
+.top-0 {
+	top: 0;
+}
+.bottom-0 {
+	bottom: 0;
+}
+.left-0 {
+	left: 0;
+}
+.right-0 {
+	right: 0;
+}

scss/utils/utils-text.scss

@@ -0,0 +1,8 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Text */
+
+.t-noselect {
+  user-select: none;
+}

scss/variables.scss

@@ -1,293 +1,13 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-@use 'sass:color';
-
-/* Variables > Palettes */
-
-/* Variables > Palettes > Apollo */
-// https://lospec.com/palette-list/apollo
-$color-apollo-00: #172038;
-$color-apollo-01: #253a5e;
-$color-apollo-02: #3c5e8b;
-$color-apollo-03: #4f8fba;
-$color-apollo-04: #73bed3;
-$color-apollo-05: #a4dddb;
-$color-apollo-06: #19332d;
-$color-apollo-07: #25562e;
-$color-apollo-08: #468232;
-$color-apollo-09: #75a743;
-$color-apollo-10: #a8ca58;
-$color-apollo-11: #d0da91;
-$color-apollo-12: #4d2b32;
-$color-apollo-13: #7a4841;
-$color-apollo-14: #ad7757;
-$color-apollo-15: #c09473;
-$color-apollo-16: #d7b594;
-$color-apollo-17: #e7d5b3;
-$color-apollo-18: #341c27;
-$color-apollo-19: #602c2c;
-$color-apollo-20: #884b2b;
-$color-apollo-21: #be772b;
-$color-apollo-22: #de9e41;
-$color-apollo-23: #e8c170;
-$color-apollo-24: #241527;
-$color-apollo-25: #411d31;
-$color-apollo-26: #752438;
-$color-apollo-27: #a53030;
-$color-apollo-28: #cf573c;
-$color-apollo-29: #da863e;
-$color-apollo-30: #1e1d39;
-$color-apollo-31: #402751;
-$color-apollo-32: #7a367b;
-$color-apollo-33: #a23e8c;
-$color-apollo-34: #c65197;
-$color-apollo-35: #df84a5;
-$color-apollo-36: #090a14;
-$color-apollo-37: #10141f;
-$color-apollo-38: #151d28;
-$color-apollo-39: #202e37;
-$color-apollo-40: #394a50;
-$color-apollo-41: #577277;
-$color-apollo-42: #819796;
-$color-apollo-43: #a8b5b2;
-$color-apollo-44: #c7cfcc;
-$color-apollo-45: #ebede9;
-
-$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
-
-$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
-$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
-$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
-$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
-
-$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
-$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
-
-$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
-$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
-$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
-$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
-
-$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
-
-$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
-
-$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%);  // Primary button
-$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%);  // Primary button hover
-
-/* Variables > Palettes > Material UI */
-// https://materialui.co/colors
-
-$color-material-blueGrey-50: #eceff1;
-$color-material-blueGrey-100: #cfd8dc;
-$color-material-blueGrey-200: #b0bec5;
-$color-material-blueGrey-300: #90a4ae;
-$color-material-blueGrey-400: #78909c;
-$color-material-blueGrey-500: #607d8b;
-$color-material-blueGrey-600: #546e7a;
-$color-material-blueGrey-700: #455a64;
-$color-material-blueGrey-800: #37474f;
-$color-material-blueGrey-900: #263238;
-
-$color-material-blueGrey-1000: #151D21;
-$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%);
-//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%);
-$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%);
-
-/* Variables > Palettes > WinUI 3 */
-
-$color-winui-00: #191919;
-$color-winui-01: #1D1D1D;
-$color-winui-02: #202020;
-$color-winui-03: #232323;
-$color-winui-04: #272727;
-$color-winui-05: #323232;
-$color-winui-06: #3E3E3E;
-
-// https://flatuicolors.com/palette/defo
-
-/* Variables > Palettes > Misc */
-
-//$color-test-01: mix(#7b6aa5, #000000, 33%);
-//$color-test-02: #007c7d;
-
-/* Variables > Colors Mappings */
-
-$color-unset: $color-apollo-34;
-
-/* Variables > Theme selection */
-
-// Available themes:
-//  * Teal Supreme (teal)
-//  * WinUI 3 (winui)
-//  * La Moiti Leune (moon)
-//  * NibblePoker (nibblepoker)
-$theme: nibblepoker;
-
-/* Variables > Colors Mappings > Backgrounds & Borders */
-
-$color-background-main: map-get((
-		teal: $color-apollo-custom-02,
-		winui: $color-winui-04,
-		moon: $color-unset,
-		nibblepoker: #24252B,
-), $theme);
-
-$color-background-surround: map-get((
-		teal: $color-apollo-custom-00,
-		winui: $color-winui-02,
-		moon: $color-unset,
-		nibblepoker: #1D1E22,
-), $theme);
-
-// Used as the background-color in the main's rounded corners
-$color-background-body: $color-background-surround;
-
-// Used in stylized headings
-$color-background-main-headings: map-get((
-		teal: $color-background-surround,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: $color-background-surround,
-), $theme);
 
 
-// FIXME: Remove its usage !
-// Left: Code, Kbd, Scrollbar ???
-$color-border-all: $color-unset;  // Default border
-$color-border-light: $color-unset;  // For .b-light class (No longer exists !)
+/* Variables */
 
-// Used to separate the 'main' from the 'surround'.
-$color-border-surround: map-get((
-		teal: $color-apollo-38,
-		winui: $color-winui-01,
-		moon: $color-unset,
-		nibblepoker: #141417,
-), $theme);
-
-// Used as the border for all element inside the "main".
-// It probably influences more stuff, but I can't be bothered to fix this...
-$color-border-main: map-get((
-		teal: $color-apollo-38,  // $color-apollo-custom-20;
-		winui: $color-winui-03,
-		moon: $color-unset,
-		nibblepoker: $color-border-surround,
-), $theme);
-
-// TEMP !!!
-$color-border-all: $color-border-main;
-
-$color-background-code: map-get((
-		teal: $color-apollo-custom-20,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: mix($color-background-main, $color-background-surround, 25%),
-), $theme);
-
-$color-border-code: map-get((
-		teal: #{$color-border-surround}CF,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: #{$color-border-surround}CF,
-), $theme);
-
-
-$color-background-table-main: map-get((
-		teal: $color-apollo-custom-01,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: mix($color-background-main, $color-background-surround, 50%),
-), $theme);
-
-$color-background-table-dual: map-get((
-		teal: $color-apollo-custom-00,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: mix($color-background-main, $color-background-surround, 12.5%),
-), $theme);
-
-$color-table-border: map-get((
-		teal: $color-apollo-39,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: #{$color-border-surround}CF,
-), $theme);
-
-$color-background-inputs: map-get((
-		teal: $color-apollo-40,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: #2d2f36,
-), $theme);
-
-// TODO: Implement better ones !
-$color-background-checkbox-checked: $color-apollo-08;
-$color-background-checkbox-unchecked: $color-apollo-27;
-
-$color-background-button: map-get((
-		teal: $color-apollo-40,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: #2d2f36,
-), $theme);
-
-$color-background-button-hover: map-get((
-		teal: $color-apollo-custom-10,
-		winui: $color-unset,
-		moon: $color-unset,
-		nibblepoker: #373841,
-), $theme);
-
-$color-background-button-primary: #{$color-apollo-custom-30};
-$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
-
-$color-background-button-success: #{$color-apollo-07};
-$color-background-button-success-hover: mix($color-apollo-07, $color-apollo-08, 50%);
-
-$color-background-button-error: #{$color-apollo-26};
-$color-background-button-error-hover: #{$color-apollo-27};
-
-$color-background-button-warning: #{$color-apollo-20};
-$color-background-button-warning-hover: #{$color-apollo-21};
+// If not set to `-1`, will auto define a low-priority size for headers.
+$text-weight-header: 600;
 
 
 
-/* Variables > Colors Mappings > Text */
-
-$color-text-regular-normal: $color-apollo-45;
-$color-text-inputs: $color-apollo-45;
-$color-text-muted: #{$color-apollo-45}E0;
-$color-text-muted-super: #{$color-apollo-45}C0;
-
-$color-link-hover: rgb(253, 255, 251);
-
-// Should be a mix of 03-04 and 04-05.
-$color-link-blue: #{$color-apollo-04};
-$color-link-blue-hover: #{$color-apollo-05};
-
-//$color-border-all: $color-apollo-38;
-//$color-border-light: $color-apollo-custom-20;
-
-$color-input-glow: $color-apollo-02;
-
-//$color-wedge-blue-background: $color-apollo-03;
-
-// Still used for wedges !!! - Nope, it looked bad with the new colors !
-//$color-wedge-blue-border: $color-apollo-02;
-
-//$color-background-body: $color-apollo-custom-00;
-//$color-background-main: $color-apollo-custom-02;
-//$color-background-surround: $color-apollo-custom-00;
-//
-//// TMP V2
-//$color-background-body: $color-material-blueGrey-900;
-//$color-background-main: $color-material-blueGrey-950;
-//$color-background-surround: $color-material-blueGrey-900;
-
-
-/* Variables > Scrollbar */
-
-//$color-scrollbar-border: rgba(0, 0, 0, 0.15);
-$color-scrollbar-border: $color-border-surround;
 
 $scrollbar-size: 1.25em;
 
@@ -313,3 +33,9 @@ $content-search-image-size: 128px;
 $z-index-sidebar: 5;
 $z-index-lang-dropdown: 10;
 $z-index-modal: 99;
+
+
+/* Variables > Themes & Overrides */
+//@import "themes/theme_unset";
+//@import "old/parts/theme_nibblepoker_v2";
+@import "old/parts/theme_nibblepoker_v3";

todos.txt

@@ -1,18 +1,14 @@
-floats
 grids mobile sizes
-inputs
 composed element gallery
 body layout
 display utilities
 size utilities
 scrolling utilities
-media
 modal
 code
 borders
 
 custom elements
-* wedge
 * ???
 
 bkgd color if grid disabled