Removed dev docker-compose file

Update docker-compose.dev.yml and docker-compose.yml

htdocs/index.php

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

htdocs/js/text-direction-switch.js

@@ -0,0 +1,16 @@
+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';
+                }
+            });
+        };
+    });
+});

htdocs/parts/intro.php

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

htdocs/parts/lists.php

@@ -11,15 +11,132 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-list f-right"></i></h2>
 </div>
 <section class="p-s">
-    <p>???.</p>
+    <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>
 
-    <div class="debug">
+
-        <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</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>
 
-    <b>TODO: All a detail of all classes</b>
 </section>

htdocs/parts/text_alignment.php

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

scss/core/lists.scss

@@ -2,28 +2,54 @@
 
 /* Core > Lists */
 
-ul:not(.no-bullet) {
+ul {
-  padding-left: 1.5rem;
+  &.l-bullets, &.list-bullets {
-
-  &> li {
     list-style-type: disc;
   }
 }
 
-ol:not(.no-bullet) {
+ol {
+  &.l-bullets, &.list-bullets {
     list-style-type: decimal;
+  }
+}
+
+ul, ol {
+  &.l-bullet-inside, &.list-bullet-inside {
+    list-style-position: inside;
+  }
+  &.l-bullet-outside, &.list-bullet-outside {
+    list-style-position: outside;
+  }
+  &.l-bullet-manual, &.list-bullet-manual {
+    list-style-position: outside;
     padding-left: 1.5rem;
+  }
 }
 
-li {
+ul, ol, li {
-  //list-style-type: disc;
+  &.list-bullet-none, &.l-bullet-none {
-
-  /*&>  li {
-    list-style-type: circle;
-  }*/
-}
-
-/*ul.no-bullet, ol.no-bullet {
     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;
+  }
+}