Added scripts for content, Improved tables and buttons

Update scripts.php, sidebar.php, and 20 more files...

resources/NibblePoker/js/nibblepoker-code.js

@@ -0,0 +1,49 @@
+// Highlights the code blocks when included on a page.
+// This command is separated in its own file since highlight.js isn't on every page and because I can't use JS
+//   in a script element without using an external .js file.
+
+Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => {
+	let language = null;
+	
+	eCodeContainer.classList.forEach(cCodeContainer => {
+		if(cCodeContainer.startsWith("language-")) {
+			language = cCodeContainer;
+		}
+	});
+	
+	if(language !== null) {
+		Array.from(eCodeContainer.children).forEach(eCodeLine => {
+			if(eCodeLine.classList.contains("code-line")) {
+				eCodeLine.classList.add(language);
+				hljs.highlightElement(eCodeLine);
+			}
+		});
+	}
+});
+
+// Adding the action to copy the code to elements with the "js-code-copy" class.
+// The search works by searching the closest parent with the "code" class or that is a "code" element, and then
+//   reading each of its children with the "code-line" class.
+
+Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => {
+	let eParentCodeBlock = eCodeCopyButton;
+	
+	while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") &&
+	eParentCodeBlock.nodeName.toLowerCase() !== "code") {
+		eParentCodeBlock = eParentCodeBlock.parentElement;
+	}
+	
+	if(eParentCodeBlock != null) {
+		let code = "";
+		
+		Array.from(eParentCodeBlock.children).forEach(eCodeLine => {
+			if(eCodeLine.classList.contains("code-line")) {
+				code += eCodeLine.textContent + "\n"
+			}
+		});
+		
+		eCodeCopyButton.onclick = function() {
+			navigator.clipboard.writeText(code);
+		};
+	}
+});

resources/NibblePoker/js/nibblepoker-glider.js

@@ -0,0 +1,77 @@
+// Creating the galleries from Glider.js
+window.addEventListener('load', function(){
+	document.querySelectorAll(".glider").forEach(element => {
+		new Glider(element, {
+			slidesToShow: 1,
+			draggable: true,
+			scrollLock: true,
+			scrollLockDelay: 125,
+			rewind: true,
+			arrows: {
+				prev: element.previousSibling,
+				next: element.nextSibling
+			},
+			responsive: [
+				{
+					breakpoint: 768,
+					settings: {
+						slidesToShow: 2,
+						duration: 0.25
+					}
+				},{
+					breakpoint: 992,
+					settings: {
+						slidesToShow: 3,
+						slidesToScroll: 1
+					}
+				}
+			]
+		});
+		
+		// Processing the images
+		const eImages = [];
+		
+		// Converting the Node to a HTMLElement if needed and desired.
+		element.childNodes[0].childNodes.forEach(childrenNode => {
+			if(childrenNode.nodeType !== Node.ELEMENT_NODE) {
+				return;
+			}
+			
+			// Casting from a Node to a proper HTMLElement because of course we have to add this step in JS...
+			const eChildElement = childrenNode.cloneNode(true);
+			
+			if(eChildElement.tagName.toLowerCase() !== "img") {
+				return;
+			}
+			
+			eChildElement.onclick = function() {
+				let imageElement = document.getElementById("modal-img");
+				imageElement.src = eChildElement.src;
+				imageElement.alt = eChildElement.alt;
+				halfmoon.toggleModal('modal-content-image-viewer');
+				console.log("Opening image...");
+			};
+			
+			// Saving the element for later.
+			eImages.push(eChildElement);
+		});
+		
+		// Removing the nodes so that the desired ones can be reinserted later.
+		// We start from the rear to prevent issues with de-ordering as we delete them !
+		for(let i = element.childNodes[0].childNodes.length - 1; i >= 0; i--) {
+			element.childNodes[0].removeChild(element.childNodes[0].childNodes[i]);
+		}
+		
+		eImages.forEach(eImageElement => {
+			element.childNodes[0].appendChild(eImageElement);
+		});
+	});
+	
+	// The default modal animation looks like ass, jesus...
+	let eImgModalCloseButton = document.getElementById("modal-img-close");
+	if(eImgModalCloseButton != null) {
+		eImgModalCloseButton.onclick = function() {
+			halfmoon.toggleModal('modal-content-image-viewer');
+		}
+	}
+});

resources/NibblePoker/scss/core/border.scss

@@ -13,6 +13,10 @@
 
 .border {
 	border: 1px solid #{$color-border-all};
+	
+	&.b-light {
+		border: 1px solid #{$color-border-light};
+	}
 }
 
 * {

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

@@ -37,3 +37,9 @@
 /* Utilities > Spacing > Global > Others */
 @include global-spacing-maker("m", "margin", "auto", auto);
 @include global-spacing-maker("p", "padding", "auto", auto);
+
+
+/* Utilities > Spacing > Global > Manual Extras */
+.p-mxs {
+	padding: calc(#{$margin-base-size} * 0.375);
+}

resources/NibblePoker/scss/core/text.scss

@@ -28,6 +28,12 @@ h1, h2, h3, h4, h5, h6 {
 .t-size-13 {
 	font-size: 1.3rem !important;
 }
+.t-size-15 {
+	font-size: 1.5rem !important;
+}
+.t-size-17 {
+	font-size: 1.7rem !important;
+}
 
 @for $_ from 2 through 7 {
 	$size: $_ * 100;

resources/NibblePoker/scss/site/code.scss

@@ -11,7 +11,9 @@ code {
 
 // For spans
 .code, kbd {
-	border: 1px solid #{$color-unset};
+	background-color: #{$color-background-code};
+	
+	border: 1px solid #{$color-border-code};
 	
 	// Using '.r-s'
 	border-radius: calc(#{$border-base-radius} * 0.75);
@@ -20,3 +22,17 @@ code {
 	padding-left: calc(#{$border-base-radius} * 0.625);
 	padding-right: calc(#{$border-base-radius} * 0.625);
 }
+
+// Removes the background added by highlight.js
+.code-line {
+	background: rgba(0,0,0,0) !important;
+}
+
+code, .code, .code-line {
+	line-height: 1.35;
+}
+
+// FIXME: Use a proper class !!!
+.code:not(code) {
+	padding: calc(#{$border-base-radius} * 0.625);
+}

resources/NibblePoker/scss/site/commons.scss

@@ -21,3 +21,7 @@
 //	}
 //}
 //
+
+button + button, .button-link + .button-link > button {
+	margin-left: 0.75rem;
+}

resources/NibblePoker/scss/site/table.scss

@@ -35,6 +35,12 @@ table.stylish {
 		}
 	}
 	
+	&.table-v-center {
+		tr, td {
+			vertical-align: middle;
+		}
+	}
+	
 	// 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.

resources/NibblePoker/scss/site/text.scss

@@ -4,6 +4,10 @@ p, a, h1, h2, h3, td {
 	color: #{$color-text-regular-normal};
 }
 
+p {
+	line-height: 1.2;
+}
+
 // Setting colors for bland links.
 // Done before muted text to make the footer privacy link possible.
 a {
@@ -20,6 +24,10 @@ a:hover {
 	}
 }
 
+.t-half-muted {
+	opacity: 65%;
+}
+
 .t-muted {
 	//@if $undefined-toggle-css-variables {
 	//	color: var(--color-white-muted);
@@ -36,6 +44,7 @@ a:hover {
 
 .t-logo-text {
 	font-size: 1.775em;
+	line-height: 1;
 }
 
 a:not(.bland-link) {

resources/NibblePoker/scss/variables.scss

@@ -58,6 +58,8 @@ $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-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
+
 //$color-test-01: mix(#7b6aa5, #000000, 33%);
 $color-test-02: #007c7d;
 
@@ -78,6 +80,7 @@ $color-link-blue: #{$color-apollo-04};
 $color-link-blue-hover: #{$color-apollo-05};
 
 $color-border-all: $color-apollo-38;
+$color-border-light: $color-apollo-custom-20;
 
 $color-input-glow: $color-apollo-02;
 
@@ -99,6 +102,9 @@ $color-background-surround: $color-apollo-custom-00;
 //$color-background-main-headings: $color-apollo-40;
 $color-background-main-headings: $color-apollo-custom-03;
 
+$color-background-code: #{$color-apollo-custom-20};
+$color-border-code: #{$color-border-all}CF;
+
 $color-background-table-main: $color-apollo-custom-01;
 $color-background-table-dual: $color-apollo-custom-00;
 //$color-table-border: $color-apollo-41;