htdocs/index.php

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

htdocs/js/text-direction-switch.js

@@ -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';
-                }
-            });
-        };
-    });
-});

htdocs/parts/intro.php

@@ -3,8 +3,6 @@
 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">
@@ -28,29 +26,25 @@ global $root_path;
 
     <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
     <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 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 &amp; consistent naming scheme</li>
+            <li>Standardized naming scheme</li>
         </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>
-            <ul class="l-bullets l-bullet-manual">
+            <ul>
                 <li>Bound to specific elements</li>
-            </ul>
+                <li>???</li>
+                <li>???</li>
                 <li>No forced smooth transition</li>
-        </ul>
+                <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>
     </div>

htdocs/parts/lists.php

@@ -11,132 +11,15 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <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>???.</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>
 
-
-    <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">
+        <ul>
-            <li>Salt</li>
+            <li>Line 1</li>
-            <li>Packs of crisps</li>
+            <li>Line 2<br>Line 2 continued</li>
-            <ol class="l-bullets l-bullet-manual">
+            <li>Line 3</li>
-                <li>Salt and pepper</li>
+        </ul>
-                <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>
+    <b>TODO: All a detail of all classes</b>
-    <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>

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 text-direction-target">Left</p></td>
+            <td><p class="t-left">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 text-direction-target">Centered</p></td>
+            <td><p class="t-center">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 text-direction-target">Right</p></td>
+            <td><p class="t-right">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 text-direction-target">Start</p></td>
+            <td><p class="t-start">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 text-direction-target">End</p></td>
+            <td><p class="t-end">End</p></td>
             <td><span class="code">t-end</span></td>
         </tr>
         <tr>
@@ -50,6 +50,5 @@ 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,54 +2,28 @@
 
 /* Core > Lists */
 
-ul {
+ul:not(.no-bullet) {
-  &.l-bullets, &.list-bullets {
-    list-style-type: disc;
-  }
-}
-
-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 {
+    list-style-type: disc;
   }
 }
 
-ul, ol, li {
+ol:not(.no-bullet) {
-  &.list-bullet-none, &.l-bullet-none {
-    list-style-type: none;
-  }
-  &.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;
-  }
+  padding-left: 1.5rem;
-  &.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;
-  }
 }
+
+li {
+  //list-style-type: disc;
+
+  /*&>  li {
+    list-style-type: circle;
+  }*/
+}
+
+/*ul.no-bullet, ol.no-bullet {
+  list-style-type: none;
+  padding-left: 0;
+}*/