Started massive refactoring, Removed halfmoon, Added new personnal common CSS, Site now runs at >5 fps on low-end

Update .gitignore, .htaccess, and 264 more files...

resources/NibblePoker/scss/config.scss

@@ -0,0 +1,4 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+// Add the "w-000px"/"h-000x" classes.
+$undefined-add-px-sizing: false;

resources/NibblePoker/scss/core/border.scss

@@ -0,0 +1,27 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Border */
+
+@mixin border-maker($side-key, $side-css-key) {
+	.border-#{$side-key} {
+		border-#{$side-css-key}: 1px solid;
+	}
+	.border-#{$side-key}-0 {
+		border-#{$side-css-key}: 0;
+	}
+}
+
+.border {
+	border: 1px solid #{$color-border-all};
+}
+
+* {
+	.dark-mode & {
+		border-color: #{$color-border-all};
+	}
+}
+
+@include border-maker("t", "top");
+@include border-maker("b", "bottom");
+@include border-maker("l", "left");
+@include border-maker("r", "right");

resources/NibblePoker/scss/core/containers.scss

@@ -0,0 +1,19 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Containers */
+
+.fluid-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	
+	// First children, or all, don't care tbh.
+	& > * {
+		position: absolute;
+		width: inherit;
+		height: inherit;
+		max-height: inherit;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}

resources/NibblePoker/scss/core/display.scss

@@ -0,0 +1,13 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+.d-none {
+	display: none;
+}
+
+.d-inline-block {
+	display: inline-block;
+}
+
+.o-hidden {
+	overflow: hidden;
+}

resources/NibblePoker/scss/core/flex.scss

@@ -0,0 +1,74 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Flex */
+
+// Display properties
+.d-flex {
+	display: flex;
+}
+
+.d-inline-flex {
+	display: inline-flex;
+}
+
+// Content justification
+.flex-justify-start {
+	justify-content: flex-start;
+}
+
+.flex-justify-end {
+	justify-content: flex-end;
+}
+
+.flex-justify-center {
+	justify-content: center;
+}
+
+.flex-justify-between {
+	justify-content: space-between;
+}
+
+.flex-justify-around {
+	justify-content: space-around;
+}
+
+.flex-justify-evenly {
+	justify-content: space-evenly;
+}
+
+.flex-justify-left {
+	justify-content: left;
+}
+
+.flex-justify-right {
+	justify-content: right;
+}
+
+// ???
+
+.flex-align-center {
+	align-items: center;
+}
+
+// Missing: start | end
+
+.flex-direction-row, .flex-row {
+	flex-direction: row;
+}
+
+.flex-direction-row-reverse, .flex-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-direction-column, .flex-column {
+	flex-direction: column;
+}
+
+.flex-direction-column-reverse, .flex-column-reverse {
+	flex-direction: column-reverse;
+}
+
+.flex-fill {
+	-ms-flex: 1 1 auto !important;
+	flex: 1 1 auto !important;
+}

resources/NibblePoker/scss/core/float.scss

@@ -0,0 +1,15 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Float */
+
+.f-left {
+	float: left;
+}
+
+.f-right {
+	float: right;
+}
+
+.f-none {
+	float: none;
+}

resources/NibblePoker/scss/core/rounding/corner.scss

@@ -0,0 +1,27 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Rounding > Corner */
+@mixin corner-rounding-maker($size-key, $size-value) {
+	.rtl-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+	}
+	.rtr-#{$size-key} {
+		border-top-right-radius: #{$size-value};
+	}
+	.rbl-#{$size-key} {
+		border-bottom-left-radius: #{$size-value};
+	}
+	.rbr-#{$size-key} {
+		border-bottom-right-radius: #{$size-value};
+	}
+}
+
+/* Utilities > 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});
+@include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+
+/* Utilities > Rounding > Corner > Fixed Sizes */
+@include corner-rounding-maker("0", 0);
+@include corner-rounding-maker("r", 50%);

resources/NibblePoker/scss/core/rounding/global.scss

@@ -0,0 +1,19 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Rounding > Global */
+@mixin global-rounding-maker($size-key, $size-value) {
+	//, .rounding-#{$size-key}
+	.r-#{$size-key} {
+		border-radius: #{$size-value};
+	}
+}
+
+/* Utilities > 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});
+@include global-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+
+/* Utilities > Rounding > Global > Fixed Sizes */
+@include global-rounding-maker("0", 0);
+@include global-rounding-maker("r", 50%);

resources/NibblePoker/scss/core/rounding/sided.scss

@@ -0,0 +1,31 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Rounding > Sided */
+@mixin sided-rounding-maker($size-key, $size-value) {
+	.rt-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+		border-top-right-radius: #{$size-value};
+	}
+	.rb-#{$size-key} {
+		border-bottom-left-radius: #{$size-value};
+		border-bottom-right-radius: #{$size-value};
+	}
+	.rl-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+		border-bottom-left-radius: #{$size-value};
+	}
+	.rr-#{$size-key} {
+		border-top-right-radius: #{$size-value};
+		border-bottom-right-radius: #{$size-value};
+	}
+}
+
+/* Utilities > 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});
+@include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+
+/* Utilities > Rounding > Sided > Fixed Sizes */
+@include sided-rounding-maker("0", 0);
+@include sided-rounding-maker("r", 50%);

resources/NibblePoker/scss/core/sizing.scss

@@ -0,0 +1,51 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Sizing */
+
+// 100 %
+.w-full {
+	width: 100%;
+}
+
+.h-full {
+	height: 100%;
+}
+
+// 50 %
+.w-half {
+	width: 50%;
+}
+
+.h-half {
+	height: 50%;
+}
+
+// Pixels
+
+@if($undefined-add-px-sizing) {
+	// 50, 100, ..., 250 px
+	@for $_ from 1 through 5 {
+		$pxSize: $_ * 50;
+
+		.w-#{$pxSize} {
+			width: #{$pxSize}px;
+		}
+
+		.h-#{$pxSize} {
+			height: #{$pxSize}px;
+		}
+	}
+
+	// 300, 400, ..., 900 px
+	@for $_ from 3 through 9 {
+		$pxSize: $_ * 100;
+
+		.w-#{$pxSize} {
+			width: #{$pxSize}px;
+		}
+
+		.h-#{$pxSize} {
+			height: #{$pxSize}px;
+		}
+	}
+}

resources/NibblePoker/scss/core/spacing/axis.scss

@@ -0,0 +1,51 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Spacing > Sided */
+@mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}x-#{$size-key} {
+		#{$type-property}-left: #{$size-value};
+		#{$type-property}-right: #{$size-value};
+	}
+	.#{$type-key}y-#{$size-key} {
+		#{$type-property}-top: #{$size-value};
+		#{$type-property}-bottom: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Sided > Variable Sizes */
+@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));
+@include axis-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include axis-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include axis-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include axis-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include axis-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include axis-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include axis-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Sided > Fixed Sizes */
+@include axis-spacing-maker("m", "margin", "0", 0);
+@include axis-spacing-maker("p", "padding", "0", 0);
+
+//@for $_ from 1 through 5 {
+//	// Index: [1...5, 1]
+//	// CSS: [0.5rem...2.5rem]
+//	@include axis-spacing-maker("m", "margin", $_ * 5, $_ * 0.5 rem);
+//	@include axis-spacing-maker("p", "padding", $_ * 5, $_ * 0.5 rem);
+//}
+
+
+/* Utilities > Spacing > Sided > Others */
+@include axis-spacing-maker("m", "margin", "auto", auto);
+@include axis-spacing-maker("p", "padding", "auto", auto);
+
+
+/* Utilities > Spacing > Sided > Manual Extras */
+.px-xxs {
+	padding-left: calc(#{$margin-base-size} * 0.25);
+	padding-right: calc(#{$margin-base-size} * 0.25);
+}

resources/NibblePoker/scss/core/spacing/global.scss

@@ -0,0 +1,39 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Spacing > Global */
+@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}-#{$size-key} {
+		#{$type-property}: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Global > Variable Sizes */
+@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));
+@include global-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include global-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include global-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include global-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include global-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include global-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include global-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Global > Fixed Sizes */
+@include global-spacing-maker("m", "margin", "0", 0);
+@include global-spacing-maker("p", "padding", "0", 0);
+
+//@for $_ from 1 through 5 {
+//	// Index: [1...5, 1]
+//	// CSS: [0.5rem...2.5rem]
+//	@include global-spacing-maker("m", "margin", $_ * 5, $_ * 0.5 rem);
+//	@include global-spacing-maker("p", "padding", $_ * 5, $_ * 0.5 rem);
+//}
+
+
+/* Utilities > Spacing > Global > Others */
+@include global-spacing-maker("m", "margin", "auto", auto);
+@include global-spacing-maker("p", "padding", "auto", auto);

resources/NibblePoker/scss/core/spacing/sided.scss

@@ -0,0 +1,48 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Spacing > Sided */
+@mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}t-#{$size-key} {
+		#{$type-property}-top: #{$size-value};
+	}
+	.#{$type-key}b-#{$size-key} {
+		#{$type-property}-bottom: #{$size-value};
+	}
+	.#{$type-key}l-#{$size-key} {
+		#{$type-property}-left: #{$size-value};
+	}
+	.#{$type-key}r-#{$size-key} {
+		#{$type-property}-right: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Sided > Variable Sizes */
+@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));
+@include sided-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include sided-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include sided-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include sided-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include sided-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include sided-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include sided-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Sided > Fixed Sizes */
+@include sided-spacing-maker("m", "margin", "0", 0);
+@include sided-spacing-maker("p", "padding", "0", 0);
+
+//@for $_ from 1 through 5 {
+//	// Index: [1...5, 1]
+//	// CSS: [0.5rem...2.5rem]
+//	@include sided-spacing-maker("m", "margin", $_ * 5, $_ * 0.5 rem);
+//	@include sided-spacing-maker("p", "padding", $_ * 5, $_ * 0.5 rem);
+//}
+
+
+/* Utilities > Spacing > Sided > Others */
+@include sided-spacing-maker("m", "margin", "auto", auto);
+@include sided-spacing-maker("p", "padding", "auto", auto);

resources/NibblePoker/scss/core/text.scss

@@ -0,0 +1,87 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Utilities > Text */
+
+/* Utilities > Text > Headings */
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: #{$text-header-weight};
+}
+
+
+/* Utilities > Text > Sizes */
+
+// From 6 to 40
+@for $_ from 3 through 20 {
+	$sizeKey: $_ * 2;
+	$sizeValue: $sizeKey / 10;
+	
+	.t-size-#{$sizeKey} {
+		font-size: #{$sizeValue}rem !important;
+	}
+}
+
+@for $_ from 2 through 7 {
+	$size: $_ * 100;
+	
+	.t-w-#{$size} {
+		font-weight: #{$size} !important;
+	}
+}
+
+/* Utilities > Sizing > Variable Sizes */
+
+//@for $_ from 7 through 8 {
+//	// Index: [35...40, 5]
+//	// CSS: [3.5rem...4.5rem, 0.2rem]
+//	$size: $_ * 5;
+//
+//	.t-#{$size} {
+//		font-size: #{$size / 10}rem;
+//	}
+//}
+
+
+/* Utilities > Text > Modifiers & Styles */
+
+b, .t-bold {
+	font-weight: bold;
+}
+
+.t-bolder {
+	font-weight: bold;
+}
+
+i, .t-italic {
+	font-style: italic;
+}
+
+.t-oblique {
+	font-style: oblique;
+}
+
+u, .t-underline, .t-under {
+	text-decoration: underline;
+}
+
+s, .t-strikethrough, .t-strike {
+	text-decoration: line-through;
+}
+
+.t-overline, .t-over {
+	text-decoration: overline;
+}
+
+.t-justify, .t-just {
+	text-align: justify;
+}
+
+.t-center {
+	text-align: center;
+}
+
+.ucase {
+	text-transform: uppercase;
+}
+
+// Other default shit

resources/NibblePoker/scss/external/quantum.scss

@@ -0,0 +1,16 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// Refer to "https://github.com/aziascreations/Web-NibblePoker/blob/master/resources/Quantum/readme.md" for the font's license.
+
+// Massive thanks to "fontsquirrel.com" for allowing me to properly subset and compress the font <3
+
+@font-face {
+	font-family: 'Quantum';
+	src: url('/resources/Quantum/Quantum.min.woff2') format('woff2'),
+	url('/resources/Quantum/Quantum.min.woff') format('woff'),
+	url('/resources/Quantum/Quantum.min.ttf') format('truetype');
+}
+
+.quantum {
+	// Only really used for the logo title in the sidebar.
+	font-family: 'Quantum', sans-serif;
+}

resources/NibblePoker/scss/external/reset.scss

@@ -0,0 +1,55 @@
+// Reset.css
+// http://meyerweb.com/eric/tools/css/reset/
+// v2.0 | 20110126
+// License: none (public domain)
+
+/* External > Reset.css */
+
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small,
+strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th,
+td, main, canvas, embed, footer, header, nav, section, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	text-size-adjust: none;
+}
+
+footer, header, nav, section, main {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input {
+	-webkit-appearance: none;
+	border-radius: 0;
+}

resources/NibblePoker/scss/nibblepoker.scss

@@ -0,0 +1,55 @@
+/*
+ * -----------------------------------------------------------------------------
+ * NibblePoker.lu CSS
+ * Version: 0.0.3
+ * Copyright, 2023 Bozet Herwin
+ * -----------------------------------------------------------------------------
+ * Source: https://github.com/aziascreations/Web-NibblePoker
+ * -----------------------------------------------------------------------------
+ */
+
+/* Config */
+@import 'config';
+
+/* Externals */
+@import 'external/reset';
+
+/* Variables */
+@import 'variables';
+
+/* Core */
+@import 'core/border';  // Has out-of-core colors usage
+@import 'core/float';
+@import 'core/sizing';
+@import 'core/flex';
+@import 'core/text';
+@import 'core/containers';
+@import 'core/display';
+
+/* Core > Rounding */
+@import 'core/rounding/global';
+@import 'core/rounding/sided';
+@import 'core/rounding/corner';
+
+/* Core > Spacing */
+@import 'core/spacing/global';
+@import 'core/spacing/axis';
+@import 'core/spacing/sided';
+
+/* Site > Fonts */
+@import 'external/quantum';
+
+/* Site > HTML Elements */
+@import 'site/commons';
+@import 'site/body';
+@import 'site/layout';  // Has manual disabling of some core stuff in specific situations and a shit-tier fix for tables.
+@import 'site/hr';
+//@import 'site/scrollbar';
+@import 'site/image';
+@import 'site/wedge';
+@import 'site/input';
+@import 'site/text';  // Has hardcoded with for font-awesome icons in sidebar
+@import 'site/backgrounds';
+@import 'site/table';  // Uses copied paddings for cells & ugly rounding fix
+@import 'site/code';  // Uses copied borders, roundings and paddings
+@import 'site/content';  // Uses fixed sizes and floats

resources/NibblePoker/scss/site/backgrounds.scss

@@ -0,0 +1,9 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+.bkgd-blank {
+	background: #{$color-background-main-headings};
+}
+
+.bkgd-grid {
+	background: #{$color-background-main-headings} url("/resources/NibblePoker/images/backgrounds/3px-tile-0.4.png") repeat scroll center center;
+}

resources/NibblePoker/scss/site/body.scss

@@ -0,0 +1,59 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* HTML Elements > HTML & Body */
+
+//@import 'images';
+
+html, body {
+	min-width: 100vw;
+	min-height: 100vh;
+	width: 100vw !important;
+	height: 100vh !important;
+	max-width: 100vw;
+	max-height: 100vh;
+	
+	background-color: #{$color-background-body};
+}
+
+body {
+	//z-index: -2;
+	
+	font-family: "Roboto", Arial, sans-serif;
+	
+	//&:before {
+	//	content: ' ';
+	//	display: block;
+	//	position: absolute;
+	//	left: 0;
+	//	top: 0;
+	//	width: 100%;
+	//	height: 100%;
+	//	z-index: -1;
+	//}
+	//
+	//&.background-grid:before {
+	//	opacity: 0.3;  // TODO: Set to .2 if in light.
+	//	background-image: #{$img_grid};
+	//}
+	//
+	//&.background-map:before {
+	//	background-image: #{$img_map};
+	//	filter: contrast(200%) invert(75%) opacity(0.25) brightness(0.625);
+	//}
+}
+
+body {
+	//background-color: var(--lm-base-body-bg-color);
+	//background-image: var(--lm-base-body-bg-image);
+	//color: var(--lm-base-text-color);
+	//font-size: var(--base-font-size);
+	//line-height: var(--base-line-height);
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	//font-weight: 400;
+}
+
+
+// TODO: Add that background to other classes through a common declaration
+// And then separate only the body in a final declaration to unset the background from fixed to default !
+// It will reduce the number of CSS statements/selectors !!!

resources/NibblePoker/scss/site/code.scss

@@ -0,0 +1,22 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+code, .code, kbd {
+	font-family: Consolas, "Courier New", monospace;
+}
+
+// For large blocks
+code {
+
+}
+
+// For spans
+.code, kbd {
+	border: 1px solid #{$color-unset};
+	
+	// Using '.r-s'
+	border-radius: calc(#{$border-base-radius} * 0.75);
+	
+	// Using the middle of '.px-xs' and '.px-s'
+	padding-left: calc(#{$border-base-radius} * 0.625);
+	padding-right: calc(#{$border-base-radius} * 0.625);
+}

resources/NibblePoker/scss/site/commons.scss

@@ -0,0 +1,23 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* HTML Elements > Commons */
+
+//* {
+//	margin: 0;
+//	padding: 0;
+//
+//	color: #{$color-black-medium};
+//
+//	.dark-mode & {
+//		color: #{$color-white-light};
+//	}
+//}
+
+//.container, header, footer, form, .sidebar {
+//	border: 1px solid var(--l-border-color);
+//
+//	.dark-mode & {
+//		border-color: var(--d-border-color);
+//	}
+//}
+//

resources/NibblePoker/scss/site/content.scss

@@ -0,0 +1,21 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+.content-search-entry {
+	min-height: #{$content-search-image-size};
+}
+
+.content-search-image {
+	width: #{$content-search-image-size};
+	height: #{$content-search-image-size};
+	float: left;
+	filter: drop-shadow(0 0 0.2rem #000000CF);
+}
+
+.content-search-entry > p {
+	width: 90%;
+	//max-width: 800px;
+}
+
+.content-error-text {
+	max-width: 700px;
+}

resources/NibblePoker/scss/site/hr.scss

@@ -0,0 +1,19 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* HTML Elements > Horizontal Rule */
+
+hr {
+	//color: var(--dm-horizontal-rule-color);
+	//background-color: var(--dm-horizontal-rule-color);
+	
+	.dark-mode & {
+	
+	}
+	
+	&.subtle {
+		background-color: rgba(0,0,0,0) !important;
+		background: #5d5f61;
+		background: radial-gradient(circle, rgba(83, 85, 87, 0.8) 0%, rgba(65, 67, 69, 0.65) 75%, rgba(17, 20, 23, 0) 100%);
+		opacity: 0.1;
+	}
+}

resources/NibblePoker/scss/site/image.scss

@@ -0,0 +1,42 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+.img-text {
+	height: 1em;
+	vertical-align: top;
+}
+
+.btn-img {
+	display: flex;
+	height: 1em;
+}
+
+.sidebar-entry > i {
+
+}
+
+//.align-v-t
+
+#logo-sidebar {
+	filter: grayscale(100%);
+	mix-blend-mode: multiply;
+	opacity: 40%;
+	width: 100%;
+	height: auto;
+}
+
+#logo-footer {
+	filter: grayscale(100%);
+	height: 1.8em;
+	object-fit: contain;
+}
+
+// Logo colors
+//.npl1, .npl6 {
+//}
+//
+//.npl2, .npl5 {
+//}
+//
+//.npl3, .npl4 {
+//}
+

resources/NibblePoker/scss/site/input.scss

@@ -0,0 +1,33 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Site > Input */
+
+/* Site > Input > Commons */
+
+button, input {
+	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-inputs};
+	
+	&:not(.no-focus) {
+		&:focus {
+			box-shadow: 0px 0px 3px 0px #{$color-input-glow};
+		}
+	}
+}
+
+/* Site > Input > Buttons */
+
+button {
+	cursor: pointer;
+	background-color: #{$color-background-button};
+	
+	&:hover {
+		background-color: #{$color-background-button-hover};
+	}
+}

resources/NibblePoker/scss/site/layout.scss

@@ -0,0 +1,61 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* HTML Elements > Layout */
+
+// Fixing some alignment issues with the sidebar and header
+// I hate everyone that worked on CSS with every fiber of my soul.
+// TODO: Try .container-root > tbody > tr [ > td ] {}
+tr, td {
+	vertical-align: top;
+}
+
+.container-root {
+	width: 100vw !important;
+	min-height: 100vh !important;
+	height: 100vh !important;
+	max-height: 100vh !important;
+	overflow: hidden;
+}
+
+header, nav, footer {
+	background-color: #{$color-background-surround};
+}
+
+.sidebar {
+	width: #{$size-sidebar};
+	max-width: #{$size-sidebar};
+	min-height: 100%;
+	
+	&.retracted {
+		width: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+}
+
+// TODO: Can be simplified in the DOM
+.sidebar-entry {
+	display: flex;
+	align-items: center;
+	justify-content: left;
+}
+
+main {
+	background-color: #{$color-background-main};
+	
+	&.expanded {
+		border-left: 0;
+		border-radius: 0;
+	}
+}
+
+main, .sidebar {
+	transition: width 0.4s, padding 0.4s, border-width 0.4s, border-radius 0.4s;
+	transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
+}
+
+.heading-main > h2 {
+	display: flex;
+	align-items: center;
+	justify-content: left;
+}

resources/NibblePoker/scss/site/table.scss

@@ -0,0 +1,44 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+table.stylish {
+	th {
+		font-weight: bold;
+	}
+	
+	tr {
+		background-color: #{$color-background-table-dual};
+	}
+	
+	tr:not(:last-of-type), th {
+		border-bottom: 1.5px solid #{$color-table-border};
+	}
+	
+	tr:nth-child(2n), th {
+		background-color: #{$color-background-table-main};
+	}
+	
+	td:not(:last-of-type), th:not(:last-of-type) {
+		border-right: 1.5px solid #{$color-table-border};
+	}
+	
+	// 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-p-s {
+		td, th {
+			padding: calc(#{$margin-base-size} * 0.75);
+		}
+	}
+	
+	// Fixing border issues when using rounded corners by using a "fake" one using the background's color.
+	// It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently.
+	// I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit.
+	&.border {
+		background-color: #{$color-border-all};
+	}
+}

resources/NibblePoker/scss/site/text.scss

@@ -0,0 +1,93 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+p, a, h1, h2, h3, td {
+	color: #{$color-text-regular-normal};
+}
+
+// Setting colors for bland links.
+// Done before muted text to make the footer privacy link possible.
+a {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+	
+	color: #{$color-link-hover};
+	
+	> * {
+		color: #{$color-link-hover};
+		text-decoration: underline;
+	}
+}
+
+.t-muted {
+	//@if $undefined-toggle-css-variables {
+	//	color: var(--color-white-muted);
+	//} @else {
+	//	color: #{$color-white-muted};
+	//}
+	//color: #A9A9Aa;
+	opacity: 50%;
+}
+
+.t-super-muted {
+	opacity: 45%;
+}
+
+.t-logo-text {
+	font-size: 1.775em;
+}
+
+a:not(.bland-link) {
+	text-decoration: underline;
+	//text-decoration: overline;
+	
+	color: #{$color-link-blue} !important;
+	
+	& * {
+		color: #{$color-link-blue} !important;
+	}
+	
+	&:hover {
+		//text-decoration: underline;
+		
+		color: #{$color-link-blue-hover} !important;
+		
+		& * {
+			color: #{$color-link-blue-hover} !important;
+		}
+	}
+}
+
+// Special rules for the sidebar and FontAwesome icons
+
+.sidebar-entry {
+	i {
+		width: 1.9rem !important;
+		// Required to prevent a size flicker when hiding/showing the sidebar.
+		// The about link is the most visible one.
+		min-width: 1.9rem !important;
+	}
+	
+	// Preventing a subtle line break when hiding/showing the sidebar.
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	
+	// Doesn't work, even with hyper-specific parent selectors...
+	//> i, > i:hover {
+	//	text-decoration: none !important;
+	//}
+}
+
+// And now for the headings, the exceptions keep popping up :,)
+// TODO: Add a simple and nicer divider.
+.heading-main {
+	i {
+		//margin-left: 0.25rem;
+		margin-right: 0.4rem;
+		padding-right: 0.1rem;
+		width: 1.75rem !important;
+		text-align: center;
+	}
+}

resources/NibblePoker/scss/site/wedge.scss

@@ -0,0 +1,119 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Custom Elements > Wedge */
+
+.wedge {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 2.5rem;
+	height: 2.5rem;
+	
+	clip-path: polygon(100% 0, 0 100%, 100% 100%);
+	border-radius: var(--base-border-radius) !important;
+	//border-bottom-right-radius: var(--base-border-radius) !important;
+	overflow: hidden;
+	
+	color: var(--dm-button-text-color);
+	background-color: var(--dm-button-bg-color);
+	background-image: var(--dm-button-bg-image);
+	border-color: var(--dm-button-border-color);
+	opacity: 0.4;
+	
+	// https://codepen.io/setswon/pen/VJeXXq
+	// Using a value of ~0.35 feels sluggish.
+	transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
+	transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
+	
+	user-select: none;
+	cursor: pointer;
+	
+	&.primary {
+		color: white;
+		
+		background-color: #{$color-wedge-blue-background};
+		border-color: #{$color-wedge-blue-border};
+		
+		//color: var(--dm-button-primary-text-color);
+		//background-color: var(--dm-button-primary-bg-color);
+		//background-image: var(--dm-button-primary-bg-image);
+		//border-color: var(--dm-button-primary-border-color);
+	}
+	
+	&.secondary {
+		color: var(--dm-button-secondary-text-color);
+		background-color: var(--dm-button-secondary-bg-color);
+		background-image: var(--dm-button-secondary-bg-image);
+		border-color: var(--dm-button-secondary-border-color);
+	}
+	
+	&.danger {
+		color: var(--dm-button-secondary-text-color);  // White icons looks like shit.
+		background-color: var(--dm-button-danger-bg-color);
+		background-image: var(--dm-button-danger-bg-image);
+		border-color: var(--dm-button-danger-border-color);
+	}
+	
+	i {
+		position: absolute;
+		right: 0.2rem;
+		bottom: 0.2rem;
+		transition: right 0.25s ease, bottom 0.25s ease;
+		transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
+		
+		&.r-45 {
+			// Small fix
+			right: 0.4rem;
+		}
+	}
+	
+	&:hover {
+		width: 3rem;
+		height: 3rem;
+		opacity: 0.8;
+		
+		i {
+			bottom: 0.325em;
+			right: 0.325rem;
+			
+			&.r-45 {
+				// Small fix
+				right: 0.7rem;
+			}
+		}
+	}
+	
+	// Extra rule for mobile
+	// If it doesn't work, use "768px" !
+	@media (max-width: 576px) {
+		width: 3.5rem;
+		height: 3.5rem;
+		opacity: 0.8;
+		
+		i {
+			bottom: 0.325em;
+			right: 0.325rem;
+			
+			&.r-45 {
+				// Small fix
+				right: 0.7rem;
+			}
+		}
+	}
+	
+	&.fold-top-right {
+		top: 0;
+		clip-path: polygon(0 0, 100% 0, 100% 100%);
+		
+		i {
+			top: 0.3em;
+			right: 0.3rem;
+		}
+		
+		&:hover i {
+			top: 0.4rem;
+			right: 0.4rem;
+		}
+	}
+}
+

resources/NibblePoker/scss/variables.scss

@@ -0,0 +1,144 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Variables > Palettes */
+
+/* Variables > Palettes > Apollo */
+// https://lospec.com/palette-list/apollo
+$color-apollo-00: #172038;
+$color-apollo-01: #253a5e;
+$color-apollo-02: #3c5e8b;
+$color-apollo-03: #4f8fba;
+$color-apollo-04: #73bed3;
+$color-apollo-05: #a4dddb;
+$color-apollo-06: #19332d;
+$color-apollo-07: #25562e;
+$color-apollo-08: #468232;
+$color-apollo-09: #75a743;
+$color-apollo-10: #a8ca58;
+$color-apollo-11: #d0da91;
+$color-apollo-12: #4d2b32;
+$color-apollo-13: #7a4841;
+$color-apollo-14: #ad7757;
+$color-apollo-15: #c09473;
+$color-apollo-16: #d7b594;
+$color-apollo-17: #e7d5b3;
+$color-apollo-18: #341c27;
+$color-apollo-19: #602c2c;
+$color-apollo-20: #884b2b;
+$color-apollo-21: #be772b;
+$color-apollo-22: #de9e41;
+$color-apollo-23: #e8c170;
+$color-apollo-24: #241527;
+$color-apollo-25: #411d31;
+$color-apollo-26: #752438;
+$color-apollo-27: #a53030;
+$color-apollo-28: #cf573c;
+$color-apollo-29: #da863e;
+$color-apollo-30: #1e1d39;
+$color-apollo-31: #402751;
+$color-apollo-32: #7a367b;
+$color-apollo-33: #a23e8c;
+$color-apollo-34: #c65197;
+$color-apollo-35: #df84a5;
+$color-apollo-36: #090a14;
+$color-apollo-37: #10141f;
+$color-apollo-38: #151d28;
+$color-apollo-39: #202e37;
+$color-apollo-40: #394a50;
+$color-apollo-41: #577277;
+$color-apollo-42: #819796;
+$color-apollo-43: #a8b5b2;
+$color-apollo-44: #c7cfcc;
+$color-apollo-45: #ebede9;
+
+$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
+$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
+$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
+$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
+
+$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
+
+//$color-test-01: mix(#7b6aa5, #000000, 33%);
+$color-test-02: #007c7d;
+
+/* Variables > Colors */
+
+$color-unset: $color-apollo-34;
+//$color-unset: deeppink;
+
+$color-text-regular-normal: $color-apollo-45;
+$color-text-inputs: $color-apollo-45;
+$color-text-muted: #{$color-apollo-45}E0;
+$color-text-muted-super: #{$color-apollo-45}C0;
+
+$color-link-hover: rgb(253, 255, 251);
+
+// Should be a mix of 03-04 and 04-05.
+$color-link-blue: #{$color-apollo-04};
+$color-link-blue-hover: #{$color-apollo-05};
+
+$color-border-all: $color-apollo-38;
+
+$color-input-glow: $color-apollo-02;
+
+$color-wedge-blue-background: $color-apollo-03;
+$color-wedge-blue-border: $color-apollo-02;
+
+//$color-background-body: $color-apollo-custom-00;
+//$color-background-main: $color-apollo-39;
+////$color-background-surround: $color-apollo-40;
+//$color-background-surround: $color-apollo-custom-00;
+$color-background-body: $color-apollo-custom-00;
+$color-background-main: $color-apollo-custom-02;
+$color-background-surround: $color-apollo-custom-00;
+
+// TMP
+//$color-background-main: mix(#333c57, #566c86, 60%);
+//$color-background-surround: mix(#333c57, #566c86, 80%);
+
+//$color-background-main-headings: $color-apollo-40;
+$color-background-main-headings: $color-apollo-custom-03;
+
+$color-background-table-main: $color-apollo-custom-01;
+$color-background-table-dual: $color-apollo-custom-00;
+//$color-table-border: $color-apollo-41;
+$color-table-border: $color-apollo-39;
+
+$color-background-inputs: $color-apollo-40;
+$color-background-button: $color-apollo-40;
+$color-background-button-hover: $color-apollo-custom-10;
+
+$_color-white-lighter: rgb(253, 255, 251);
+$_color-white-light: rgb(235, 237, 233);
+$_color-white-medium: rgb(217, 222, 218);
+$_color-white-dark: rgb(199, 207, 204);
+
+$_color-black-lighter: rgb(43, 46, 51);
+$_color-black-light: rgb(37, 40, 45);
+$_color-black-medium: rgb(31, 34, 39);
+$_color-black-dark: rgb(25, 28, 32);
+$_color-black-full: rgb(13, 14, 26);
+
+$_color-text-white-065: rgba(255, 255, 255, 0.65);
+$_color-text-white-075: rgba(255, 255, 255, 0.75);
+$_color-text-white-085: rgba(255, 255, 255, 0.85);
+
+$_color-blue-light: #4f6dce;
+$_color-blue-medium: #3b5dc8;
+$_color-blue-dark: #3353b6;
+
+$_color-white-muted: #FFFFFF96;
+//rgba(255, 255, 255, 0.6)
+
+/* Variables > Others */
+
+$border-base-radius: 5px;
+
+$margin-base-size: 1rem;
+
+$text-header-weight: 600;
+
+$size-sidebar: 15rem;
+//$size-sidebar: 30rem;
+
+$content-search-image-size: 128px;

resources/NibblePoker/scss/waffle-day.scss

@@ -0,0 +1,13 @@
+/*
+ * -----------------------------------------------------------------------------
+ * NibblePoker.lu CSS - Belgium Independence Day Extra
+ * Version: 0.0.3
+ * Copyright, 2023 Bozet Herwin
+ * -----------------------------------------------------------------------------
+ * Source: https://github.com/aziascreations/Web-NibblePoker
+ * -----------------------------------------------------------------------------
+ */
+
+.test-123-456 {
+	background-color: red;
+}