Improved tables, Separated tables into core and site segments, rules and pages

Update index.php, sidebar.php, and 7 more files...

scss/config.scss

@@ -13,3 +13,11 @@ $nibblepoker-background-root: "./";
 $include-grid-backgrounds: true;
 
 $use-b64-backgrounds: true;
+
+// Toggles the generation of any table cell padding rules.
+// See: core/table.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
+$generate-table-header-cell-padding-rules: true;

scss/core/table.scss

@@ -0,0 +1,40 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Tables */
+
+tr, td {
+  vertical-align: top;
+}
+
+.table-v-center {
+  tr, td {
+    vertical-align: middle;
+  }
+}
+
+.table-v-bottom {
+  tr, td {
+    vertical-align: bottom;
+  }
+}
+
+
+/* Core > Tables > Cell Padding */
+
+@mixin table-padding-maker($size-key, $size-value) {
+  .table-p-#{$size-key} {
+    td, th {
+      padding: #{$size-value};
+    }
+  }
+  // TODO: Add header and cell padding rules
+}
+
+@if($generate-table-padding-rules) {
+  @include table-padding-maker("xxs", calc(#{$margin-base-size} * 0.25));
+  @include table-padding-maker("xs", calc(#{$margin-base-size} * 0.5));
+  @include table-padding-maker("s", calc(#{$margin-base-size} * 0.75));
+  @include table-padding-maker("m", #{$margin-base-size});
+  @include table-padding-maker("l", calc(#{$margin-base-size} * 1.5));
+  @include table-padding-maker("xl", calc(#{$margin-base-size} * 2.0));
+}

scss/nibblepoker.scss

@@ -60,6 +60,7 @@
 @import 'core/position';   // /!\ Needs improvement !!!
 @import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
 @import 'core/lists';
+@import 'core/table';
 
 /* Core > Rounding */
 @import 'core/rounding/global';

scss/site/table.scss

@@ -1,8 +1,6 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-tr, td {
-	vertical-align: top;
-}
+/* Site > Tables */
 
 table.stylish {
 	th {
@@ -27,31 +25,3 @@ table.stylish {
 	
 	// See 'site/border.scss' for border fix.
 }
-
-// Applying .p-xs and .p-s to all cells if needed
-// See 'core/spacing' for more info.
-.table-p-xs {
-	td, th {
-		padding: calc(#{$margin-base-size} * 0.5);
-	}
-}
-
-.table-h-p-s {
-	th {
-		padding: calc(#{$margin-base-size} * 0.75);
-	}
-}
-
-.table-p-s {
-	td, th {
-		padding: calc(#{$margin-base-size} * 0.75);
-	}
-}
-
-// FIXME: Move this out in its own alignment section...
-// Centers the cells' content vertically
-.table-v-center {
-	tr, td {
-		vertical-align: middle;
-	}
-}