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/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;
+		}
+	}
+}
+