Split and re-ordered SCSS files for easier overrides of defaults (#4)

* Split SCSS for easier changes
* Re-ordered SCSS files for easier overrides of defaults
* Fixed padding classes with auto value
* Added theme """stub"""

.gitignore

@@ -5,11 +5,12 @@
 node_modules/
 
 # Corporate-specific stuff
-scss/themes/theme_corp_*
+*_corp_*
 
 # Build Artifacts
 *.css
 *.min.html
+*.html
 *.7z
 *.zip
 *.tar

htdocs/index.php

@@ -32,7 +32,7 @@
 
 <header class="w-full p-m pl-s">
     <h1 class="t-size-17 t-w-500">
-        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation v0.0.1
+        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS v0.0.2
         <a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
     </h1>
 </header>

htdocs/parts/intro.php

@@ -16,17 +16,17 @@ global $root_path;
     <p class="ml-xs">
         <i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
         off-the-shelf stylesheets on low-end and mobile devices.<br>
-        However, it rapidly got used outside its intended environment and was spun-off into a separate a
+        However, it rapidly got used in other public/private/professional projects, and it was spun-off into a
-        publicly accessible and truly free project.
+        separate, publicly accessible, and truly free project.
     </p>
     <p class="ml-xs mt-s">
-        <i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
+        <i>NibbleCSS</i> is also released into the public domain due to personal beliefs, and will always stay
-        or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
+        that way.<br>
-        Following that philosophy, <i>NibbleCSS</i> also makes use of
+        This project also uses <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>,
-        <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
         which was also released into the public domain in 2011.
     </p>
 
+    <!--<s>
         <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>
@@ -55,6 +55,7 @@ global $root_path;
                 </ul>
             </ul>
         </div>
+    </s>-->
 
     <h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
     <table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">

readme.md

@@ -17,7 +17,7 @@ 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)
+**See:** [scss/core/](scss/old/core)
 
 ### Site
 

scss/borders/border-colors.scss

@@ -1,5 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
+/* Borders > Colors */
+
 .border, code, .code, kbd {
 	border-color: #{$color-border-code};
 	

scss/borders/border-styles.scss

@@ -0,0 +1,23 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Borders > Styles */
+
+// TODO: Improve if per-side border styles are required.
+
+@mixin border-style-maker($style-key, $style-css-value) {
+	.border-#{$style-key}, .b-#{$style-key} {
+		border-style: #{$style-css-value};
+	}
+}
+
+@include border-style-maker("none", "none");
+@include border-style-maker("hidden", "hidden");
+@include border-style-maker("dotted", "dotted");
+@include border-style-maker("dashed", "dashed");
+@include border-style-maker("solid", "solid");
+@include border-style-maker("double", "double");
+@include border-style-maker("groove", "groove");
+@include border-style-maker("ridge", "ridge");
+@include border-style-maker("inset", "inset");
+@include border-style-maker("outset", "outset");

scss/borders/border-targeting.scss

@@ -1,8 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Borders */
 
-/* Core > Borders > Enabling */
+/* Borders > Targeting */
 
 .b, .border {
 	border: 1px solid #{$color-border-default};
@@ -30,7 +29,7 @@
 @include border-maker-enable("r", "right");
 
 
-/* Core > Borders > Disabling */
+/* Borders > Disabling */
 
 .b-0 {
 	border: 0;
@@ -56,25 +55,3 @@
 @include border-maker-disable("b", "bottom");
 @include border-maker-disable("l", "left");
 @include border-maker-disable("r", "right");
-
-
-/* Core > Borders > Styles */
-
-// TODO: Improve if per-side border styles are required.
-
-@mixin border-style-maker($style-key, $style-css-value) {
-	.border-#{$style-key}, .b-#{$style-key} {
-		border-style: #{$style-css-value};
-	}
-}
-
-@include border-style-maker("none", "none");
-@include border-style-maker("hidden", "hidden");
-@include border-style-maker("dotted", "dotted");
-@include border-style-maker("dashed", "dashed");
-@include border-style-maker("solid", "solid");
-@include border-style-maker("double", "double");
-@include border-style-maker("groove", "groove");
-@include border-style-maker("ridge", "ridge");
-@include border-style-maker("inset", "inset");
-@include border-style-maker("outset", "outset");

scss/config.scss

@@ -1,23 +1,24 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Config > NibbleCSS */
 
 // Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
-// See: core/sizing.scss
+// See: core/utils-sizing.scss
 $add-px-sizing-rules: false;
 
 $nibblepoker-background-root: "./";
 
 // Toggles the inclusion of the ".bkgd-grid" background rules.
-// See: site/backgrounds.scss
+// See: site/elements-backgrounds.scss
 $include-grid-backgrounds: true;
 
 $use-b64-backgrounds: true;
 
 // Toggles the generation of any table cell padding rules.
-// See: core/table.scss
+// See: core/tables-modifiers.scss
 $generate-table-padding-rules: true;
 
 // Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
-// See: core/table.scss
+// See: core/tables-modifiers.scss
 $generate-table-header-cell-padding-rules: true;

scss/core/core-grids.scss

@@ -1,5 +1,6 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Core > Grids */
 
 .grid, .d-grid {

scss/core/lists.scss

@@ -1,55 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Lists */
-
-ul {
-  &.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;
-  }
-}
-
-ul, ol, li {
-  &.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;
-  }
-  &.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;
-  }
-}

scss/core/position.scss

@@ -1,7 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Positions */
-
-.p-relative {
-	position: relative;
-}

scss/core/text.scss

@@ -1,177 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Core > Text */
-
-/* Core > Text > Headings */
-
-h1, h2, h3, h4, h5, h6 {
-	font-weight: #{$text-header-weight};
-}
-
-
-/* Core > Text > Sizes */
-
-// ".t-size-6", ".t-size-8", ..., "t-size-40"
-@for $_ from 3 through 20 {
-	$sizeKey: $_ * 2;
-	$sizeValue: $sizeKey / 10;
-	
-	.t-size-#{$sizeKey} {
-		font-size: #{$sizeValue}rem !important;
-	}
-}
-
-// Adding special odd values
-.t-size-11 {
-	font-size: 1.1rem !important;
-}
-.t-size-13 {
-	font-size: 1.3rem !important;
-}
-.t-size-15 {
-	font-size: 1.5rem !important;
-}
-.t-size-17 {
-	font-size: 1.7rem !important;
-}
-
-// Jumbo sizes
-// ".t-size-35" & ".t-size-40"
-@for $_ from 7 through 8 {
-	$size: $_ * 5;
-
-	.t-size-#{$size} {
-		font-size: #{$size / 10}rem !important;
-	}
-}
-
-
-/* Core > Text > Weights */
-
-.t-w-normal, .t-normal {
-	font-weight: normal !important;
-}
-b, .t-w-bold, .t-bold {
-	font-weight: bold !important;
-}
-.t-w-bolder, .t-bolder {
-	font-weight: bolder !important;
-}
-.t-w-lighter, .t-lighter {
-	font-weight: lighter !important;
-}
-
-// ".t-w-100", ".t-w-200", ..., ".t-w-900"
-@for $_ from 1 through 9 {
-	$size: $_ * 100;
-	
-	.t-w-#{$size} {
-		font-weight: #{$size} !important;
-	}
-}
-// /!\ Firefox moment /!\
-// * The ".t-w-200" to ".t-w-500" classes barely any effect on weight...
-
-
-/* Core > Text > Styles */
-
-i, .t-italic {
-	font-style: italic;
-}
-
-.t-oblique {
-	font-style: oblique;
-}
-
-u, .t-underline {
-	text-decoration: underline;
-}
-
-s, .t-strikethrough {
-	text-decoration: line-through;
-}
-
-.t-overline {
-	text-decoration: overline;
-}
-
-// Defined in core/code.scss !
-//.t-monospace {
-//	font-family: monospace, monospace;
-//}
-
-
-/* Core > Text > Alignment */
-
-.t-justify {
-	text-align: justify;
-}
-
-.t-center {
-	text-align: center;
-}
-
-.t-left {
-	text-align: left;
-}
-
-.t-right {
-	text-align: right;
-}
-
-.t-start {
-	text-align: start;
-}
-
-.t-end {
-	text-align: end;
-}
-
-
-/* Core > Text > Modifiers */
-
-.t-ucase {
-	text-transform: uppercase;
-}
-
-.t-lcase {
-	text-transform: lowercase;
-}
-
-.t-capitalize {
-	text-transform: capitalize;
-}
-
-
-/* Core > Text > Misc */
-
-.t-nowrap {
-	white-space: nowrap;
-	text-wrap: nowrap;
-}
-
-
-/* Core > Text > Helpers */
-
-.t-half-muted {
-	opacity: 65%;
-}
-
-.t-muted {
-	//@if $undefined-toggle-css-variables {
-	//	color: var(--color-white-muted);
-	//} @else {
-	//	color: #{$color-white-muted};
-	//}
-	//color: #A9A9Aa;
-	opacity: 50%;
-}
-
-.t-super-muted {
-	// Should be 35% TBH
-	opacity: 45%;
-}
-
-.t-noselect {
-	user-select: none;
-}

scss/defaults/defaults-backgrounds.scss

@@ -0,0 +1,19 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Defaults > Backgrounds */
+
+body {
+	background-color: #{$color-background-body};
+}
+
+header, nav, footer {
+	background-color: #{$color-background-surround};
+}
+
+main {
+	background-color: #{$color-background-main};
+	
+	// FIXME: Adapt when sidebar is closed !
+	// FIXME: Move it to the proper layout file then !!!
+	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
+}

scss/defaults/defaults-code.scss

@@ -1,17 +1,18 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Code */
+
+/* Defaults > Code */
 
 code, .code, kbd, .t-monospace {
 	font-family: Consolas, "Courier New", monospace;
 }
 
 // For large blocks
-code {
+//code { }
 
-}
+// For inline spans
-
+// We're applying the equivalent of `.r-s.px-xs.px-s`
-// For spans
+// Kinda goes against the core ideas, but it would be annoying without it.
 .code, kbd {
 	background-color: #{$color-background-code};
 	
@@ -30,6 +31,7 @@ code {
 	background: rgba(0,0,0,0) !important;
 }
 
+// FIXME: Makes the inline block ugly !!!
 code, .code, .code-line {
 	line-height: 1.35;
 }

scss/defaults/defaults-fonts.scss

@@ -0,0 +1,9 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Fonts */
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

scss/defaults/defaults-images.scss

@@ -1,5 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
+/* Defaults > Images */
+
 .img-text {
 	height: 1em;
 	vertical-align: top;

scss/defaults/defaults-inputs.scss

@@ -0,0 +1,206 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Inputs */
+
+/* Defaults > Inputs > Commons */
+
+button, input, textarea, select {
+    border: 0;
+
+    // Removing ugly-ass white glow when editing text-related inputs.
+    // Shit looks straight out of winforms in 2023...
+    outline: none;
+
+    color: #{$color-text-inputs};
+    background-color: #{$color-background-input};
+
+    &:not(.no-focus) {
+        &:focus {
+            box-shadow: 0 0 3px 0 #{$color-glow-input};
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: #{$color-background-input-disabled} !important;
+    }
+}
+
+label {
+    cursor: pointer;
+    user-select: none;
+}
+
+
+/* Defaults > Inputs > Checkbox & Radio */
+
+input[type=checkbox], input[type=radio] {
+    width: 1.65em;
+    height: 1.65em;
+    background-color: #{$color-background-input-unchecked};
+
+    &:checked {
+        background-color: #{$color-background-input-checked};
+    }
+
+    position: relative;
+    vertical-align: middle;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+    &:disabled {
+        &:before {
+            opacity: 60%;
+        }
+    }
+}
+input[type="checkbox"] + label, input[type="radio"] + label {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
+    cursor: not-allowed;
+    opacity: 60%;
+}
+
+
+/* Defaults > Inputs > Checkbox */
+
+input[type=checkbox] {
+    &.cb-pretty, &.checkbox-pretty {
+        text-align: center;
+        padding: 0;
+
+        &:before {
+            content: "✘";
+        }
+
+        &:checked {
+            &:before {
+                content: "✔";
+            }
+        }
+    }
+}
+
+
+/* Defaults > Inputs > Radio */
+
+input[type=radio] {
+    border-radius: 50%;
+
+    // Special fix required for standalone pages.
+    // This rule somehow gets ignored if the stylesheet is placed in the DOM.
+    // Even tho it is present in reset.css and if it get marked as important...
+    &:before {
+        box-sizing: border-box;
+    }
+
+    &.radio-solid, &.radio-3d {
+        text-align: center;
+        padding: 0;
+
+        &:before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+            height: 60%;
+            border-radius: 50%;
+            background-color: transparent;
+            border-color: white;
+        }
+
+        &:checked {
+            &:before {
+                background-color: white;
+            }
+        }
+    }
+
+    &.radio-solid {
+        &:before {
+            border-style: double;
+            border-width: 2px;
+        }
+    }
+
+    &.radio-3d {
+        &:before {
+            border-style: inset;
+            border-width: 2px;
+        }
+
+        &:checked {
+            &:before {
+                border-style: outset;
+            }
+        }
+    }
+
+    &.radio-unchecked-subtle {
+        &:not(:checked) {
+            &:before {
+                opacity: 50%;
+            }
+        }
+    }
+
+    &.radio-unchecked-dashed {
+        &:not(:checked) {
+            &:before {
+                opacity: 75%;
+                clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+            }
+        }
+    }
+}
+
+
+/* Defaults > Inputs > Buttons */
+
+button {
+    cursor: pointer;
+    background-color: #{$color-background-button};
+
+    &:hover {
+        background-color: #{$color-background-button-hover};
+    }
+
+    &.btn-primary {
+        background-color: #{$color-background-button-primary};
+
+        &:hover {
+            background-color: #{$color-background-button-primary-hover};
+        }
+    }
+
+    &.btn-success {
+        background-color: #{$color-background-button-success};
+
+        &:hover {
+            background-color: #{$color-background-button-success-hover};
+        }
+    }
+
+    &.btn-error {
+        background-color: #{$color-background-button-error};
+
+        &:hover {
+            background-color: #{$color-background-button-error-hover};
+        }
+    }
+
+    &.btn-warning {
+        background-color: #{$color-background-button-warning};
+
+        &:hover {
+            background-color: #{$color-background-button-warning-hover};
+        }
+    }
+}

scss/defaults/defaults-tables.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Tables */
+
+/* Tables > Defaults */
 
 .table-stylish {
 	border-collapse: separate;

scss/defaults/text/defaults-text-basics.scss

@@ -1,83 +1,22 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Text */
 
-/* Site > Text > Commons */
+/* Defaults > Text > Basics */
 
 * {
 	color: #{$color-text-generic};
 }
 
-
+nav, footer, header, .bkgd-grid {
-/* Site > Text > Paragraphs */
+	* {
+		color: #{$color-text-surround};
+	}
+}
 
 p {
 	line-height: 1.2;
 }
 
-
-/* Site > Text > Links */
-
-a, .a {
-	// Base
-	text-decoration: underline;
-	color: #{$color-text-link};
-	
-	& * {
-		color: #{$color-text-link};
-	}
-	
-	&:hover {
-		color: #{$color-text-link-hover};
-		cursor: pointer;
-
-		& * {
-			color: #{$color-text-link-hover};
-			text-decoration: underline;
-		}
-	}
-
-	// Special case for buttons
-	//&.casper-link, &.button-link, &.text-link {
-	&.a-bland {
-		text-decoration: none;
-		&:hover {
-			text-decoration: none;  // Only really applies to content listing entries...
-			& * {
-				text-decoration: none;
-			}
-		}
-	}
-	
-	// Bland links
-	//&.casper-link, &.bland-link {
-	&.a-hidden {
-		text-decoration: none;
-		color: #{$color-text-generic};
-		
-		& * {
-			color: #{$color-text-generic};
-		}
-		
-		&:hover {
-			text-decoration: underline;
-			color: #{$color-text-link-hover};
-			
-			& * {
-				color: #{$color-text-link-hover};
-			}
-			
-			// FIXME: Not working, big F
-			//i {
-			//	text-decoration: none !important;
-			//}
-		}
-	}
-}
-
-
-/* Site > Text > Targeted Rules */
-
 .t-logo-text {
 	font-size: 1.775em;
 	line-height: 1;

scss/defaults/text/defaults-text-links.scss

@@ -0,0 +1,89 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Text > Links */
+
+a, .a {
+    // Base
+    text-decoration: underline;
+    color: #{$color-text-link};
+
+    & * {
+        color: #{$color-text-link};
+    }
+
+    &:hover {
+        color: #{$color-text-link-hover};
+        cursor: pointer;
+
+        & * {
+            color: #{$color-text-link-hover};
+            text-decoration: underline;
+        }
+    }
+
+    // Special case for buttons
+    //&.casper-link, &.button-link, &.text-link {
+    &.a-bland {
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;  // Only really applies to content listing entries...
+            & * {
+                text-decoration: none;
+            }
+        }
+    }
+
+    // Bland links
+    //&.casper-link, &.bland-link {
+    &.a-hidden {
+        text-decoration: none;
+        color: #{$color-text-generic};
+
+        & * {
+            color: #{$color-text-generic};
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: #{$color-text-link-hover};
+
+            & * {
+                color: #{$color-text-link-hover};
+            }
+
+            // FIXME: Not working, big F
+            //i {
+            //	text-decoration: none !important;
+            //}
+        }
+    }
+}
+
+nav, footer, header {
+    a, .a {
+        color: #{$color-text-surround-link};
+        & * {
+            color: #{$color-text-surround-link};
+        }
+        &:hover {
+            color: #{$color-text-surround-link-hover};
+            & * {
+                color: #{$color-text-surround-link-hover};
+            }
+        }
+        &.a-hidden {
+            text-decoration: none;
+            color: #{$color-text-surround};
+            & * {
+                color: #{$color-text-surround};
+            }
+            &:hover {
+                color: #{$color-text-surround-link-hover};
+                & * {
+                    color: #{$color-text-surround-link-hover};
+                }
+            }
+        }
+    }
+}

scss/defaults/text/defaults-text-weights.scss

@@ -0,0 +1,10 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Text > Weights */
+
+@if $text-weight-header != -1 {
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: #{$text-weight-header};
+    }
+}

scss/elements/elements-backgrounds.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Misc > Backgrounds */
+
+/* Elements > Backgrounds */
 
 .bkgd-dark {
 	background: $color-background-gray-dark;
@@ -15,7 +16,7 @@
 }
 
 @if($include-grid-backgrounds) {
-	// The element rules override rules in `base.scss ~94`
+	// The element rules override rules in `defaults-elements-backgrounds.scss ~94`
 	.bkgd-grid10, .bkgd-surround, header, nav, footer {
 		@if($use-b64-backgrounds) {
 			background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;

scss/elements/elements-hr.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Horizontal Rule */
+
+/* Elements > Horizontal Rule */
 
 hr {
 	border-color: #{$color-border-hr};

scss/elements/elements-lists.scss

@@ -0,0 +1,64 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Lists */
+
+ul {
+    &.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;
+    }
+}
+
+ul, ol, li {
+    &.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;
+    }
+
+    &.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;
+    }
+}

scss/elements/elements-scrollbar.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Scrollbars */
+
+/* Elements > Scrollbars */
 
 //@media (min-width: 769px) {
 *::-webkit-scrollbar {

scss/elements/elements-video.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Elements > Video */
 
-// FIXME: Does not respect the core tenets !
+/* Elements > Video */
+
 video {
 	width: 100% !important;
 	height: auto !important;

scss/elements/elements-wedge.scss

@@ -2,7 +2,7 @@
 
 /* Custom Elements > Wedge */
 
-wedge, .wedge {
+.wedge {
 	position: absolute;
 	//top: 0;
 	//right: 0;
@@ -25,7 +25,7 @@ wedge, .wedge {
 	}
 	
 	&.wedge-shadow {
-		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+		box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
 	}
 	
 	&.primary {

scss/extra/extra-np-content.scss

@@ -1,5 +1,9 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
+/* Extras > NP Website Content */
+// Overrides all other rules since this style is fixed.
+
 .content-search-entry {
 	min-height: #{$content-search-image-size};
 }

scss/extra/extra-splide.scss

@@ -1,5 +1,6 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
+
 /* Extras > Splide */
 
 // Zoom-in effect for image galleries

scss/fixes/fixes-buttons.scss

@@ -0,0 +1,9 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Fixes > Buttons */
+
+// Ugly fix for download buttons
+button + button, .button-link + .button-link > button {
+    margin-left: 0.75rem;
+}

scss/fixes/fixes-mobile.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Fixes > Mobile */
+
+/* Fixes > Mobile */
 
 @media only screen and (max-width: 768px) {
 	// Overrides the ".p-l" class used on "main".
@@ -8,12 +9,8 @@
 		padding: calc(#{$margin-base-size} * 0.5) !important;
 	}
 	
-	// Overrides a style in "site/content.scss".
+	// Overrides a style in "site/extra-np-content.scss".
 	.content-search-entry > p {
 		width: 100% !important;
 	}
-	
-	.mobile-hide {
-		display: none;
-	}
 }

scss/inputs/inputs-langs.scss

@@ -0,0 +1,34 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Inputs > Lang Selector */
+
+#lang-selector {
+    position: relative;
+    white-space: nowrap;
+
+    > summary {
+        cursor: pointer;
+        list-style: none;
+        user-select: none;
+    }
+
+    > div {
+        position: absolute;
+        z-index: #{$z-index-lang-dropdown};
+        top: 2rem;
+        right: 0;
+        min-width: 100%;
+
+        // Visibility transition
+        //height: 0;
+        //transition: height 0.4s;
+        //transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
+    }
+
+    // TODO: Maybe force it to be visible when closes ?
+
+    //&[open] > div {
+    //	height: auto;
+    //}
+}

scss/inputs/inputs-textarea.scss

@@ -0,0 +1,20 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Inputs > Text Area */
+
+.ta-resize {
+    resize: both;
+}
+
+.ta-resize-h {
+    resize: horizontal;
+}
+
+.ta-resize-v {
+    resize: vertical;
+}
+
+.ta-resize-none {
+    resize: none;
+}

scss/layouts/layout_commons.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Layouts */
+/* Layouts */
 
-/* Site > Layouts > Commons */
+/* Layouts > Commons */
 
 html, body {
 	// Do not use 100vh, it includes the search bar  !

scss/layouts/layout_generic.scss

@@ -1,8 +1,8 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Site > Layouts > Generic */
+/* Layouts > Generic */
 
-/* Site > Layouts > Generic > Main Grid */
+/* Layouts > Generic > Main Grid */
 
 body.layout-generic {
 	display: grid;
@@ -51,7 +51,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Mobile Fixes */
+/* Layouts > Generic > Mobile Fixes */
 
 @media only screen and (max-width: 768px) {
 	body.layout-generic {
@@ -72,7 +72,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Sidebar */
+/* Layouts > Generic > Sidebar */
 
 body.layout-generic {
 	.sidebar {
@@ -96,7 +96,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
+/* Layouts > Generic > Sidebar > Mobile Fixes */
 
 // Inverting the sidebar's states for mobile devices
 @media only screen and (max-width: 768px) {
@@ -128,7 +128,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Main Extras */
+/* Layouts > Generic > Main Extras */
 
 @media only screen and (max-width: 768px) {
 	body.layout-generic {
@@ -151,7 +151,7 @@ body.layout-generic {
 }
 
 
-/* Site > Layouts > Generic > Transitions */
+/* Layouts > Generic > Transitions */
 
 body.layout-generic {
 	main, .sidebar {

scss/nibblepoker.scss

@@ -10,70 +10,91 @@
  * -----------------------------------------------------------------------------
  */
 
+/* Externals */
+@import 'externals/reset';  // Doesn't reset checkboxes !
+
+
 /* Config */
 @import 'config';
 
-/* Externals */
-@import 'external/reset';  // Doesn't reset checkboxes !
-
 /* Variables */
 @import 'variables';
 
-/* Site */
 
-/* Site > Layouts */
+/* Layouts */
-@import 'site/layouts/commons';  // Sets up the page's default sizing rules
+@import 'layouts/layout_commons';  // Sets up the page's default sizing rules
-@import 'site/layouts/generic';  // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
+@import 'layouts/layout_generic';  // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
 
-/* Site > Styles */
-@import 'site/base';  // Needs a rework, Defines some basic common broad styling/coloring rules
-@import 'site/text';  // Has some hardcoded width for font-awesome icons in sidebar and headings
 
-/* Site > Elements */
+/* Defaults */
-@import 'site/hr';         // Custom horizontal rulers
+/* Defaults > Text */
-@import 'site/scrollbar';  // Personalizes the scrollbars (Horizontal is still unfinished !)
+@import 'defaults/text/defaults-text-basics';
-@import 'site/input';      // Has ugly fix for download buttons
+@import 'defaults/text/defaults-text-links';
-@import 'site/table';      // Uses copied paddings for cells & ugly rounding fix
+@import 'defaults/text/defaults-text-weights';
-@import 'site/code';       // Uses forced borders, roundings and paddings
-@import 'site/video';
 
-/* Site > Misc */
+@import 'defaults/defaults-backgrounds';  // Defines some basic styling/coloring rules
-@import 'site/borders';  // Applies the colors mostly, the size are in the elements !
+@import 'defaults/defaults-fonts';
-@import 'site/backgrounds';
+@import 'defaults/defaults-images';
+@import 'defaults/defaults-inputs';  // Has ugly fix for download buttons
+@import 'defaults/defaults-code';    // Uses forced borders, roundings and paddings
+@import 'defaults/defaults-tables';  // Uses copied paddings for cells & ugly rounding fix
 
-/* Site > Fixes */
-@import 'site/mobile';  // Has !important overrides for obvious reasons
-
-/* Site > Unsorted */
-@import 'site/image';
-@import 'site/wedge';
-@import 'site/content';  // Uses fixed sizes and floats
-@import 'site/modal';
 
 /* Core */
-@import 'core/border'; // Border rules (.border, .bt-0, ...)
+@import 'core/core-grids';  // /!\ Needs an overhaul, especially for mobile !!!
-@import 'core/float';  // Floating rules (.f-right, ...)
-@import 'core/sizing'; // Rules for setting elements size (.w-full, ...)
-@import 'core/flex';   // /!\ Needs an overhaul !!!
-@import 'core/grid';   // /!\ Needs an overhaul !!!
-@import 'core/text';   // Text-related rules (.t-bold, t-ucase, t-size-14, ...)
-//@import 'core/containers';  // Cannot remember why it was used, if ever
-@import 'core/display';   // /!\ Needs improvement !!!
-@import 'core/position';   // /!\ Needs improvement !!!
-@import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
-@import 'core/lists';
-@import 'core/table';
-@import 'core/cursor';
 
-/* Core > Rounding */
+/* Elements */
-@import 'core/rounding/global';
+@import 'elements/elements-backgrounds';
-@import 'core/rounding/sided';
+@import 'elements/elements-lists';
-@import 'core/rounding/corner';
+@import 'elements/elements-wedge';  // Wedges shown in code blocks and other notifications.
+@import 'elements/elements-hr';  // Custom horizontal rulers
+@import 'elements/elements-video';
+@import 'elements/elements-scrollbar';  // /!\ Horizontal unfinished, and thy look bad in some contexts /!\
 
-/* Core > Spacing */
+/* Inputs */
-@import 'core/spacing/global';
+@import 'inputs/inputs-langs';
-@import 'core/spacing/axis';
+@import 'inputs/inputs-textarea';
-@import 'core/spacing/sided';
+
+/* Tables */
+@import 'tables/tables-modifiers';
+
+/* Borders */
+@import 'borders/border-targeting';  // Border rules (.border, .bt-0, ...)
+@import 'borders/border-styles';     // Types of borders
+@import 'borders/border-colors';     // Default colors for some elements (Overrides global color in border-targeting)
+
+/* Text */
+@import 'text/text-sizes';
+@import 'text/text-weights';
+@import 'text/text-alignment';
+@import 'text/text-styling';
+@import 'text/text-misc';
+
+/* Spacing */
+@import 'spacing/spacing_global';
+@import 'spacing/spacing_axis';
+@import 'spacing/spacing_sided';
+
+/* Rounding */
+@import 'rounding/rounding_global';
+@import 'rounding/rounding_sided';
+@import 'rounding/rounding_corner';
+
+/* Overrides */
+@import 'utils/utils-float';     // Floating rules (.f-right, ...)
+@import 'utils/utils-cursor';
+@import 'utils/utils-text';
+@import 'utils/utils-display';   // /!\ Needs more classes !
+@import 'utils/utils-overflow';  // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
+@import 'utils/utils-flex';      // /!\ Needs an overhaul !!!
+@import 'utils/utils-sizing';    // Rules for setting elements size (.w-full, ...)
+@import 'utils/utils-position';
+@import 'utils/utils-mobile';
 
 /* Extras */
-@import 'site/splide';
+@import 'extra/extra-splide';  // Picture gallery
+@import 'extra/extra-np-content';  // Uses fixed sizes and floats
+
+/* Fixes */
+@import 'fixes/fixes-mobile';  // Hotfixes for mobile-related issues
+@import 'fixes/fixes-buttons';  // Ugly fix for download buttons

scss/old/parts/theme_nibblepoker.scss

@@ -94,6 +94,7 @@ $color-border-code: $color-border-normal;
 
 // Text
 $color-text-generic: $color-apollo-45;
+$color-text-surround: $color-text-generic;
 $color-text-inputs: $color-text-generic;
 $color-text-muted: #{$color-text-generic}E0;
 $color-text-muted-super: #{$color-text-generic}C0;
@@ -101,6 +102,9 @@ $color-text-muted-super: #{$color-text-generic}C0;
 $color-text-link: #{$color-apollo-04};
 $color-text-link-hover: #{$color-apollo-05};
 
+$color-text-surround-link: #{$color-apollo-04};
+$color-text-surround-link-hover: #{$color-apollo-05};
+
 
 // Specials
 $color-glow-input: $color-apollo-02;

scss/old/parts/theme_unset.scss

@@ -75,6 +75,7 @@ $color-border-code: #00EB6C;
 
 // Text
 $color-text-generic: #00EB6C;
+$color-text-surround: #00EB6C;
 $color-text-inputs: #00EB6C;
 $color-text-muted: #{$color-text-generic}E0;
 $color-text-muted-super: #{$color-text-generic}C0;
@@ -82,6 +83,9 @@ $color-text-muted-super: #{$color-text-generic}C0;
 $color-text-link: #00EB6C;
 $color-text-link-hover: #00EB6C;
 
+$color-text-surround-link: #00EB6C;
+$color-text-surround-link-hover: #00EB6C;
+
 
 // Specials
 $color-glow-input: yellow;

scss/rounding/rounding_corner.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Corner */
+
+/*  Rounding > Corner */
 @mixin corner-rounding-maker($size-key, $size-value) {
 	.rtl-#{$size-key} {
 		border-top-left-radius: #{$size-value};
@@ -17,7 +18,7 @@
 }
 
 
-/* Utilities > Rounding > Corner > Variable Sizes */
+/*  Rounding > Corner > Variable Sizes */
 @include corner-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include corner-rounding-maker("m", #{$border-base-radius});
@@ -25,6 +26,6 @@
 @include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Corner > Fixed Sizes */
+/*  Rounding > Corner > Fixed Sizes */
 @include corner-rounding-maker("0", 0);
 @include corner-rounding-maker("r", 50%);

scss/rounding/rounding_global.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Global */
+
+/*  Rounding > Global */
 @mixin global-rounding-maker($size-key, $size-value) {
 	//, .rounding-#{$size-key}
 	.r-#{$size-key} {
@@ -9,7 +10,7 @@
 }
 
 
-/* Utilities > Rounding > Global > Variable Sizes */
+/*  Rounding > Global > Variable Sizes */
 @include global-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include global-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include global-rounding-maker("m", #{$border-base-radius});
@@ -17,6 +18,6 @@
 @include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Global > Fixed Sizes */
+/*  Rounding > Global > Fixed Sizes */
 @include global-rounding-maker("0", 0);
 @include global-rounding-maker("r", 50%);

scss/rounding/rounding_sided.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Rounding > Sided */
+
+/*  Rounding > Sided */
 @mixin sided-rounding-maker($size-key, $size-value) {
 	.rt-#{$size-key} {
 		border-top-left-radius: #{$size-value};
@@ -21,7 +22,7 @@
 }
 
 
-/* Utilities > Rounding > Sided > Variable Sizes */
+/*  Rounding > Sided > Variable Sizes */
 @include sided-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
 @include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include sided-rounding-maker("m", #{$border-base-radius});
@@ -29,6 +30,6 @@
 @include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
-/* Utilities > Rounding > Sided > Fixed Sizes */
+/*  Rounding > Sided > Fixed Sizes */
 @include sided-rounding-maker("0", 0);
 @include sided-rounding-maker("r", 50%);

scss/site/base.scss

@@ -1,41 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Site > Styles > Base */
-
-/* Site > Styles > Base > Coloring & Fonts (TODO: Needs a small rework) */
-
-body {
-	background-color: #{$color-background-body};
-	
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-// Overridden by a rule in background.scss !
-header, nav, footer {
-	background-color: #{$color-background-surround};
-}
-
-main {
-	background-color: #{$color-background-main};
-	
-	// FIXME: Adapt when sidebar is closed !
-	// FIXME: Move it to the proper layout file then !!!
-	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
-}
-
-
-/* Site > Styles > Base > Trash */
-
-// FIXME: Move it out too !
-// Allowed for right-align in headings with 'ml-auto' instead of 'f-right' !
-/*.heading-main {
-	> h2, > h3, > h4 {
-		display: flex;
-		align-items: center;
-		justify-content: left;
-	}
-	&.heading-dyn-width-1 {
-		min-width: 75%;
-	}
-}*/

scss/site/input.scss

@@ -1,256 +0,0 @@
-// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-
-/* Site > Elements > Inputs */
-
-/* Site > Elements > Inputs > Commons */
-
-button, input, textarea, select {
-	border: 0;
-	
-	// Removing ugly-ass white glow when editing text-related inputs.
-	// Shit looks straight out of winforms in 2023...
-	outline: none;
-	
-	color: #{$color-text-inputs};
-	background-color: #{$color-background-input};
-	
-	&:not(.no-focus) {
-		&:focus {
-			box-shadow: 0px 0px 3px 0px #{$color-glow-input};
-		}
-	}
-	
-	&:disabled {
-		cursor: not-allowed;
-		background-color: #{$color-background-input-disabled} !important;
-	}
-}
-
-label {
-	cursor: pointer;
-	user-select: none;
-}
-
-/* Site > Elements > Inputs > Checkbox & Radio */
-
-input[type=checkbox], input[type=radio] {
-	width: 1.65em;
-	height: 1.65em;
-	background-color: #{$color-background-input-unchecked};
-	
-	&:checked {
-		background-color: #{$color-background-input-checked};
-	}
-	
-	position: relative;
-	vertical-align: middle;
-
-	&:not(:disabled) {
-		cursor: pointer;
-	}
-	&:disabled {
-		&:before {
-			opacity: 60%;
-		}
-	}
-}
-input[type="checkbox"] + label, input[type="radio"] + label {
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-}
-input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
-	cursor: not-allowed;
-	opacity: 60%;
-}
-
-/* Site > Elements > Inputs > Checkbox */
-
-input[type=checkbox] {
-	&.cb-pretty, &.checkbox-pretty {
-		text-align: center;
-		padding: 0;
-
-		&:before {
-			content: "✘";
-		}
-
-		&:checked {
-			&:before {
-				content: "✔";
-			}
-		}
-	}
-}
-
-/* Site > Elements > Inputs > Radio */
-
-input[type=radio] {
-	border-radius: 50%;
-
-	// Special fix required for standalone pages.
-	// This rule somehow gets ignored if the stylesheet is placed in the DOM.
-	// Even tho it is present in reset.css and if it get marked as important...
-	&:before {
-		box-sizing: border-box;
-	}
-
-	&.radio-solid, &.radio-3d {
-		text-align: center;
-		padding: 0;
-
-		&:before {
-			content: "";
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			width: 60%;
-			height: 60%;
-			border-radius: 50%;
-			background-color: transparent;
-			border-color: white;
-		}
-
-		&:checked {
-			&:before {
-				background-color: white;
-			}
-		}
-	}
-
-	&.radio-solid {
-		&:before {
-			border-style: double;
-			border-width: 2px;
-		}
-	}
-
-	&.radio-3d {
-		&:before {
-			border-style: inset;
-			border-width: 2px;
-		}
-
-		&:checked {
-			&:before {
-				border-style: outset;
-			}
-		}
-	}
-
-	&.radio-unchecked-subtle {
-		&:not(:checked) {
-			&:before {
-				opacity: 50%;
-			}
-		}
-	}
-
-	&.radio-unchecked-dashed {
-		&:not(:checked) {
-			&:before {
-				opacity: 75%;
-				clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
-			}
-		}
-	}
-}
-
-/* Site > Elements > Inputs > Buttons */
-
-button {
-	cursor: pointer;
-	background-color: #{$color-background-button};
-	
-	&:hover {
-		background-color: #{$color-background-button-hover};
-	}
-	
-	&.btn-primary {
-		background-color: #{$color-background-button-primary};
-		
-		&:hover {
-			background-color: #{$color-background-button-primary-hover};
-		}
-	}
-	
-	&.btn-success {
-		background-color: #{$color-background-button-success};
-		
-		&:hover {
-			background-color: #{$color-background-button-success-hover};
-		}
-	}
-	
-	&.btn-error {
-		background-color: #{$color-background-button-error};
-		
-		&:hover {
-			background-color: #{$color-background-button-error-hover};
-		}
-	}
-	
-	&.btn-warning {
-		background-color: #{$color-background-button-warning};
-		
-		&:hover {
-			background-color: #{$color-background-button-warning-hover};
-		}
-	}
-}
-
-// Ugly fix for download buttons
-button + button, .button-link + .button-link > button {
-	margin-left: 0.75rem;
-}
-
-/* Site > Elements > Inputs > Lang Selector */
-
-#lang-selector {
-	position: relative;
-	white-space: nowrap;
-	
-	> summary {
-		cursor: pointer;
-		list-style: none;
-		user-select: none;
-	}
-	
-	> div {
-		position: absolute;
-		z-index: #{$z-index-lang-dropdown};
-		top: 2rem;
-		right: 0;
-		min-width: 100%;
-		
-		// Visibility transition
-		//height: 0;
-		//transition: height 0.4s;
-		//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
-	}
-	
-	// TODO: Maybe force it to be visible when closes ?
-	
-	//&[open] > div {
-	//	height: auto;
-	//}
-}
-
-
-// TODO: Move to core !
-.ta-resize {
-	resize: both;
-}
-
-.ta-resize-h {
-	resize: horizontal;
-}
-
-.ta-resize-v {
-	resize: vertical;
-}
-
-.ta-resize-none {
-	resize: none;
-}

scss/spacing/spacing_axis.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Sided */
+
+/* Spacing > Sided */
 @mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}x-#{$size-key} {
 		#{$type-property}-left: #{$size-value};
@@ -13,7 +14,7 @@
 }
 
 
-/* Utilities > Spacing > Sided > Variable Sizes */
+/* Spacing > Sided > Variable Sizes */
 @include axis-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include axis-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include axis-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -29,11 +30,11 @@
 @include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Sided > Fixed Sizes */
+/* Spacing > Sided > Fixed Sizes */
 @include axis-spacing-maker("m", "margin", "0", 0);
 @include axis-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Sided > Others */
+/* Spacing > Sided > Others */
 @include axis-spacing-maker("m", "margin", "auto", auto);
-@include axis-spacing-maker("p", "padding", "auto", auto);
+//@include axis-spacing-maker("p", "padding", "auto", auto);

scss/spacing/spacing_global.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Global */
+
+/* Spacing > Global */
 @mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}-#{$size-key} {
 		#{$type-property}: #{$size-value};
@@ -8,7 +9,7 @@
 }
 
 
-/* Utilities > Spacing > Global > Variable Sizes */
+/* Spacing > Global > Variable Sizes */
 @include global-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include global-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include global-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -24,17 +25,17 @@
 @include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Global > Fixed Sizes */
+/* Spacing > Global > Fixed Sizes */
 @include global-spacing-maker("m", "margin", "0", 0);
 @include global-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Global > Others */
+/* Spacing > Global > Others */
 @include global-spacing-maker("m", "margin", "auto", auto);
-@include global-spacing-maker("p", "padding", "auto", auto);
+//@include global-spacing-maker("p", "padding", "auto", auto);
 
 
-/* Utilities > Spacing > Global > Manual Extras */
+/* Spacing > Global > Manual Extras */
 .p-xxxs {
 	padding: calc(#{$margin-base-size} * 0.125);
 }

scss/spacing/spacing_sided.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Utilities > Spacing > Sided */
+
+/* Spacing > Sided */
 @mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
 	.#{$type-key}t-#{$size-key} {
 		#{$type-property}-top: #{$size-value};
@@ -17,7 +18,7 @@
 }
 
 
-/* Utilities > Spacing > Sided > Variable Sizes */
+/* Spacing > Sided > Variable Sizes */
 @include sided-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
 @include sided-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
 @include sided-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
@@ -33,11 +34,11 @@
 @include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
 
 
-/* Utilities > Spacing > Sided > Fixed Sizes */
+/* Spacing > Sided > Fixed Sizes */
 @include sided-spacing-maker("m", "margin", "0", 0);
 @include sided-spacing-maker("p", "padding", "0", 0);
 
 
-/* Utilities > Spacing > Sided > Others */
+/* Spacing > Sided > Others */
 @include sided-spacing-maker("m", "margin", "auto", auto);
-@include sided-spacing-maker("p", "padding", "auto", auto);
+//@include sided-spacing-maker("p", "padding", "auto", auto);

scss/tables/tables-modifiers.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Tables */
+
+/* Tables > Modifiers */
 
 tr, td {
   vertical-align: top;

scss/text/text-alignment.scss

@@ -0,0 +1,28 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Alignment */
+
+.t-justify {
+    text-align: justify;
+}
+
+.t-center {
+    text-align: center;
+}
+
+.t-left {
+    text-align: left;
+}
+
+.t-right {
+    text-align: right;
+}
+
+.t-start {
+    text-align: start;
+}
+
+.t-end {
+    text-align: end;
+}

scss/text/text-links.scss

@@ -0,0 +1,5 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Links */
+

scss/text/text-misc.scss

@@ -0,0 +1,40 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Misc */
+
+.t-ucase {
+    text-transform: uppercase;
+}
+
+.t-lcase {
+    text-transform: lowercase;
+}
+
+.t-capitalize {
+    text-transform: capitalize;
+}
+
+.t-nowrap {
+    white-space: nowrap;
+    text-wrap: nowrap;
+}
+
+.t-half-muted {
+    opacity: 65%;
+}
+
+.t-muted {
+    //@if $undefined-toggle-css-variables {
+    //	color: var(--color-white-muted);
+    //} @else {
+    //	color: #{$color-white-muted};
+    //}
+    //color: #A9A9Aa;
+    opacity: 50%;
+}
+
+.t-super-muted {
+    // Should be 35% TBH
+    opacity: 45%;
+}

scss/text/text-sizes.scss

@@ -0,0 +1,38 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Sizes */
+
+// ".t-size-6", ".t-size-8", ..., "t-size-40"
+@for $_ from 3 through 20 {
+    $sizeKey: $_ * 2;
+    $sizeValue: $sizeKey / 10;
+
+    .t-size-#{$sizeKey} {
+        font-size: #{$sizeValue}rem !important;
+    }
+}
+
+// Adding special odd values
+.t-size-11 {
+    font-size: 1.1rem !important;
+}
+.t-size-13 {
+    font-size: 1.3rem !important;
+}
+.t-size-15 {
+    font-size: 1.5rem !important;
+}
+.t-size-17 {
+    font-size: 1.7rem !important;
+}
+
+// Jumbo sizes
+// ".t-size-35" & ".t-size-40"
+@for $_ from 7 through 8 {
+    $size: $_ * 5;
+
+    .t-size-#{$size} {
+        font-size: #{$size / 10}rem !important;
+    }
+}

scss/text/text-styling.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Styling */
+
+i, .t-italic {
+    font-style: italic;
+}
+
+.t-oblique {
+    font-style: oblique;
+}
+
+u, .t-underline {
+    text-decoration: underline;
+}
+
+s, .t-strikethrough {
+    text-decoration: line-through;
+}
+
+.t-overline {
+    text-decoration: overline;
+}
+
+// Defined in core/defaults-code.scss !
+//.t-monospace {
+//	font-family: monospace, monospace;
+//}

scss/text/text-weights.scss

@@ -0,0 +1,32 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Text > Weights */
+
+.t-w-normal, .t-normal {
+    font-weight: normal !important;
+}
+
+b, .t-w-bold, .t-bold {
+    font-weight: bold !important;
+}
+
+.t-w-bolder, .t-bolder {
+    font-weight: bolder !important;
+}
+
+.t-w-lighter, .t-lighter {
+    font-weight: lighter !important;
+}
+
+// ".t-w-100", ".t-w-200", ..., ".t-w-900"
+@for $_ from 1 through 9 {
+    $size: $_ * 100;
+
+    .t-w-#{$size} {
+        font-weight: #{$size} !important;
+    }
+}
+
+// /!\ Firefox moment /!\
+// * The ".t-w-200" to ".t-w-500" classes barely have any visible effect...

scss/utils/utils-cursor.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Cursors */
+
+/* Utils > Cursors */
 
 @mixin cursor-maker($cursor-type) {
   .c-#{$cursor-type}, .cursor-#{$cursor-type} {

scss/utils/utils-display.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Display */
+
+/* Utils > Display */
 
 .d-none {
 	display: none;
@@ -14,9 +15,5 @@
 	display: inline-block;
 }
 
-.o-hidden {
-	overflow: hidden;
-}
-
 // Notes:
-// * 'core/grid.scss' defines '.d-grid' !  (Add here if grids are disabled !)
+// * 'core/core-grids.scss' defines '.d-grid' !  (Add here if grids are disabled !)

scss/utils/utils-flex.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Flex */
+
+/* Utils > Flex */
 
 // Display properties
 .d-flex {

scss/utils/utils-float.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Float */
+
+/* Utils > Float */
 
 .fl, .f-left {
 	float: left;

scss/utils/utils-mobile.scss

@@ -0,0 +1,10 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Mobile */
+
+@media only screen and (max-width: 768px) {
+	.mobile-hide {
+		display: none;
+	}
+}

scss/utils/utils-overflow.scss

@@ -1,6 +1,7 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-/* Core > Overflow */
+
+/* Utils > Overflow */
 
 @mixin overflow-maker($overflow-type) {
 	.o-#{$overflow-type} {

scss/utils/utils-position.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Positions */
+
+@mixin position-maker($position-type) {
+	.p-#{$position-type} {
+		position: #{$position-type};
+	}
+}
+
+@include position-maker(static);
+@include position-maker(relative);
+@include position-maker(absolute);
+@include position-maker(fixed);
+@include position-maker(sticky);
+
+.top-0 {
+	top: 0;
+}
+.bottom-0 {
+	bottom: 0;
+}
+.left-0 {
+	left: 0;
+}
+.right-0 {
+	right: 0;
+}

scss/utils/utils-text.scss

@@ -0,0 +1,8 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Utils > Text */
+
+.t-noselect {
+  user-select: none;
+}

scss/variables.scss

@@ -1,5 +1,12 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
-@use 'sass:color';
+
+
+/* Variables */
+
+// If not set to `-1`, will auto define a low-priority size for headers.
+$text-weight-header: 600;
+
+
 
 
 $scrollbar-size: 1.25em;
@@ -30,4 +37,4 @@ $z-index-modal: 99;
 
 /* Variables > Themes & Overrides */
 //@import "themes/theme_unset";
-@import "themes/theme_nibblepoker";
+@import "old/parts/theme_nibblepoker";

todos.txt

@@ -1,18 +1,14 @@
-floats
 grids mobile sizes
-inputs
 composed element gallery
 body layout
 display utilities
 size utilities
 scrolling utilities
-media
 modal
 code
 borders
 
 custom elements
-* wedge
 * ???
 
 bkgd color if grid disabled