Improved sidebar, Added misc rules and options

Update index.php, sidebar.php, and 6 more files...
2024-11-21 18:20:19 +01:00 · 2024-11-21 18:20:19 +01:00 · d584aa9732
commit d584aa9732
parent b4dce500fe
8 changed files with 188 additions and 137 deletions
--- a/htdocs/index.php
+++ b/htdocs/index.php
@ -85,8 +85,8 @@
    <!-- Lists > Base -->
    <?php include("./parts/lists_base.php"); ?>

-    <!-- Lists > Composed -->
-    <?php include("./parts/lists_composed.php"); ?>
+    <!-- Lists > Composed
+    <?php include("./parts/lists_composed.php"); ?>-->

    <!-- Grids -->
    <?php include("./parts/grids.php"); ?>
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@ -5,16 +5,20 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 }
 ?>

-<nav id="sidebar" class="sidebar p-m pt-l">
+<nav id="sidebar" class="sidebar">
+
+    <div class="p-m pt-l">
        <a href="/" class="no-select">
            <img class="logo-sidebar-v2"
                 src="/img/logo-large-fluent-unshaded.svg"
                 alt="Website's logo"
                 draggable="false">
        </a>
-    <hr class="subtle">
+    </div>

-    <p class="t-bold t-size-14 py-xxs t-half-muted _t-underline t-center">Text</p>
+    <details class="by t-noselect" open>
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Core</summary>
+        <div class="p-xs bt bkgd-grey">
            <a class="a-hidden" href="#text-weights">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i>
@ -72,55 +76,57 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
            <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">Basic</span>
+                    <span class="t-size-12">Lists</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>
-
-    <hr class="subtle">
-
            <a class="a-hidden" href="#grids">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i>
                    <span class="t-size-12">Grids</span>
                </p>
            </a>
-
            <a class="a-hidden" href="#tables">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i>
                    <span class="t-size-12">Tables</span>
                </p>
            </a>
+        </div>
+    </details>

-    <hr class="subtle">
-
+    <details class="by t-noselect" open>
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Site</summary>
+        <div class="p-xs bt bkgd-grey">
            <a class="a-hidden" href="#horizontal-rulers">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-ruler pr-xs t-size-12 t-half-muted"></i>
                    <span class="t-size-12">Horizontal Rulers</span>
                </p>
            </a>
-
-    <hr class="subtle">
-
            <a class="a-hidden" href="#backgrounds">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-paint-roller pr-xs t-size-12 t-half-muted"></i>
                    <span class="t-size-12">Backgrounds</span>
                </p>
            </a>
-
            <a class="a-hidden" href="#buttons">
                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
                    <i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i>
                    <span class="t-size-12">Buttons</span>
                </p>
            </a>
+        </div>
+    </details>
+
+    <details class="by t-noselect" open>
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Examples</summary>
+        <div class="p-xs bt bkgd-grey">
+            <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>
+        </div>
+    </details>
 </nav>
--- a/readme.md
+++ b/readme.md
@ -1,6 +1,29 @@
 # NibblePoker's CSS Theme (W.I.P.)
 A simple and minimalist CSS stylesheet used across all my websites and web-based applications.

+## Structure
+This stylesheet is composed of 4 major parts that all work together towards a common goal
+all the while staying independent and usable individually if you ever wished to.
+
+### External
+The *External* rules regroup every external CSS stylesheets that are included in this one.\
+Currently, [reset.css](https://meyerweb.com/eric/tools/css/reset/) is the only such stylesheet.
+
+**See:** [scss/external/](scss/external)
+
+### Core
+The *Core* rules define mostly universal and portable CSS rules and other utilities for text,
+spacing and whatnot. \
+Internally, they are defined after everything else in order to let them override rules
+applied to the custom elements and site-centric rules.
+
+**See:** [scss/core/](scss/core)
+
+### Site
+
+### Custom
+
+

 ## License
 The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)
--- a/scss/config.scss
+++ b/scss/config.scss
@ -1,8 +1,15 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)

-// Add the "w-000px"/"h-000px" classes.
+/* Config > NibbleCSS */
+
+// Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
+// See: core/sizing.scss
 $add-px-sizing-rules: false;

 $nibblepoker-background-root: "./";

+// Toggles the inclusion of the ".bkgd-grid" background rules.
+// See: site/backgrounds.scss
+$include-grid-backgrounds: true;
+
 $use-b64-backgrounds: true;
--- a/scss/core/sizing.scss
+++ b/scss/core/sizing.scss
@ -21,12 +21,20 @@
 .w-half {
 	width: 50%;
 }
+.wm-half {
+	max-width: 50%;
+}

 .h-half {
 	height: 50%;
 }
+.hm-half {
+	max-height: 50%;
+}

-// Pixels Sizing (Deprecated, disabled by default, use custom rules !)
+// Pixels Sizing
+// These rules are deprecated and disabled by default.
+// You should preferably use custom site-specific or app-specific rules instead !
@if($add-px-sizing-rules) {
 	// 50, 100, ..., 250 px
 	@for $_ from 1 through 5 {
--- a/scss/core/text.scss
+++ b/scss/core/text.scss
@ -166,3 +166,7 @@ s, .t-strikethrough {
 	// Should be 35% TBH
 	opacity: 45%;
 }
+
+.t-noselect {
+	user-select: none;
+}
--- a/scss/site/backgrounds.scss
+++ b/scss/site/backgrounds.scss
@ -14,6 +14,7 @@
 	background: $color-background-main;
 }

+@if($include-grid-backgrounds) {
 	// The element rules override rules in `base.scss ~94`
 	.bkgd-grid10, .bkgd-surround, header, nav, footer {
 		//background: #{$color-background-surround};
@ -36,13 +37,12 @@
 	}

 	.bkgd-grid40, .bkgd-grid {
-	background:
-		#{$color-background-surround}
-		url("data:image/png;base64,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")
-		repeat scroll center center;
+		background: #{$color-background-surround}
+		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEUAAABlZWVYWFhTU1NRUVFQUFBPT09PT09OTk4WFhZOTk5OTk5NTU1NTU1IbxM8AAAADnRSTlMABAgMEBQYHCElJSktNNvaVJcAAAjfSURBVHhepVfNdtpIFgZ2tTOwqh3I7pxTu8YC+tytkeRT2wCiK8sAIte9jA0pZz0mSp5gHiC25ZzZdg/dTzDzBvM2813JOPTMapjo5NiBfFX35/u+e1ULdUPXVcY1dcErvnF9n+WffaAbqqPXeWA6OjA1VT13xecis7UTaqqmntiaiuzEr/y1feSNC0xDt8wVB6aFZw/5VHzJL2wtpI450QMnkBmPaePWOCvA2YH62XcA6Kg95JfisRhT7a//85/aPW99j2oq0DXVMcjhJYxb/rJL7NCt3Ibvi5oa2OdvNvkmbwPSNIAZBPISxm+7tU9oYFecund5TW34GbLM732IG0LAuog80HvIE3/gOU/clIZ+i1uGe8gRuezPXPOH3QRFPVETes0XLnZrP7A3/qpoaik1YlCoLX6+QN7tPu1i29BNnbjI9u2YEze0P7tVfqoDXUKMFP4AcpXfFRPbQo9iM3djm9m5jfyq+JAHhP9cFQfg43JJ7Ni+5Usf+6m/95/8W/BA6IMTy7P3z0M+5cSnhN9jm5ilW9rMX/uvLs2H+DAGRFLuHEA2eWInLmRAhu7CLWxECY3cmrcullu4ZII6vOUTJzT2sTsul3PpPNgamK6qHTyxjTmmJUn06JZplawIhNdClnPdAR0b+hByyimN3chlvqYaqma6VEI08hNI2+Cjw2TxvOIFJbjlJ0QvtTstIeCgOSaXlhm6kb2hFPROWGjRI5xkgpf7Jv7XXd/UVYxvSz7X1dq/R6K3ucQvummTyLj5EuZ7/+hfUV1PnED6vhao2Mc0pY++0kybmrqLNL+bxLX/pYjA8IUp73TH6UUoXUUe0jmy6OARnsV85de+umngQtfd2xMgChZhKkhILVPRceMTf5Vvigoy8pmTo/cQI90VSFefC6C8ZeXfu6/5LVeQMRSKz4/W/jpPuAfrmfoZ6vVYPO36LJl09KGnLQl8sI/+geGrn3xCPT3xEzcC5Mvut5207AdEfljoOSCZu8u3HvL7VET2VM3g+NcQ1u/5yo/lFldXwYHnJxaNttBTkdDxPpaiHnX9mjIK9ZAwZXh/fk//l6grSERglc5cygH1aWrf2z1ESF8K4z8h4pO4i0P6kVK+Rl57SFsDgtrJ98d78omack+3aQnRjuDwb3LpwlvX1Gd8YUMjLBhSZFcyLirGneiMTqlnpnbqZnbrtgwI7LWuFhzZHkqx8n1KjOhpVhWlqV7bNrUpomu+dA/+AUJa0A+QVIbTQz12S574JQ6rqRt//Hzp2xoKvBCZmjnHvLArX5KER1ak0Xq2qzVnTsotEGmjmjuxnIRSe8N3uUCm7ozFzlvPRjv0Q8bYEMgFfLKpUyc+HPuhn9MbXyoR9cIxai+tS7ukrmrp43K550fIVW7pkuwuotDYxUZcrW4iJ/2Y+ZShpt3HHQiEX1hG9GsDCgLQLA37hiauX2Yi+cwpJnGxj3zvkR+k46XjAb4KoUSZu9C6C0iMsKWXFubn3kO18IPiNh/aY3KZFUJ9IXlgpIQi2YhxYn7rM45ZZvQr13c/UsIRX9qVq31mIQjCA0Q8TMowBuyb/y1fcGID1VQygntmgY7NPei5yStl96EYyQSxKvGad/yQL+yrSno0BNtnnPqpu+Vjcomog3Nie0rVTTWd8IS7Gp5j5/yGm0Y60ia4pUa2Qp3EtUxTnZlzyac0jQVlHIBA13bsHoquWjtx6wF19yM4sl3UZGh/FD/klj7RYxq7hhpDjQN68J1y12hS4gAA6Di9/O0fzVItmLkaiwm/55m74Y5pmzYC7KgO/GXNB5OaAJHKS1faIMdPfu5+9+98YELq0dLIvhyY2H2HTLn2z3/JnnyOjFq04LWb23t+xx19Sl3E3y03mSl9hyRH9aVrHr3UW1wxUFDLwYafeZgtz2BXD6VAwAuECMj9Duyqll6k+n3pffR/7Pou9Aseuhl/zQWyEsiJ+roDHVWv3B4PN71v/nOemqkb85Ju/bvylgUfvycvbJ/67sknssHiXyLglBO/LI0q0MKyxGGbqmKoIFOa0ham19JNPWEpxNAt7RTghpIeiYYANo39fEnA47X76IfUgaP1CRCd0NqHVG1g4qRDK3key7HXPHFNqKFvF2bLX8qoQ2rplj58MUl541/Zmbsk3BhB06cYCTN3QZ956eFabum7Go/pvvTo3Ga7zKb2J4dMI54ik9RJp9f5FSDXfs1hucl8b+vc/FqEdsE3bnEUx0ISmoNlB33/XPyxy+ApA3fpxiXxO88Doyv226O2ljBapv4C+YW/FXPXI4w+u6ggz6tC05zIat2mDjX+xK673R/5K3OuVvbajlgg+7kvsRzFMbP0M1rzzz6AVuSukLCLHbzmRvLm4TDs8RPE4Vpg+v7SzuxTgfaZRgkJ1GGYUwc7d0392mYGIgMEES95CojMXsQK1TdU96AnA5cynFqPzJkDD47ax8TtT57DiDnEDeh6dbZ9U8Smeg+b85Rf9uS6+p7qhT1FQM3ygBGNeZZHtoRwCg5ixapCBV9fehJyW3dUA3/BZ5/6R85YIDMf0Y2X0hy/J/f5zK5owNgm+NtuQhltfUx/frt48pC7+3tevkBueWkjgqx45lFqTuEDG38D42gdEpVh4O4JxoTsHvPEvsX4HNLYTfkWvh+ZrR+4P3P7YSfr0cdcynKcj8X2Sz5mTBk158CACW7j1/6huOM2ychrkszqhj5YepfuQ/FW9mA9sg2TcEoRpHWVy2gFRIelpOvmADJAJRYcaPgkBTozmb+GYVz5rCitvaQpWKf+nz25rkM7kE0fTjbgDXL4AfVrqDo+CenUrNwlMlvzhZmWkpZFER585tp0yROf+S0/+ZTOqIuROyjnJfZnmyHIC77mUsoat0Q8wpd9FzPE5O6KiEOCeUA35xQafMt9+5SndkKVcRznY0sG4VUqk4yW7oYiCpDB/oU3eClwU49YPBSmdObQJp3aOsKbCMNAlrU7AaCyI3EEgbRwYCCzNKR5tVqzGEXo1nYNE/8L7/nVVfVn2+vR3HWOy+XfT93jnVJm+GEAAAAASUVORK5CYII=") repeat scroll center center;

 		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
 	}
+}

 .bkgd-transparent {
 	background: rgba(0, 0, 0, 0);
--- a/todos.txt
+++ b/todos.txt
@ -9,7 +9,10 @@ scrolling utilities
 media
 modal
 code
+borders

 custom elements
 * wedge
 * ???
+
+bkgd color if grid disabled