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...
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-26 21:04:00 +01:00
parent f2833469dc
commit 3fbf08aea6
7 changed files with 63 additions and 7 deletions

View File

@ -42,7 +42,7 @@ jobs:
uses: actions/upload-artifact@v4
if: ${{ github.actor == 'aziascreations' }}
with:
name: nibblepoker.min.css
name: nibblepoker.css
path: "./htdocs/css/nibblepoker.css"
if-no-files-found: error
retention-days: 90
@ -50,7 +50,7 @@ jobs:
- name: Upload `.min.css` build artifact
uses: actions/upload-artifact@v4
if: ${{ github.actor == 'not_aziascreations' }}
if: ${{ github.actor == 'aziascreations' }}
with:
name: nibblepoker.min.css
path: "./htdocs/css/nibblepoker.min.css"

BIN
htdocs/img/maki-03.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View File

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

View File

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

View File

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

View File

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

View File

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