Compare commits

..

4 Commits

Author SHA1 Message Date
3fbf08aea6 Finished CICD SASS compiler, Added broken example page
Some checks failed
Compile SASS / deploy (push) Has been cancelled
Update sass-compile.yml, maki-03.jpg, and 5 more files...
2024-11-26 21:04:00 +01:00
f2833469dc Fixed artifact name, testing author name condition
Update sass-compile.yml
2024-11-26 21:02:28 +01:00
fba4c20b47 Added artifact step
Update sass-compile.yml
2024-11-26 20:56:57 +01:00
ecf86920e7 Added first version of SASS CICD
Update sass-compile.yml
2024-11-26 20:53:58 +01:00
11 changed files with 62 additions and 214 deletions

2
.gitattributes vendored
View File

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

View File

@ -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

21
dockerize.cmd Normal file
View File

@ -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

View File

@ -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="alternate icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/nibblepoker.min.css">
<link rel="stylesheet" href="./css/debugger.min.css">
<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" />
@ -58,64 +58,55 @@
<!-- Introduction -->
<?php include("./parts/intro.php"); ?>
<!-- Core > Text > Weights -->
<!-- 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 -->
<?php include("./parts/core/inputs.php"); ?>
<!-- Site > Horizontal Rulers -->
<!-- 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"); ?>
<!-- Examples > Inputs -->
<?php include("./parts/examples/inputs.php"); ?>
<!-- Examples > Tables -->
<!-- Tables -->
<?php include("./parts/examples/cards.php"); ?>
</main>
@ -133,8 +124,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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

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

View File

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