Finished CICD SASS compiler, Added broken example page

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

.gitattributes

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

.github/workflows/sass-compile.yml

@@ -1,11 +1,11 @@
-name: Build Everything
+name: Compile SASS
 
 on:
   push:
   pull_request:
 
 jobs:
-  sass_compile:
+  deploy:
     runs-on: ubuntu-latest
 
     permissions:
@@ -21,12 +21,6 @@ jobs:
           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:
@@ -34,7 +28,7 @@ jobs:
 
       - name: Install SASS Compiler
         run: |
-          npm install -g sass
+          npm install -g html-minifier sass
 
       - name: Compile SASS
         run: |
@@ -63,21 +57,3 @@ jobs:
           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

dockerize.cmd

@@ -0,0 +1,21 @@
+@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,10 +7,10 @@
     <!--<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="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="alternate icon" href="./favicon.ico">
+    <link rel="alternate icon" href="/favicon.ico">
-    <link rel="stylesheet" href="./css/nibblepoker.min.css">
+    <link rel="stylesheet" href="/css/nibblepoker.min.css">
-    <link rel="stylesheet" href="./css/debugger.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" />
@@ -58,64 +58,55 @@
     <!-- Introduction -->
     <?php include("./parts/intro.php"); ?>
 
-
+    <!-- Text > Weights -->
-    <!-- Core > Text > Weights -->
     <?php include("./parts/text_weights.php"); ?>
 
-    <!-- Core > Text > Styles -->
+    <!-- Text > Styles -->
     <?php include("./parts/text_styles.php"); ?>
 
-    <!-- Core > Text > Alignment -->
+    <!-- Text > Alignment -->
     <?php include("./parts/text_alignment.php"); ?>
 
-    <!-- Core > Text > Modifiers -->
+    <!-- Text > Modifiers -->
     <?php include("./parts/text_modifiers.php"); ?>
 
-    <!-- Core > Text > Links -->
+    <!-- Text > Links -->
     <?php include("./parts/text_links.php"); ?>
 
-    <!-- Core > Text > Misc -->
+    <!-- Text > Misc -->
     <?php include("./parts/text_misc.php"); ?>
 
-    <!-- Core > Spacing -->
+    <!-- Spacing -->
     <?php include("./parts/spacing.php"); ?>
 
-    <!-- Core > Rounding -->
+    <!-- Rounding -->
     <?php include("./parts/rounding.php"); ?>
 
-    <!-- Core > Lists > Base -->
+    <!-- Lists > Base -->
     <?php include("./parts/lists_base.php"); ?>
 
-    <!-- Core > Lists > Composed
+    <!-- Lists > Composed
     <?php include("./parts/lists_composed.php"); ?>-->
 
-    <!-- Core > Grids -->
+    <!-- Grids -->
     <?php include("./parts/grids.php"); ?>
 
-    <!-- Core > Tables -->
+    <!-- Tables -->
     <?php include("./parts/tables_core.php"); ?>
 
-    <!-- Core > Inputs -->
+    <!-- Horizontal Rulers -->
-    <?php include("./parts/core/inputs.php"); ?>
-
-
-    <!-- Site > Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
 
-    <!-- Site > Backgrounds -->
+    <!-- Backgrounds -->
     <?php include("./parts/backgrounds.php"); ?>
 
-    <!-- Site > Buttons -->
+    <!-- Buttons -->
     <?php include("./parts/buttons.php"); ?>
 
-    <!-- Site > Tables -->
+    <!-- Tables -->
     <?php include("./parts/tables_site.php"); ?>
 
-
+    <!-- Tables -->
-    <!-- Examples > Inputs -->
-    <?php include("./parts/examples/inputs.php"); ?>
-
-    <!-- Examples > Tables -->
     <?php include("./parts/examples/cards.php"); ?>
 </main>
 
@@ -133,8 +124,8 @@
     </a>
 </footer>
 
-<script src="./js/sidebar.js"></script>
+<script src="/js/sidebar.js"></script>
-<script src="./js/text-direction-switch.js"></script>
+<script src="/js/text-direction-switch.js"></script>
-<script src="./js/anchor-fix.js"></script>
+<script src="/js/anchor-fix.js"></script>
 </body>
 </html>

htdocs/parts/core/inputs.php

@@ -1,77 +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="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 bkgd-gray">
-            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 bkgd-gray">
-            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 bkgd-gray">
-            label+input[type=number]
-        </code>
-    </div>
-
-    <div class="px-s mb-m">
-        <input type="radio" id="demo-core-radio-1">
-        <label for="demo-core-radio-1">Radio 1</label><br>
-        <input type="radio" id="demo-core-radio-2">
-        <label for="demo-core-radio-2">Radio 2</label><br>
-        <input type="radio" id="demo-core-radio-3">
-        <label for="demo-core-radio-3">Radio 3</label>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
-            (input[type=radio]+label+br)*3
-        </code>
-    </div>
-
-    <div class="px-s mb-m">
-        <input type="checkbox" id="demo-core-combo-1">
-        <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">
-        <label for="demo-core-combo-3">Checkbox 3</label>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
-            (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 bkgd-gray">
-            label+textarea
-        </code>
-    </div>
-
-</section>

htdocs/parts/examples/cards.php

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

htdocs/parts/examples/inputs.php

@@ -1,37 +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="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">Basic 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 bkgd-gray">
-            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 bkgd-gray">
-            label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
-        </code>
-
-    </div>
-
-    <p class="mt-m t-bold">TODO: Add other types</p>
-</section>

htdocs/parts/intro.php

@@ -7,7 +7,6 @@ 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>
@@ -67,7 +66,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>
@@ -79,7 +78,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>
@@ -94,7 +93,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>
@@ -106,7 +105,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="#intro" class="no-select">
+        <a href="/" 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>
@@ -80,11 +80,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <i class="fa-solid 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="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
-                </p>
-            </a>
         </div>
     </details>
 
@@ -117,11 +112,6 @@ 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="#examples-inputs">
-                <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid 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="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards

scss/nibblepoker.scss

@@ -2,11 +2,9 @@
  * -----------------------------------------------------------------------------
  * NibblePoker CSS Theme
  * -----------------------------------------------------------------------------
- * Author: Herwin Bozet (@NibblePoker)
+ * Author: Herwin Bozet
  * License: CC0 1.0 (Public Domain)
- * Sources:
+ * Source: ???
- *   - https://github.com/aziascreations/CSS-NibblePoker/
- *   - https://git.nibblepoker.lu/aziascreations/CSS-NibblePoker
  * -----------------------------------------------------------------------------
  */
 

scss/site/input.scss

@@ -132,20 +132,9 @@ button + button, .button-link + .button-link > button {
 	//}
 }
 
+textarea {
 
-// TODO: Move to core !
+	&.no-resize {
-.ta-resize {
+		resize: none;
-	resize: both;
+	}
-}
+}
-
-.ta-resize-h {
-	resize: horizontal;
-}
-
-.ta-resize-v {
-	resize: vertical;
-}
-
-.ta-resize-none {
-	resize: none;
-}