aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Improved backgrounds, builds, readability, roundings and Added lists properly

Browse Source 
Update .gitignore, compile.cmd, and 20 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2024-11-20 22:53:18 +01:00
parent d7d4dfba15
commit cdd0aba327
22 changed files with 404 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
htdocs/css/bright-squares-p100-0.125.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

8
htdocs/index.php
View File

@@ -82,8 +82,11 @@
<!-- Rounding -->
<?php include("./parts/rounding.php"); ?>
<!-- Lists -->
<?php include("./parts/lists.php"); ?>
<!-- Lists > Base -->
<?php include("./parts/lists_base.php"); ?>
<!-- Lists > Composed -->
<?php include("./parts/lists_composed.php"); ?>
<!-- Grids -->
<?php include("./parts/grids.php"); ?>
@@ -117,5 +120,6 @@
<script src="/js/sidebar.js"></script>
<script src="/js/text-direction-switch.js"></script>
<script src="/js/anchor-fix.js"></script>
</body>
</html>

10
htdocs/js/anchor-fix.js Normal file
View File

@@ -0,0 +1,10 @@
// This script is required due to Chromium's dogshit and random ability to jump to anchors when reloading pages.
document.addEventListener("DOMContentLoaded", function () {
if (window.location.hash) {
const eAnchor = document.querySelector(window.location.hash);
if (eAnchor) {
eAnchor.scrollIntoView();
}
}
});

24
htdocs/parts/backgrounds.php
View File

@@ -16,16 +16,16 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
<div class="grid col-3 grid-gap-l px-s">
<div>
<div class="p-l border rb-s bkgd-dark my-xs"></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-s bkgd-grey my-xs"></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="p-l border r-s bkgd-light my-xs"></div>
<div class="p-l border r-xl bkgd-light my-xs"></div>
<span class="code mb-s">.bkgd-light</span>
</div>
</div>
@@ -33,24 +33,24 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
<div class="grid col-2 grid-gap-l px-s">
<div>
<p class="t-w-500">Grid (40% opacity)</p>
<div class="p-l border r-s bkgd-grid40 my-xs"></div>
<p class="t-w-500">40% opacity (Title bars)</p>
<div class="p-l border r-xl bkgd-grid40 my-xs"></div>
<span class="code">.bkgd-grid40</span>
<span class="code">.bkgd-grid</span>
</div>
<div>
<p class="t-w-500">Math (30% opacity)</p>
<div class="p-l border r-s bkgd-grid30 my-xs"></div>
<p class="t-w-500">30% opacity (Unused)</p>
<div class="p-l border r-xl bkgd-grid30 my-xs"></div>
<span class="code">.bkgd-grid30</span>
</div>
<div>
<p class="t-w-500">Math (20% opacity)</p>
<div class="p-l border r-s bkgd-grid20 my-xs"></div>
<p class="t-w-500">20% opacity (Unused)</p>
<div class="p-l border r-xl bkgd-grid20 my-xs"></div>
<span class="code">.bkgd-grid20</span>
</div>
<div>
<p class="t-w-500">Surround (10% opacity)</p>
<div class="p-l border r-s bkgd-grid10 my-xs"></div>
<p class="t-w-500">10% opacity (Surroundings)</p>
<div class="p-l border r-xl bkgd-grid10 my-xs"></div>
<span class="code">.bkgd-grid10</span>
<span class="code">.bkgd-surround</span>
</div>
@@ -60,7 +60,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="grid col-3 grid-gap-l px-s">
<div>
<p class="t-w-500">Transparent</p>
<div class="p-l border r-s bkgd-transparent my-xs"></div>
<div class="p-l border r-xl bkgd-transparent my-xs"></div>
<span class="code">.bkgd-transparent</span>
</div>
</div>

68
htdocs/parts/grids.php
View File

@@ -11,32 +11,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-table-cells-large f-right"></i></h2>
</div>
<section class="p-s">
<p>
Grids are defined by using the <span class="code">grid</span> and <span class="code">col-X</span> class where
<span class="code">X</span> represents the number of columns and can be
<span class="code">1</span>, <span class="code">2</span>,
<span class="code">3</span>, <span class="code">4</span>,
<span class="code">6</span> or <span class="code">8</span>.
</p>
<!--<p>You should preferably use <span class="code">&lt;div&gt;</span> elements for the grid container and each cell.</p>-->
<!--<p>[Equal width for cells, maybe]</p>-->
<p class="t-bold">Examples without inter-cell gaps:</p>
<div class="gap-xs">
<p><span class="code">div.grid.col-1&gt;div</span></p>
<div class="grid col-1 debug p-xxs">
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic grids</h3>
<div class="px-s">
<p class="mb-m">
Grids are defined by combining the <span class="code">.grid</span> and <span class="code">.col-X</span>
classes where <span class="code">X</span> represents the number of columns and can be
<span class="code">1</span>, <span class="code">2</span>,
<span class="code">3</span>, <span class="code">4</span>,
<span class="code">6</span> or <span class="code">8</span>.
</p>
<div class="grid col-1 debug p-xxs mb-xs">
<div class="bkgd-blank-dark debug">Cell #1</div>
</div>
<p><span class="code">div.grid.col-2&gt;div*2</span></p>
<div class="grid col-2 debug p-xxs">
<p><span class="code">div.grid.col-1&gt;div</span></p>
<div class="grid col-2 debug p-xxs mb-xs mt-m">
<div class="bkgd-blank-dark debug">Cell #1</div>
<div class="bkgd-blank-dark debug">Cell #2</div>
</div>
<p><span class="code">div.grid.col-6&gt;div*6</span></p>
<div class="grid col-6 debug p-xxs">
<p><span class="code">div.grid.col-2&gt;div*2</span></p>
<div class="grid col-6 debug p-xxs mb-xs mt-m">
<div class="bkgd-blank-dark debug">Cell #1</div>
<div class="bkgd-blank-dark debug">Cell #2</div>
<div class="bkgd-blank-dark debug">Cell #3</div>
@@ -44,40 +38,39 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="bkgd-blank-dark debug">Cell #5</div>
<div class="bkgd-blank-dark debug">Cell #6</div>
</div>
<p><span class="code">div.grid.col-6&gt;div*6</span></p>
</div>
<p>
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
with the standard size suffixes.
</p>
<p class="t-bold">Examples with inter-cell gaps:</p>
<div class="gap-xs">
<?php
<h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3>
<div class="px-s">
<p class="mb-m">
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
with the standard size suffixes.
</p>
<div class="gap-xs">
<?php
foreach(["xs", "m", "l"] as &$gapSize) {
echo('<p><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>');
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs">');
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs mt-m">');
for($iGap = 1; $iGap <= 6; $iGap++) {
echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>');
}
echo('</div>');
echo('<p class="mt-xs"><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>');
}
?>
?>
</div>
</div>
<b>TODO: All mobile rules, Add non-identical sizing</b>
<details class="border bkgd-blank r-m mt-s">
<details class="border bkgd-dark r-m mt-l">
<summary class="p-xs">Click to show/hide all classes</summary>
<div class="p-xs bt bkgd-blank-dark">
<div class="p-xs bt bkgd-grey">
<p>
<span class="code mr-xs">grid</span>
<span class="t-super-muted">Defined a grid container</span>
</p>
<hr class="subtle my-s">
<table>
@@ -134,4 +127,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
</details>
<p class="mt-m t-bold">TODO: All mobile rules, Add non-identical sizing</p>
</section>

142
htdocs/parts/lists.php
View File

@@ -1,142 +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="lists"></a>
<div class="p-xs b r-s bkgd-grid mt-m">
<h2 class="t-w-500 t-size-14">Lists
<i class="fa-solid fa-list f-right"></i></h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
<p class="mb-s">
By default, ordered and unordered lists have no bullet.<br>
This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
</p>
<ul class="debug">
<li>Item 1</li>
<li>Item 2</li>
<li class="l-bullet-disc">
Item 3 with explicit disc bullet (See below)
</li>
</ul>
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
<p class="mb-s">
Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
or <span class="code">.list-bullets</span> class to list's root element.<br>
These classes must also be used for any nested children lists !
</p>
<div class="debug mb-s">
<ul class="l-bullets debug l-bullet-manual">
<li>Line 1</li>
<li>Line 2<br>Line 2 continued after a <i>br</i></li>
<li>Line 3</li>
<ul class="l-bullets l-bullet-manual">
<li>Line 3.1</li>
<li>Line 3.2</li>
</ul>
<li>Line 4</li>
</ul>
</div>
<div class="debug">
<ol class="l-bullets l-bullet-manual">
<li>Salt</li>
<li>Packs of crisps</li>
<ol class="l-bullets l-bullet-manual">
<li>Salt and pepper</li>
<li>Paprika</li>
</ol>
<li>Olive oil</li>
</ol>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
<p class="mb-s">
By default, the lists do not include their bullet in the parent element.<br>
This is due to the fact that the imposed spacings when using
<span class="code">list-style-position: inside;</span> looks like absolute trash.
</p>
<p class="mb-s">
This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
or <span class="code">list-bullet-inside</span> classes.<br>
Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
or <span class="code">list-bullet-manual</span> classes.
</p>
<p class="mb-s">
Please note that the following classes must be applied to the root element and any nested
list's root element too.
</p>
<div class="grid col-3">
<div>
<p><b>Outside (Default)</b></p>
<ul class="debug l-bullets l-bullet-outside my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-outside</b>&gt;li*3</span>
</div>
<div>
<p><b>Inside</b></p>
<ul class="debug l-bullets l-bullet-inside my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-inside</b>&gt;li*3</span>
</div>
<div>
<p><b>Manual (Recommended)</b></p>
<ul class="debug l-bullets l-bullet-manual my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-manual</b>&gt;li*3</span>
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
<p class="mb-s">
Each list and its entry can have its bullets' style changed by using the following classes in the
<span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
<s>The <span class="code">type</span> property also works as expected in these cases.</s>
</p>
<p class="mb-s">
Please note that some of the more exotic bullet styles may not fit properly when using
the manual position as shown below.<br>
This is a known issue and won't be fixed as it is an edge-case.
</p>
<ul class="debug l-bullet-manual">
<li class="l-bullet-disc">
Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
</li>
<li class="l-bullet-square">
Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
</li>
<li class="l-bullet-decimal">
Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
</li>
<li class="l-bullet-decimal-leading">
Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
</li>
<li class="l-bullet-georgian">
Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
</li>
<li class="l-bullet-chinese">
Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
</li>
<li class="l-bullet-kannada">
Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
</li>
<li class="l-bullet-none">
None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
</li>
</ul>
</section>

149
htdocs/parts/lists_base.php Normal file
View File

@@ -0,0 +1,149 @@
<?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="lists-basic"></a>
<div class="p-xs b r-s bkgd-grid mt-m">
<h2 class="t-w-500 t-size-14">Basic Lists
<i class="fa-solid fa-list f-right"></i></h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
<div class="px-s">
<p class="mb-s">
By default, ordered and unordered lists have no bullet.<br>
This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
</p>
<ul class="debug">
<li>Item 1</li>
<li>Item 2</li>
<li class="l-bullet-disc">
Item 3 with explicit disc bullet (See below)
</li>
</ul>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
<div class="px-s">
<p class="mb-s">
Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
or <span class="code">.list-bullets</span> class to list's root element.<br>
These classes must also be used for any nested children lists !
</p>
<div class="debug mb-s">
<ul class="l-bullets debug l-bullet-manual">
<li>Line 1</li>
<li>Line 2<br>Line 2 continued after a <i>br</i></li>
<li>Line 3</li>
<ul class="l-bullets l-bullet-manual">
<li>Line 3.1</li>
<li>Line 3.2</li>
</ul>
<li>Line 4</li>
</ul>
</div>
<div class="debug">
<ol class="l-bullets l-bullet-manual">
<li>Salt</li>
<li>Packs of crisps</li>
<ol class="l-bullets l-bullet-manual">
<li>Salt and pepper</li>
<li>Paprika</li>
</ol>
<li>Olive oil</li>
</ol>
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
<div class="px-s">
<p class="mb-s">
By default, the lists do not include their bullet in the parent element.<br>
This is due to the fact that the imposed spacings when using
<span class="code">list-style-position: inside;</span> looks like absolute trash.
</p>
<p class="mb-s">
This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
or <span class="code">list-bullet-inside</span> classes.<br>
Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
or <span class="code">list-bullet-manual</span> classes.
</p>
<p class="mb-s">
Please note that the following classes must be applied to the root element and any nested
list's root element too.
</p>
<div class="grid col-3">
<div>
<p><b>Outside (Default)</b></p>
<ul class="debug l-bullets l-bullet-outside my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-outside</b>&gt;li*3</span>
</div>
<div>
<p><b>Inside</b></p>
<ul class="debug l-bullets l-bullet-inside my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-inside</b>&gt;li*3</span>
</div>
<div>
<p><b>Manual (Recommended)</b></p>
<ul class="debug l-bullets l-bullet-manual my-xs">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="code">ul.l-bullets<b>.l-bullet-manual</b>&gt;li*3</span>
</div>
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
<div class="px-s">
<p class="mb-s">
Each list and its entry can have its bullets' style changed by using the following classes in the
<span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
<s>The <span class="code">type</span> property also works as expected in these cases.</s>
</p>
<p class="mb-s">
Please note that some of the more exotic bullet styles may not fit properly when using
the manual position as shown below.<br>
This is a known issue and won't be fixed as it is an edge-case.
</p>
<ul class="debug l-bullet-manual">
<li class="l-bullet-disc">
Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
</li>
<li class="l-bullet-square">
Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
</li>
<li class="l-bullet-decimal">
Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
</li>
<li class="l-bullet-decimal-leading">
Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
</li>
<li class="l-bullet-georgian">
Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
</li>
<li class="l-bullet-chinese">
Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
</li>
<li class="l-bullet-kannada">
Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
</li>
<li class="l-bullet-none">
None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
</li>
</ul>
</div>
</section>

16
htdocs/parts/lists_composed.php Normal file
View File

@@ -0,0 +1,16 @@
<?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="lists-composed"></a>
<div class="p-xs b r-s bkgd-grid mt-m">
<h2 class="t-w-500 t-size-14">Composed Lists
<i class="fa-solid fa-ellipsis f-right"></i></h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
</section>

68
htdocs/parts/rounding.php
View File

@@ -11,23 +11,67 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-bezier-curve f-right"></i></h2>
</div>
<section class="p-s">
<p>Rounding can be done on a corner/side/global basis using the standard size suffixes and some special ones.</p>
<p>These examples will have ???.</p>
<p>
Rounding can be applied on a global/sided/corner basis using the standard size suffixes and some
special ones shown below.
</p>
<p class="t-bold">Sizes:</p>
<h3 class="t-w-500 t-size-12 my-s">Regular sizes</h3>
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
<div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">r-0</span></div>
<div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">r-xs</span></div>
<div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">r-s</span></div>
<div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">r-m</span></div>
<div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">r-l</span></div>
<div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">r-xl</span></div>
<div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">.r-0</span></div>
<div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">.r-xs</span></div>
<div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">.r-s</span></div>
<div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">.r-m</span></div>
<div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">.r-l</span></div>
<div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">.r-xl</span></div>
</div>
<p class="t-bold">Special classes:</p>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special size</h3>
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
<div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">r-r</span></div>
<div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">.r-r</span></div>
</div>
<b>TODO: All a detail of all classes</b>
<details class="border bkgd-dark r-m mt-l">
<summary class="p-xs">Click to show/hide all classes</summary>
<div class="p-xs bt bkgd-grey">
<?php
$roundingSizes = ["0", "xs", "s", "m", "l", "xl", "r"];
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">r-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">General rounding</span></p>');
echo('<hr class="subtle my-s">');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rt-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rb-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Right rounding</span></p>');
echo('<hr class="subtle my-s">');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top right rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom right rounding</span></p>');
?>
</div>
</details>
</section>

11
htdocs/parts/sidebar.php
View File

@@ -69,10 +69,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<hr class="subtle">
<a class="a-hidden" href="#lists">
<a class="a-hidden" href="#lists-basic">
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i>
<span class="t-size-12">Lists</span>
<span class="t-size-12">Basic</span>
</p>
</a>
<a class="a-hidden" href="#lists-composed">
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
<span class="t-size-12">Composed</span>
</p>
</a>

16
htdocs/parts/spacing.php
View File

@@ -22,17 +22,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</p>
<div class="grid col-3 col-medium-2 col-mobile-1 gap-xs mt-s t-center">
<div><div class="debug p-xxs"><div class="debug"><p><span class="code">p-xxs</span></p></div></div></div>
<div><div class="debug p-xs"><div class="debug"><p><span class="code">p-xs</span></p></div></div></div>
<div><div class="debug p-s"><div class="debug"><p><span class="code">p-s</span></p></div></div></div>
<div><div class="debug p-m"><div class="debug"><p><span class="code">p-m</span></p></div></div></div>
<div><div class="debug p-l"><div class="debug"><p><span class="code">p-l</span> </p></div></div></div>
<div><div class="debug p-xl"><div class="debug"><p><span class="code">p-xl</span></p></div></div></div>
<div><div class="debug p-xxs"><div class="debug"><p><span class="code">.p-xxs</span></p></div></div></div>
<div><div class="debug p-xs"><div class="debug"><p><span class="code">.p-xs</span></p></div></div></div>
<div><div class="debug p-s"><div class="debug"><p><span class="code">.p-s</span></p></div></div></div>
<div><div class="debug p-m"><div class="debug"><p><span class="code">.p-m</span></p></div></div></div>
<div><div class="debug p-l"><div class="debug"><p><span class="code">.p-l</span> </p></div></div></div>
<div><div class="debug p-xl"><div class="debug"><p><span class="code">.p-xl</span></p></div></div></div>
</div>
<details class="border bkgd-blank r-m mt-s">
<details class="border bkgd-dark r-m mt-s">
<summary class="p-xs">Click to show/hide all classes</summary>
<div class="p-xs bt bkgd-blank-dark">
<div class="p-xs bt bkgd-grey">
<?php
$spacingSizes = ["0", "xxs", "xs", "s", "m", "l", "xl"];

97
htdocs/parts/tables.php
View File

@@ -12,54 +12,57 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Unstyled table</h3>
<p class="mb-s">
Unstyled tables have no cell gap, no border and no other form of styling.
</p>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
<b>table&gt;tr*2&gt;td*2</b>
</code>
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Unstyled table</h3>
<div class="px-s">
<p class="mb-s">
Unstyled tables have no cell gap, no border and no other form of styling.
</p>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
<b>table&gt;tr*2&gt;td*2</b>
</code>
</div>
<h3 class="t-w-500 t-size-12 my-s">Stylish table</h3>
<p class="mb-xxs">
Tables can quickly be styled by simply using the following classes:
</p>
<ul class="mb-s">
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
</ul>
<table class="stylish table-p-s border">
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
table<b>.stylish.table-p-s.border</b><br>
&nbsp;&nbsp;th>td*2<br>
&nbsp;&nbsp;tr*2>td*2
</code>
<h3 class="t-w-500 t-size-12 my-s mt-l">Stylish table</h3>
<div class="px-s">
<p class="mb-xxs">
Tables can quickly be styled by simply using the following classes:
</p>
<ul class="mb-s list-bullets list-bullet-manual ml-xs">
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
</ul>
<table class="stylish table-p-s border">
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
table<b>.stylish.table-p-s.border</b><br>
&nbsp;&nbsp;th>td*2<br>
&nbsp;&nbsp;tr*2>td*2
</code>
</div>

12
htdocs/parts/text_alignment.php
View File

@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<tr>
<td><p class="t-bold">Left</p></td>
<td><p class="t-left text-direction-target">Left</p></td>
<td><span class="code">t-left</span></td>
<td><span class="code">.t-left</span></td>
</tr>
<tr>
<td><p class="t-bold">Center</p></td>
<td><p class="t-center text-direction-target">Centered</p></td>
<td><span class="code">t-center</span></td>
<td><span class="code">.t-center</span></td>
</tr>
<tr>
<td><p class="t-bold">Right</p></td>
<td><p class="t-right text-direction-target">Right</p></td>
<td><span class="code">t-right</span></td>
<td><span class="code">.t-right</span></td>
</tr>
<tr>
<td><p class="t-bold">Start</p></td>
<td><p class="t-start text-direction-target">Start</p></td>
<td><span class="code">t-start</span></td>
<td><span class="code">.t-start</span></td>
</tr>
<tr>
<td><p class="t-bold">End</p></td>
<td><p class="t-end text-direction-target">End</p></td>
<td><span class="code">t-end</span></td>
<td><span class="code">.t-end</span></td>
</tr>
<tr>
<td><p class="t-bold">Justify</p></td>
<td><p class="t-justify">Lorem ipsum.<br>Donor si amet elit.</p></td>
<td><span class="code">t-justify</span></td>
<td><span class="code">.t-justify</span></td>
</tr>
</tbody>
</table>

8
htdocs/parts/text_misc.php
View File

@@ -21,22 +21,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<tr>
<td><p class="t-bold">No wrap</p></td>
<td><p class="t-nowrap">Cannot really be shown</p></td>
<td><span class="code">t-nowrap</span></td>
<td><span class="code">.t-nowrap</span></td>
</tr>
<tr>
<td><p class="t-bold">Half muted</p></td>
<td><p class="t-half-muted">Half muted</p></td>
<td><span class="code">t-half-muted</span></td>
<td><span class="code">.t-half-muted</span></td>
</tr>
<tr>
<td><p class="t-bold">Muted</p></td>
<td><p class="t-muted">Muted text</p></td>
<td><span class="code">t-muted</span></td>
<td><span class="code">.t-muted</span></td>
</tr>
<tr>
<td><p class="t-bold">Super muted</p></td>
<td><p class="t-super-muted">Super Muted</p></td>
<td><span class="code">t-super-muted</span></td>
<td><span class="code">.t-super-muted</span></td>
</tr>
</tbody>
</table>

6
htdocs/parts/text_modifiers.php
View File

@@ -23,19 +23,19 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td><p class="t-bold">Uppercase</p></td>
<td><p>Regular Case</p></td>
<td><p class="t-ucase">Regular Case</p></td>
<td><span class="code">t-ucase</span></td>
<td><span class="code">.t-ucase</span></td>
</tr>
<tr>
<td><p class="t-bold">Lowercase</p></td>
<td><p>Regular Case</p></td>
<td><p class="t-lcase">Regular Case</p></td>
<td><span class="code">t-lcase</span></td>
<td><span class="code">.t-lcase</span></td>
</tr>
<tr>
<td><p class="t-bold">Capitalize</p></td>
<td><p>no case</p></td>
<td><span class="t-capitalize">no case</span></td>
<td><span class="code">t-capitalize</span></td>
<td><span class="code">.t-capitalize</span></td>
</tr>
</tbody>
</table>

10
htdocs/parts/text_styles.php
View File

@@ -22,31 +22,31 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<tr>
<td><p class="t-bold">Italic</p></td>
<td><p class="t-italic">Italic text</p></td>
<td><span class="code">t-italic</span></td>
<td><span class="code">.t-italic</span></td>
<td><span class="code">i</span></td>
</tr>
<tr>
<td><p class="t-bold">Oblique</p></td>
<td><p class="t-oblique">Oblique text</p></td>
<td><span class="code">t-oblique</span></td>
<td><span class="code">.t-oblique</span></td>
<td><span class="t-muted">N/A</span></td>
</tr>
<tr>
<td><p class="t-bold">Underline</p></td>
<td><p class="t-underline">Underlined text</p></td>
<td><span class="code">t-underline</span></td>
<td><span class="code">.t-underline</span></td>
<td><span class="code">u</span></td>
</tr>
<tr>
<td><p class="t-bold">Strikethrough</p></td>
<td><p class="t-strikethrough">Struck text</p></td>
<td><span class="code">t-strikethrough</span></td>
<td><span class="code">.t-strikethrough</span></td>
<td><span class="code">s</span></td>
</tr>
<tr>
<td><p class="t-bold">Overline</p></td>
<td><p class="t-overline">Overline text</p></td>
<td><span class="code">t-overline</span></td>
<td><span class="code">.t-overline</span></td>
<td><span class="t-muted">N/A</span></td>
</tr>
</tbody>

14
htdocs/parts/text_weights.php
View File

@@ -11,7 +11,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-text-height f-right"></i></h2>
</div>
<section class="p-s">
<h3 class="t-size-12 mb-xs">Numeric Weights</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
<thead>
<th>Style</th>
@@ -24,15 +23,14 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
echo('<tr>');
echo('<td class="t-bold">' . ($i * 100) . '</td>');
echo('<td class="t-w-' . ($i * 100) . '">Lorem Ipsum donor.</td>');
echo('<td><span class="code">t-w-' . ($i * 100) . '</span></td>');
echo('<td><span class="code">.t-w-' . ($i * 100) . '</span></td>');
echo('</tr>');
}
?>
</tbody>
</table>
<h3 class="t-size-12 mb-xs mt-m">Aliased Weights</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center mt-l">
<thead>
<th>Style</th>
<th>Example</th>
@@ -42,22 +40,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<tr>
<td><p class="t-bold">Lighter</p></td>
<td><p class="t-lighter">Lorem Ipsum 123 !</p></td>
<td><span class="code mr-xs">t-lighter</span><span class="code">t-w-lighter</span></td>
<td><span class="code mr-xs">.t-lighter</span><span class="code">.t-w-lighter</span></td>
</tr>
<tr>
<td><p class="t-bold">Normal</p></td>
<td><p class="t-normal">Lorem Ipsum 123 !</p></td>
<td><span class="code mr-xs">t-normal</span><span class="code">t-w-normal</span></td>
<td><span class="code mr-xs">.t-normal</span><span class="code">.t-w-normal</span></td>
</tr>
<tr>
<td><p class="t-bold">Bold</p></td>
<td><p class="t-bold">Lorem Ipsum 123 !</p></td>
<td><span class="code mr-xs">t-bold</span><span class="code">t-w-bold</span></td>
<td><span class="code mr-xs">.t-bold</span><span class="code">.t-w-bold</span></td>
</tr>
<tr>
<td><p class="t-bold">Bolder</p></td>
<td><p class="t-bolder">Lorem Ipsum 123 !</p></td>
<td><span class="code mr-xs">t-bolder</span><span class="code">t-w-bolder</span></td>
<td><span class="code mr-xs">.t-bolder</span><span class="code">.t-w-bolder</span></td>
</tr>
</tbody>
</table>