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

Update .gitignore, .htaccess, and 32 more files...
This commit is contained in:
2023-11-07 23:23:42 +01:00
parent 3891f5ce98
commit f14b8d33a6
34 changed files with 545 additions and 268 deletions

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

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 {

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

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