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

Compare commits

base: aziascreations:8fa4b6cd2eb3a3fcb0185f905da403eb4e786498
Branches Tags
aziascreations:master
..
compare: aziascreations:a2a229c720efe1febcf518e410f4a38016ccc2d7
Branches Tags
aziascreations:master

No commits in common. "8fa4b6cd2eb3a3fcb0185f905da403eb4e786498" and "a2a229c720efe1febcf518e410f4a38016ccc2d7" have entirely different histories.
8fa4b6cd2e ... a2a229c720

7 changed files with 40 additions and 207 deletions
Show Stats Expand all files Collapse all files

0
docker-compose.yml → docker-compose.dev.yml
View File

1
htdocs/index.php
View File

@ -131,6 +131,5 @@
</footer> </footer>
<script src="/js/sidebar.js"></script> <script src="/js/sidebar.js"></script>
<script src="/js/text-direction-switch.js"></script>
</body> </body>
</html> </html>

16
htdocs/js/text-direction-switch.js
View File

@ -1,16 +0,0 @@
const eTextDirectionSwitches = document.querySelectorAll(".text-direction-switch");
const eTextDirectionTargets = document.querySelectorAll(".text-direction-target");
document.addEventListener("DOMContentLoaded", () => {
eTextDirectionSwitches.forEach(eSwitch => {
eSwitch.onclick = function() {
eTextDirectionTargets.forEach(eTarget => {
if(eTarget.style.direction === "rtl") {
eTarget.style.direction = 'ltr';
} else {
eTarget.style.direction = 'rtl';
}
});
};
});
});

30
htdocs/parts/intro.php
View File

@ -3,8 +3,6 @@
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
header('HTTP/1.1 403 Forbidden'); die(); header('HTTP/1.1 403 Forbidden'); die();
} }
global $root_path;
?> ?>
<div class="p-xs b r-s bkgd-grid"> <div class="p-xs b r-s bkgd-grid">
@ -28,29 +26,25 @@ global $root_path;
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3> <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
<div class="ml-xs"> <div class="ml-xs">
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4> <h4 class="t-size-11">Core Stylesheet</h4>
<ul class="l-bullets l-bullet-manual"> <p>These rules apply to the "core" part of the stylesheet:</p>
<ul>
<li>No implicit sizes, margins or paddings</li> <li>No implicit sizes, margins or paddings</li>
<li>No styles from class-less DOM, except for styling elements</li> <li>No styles from class-less DOM, except for styling elements</li>
<li>Self-sufficient and embeddable as a single file or text blob</li> <li>Self-sufficient and embeddable as a single file or text blob</li>
<li>Competitive minified size</li> <li>Competitive minified size</li>
<li>Standardized &amp; consistent naming scheme</li> <li>Standardized naming scheme</li>
</ul> </ul>
<!-- Avoid nested divs, keep the logical DOM layout, -->
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4> <h4 class="t-size-11 mt-s">Site Stylesheet</h4>
<ul class="l-bullets l-bullet-manual"> <ul>
<li>Prefabs for common elements</li> <li>Prefabs for common elements</li>
<ul class="l-bullets l-bullet-manual"> <ul>
<li>Bound to specific elements</li> <li>Bound to specific elements</li>
</ul> <li>???</li>
<li>No forced smooth transition</li> <li>???</li>
</ul> <li>No forced smooth transition</li>
<li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</li>
<h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
<ul class="l-bullets l-bullet-manual">
<li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
<ul class="l-bullets l-bullet-manual">
<li>Tested on an old Chuwi Ubook X internally</li>
</ul> </ul>
</ul> </ul>
</div> </div>

127
htdocs/parts/lists.php
View File

@ -11,132 +11,15 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-list f-right"></i></h2> <i class="fa-solid fa-list f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3> <p>???.</p>
<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 class="debug">
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3> <ul>
<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 1</li>
<li>Line 2<br>Line 2 continued after a <i>br</i></li> <li>Line 2<br>Line 2 continued</li>
<li>Line 3</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> </ul>
</div> </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>
<b>TODO: All a detail of all classes</b>
</section> </section>

13
htdocs/parts/text_alignment.php
View File

@ -20,27 +20,27 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<tbody> <tbody>
<tr> <tr>
<td><p class="t-bold">Left</p></td> <td><p class="t-bold">Left</p></td>
<td><p class="t-left text-direction-target">Left</p></td> <td><p class="t-left">Left</p></td>
<td><span class="code">t-left</span></td> <td><span class="code">t-left</span></td>
</tr> </tr>
<tr> <tr>
<td><p class="t-bold">Center</p></td> <td><p class="t-bold">Center</p></td>
<td><p class="t-center text-direction-target">Centered</p></td> <td><p class="t-center">Centered</p></td>
<td><span class="code">t-center</span></td> <td><span class="code">t-center</span></td>
</tr> </tr>
<tr> <tr>
<td><p class="t-bold">Right</p></td> <td><p class="t-bold">Right</p></td>
<td><p class="t-right text-direction-target">Right</p></td> <td><p class="t-right">Right</p></td>
<td><span class="code">t-right</span></td> <td><span class="code">t-right</span></td>
</tr> </tr>
<tr> <tr>
<td><p class="t-bold">Start</p></td> <td><p class="t-bold">Start</p></td>
<td><p class="t-start text-direction-target">Start</p></td> <td><p class="t-start">Start</p></td>
<td><span class="code">t-start</span></td> <td><span class="code">t-start</span></td>
</tr> </tr>
<tr> <tr>
<td><p class="t-bold">End</p></td> <td><p class="t-bold">End</p></td>
<td><p class="t-end text-direction-target">End</p></td> <td><p class="t-end">End</p></td>
<td><span class="code">t-end</span></td> <td><span class="code">t-end</span></td>
</tr> </tr>
<tr> <tr>
@ -50,6 +50,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<button>Switch text direction</button>
<button class="p-xs r-s border primary mt-s text-direction-switch">Switch text direction</button>
</section> </section>

60
scss/core/lists.scss
View File

@ -2,54 +2,28 @@
/* Core > Lists */ /* Core > Lists */
ul { ul:not(.no-bullet) {
&.l-bullets, &.list-bullets { padding-left: 1.5rem;
&> li {
list-style-type: disc; list-style-type: disc;
} }
} }
ol { ol:not(.no-bullet) {
&.l-bullets, &.list-bullets { list-style-type: decimal;
list-style-type: decimal; padding-left: 1.5rem;
}
} }
ul, ol { li {
&.l-bullet-inside, &.list-bullet-inside { //list-style-type: disc;
list-style-position: inside;
} /*&> li {
&.l-bullet-outside, &.list-bullet-outside { list-style-type: circle;
list-style-position: outside; }*/
}
&.l-bullet-manual, &.list-bullet-manual {
list-style-position: outside;
padding-left: 1.5rem;
}
} }
ul, ol, li { /*ul.no-bullet, ol.no-bullet {
&.list-bullet-none, &.l-bullet-none { list-style-type: none;
list-style-type: none; padding-left: 0;
} }*/
&.list-bullet-disc, &.l-bullet-disc {
list-style-type: disc;
}
&.list-bullet-square, &.l-bullet-square {
list-style-type: square;
}
&.list-bullet-decimal, &.l-bullet-decimal {
list-style-type: decimal;
}
&.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
list-style-type: decimal-leading-zero;
}
&.list-bullet-georgian, &.l-bullet-georgian {
list-style-type: georgian;
}
&.list-bullet-chinese, &.l-bullet-chinese {
list-style-type: trad-chinese-informal;
}
&.list-bullet-kannada, &.l-bullet-kannada {
list-style-type: kannada;
}
}