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

Updated a couple pages, Finished new basic style, Removed tools from menu, Updated formula wizard, Other minor changes

Browse Source 
Update .gitignore, .htaccess, and 32 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-11-07 23:23:42 +01:00
parent 3891f5ce98
commit f14b8d33a6
34 changed files with 545 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/NibblePoker/images/backgrounds/3px-tile-0.1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

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

@@ -1,9 +1,33 @@
const animationStepCount = 10;
const CpuArchitecture = {
Unknown: 0,
x86: 1,
x64: 2,
ArmGeneric: 3,
Arm64: 4,
RiscV: 5,
}
function getBezierBlend(progress) {
return (3 * progress ** 2) - (2 * progress ** 3);
}
function getCpuArchitecture(userAgent = navigator.userAgent) {
if(userAgent.includes("x64")) {
return CpuArchitecture.x64;
} else if(userAgent.includes("x86")) {
return CpuArchitecture.x86;
} else if(userAgent.includes("ARM")) {
return CpuArchitecture.ArmGeneric;
} else if(userAgent.includes("ARM64")) {
return CpuArchitecture.Arm64;
} else if(userAgent.includes("RISC-V")) {
return CpuArchitecture.RiscV;
}
return CpuArchitecture.Unknown;
}
function fadeOut(element, time = 200) {
element.style.opacity = "1.0";
element.hidden = false;

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

@@ -6,8 +6,10 @@
background: #{$color-background-main-headings};
}
.bkgd-surround {
background: #{$color-background-surround};
// The element rules override rules in `base.scss ~94`
.bkgd-surround, header, nav, footer {
//background: #{$color-background-surround};
background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
}
.bkgd-blank-dark {
@@ -23,5 +25,7 @@
}
.bkgd-math {
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/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;
// FIXME: Fix the code using this class !!!
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
}

36
resources/NibblePoker/scss/site/base.scss
View File

@@ -67,7 +67,8 @@ body {
@media only screen and (max-width: 768px) {
body {
& > nav {
border-right: 1px solid #{$color-border-all};
//border-right: 1px solid #{$color-border-all};
border-right: 1px solid #{$color-border-main};
}
& > header {
@@ -90,18 +91,19 @@ body {
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// Overridden by a rule in background.scss !
header, nav, footer {
background-color: #{$color-background-surround};
}
main {
background-color: #{$color-background-main};
// FIXME: Adapt when sidebar is closed !
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
}
/* 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 {
@@ -123,6 +125,34 @@ main {
}
}
// Inverting the sidebar's states for mobile devices
@media only screen and (max-width: 768px) {
.sidebar {
width: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
&.retracted {
width: #{$size-sidebar};
max-width: #{$size-sidebar};
min-height: 100%;
overflow: auto;
overflow-x: hidden;
// Inherited from .p-m
padding-left: 1rem;
padding-right: 1rem;
}
.sidebar-entry {
display: flex;
align-items: center;
justify-content: left;
}
}
}
/* Site > Base > Main */
main {

9
resources/NibblePoker/scss/site/image.scss
View File

@@ -17,16 +17,17 @@
//.align-v-t
#logo-sidebar {
filter: grayscale(100%);
mix-blend-mode: multiply;
opacity: 40%;
filter: brightness(110%) grayscale(100%);
//mix-blend-mode: multiply;
//opacity: 40%;
// Fixes the width to the size of the sidebar minus its padding. (15rem - 1rem * 2)
width: 13rem;
height: auto;
}
#logo-footer {
filter: grayscale(100%);
filter: brightness(110%) grayscale(100%);
opacity: 40%;
height: 1.8em;
object-fit: contain;
}

78
resources/NibblePoker/scss/site/scrollbar.scss Normal file
View File

@@ -0,0 +1,78 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
//@mixin overflow-maker($size-key, $value) {
// .overflow-#{$size-key}-#{$value} {
// overflow: auto;
// }
// .overflow-x-#{$size-key}-#{$value} {
// border-top-left-radius: #{$value};
// }
// .overflow-y-#{$size-key}-#{$value} {
// border-top-left-radius: #{$value};
// }
//}
//
//@include overflow-maker("0", auto);
/* Site > Elements > Scrollbars */
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-scroll {
overflow-x: scroll;
}
@media (min-width: 769px) {
*::-webkit-scrollbar {
width: #{$scrollbar-size};
height: #{$scrollbar-size};
background-color: transparent;
}
*::-webkit-scrollbar-track:vertical {
border-left: 1px solid #{$color-scrollbar-border};
}
*::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #{$color-scrollbar-border};
}
*::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25);
border: 0.4rem solid transparent;
background-clip: content-box;
border-radius: 1em;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.4);
border-color: transparent;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
//* {
// scrollbar-width: thin;
// scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
//}
//*::-webkit-scrollbar-track {
// border-color: rgba(255, 255, 255, 0.05);
//}
//*::-webkit-scrollbar-corner {
// background-color: transparent;
// border-color: rgba(255, 255, 255, 0.05);
//}
//* {
// scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
//}
}
/*
.hide-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none;
&::-webkit-scrollbar {
background: transparent;
width: 0px;
}
}*/

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

@@ -1,4 +1,5 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
@use 'sass:color';
/* Variables > Palettes */
@@ -51,6 +52,16 @@ $color-apollo-43: #a8b5b2;
$color-apollo-44: #c7cfcc;
$color-apollo-45: #ebede9;
$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
$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%);
@@ -109,26 +120,34 @@ $color-unset: $color-apollo-34;
// * Teal Supreme (teal)
// * WinUI 3 (winui)
// * La Moiti Leune (moon)
$theme: teal;
// * NibblePoker (nibblepoker)
$theme: nibblepoker;
/* Variables > Colors Mappings > Backgrounds & Borders */
$color-background-body: map-get((
teal: $color-apollo-custom-00,
winui: $color-winui-02,
moon: $color-unset,
), $theme);
$color-background-main: map-get((
teal: $color-apollo-custom-02,
winui: $color-winui-04,
moon: $color-unset,
nibblepoker: #24252B,
), $theme);
$color-background-surround: map-get((
teal: $color-apollo-custom-00,
winui: $color-winui-02,
moon: $color-unset,
nibblepoker: #1D1E22,
), $theme);
// Used as the background-color in the main's rounded corners
$color-background-body: $color-background-surround;
// Used in stylized headings
$color-background-main-headings: map-get((
teal: $color-background-surround,
winui: $color-unset,
moon: $color-unset,
nibblepoker: $color-background-surround,
), $theme);
@@ -137,23 +156,21 @@ $color-background-surround: map-get((
$color-border-all: $color-unset; // Default border
$color-border-light: $color-unset; // For .b-light class (No longer exists !)
// Used to separate the 'main' from the 'surround'.
$color-border-surround: map-get((
teal: $color-apollo-38,
winui: $color-winui-01,
moon: $color-unset,
nibblepoker: #141417,
), $theme);
// Used as the border for all element inside the "main".
// It probably influences more stuff, but I can't be bothered to fix this...
$color-border-main: map-get((
teal: $color-apollo-38, // $color-apollo-custom-20;
winui: $color-winui-03,
moon: $color-unset,
), $theme);
$color-background-main-headings: map-get((
teal: $color-apollo-custom-03,
winui: $color-unset,
moon: $color-unset,
nibblepoker: $color-border-surround,
), $theme);
@@ -161,12 +178,14 @@ $color-background-code: map-get((
teal: $color-apollo-custom-20,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 25%),
), $theme);
$color-border-code: map-get((
teal: #{$color-border-surround}CF,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #{$color-border-surround}CF,
), $theme);
@@ -174,34 +193,53 @@ $color-background-table-main: map-get((
teal: $color-apollo-custom-01,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 50%),
), $theme);
$color-background-table-dual: map-get((
teal: $color-apollo-custom-00,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 12.5%),
), $theme);
$color-table-border: map-get((
teal: $color-apollo-39,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #{$color-border-surround}CF,
), $theme);
$color-background-inputs: map-get((
teal: $color-apollo-40,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #2d2f36,
), $theme);
$color-background-inputs: $color-apollo-40;
// TODO: Implement better ones !
$color-background-checkbox-checked: $color-apollo-08;
$color-background-checkbox-unchecked: $color-apollo-27;
$color-background-button: $color-apollo-40;
$color-background-button-hover: $color-apollo-custom-10;
$color-background-button: map-get((
teal: $color-apollo-40,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #2d2f36,
), $theme);
$color-background-button-hover: map-get((
teal: $color-apollo-custom-10,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #373841,
), $theme);
$color-background-button-primary: #{$color-apollo-custom-30};
$color-background-button-primary-hover: #{$color-apollo-custom-31};
$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
$color-background-button-success: #{$color-apollo-07};
$color-background-button-success-hover: #{$color-apollo-08};
$color-background-button-success-hover: mix($color-apollo-07, $color-apollo-08, 50%);
$color-background-button-error: #{$color-apollo-26};
$color-background-button-error-hover: #{$color-apollo-27};
@@ -245,7 +283,7 @@ $color-wedge-blue-border: $color-apollo-02;
/* Variables > Scrollbar */
//$color-scrollbar-border: rgba(0, 0, 0, 0.15);
$color-scrollbar-border: $color-border-all;
$color-scrollbar-border: $color-border-surround;
$scrollbar-size: 1.25em;