Finished CICD SASS compiler, Added broken example page

Update sass-compile.yml, maki-03.jpg, and 5 more files...

.github/workflows/sass-compile.yml

@@ -0,0 +1,59 @@
+name: Compile SASS
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  deploy:
+    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 Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Install SASS Compiler
+        run: |
+          npm install -g html-minifier 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

htdocs/index.php

@@ -31,7 +31,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 Documentation v0.0.1
         <a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
     </h1>
 </header>
@@ -105,6 +105,9 @@
 
     <!-- Tables -->
     <?php include("./parts/tables_site.php"); ?>
+
+    <!-- Tables -->
+    <?php include("./parts/examples/cards.php"); ?>
 </main>
 
 <footer class="d-flex flex-align-center w-full p-s py-xs">

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/sidebar.php

@@ -112,11 +112,12 @@ 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-cards">
                 <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Composed
+                    <i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
                 </p>
             </a>
         </div>
     </details>
+
 </nav>

htdocs/parts/tables_site.php

@@ -44,7 +44,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             </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>
+            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>

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>