aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamped layout, Added lang selection, Added auto lang detection, Removed trash, Other minor improvements

Browse Source 
Update .htaccess, body-1.php, and 50 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-06-01 17:20:44 +02:00
parent 6e9bf25866
commit 6fb621e550
52 changed files with 1047 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/NibblePoker/images/drawings/mcu_v0_test1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
resources/NibblePoker/images/drawings/mcu_v0_test2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

13
resources/NibblePoker/js/nibblepoker-glider.js
View File

@@ -45,11 +45,14 @@ window.addEventListener('load', function(){
}
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...");
let eModalImage = document.createElement("img")
eModalImage.classList.add("modal-inner-image");
eModalImage.classList.add("r-xl");
eModalImage.src = eChildElement.src;
eModalImage.alt = eChildElement.alt;
//halfmoon.toggleModal('modal-content-image-viewer');
//console.log("Opening image...");
showContentModal(eModalImage);
};
// Saving the element for later.

84
resources/NibblePoker/js/nibblepoker.js
View File

@@ -1,19 +1,81 @@
const animationStepCount = 10;
function getBezierBlend(progress) {
return (3 * progress ** 2) - (2 * progress ** 3);
}
function fadeOut(element, time = 200) {
element.style.opacity = "1.0";
element.hidden = false;
return new Promise((resolve) => {
const delay = time / animationStepCount;
let i = 0;
const intervalId = setInterval(() => {
element.style.opacity = String(1 - getBezierBlend(i / animationStepCount));
i++;
if(i === animationStepCount) {
element.style.opacity = "0.0";
element.hidden = true;
clearInterval(intervalId);
resolve();
}
}, delay);
});
}
function fadeIn(element, time = 200) {
element.style.opacity = "0.0";
element.hidden = false;
return new Promise((resolve) => {
const delay = time / animationStepCount;
let i = 0;
const intervalId = setInterval(() => {
element.style.opacity = String(getBezierBlend(i / animationStepCount));
i++;
if(i === animationStepCount) {
element.style.opacity = "1.0";
clearInterval(intervalId);
resolve();
}
}, delay);
});
}
let isSidebarVisible = true;
let eContentModal = document.getElementById("modal-content");
let eContentModalInner = document.getElementById("modal-content-inner");
function showContentModal(eContent) {
eContentModalInner.appendChild(eContent);
fadeIn(eContentModal, 175).then(r => {
// We don't care about what happens afterward...
});
}
document.addEventListener("DOMContentLoaded", () => {
const eSidebar = document.getElementById("sidebar");
const eMain = document.getElementById("main");
document.getElementById("sidebar-toggle-footer").onclick = function () {
if(isSidebarVisible) {
eSidebar.classList.add("retracted");
const eSidebar = document.getElementById("sidebar");
const eMain = document.getElementById("main");
document.getElementById("sidebar-toggle-footer").onclick = function() {
if(isSidebarVisible) {
eSidebar.classList.add("retracted");
eMain.classList.add("expanded");
} else {
eSidebar.classList.remove("retracted");
eMain.classList.remove("expanded");
}
isSidebarVisible = !isSidebarVisible;
} else {
eSidebar.classList.remove("retracted");
eMain.classList.remove("expanded");
}
isSidebarVisible = !isSidebarVisible;
};
//showContentModal(eContentModal);
[eContentModal, document.getElementById("modal-content-cross"), eContentModalInner].forEach(value => {
value.onclick = function() {
fadeOut(eContentModal, 175).then(r => {
eContentModalInner.innerHTML = "";
});
}
})
// TODO: Autodetect mobile screens, close it, and add classes to make it over the rest with dark modal bkgd.
});

2
resources/NibblePoker/scss/config.scss
View File

@@ -2,3 +2,5 @@
// Add the "w-000px"/"h-000x" classes.
$undefined-add-px-sizing: false;
$nibblepoker-background-root: "/resources/NibblePoker/images/backgrounds";

1
resources/NibblePoker/scss/core/rounding/global.scss
View File

@@ -13,6 +13,7 @@
@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));
@include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
/* Utilities > Rounding > Global > Fixed Sizes */
@include global-rounding-maker("0", 0);

9
resources/NibblePoker/scss/core/spacing/global.scss
View File

@@ -40,9 +40,12 @@
/* Utilities > Spacing > Global > Manual Extras */
.p-mxs {
padding: calc(#{$margin-base-size} * 0.375);
}
.p-xxs {
padding: calc(#{$margin-base-size} * 0.25);
}
.p-mxs {
padding: calc(#{$margin-base-size} * 0.375);
}
.p-ms {
padding: calc(#{$margin-base-size} * 0.625);
}

2
resources/NibblePoker/scss/external/quantum.scss vendored
View File

@@ -3,6 +3,8 @@
// Massive thanks to "fontsquirrel.com" for allowing me to properly subset and compress the font <3
/* External > Quantum */
@font-face {
font-family: 'Quantum';
src: url('/resources/Quantum/Quantum.min.woff2') format('woff2'),

26
resources/NibblePoker/scss/nibblepoker.scss
View File

@@ -13,6 +13,7 @@
/* Externals */
@import 'external/reset';
@import 'external/quantum';
/* Variables */
@import 'variables';
@@ -36,21 +37,26 @@
@import 'core/spacing/axis';
@import 'core/spacing/sided';
/* Site > Fonts */
@import 'external/quantum';
/* Site */
@import 'site/base'; // Has manual disabling of some core stuff in specific situations and a shit-tier fix for tables & border on mobile.
@import 'site/text'; // Has some hardcoded width for font-awesome icons in sidebar and headings
/* 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.
/* Site > Elements */
@import 'site/hr';
@import 'site/scrollbar';
@import 'site/input'; // Has ugly fix for download buttons
@import 'site/table'; // Uses copied paddings for cells & ugly rounding fix
/* Site > Misc */
@import 'site/backgrounds';
/* Site > Fixes */
@import 'site/mobile'; // Has !important overrides for obvious reasons
/* Site > Unsorted */
@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
@import 'site/video';
@import 'site/modal';

16
resources/NibblePoker/scss/site/backgrounds.scss
View File

@@ -1,17 +1,27 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* Site > Misc > Backgrounds */
.bkgd-blank {
background: #{$color-background-main-headings};
}
.bkgd-surround {
background: #{$color-background-surround};
}
.bkgd-blank-dark {
background: mix($color-background-main, $color-background-surround, 50%);
}
.bkgd-grid {
background: #{$color-background-main-headings} url("/resources/NibblePoker/images/backgrounds/3px-tile-0.4.png") repeat scroll center center;
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
}
.bkgd-squares {
background: #{$color-background-main-headings} url("/resources/NibblePoker/images/backgrounds/bright-squares-p100-0.125.png") repeat scroll center center;
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/bright-squares-p100-0.125.png") repeat scroll center center;
}
.bkgd-math {
background: #{$color-background-main-headings} url("/resources/NibblePoker/images/backgrounds/old-mathematics-v2-0.25.png") repeat scroll center center;
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
}

155
resources/NibblePoker/scss/site/base.scss Normal file
View File

@@ -0,0 +1,155 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* Site > Base */
/* Site > Base > Layout */
/* Site > Base > Layout > Root */
html, body {
min-width: 100vw;
min-height: 100vh;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw;
max-height: 100vh;
}
/* Site > Base > Layout > Main Grid */
body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr min-content;
gap: 0;
& > nav {
grid-column: 1;
grid-row: 1 / span 2;
overflow-x: hidden;
overflow-y: auto;
z-index: #{$z-index-sidebar};
}
& > header {
grid-column: 2;
grid-row: 1;
// Inner content
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: min-content;
& > h1 {
grid-column: 1;
}
& > #lang-selector {
grid-column: 2;
}
}
& > main {
grid-column: 2;
grid-row: 2;
overflow-x: hidden;
overflow-y: auto;
position: relative; // Helps with some absolute alignments inside it
}
& > footer {
grid-column: 1 / span 2;
grid-row: 3;
}
}
/* Site > Base > Layout > Mobile Fixes */
@media only screen and (max-width: 768px) {
body {
& > nav {
border-right: 1px solid #{$color-border-all};
}
& > header {
grid-column: 1 / span 2;
}
& > main {
grid-column: 1 / span 2;
// TODO: Remove scrolling here
}
}
}
/* Site > Base > Coloring & Fonts */
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";
}
header, nav, footer {
background-color: #{$color-background-surround};
}
main {
background-color: #{$color-background-main};
}
/* Site > Base > Sidebar */
// FIXME: For mobile, just use 2 media queries to define normal behaviour and inverted mobile behaviour.
// FIXME: Might be easier to have it as absolute, shift it left when closing and using a blank spacing div tbh...
// Or nest content in div, and when retracted move it out at the same speed, idk...
.sidebar {
width: #{$size-sidebar};
max-width: #{$size-sidebar};
min-height: 100%;
&.retracted {
width: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
.sidebar-entry {
display: flex;
align-items: center;
justify-content: left;
}
}
/* Site > Base > Main */
main {
&.expanded {
border-left: 0;
border-radius: 0;
}
}
/* Site > Base > Transitions */
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);
}
/* // HTML Elements > Layout > Trash */
// FIXME: Move it out too !
.heading-main {
> h2, > h3, > h4 {
display: flex;
align-items: center;
justify-content: left;
}
&.heading-dyn-width-1 {
min-width: 75%;
}
}

59
resources/NibblePoker/scss/site/body.scss
View File

@@ -1,59 +0,0 @@
// 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 !!!

27
resources/NibblePoker/scss/site/commons.scss
View File

@@ -1,27 +0,0 @@
// 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);
// }
//}
//
button + button, .button-link + .button-link > button {
margin-left: 0.75rem;
}

21
resources/NibblePoker/scss/site/hr.scss
View File

@@ -1,19 +1,10 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* HTML Elements > Horizontal Rule */
/* Site > 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;
}
hr.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;
}

43
resources/NibblePoker/scss/site/input.scss
View File

@@ -1,8 +1,8 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* Site > Input */
/* Site > Elements > Inputs */
/* Site > Input > Commons */
/* Site > Elements > Inputs > Commons */
button, input {
border: 0;
@@ -21,7 +21,7 @@ button, input {
}
}
/* Site > Input > Buttons */
/* Site > Elements > Inputs > Buttons */
button {
cursor: pointer;
@@ -39,3 +39,40 @@ button {
}
}
}
// 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;
//}
}

69
resources/NibblePoker/scss/site/layout.scss
View File

@@ -1,69 +0,0 @@
// 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};
}
// FIXME: Might be easier to have it as absolute, shift it left when closing and using a blank spacing div tbh...
// Or nest content in div, and when retracted move it out at the same speed, idk...
.sidebar {
width: #{$size-sidebar};
max-width: #{$size-sidebar};
min-height: 100%;
&.retracted {
width: 0;
padding-left: 0;
padding-right: 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, > h3, > h4 {
display: flex;
align-items: center;
justify-content: left;
}
&.heading-dyn-width-1 {
min-width: 75%;
}
}

19
resources/NibblePoker/scss/site/mobile.scss Normal file
View File

@@ -0,0 +1,19 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* Site > Fixes > Mobile */
@media only screen and (max-width: 768px) {
// Overrides the ".p-l" class used on "main".
main {
padding: calc(#{$margin-base-size} * 0.5) !important;
}
// Overrides a style in "site/content.scss".
.content-search-entry > p {
width: 100% !important;
}
.mobile-hide {
display: none;
}
}

34
resources/NibblePoker/scss/site/modal.scss Normal file
View File

@@ -0,0 +1,34 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
.modal {
position: absolute;
top: 0;
left: 0;
z-index: #{$z-index-modal};
background-color: #000000CF;
width: 100vw;
height: 100vh;
> #modal-content-cross {
cursor: pointer;
}
> #modal-content-inner {
position: absolute;
//background-color: #00aaaa;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 75vw;
margin-left: auto;
margin-right: auto;
display: grid;
place-items: center;
}
}
.modal-inner-image {
max-width: 100%;
max-height: 100%;
}

4
resources/NibblePoker/scss/site/table.scss
View File

@@ -1,5 +1,9 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
tr, td {
vertical-align: top;
}
table.stylish {
th {
font-weight: bold;

94
resources/NibblePoker/scss/site/text.scss
View File

@@ -1,29 +1,77 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
p, a, h1, h2, h3, td {
/* Site > Text */
/* Site > Text > Commons */
p, a, h1, h2, h3, h4, h5, h6, td, th, .code, summary {
color: #{$color-text-regular-normal};
}
/* Site > Text > Paragraphs */
p {
line-height: 1.2;
}
// Setting colors for bland links.
// Done before muted text to make the footer privacy link possible.
/* Site > Text > Links */
a {
text-decoration: none;
}
a:hover {
// Base
text-decoration: underline;
color: #{$color-link-blue};
color: #{$color-link-hover};
& * {
color: #{$color-link-blue};
}
> * {
color: #{$color-link-hover};
text-decoration: underline;
&:hover {
color: #{$color-link-blue-hover};
& * {
color: #{$color-link-blue-hover};
text-decoration: underline;
}
}
// Bland links
&.casper-link, &.bland-link {
text-decoration: none;
color: #{$color-text-regular-normal};
& * {
color: #{$color-text-regular-normal};
}
&:hover {
text-decoration: underline;
color: #{$color-link-hover};
& * {
color: #{$color-link-hover};
}
// FIXME: Not working, big F
//i {
// text-decoration: none !important;
//}
}
}
// Special case for buttons
&.casper-link, &.button-link, &.text-link {
text-decoration: none;
&:hover {
text-decoration: none; // Only really applies to content listing entries...
& * {
text-decoration: none;
}
}
}
}
/* Site > Text > Helpers */
.t-half-muted {
opacity: 65%;
}
@@ -42,32 +90,14 @@ a:hover {
opacity: 45%;
}
/* Site > Text > Targeted Rules */
.t-logo-text {
font-size: 1.775em;
line-height: 1;
}
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;
}
}
}
/* Site > Text > Targeted Rules > Sidebar */
// Special rules for the sidebar and FontAwesome icons
.sidebar-entry {
@@ -89,6 +119,8 @@ a:not(.bland-link) {
//}
}
/* Site > Text > Targeted Rules > Headings */
// And now for the headings, the exceptions keep popping up :,)
// TODO: Add a simple and nicer divider.
.heading-main {

2
resources/NibblePoker/scss/site/video.scss
View File

@@ -1,3 +1,5 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
video {
width: 100% !important;
height: auto !important;

8
resources/NibblePoker/scss/variables.scss
View File

@@ -150,8 +150,6 @@ $color-scrollbar-border: $color-border-all;
$scrollbar-size: 1.25em;
/* Variables > Others */
$border-base-radius: 5px;
@@ -164,3 +162,9 @@ $size-sidebar: 15rem;
//$size-sidebar: 30rem;
$content-search-image-size: 128px;
/* Variables > Z Indexes */
$z-index-sidebar: 5;
$z-index-lang-dropdown: 10;
$z-index-modal: 99;