diff --git a/.gitignore b/.gitignore index f9b1c97..a7b7273 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,8 @@ node_modules/ # Build Artifacts *.css *.min.html +*.7z +*.zip +*.tar +*.gz +*.rar diff --git a/compile.cmd b/compile.cmd index aaea608..56b762d 100644 --- a/compile.cmd +++ b/compile.cmd @@ -35,6 +35,21 @@ cd /d %~dp0 copy ".\bkgds\*.png" ".\htdocs\css\" popd +:sass-assets +echo Copying assets... +pushd %CD% +cd /d %~dp0 +copy ".\bkgds\*.png" ".\htdocs\css\" +popd + +:sass-compress +echo Compressing assets... +pushd %CD% +cd /d %~dp0\htdocs\css +7z a -t7z -mx=9 nibblepoker.css.7z nibblepoker.min.css *.png +7z a -tzip -mx=9 nibblepoker.css.zip nibblepoker.min.css *.png +popd + :sass-end diff --git a/htdocs/css/bright-squares-p100-0.125.png b/htdocs/css/bright-squares-p100-0.125.png deleted file mode 100644 index ca6f598..0000000 Binary files a/htdocs/css/bright-squares-p100-0.125.png and /dev/null differ diff --git a/htdocs/index.php b/htdocs/index.php index 00f2d5c..46fd252 100644 --- a/htdocs/index.php +++ b/htdocs/index.php @@ -82,8 +82,11 @@ - - + + + + + @@ -117,5 +120,6 @@ + diff --git a/htdocs/js/anchor-fix.js b/htdocs/js/anchor-fix.js new file mode 100644 index 0000000..c9963be --- /dev/null +++ b/htdocs/js/anchor-fix.js @@ -0,0 +1,10 @@ +// This script is required due to Chromium's dogshit and random ability to jump to anchors when reloading pages. + +document.addEventListener("DOMContentLoaded", function () { + if (window.location.hash) { + const eAnchor = document.querySelector(window.location.hash); + if (eAnchor) { + eAnchor.scrollIntoView(); + } + } +}); diff --git a/htdocs/parts/backgrounds.php b/htdocs/parts/backgrounds.php index 961cab5..0401a5e 100644 --- a/htdocs/parts/backgrounds.php +++ b/htdocs/parts/backgrounds.php @@ -16,16 +16,16 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Simple colors

-
+
.bkgd-dark
-
+
.bkgd-grey .bkgd-gray
-
+
.bkgd-light
@@ -33,24 +33,24 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Grid backgrounds

-

Grid (40% opacity)

-
+

40% opacity (Title bars)

+
.bkgd-grid40 .bkgd-grid
-

Math (30% opacity)

-
+

30% opacity (Unused)

+
.bkgd-grid30
-

Math (20% opacity)

-
+

20% opacity (Unused)

+
.bkgd-grid20
-

Surround (10% opacity)

-
+

10% opacity (Surroundings)

+
.bkgd-grid10 .bkgd-surround
@@ -60,7 +60,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Transparent

-
+
.bkgd-transparent
diff --git a/htdocs/parts/grids.php b/htdocs/parts/grids.php index 5f1e7a4..578355b 100644 --- a/htdocs/parts/grids.php +++ b/htdocs/parts/grids.php @@ -11,32 +11,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-

- Grids are defined by using the grid and col-X class where - X represents the number of columns and can be - 1, 2, - 3, 4, - 6 or 8. -

- - - -

Examples without inter-cell gaps:

-
-

div.grid.col-1>div

-
+

Basic grids

+
+

+ Grids are defined by combining the .grid and .col-X + classes where X represents the number of columns and can be + 1, 2, + 3, 4, + 6 or 8. +

+
Cell #1
- -

div.grid.col-2>div*2

-
+

div.grid.col-1>div

+
Cell #1
Cell #2
- -

div.grid.col-6>div*6

-
+

div.grid.col-2>div*2

+
Cell #1
Cell #2
Cell #3
@@ -44,40 +38,39 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Cell #5
Cell #6
+

div.grid.col-6>div*6

-

- Inter-cell gaps can also be setup by using the grid-gap-X or - col-gap-X classes and replacing the X - with the standard size suffixes. -

- -

Examples with inter-cell gaps:

-
- Grid gaps +
+

+ Inter-cell gaps can also be setup by using the grid-gap-X or + col-gap-X classes and replacing the X + with the standard size suffixes. +

+
+ div.grid.col-3.grid-gap-' . $gapSize . '>div*6

'); - echo('
'); + echo('
'); for($iGap = 1; $iGap <= 6; $iGap++) { echo('
Cell #' . $iGap . '
'); } echo('
'); + echo('

div.grid.col-3.grid-gap-' . $gapSize . '>div*6

'); } - ?> + ?> +
- TODO: All mobile rules, Add non-identical sizing - -
+
Click to show/hide all classes -
+

grid Defined a grid container

-
@@ -134,4 +127,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { +

TODO: All mobile rules, Add non-identical sizing

diff --git a/htdocs/parts/lists.php b/htdocs/parts/lists.php deleted file mode 100644 index 43b6254..0000000 --- a/htdocs/parts/lists.php +++ /dev/null @@ -1,142 +0,0 @@ - - - -
-

Lists -

-
-
-

Blank lists

-

- By default, ordered and unordered lists have no bullet.
- This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility. -

-
    -
  • Item 1
    • -
  • Item 2
    • -
  • - Item 3 with explicit disc bullet (See below) -
    • -
- - -

Normal lists

-

- Regular-looking lists can be created by simply adding the .l-bullets - or .list-bullets class to list's root element.
- These classes must also be used for any nested children lists ! -

-
-
    -
  • Line 1
    • -
  • Line 2
    Line 2 continued after a br
    • -
  • Line 3
    • -
      -
    • Line 3.1
      • -
    • Line 3.2
      • -
    -
  • Line 4
    • -
-
-
-
    -
  1. Salt
    2. -
  2. Packs of crisps
    3. -
      -
    1. Salt and pepper
      2. -
    2. Paprika
      3. -
    -
  3. Olive oil
    4. -
-
- -

Bullet position

-

- By default, the lists do not include their bullet in the parent element.
- This is due to the fact that the imposed spacings when using - list-style-position: inside; looks like absolute trash. -

-

- This behavior can be changed by using the .l-bullet-inside - or list-bullet-inside classes.
- Alternatively, a nicer manual spacing can be applied by using the .l-bullet-manual - or list-bullet-manual classes. -

-

- Please note that the following classes must be applied to the root element and any nested - list's root element too. -

-
-
-

Outside (Default)

-
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- ul.l-bullets.l-bullet-outside>li*3 -
-
-

Inside

-
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- ul.l-bullets.l-bullet-inside>li*3 -
-
-

Manual (Recommended)

-
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- ul.l-bullets.l-bullet-manual>li*3 -
-
- -

Bullet styles

-

- Each list and its entry can have its bullets' style changed by using the following classes in the - ul, ol or li elements.
- The type property also works as expected in these cases. -

-

- Please note that some of the more exotic bullet styles may not fit properly when using - the manual position as shown below.
- This is a known issue and won't be fixed as it is an edge-case. -

-
    -
  • - Disc: .l-bullet-disc, .list-bullet-disc -
    • -
  • - Square: .l-bullet-square, .list-bullet-square -
    • -
  • - Decimal: .l-bullet-decimal, .list-bullet-decimal -
    • -
  • - Decimal: .l-bullet-decimal-leading, .list-bullet-decimal-leading -
    • -
  • - Gregorian: .l-bullet-georgian, .list-bullet-georgian -
    • -
  • - Chinese: .l-bullet-chinese, .list-bullet-chinese -
    • -
  • - Kannada: .l-bullet-kannada, .list-bullet-kannada -
    • -
  • - None: .l-bullet-none, .list-bullet-none -
    • -
- -
diff --git a/htdocs/parts/lists_base.php b/htdocs/parts/lists_base.php new file mode 100644 index 0000000..87cc760 --- /dev/null +++ b/htdocs/parts/lists_base.php @@ -0,0 +1,149 @@ + + + +
+

Basic Lists +

+
+
+

Blank lists

+
+

+ By default, ordered and unordered lists have no bullet.
+ This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility. +

+
    +
  • Item 1
    • +
  • Item 2
    • +
  • + Item 3 with explicit disc bullet (See below) +
    • +
+
+ +

Normal lists

+
+

+ Regular-looking lists can be created by simply adding the .l-bullets + or .list-bullets class to list's root element.
+ These classes must also be used for any nested children lists ! +

+
+
    +
  • Line 1
    • +
  • Line 2
    Line 2 continued after a br
    • +
  • Line 3
    • +
      +
    • Line 3.1
      • +
    • Line 3.2
      • +
    +
  • Line 4
    • +
+
+
+
    +
  1. Salt
    2. +
  2. Packs of crisps
    3. +
      +
    1. Salt and pepper
      2. +
    2. Paprika
      3. +
    +
  3. Olive oil
    4. +
+
+
+ +

Bullet position

+
+

+ By default, the lists do not include their bullet in the parent element.
+ This is due to the fact that the imposed spacings when using + list-style-position: inside; looks like absolute trash. +

+

+ This behavior can be changed by using the .l-bullet-inside + or list-bullet-inside classes.
+ Alternatively, a nicer manual spacing can be applied by using the .l-bullet-manual + or list-bullet-manual classes. +

+

+ Please note that the following classes must be applied to the root element and any nested + list's root element too. +

+
+
+

Outside (Default)

+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ ul.l-bullets.l-bullet-outside>li*3 +
+
+

Inside

+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ ul.l-bullets.l-bullet-inside>li*3 +
+
+

Manual (Recommended)

+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ ul.l-bullets.l-bullet-manual>li*3 +
+
+
+ +

Bullet styles

+
+

+ Each list and its entry can have its bullets' style changed by using the following classes in the + ul, ol or li elements.
+ The type property also works as expected in these cases. +

+

+ Please note that some of the more exotic bullet styles may not fit properly when using + the manual position as shown below.
+ This is a known issue and won't be fixed as it is an edge-case. +

+
    +
  • + Disc: .l-bullet-disc, .list-bullet-disc +
    • +
  • + Square: .l-bullet-square, .list-bullet-square +
    • +
  • + Decimal: .l-bullet-decimal, .list-bullet-decimal +
    • +
  • + Decimal: .l-bullet-decimal-leading, .list-bullet-decimal-leading +
    • +
  • + Gregorian: .l-bullet-georgian, .list-bullet-georgian +
    • +
  • + Chinese: .l-bullet-chinese, .list-bullet-chinese +
    • +
  • + Kannada: .l-bullet-kannada, .list-bullet-kannada +
    • +
  • + None: .l-bullet-none, .list-bullet-none +
    • +
+
+ +
diff --git a/htdocs/parts/lists_composed.php b/htdocs/parts/lists_composed.php new file mode 100644 index 0000000..ae8cdc2 --- /dev/null +++ b/htdocs/parts/lists_composed.php @@ -0,0 +1,16 @@ + + + +
+

Composed Lists +

+
+
+

Blank lists

+ +
diff --git a/htdocs/parts/rounding.php b/htdocs/parts/rounding.php index 2d58b29..4664adb 100644 --- a/htdocs/parts/rounding.php +++ b/htdocs/parts/rounding.php @@ -11,23 +11,67 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-

Rounding can be done on a corner/side/global basis using the standard size suffixes and some special ones.

-

These examples will have ???.

+

+ Rounding can be applied on a global/sided/corner basis using the standard size suffixes and some + special ones shown below. +

-

Sizes:

+

Regular sizes

-
r-0
-
r-xs
-
r-s
-
r-m
-
r-l
-
r-xl
+
.r-0
+
.r-xs
+
.r-s
+
.r-m
+
.r-l
+
.r-xl
-

Special classes:

+

Special size

-
r-r
+
.r-r
- TODO: All a detail of all classes +
+ Click to show/hide all classes +
+ '); + foreach($roundingSizes as &$spacingSize){echo('r-'.$spacingSize.'');} + echo('General rounding

'); + + echo('
'); + + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rt-'.$spacingSize.'');} + echo('Top rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rb-'.$spacingSize.'');} + echo('Bottom rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rl-'.$spacingSize.'');} + echo('Left rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rr-'.$spacingSize.'');} + echo('Right rounding

'); + + echo('
'); + + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rtl-'.$spacingSize.'');} + echo('Top left rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rtr-'.$spacingSize.'');} + echo('Top right rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rbl-'.$spacingSize.'');} + echo('Bottom left rounding

'); + echo('

'); + foreach($roundingSizes as &$spacingSize){echo('rbr-'.$spacingSize.'');} + echo('Bottom right rounding

'); + + ?> +
+
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php index de6584f..3f0899d 100644 --- a/htdocs/parts/sidebar.php +++ b/htdocs/parts/sidebar.php @@ -69,10 +69,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
- +

- Lists + Basic +

+ + + +

+ + Composed

diff --git a/htdocs/parts/spacing.php b/htdocs/parts/spacing.php index e089a90..9cc9a03 100644 --- a/htdocs/parts/spacing.php +++ b/htdocs/parts/spacing.php @@ -22,17 +22,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

-

p-xxs

-

p-xs

-

p-s

-

p-m

-

p-l

-

p-xl

+

.p-xxs

+

.p-xs

+

.p-s

+

.p-m

+

.p-l

+

.p-xl

-
+
Click to show/hide all classes -
+
-

Unstyled table

-

- Unstyled tables have no cell gap, no border and no other form of styling. -

-
- - - - - - - - -
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
- - table>tr*2>td*2 - +

Unstyled table

+
+

+ Unstyled tables have no cell gap, no border and no other form of styling. +

+ + + + + + + + + +
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
+ + table>tr*2>td*2 + +
-

Stylish table

-

- Tables can quickly be styled by simply using the following classes: -

-
    -
  • stylish - Adds colors to cells and makes headers bold
    • -
  • table-p-xs - Adds a xs padding to all cells
    • -
  • table-p-s - Adds an s padding to all cells
    • -
  • table-h-p-s - Adds an s padding to the header cells
    • -
- - - - - - - - - - - - - -
Head 1Head 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
- - - table.stylish.table-p-s.border
-   th>td*2
-   tr*2>td*2 - +

Stylish table

+
+

+ Tables can quickly be styled by simply using the following classes: +

+
    +
  • stylish - Adds colors to cells and makes headers bold
    • +
  • table-p-xs - Adds a xs padding to all cells
    • +
  • table-p-s - Adds an s padding to all cells
    • +
  • table-h-p-s - Adds an s padding to the header cells
    • +
+ + + + + + + + + + + + + +
Head 1Head 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
+ + table.stylish.table-p-s.border
+   th>td*2
+   tr*2>td*2 + +
diff --git a/htdocs/parts/text_alignment.php b/htdocs/parts/text_alignment.php index 67cfcc7..aa69663 100644 --- a/htdocs/parts/text_alignment.php +++ b/htdocs/parts/text_alignment.php @@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Left

Left

- t-left + .t-left

Center

Centered

- t-center + .t-center

Right

Right

- t-right + .t-right

Start

Start

- t-start + .t-start

End

End

- t-end + .t-end

Justify

Lorem ipsum.
Donor si amet elit.

- t-justify + .t-justify diff --git a/htdocs/parts/text_misc.php b/htdocs/parts/text_misc.php index a4a2176..4b1ef0a 100644 --- a/htdocs/parts/text_misc.php +++ b/htdocs/parts/text_misc.php @@ -21,22 +21,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

No wrap

Cannot really be shown

- t-nowrap + .t-nowrap

Half muted

Half muted

- t-half-muted + .t-half-muted

Muted

Muted text

- t-muted + .t-muted

Super muted

Super Muted

- t-super-muted + .t-super-muted diff --git a/htdocs/parts/text_modifiers.php b/htdocs/parts/text_modifiers.php index 5363fe1..95f6016 100644 --- a/htdocs/parts/text_modifiers.php +++ b/htdocs/parts/text_modifiers.php @@ -23,19 +23,19 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Uppercase

Regular Case

Regular Case

- t-ucase + .t-ucase

Lowercase

Regular Case

Regular Case

- t-lcase + .t-lcase

Capitalize

no case

no case - t-capitalize + .t-capitalize diff --git a/htdocs/parts/text_styles.php b/htdocs/parts/text_styles.php index 2420384..f91290d 100644 --- a/htdocs/parts/text_styles.php +++ b/htdocs/parts/text_styles.php @@ -22,31 +22,31 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Italic

Italic text

- t-italic + .t-italic i

Oblique

Oblique text

- t-oblique + .t-oblique N/A

Underline

Underlined text

- t-underline + .t-underline u

Strikethrough

Struck text

- t-strikethrough + .t-strikethrough s

Overline

Overline text

- t-overline + .t-overline N/A diff --git a/htdocs/parts/text_weights.php b/htdocs/parts/text_weights.php index eab567d..3198611 100644 --- a/htdocs/parts/text_weights.php +++ b/htdocs/parts/text_weights.php @@ -11,7 +11,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-

Numeric Weights

@@ -24,15 +23,14 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { echo(''); echo(''); echo(''); - echo(''); + echo(''); echo(''); } ?>
Style
' . ($i * 100) . 'Lorem Ipsum donor.t-w-' . ($i * 100) . '.t-w-' . ($i * 100) . '
-

Aliased Weights

- +
@@ -42,22 +40,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { - + - + - + - +
Style Example

Lighter

Lorem Ipsum 123 !

t-lightert-w-lighter.t-lighter.t-w-lighter

Normal

Lorem Ipsum 123 !

t-normalt-w-normal.t-normal.t-w-normal

Bold

Lorem Ipsum 123 !

t-boldt-w-bold.t-bold.t-w-bold

Bolder

Lorem Ipsum 123 !

t-boldert-w-bolder.t-bolder.t-w-bolder
diff --git a/scss/core/rounding/corner.scss b/scss/core/rounding/corner.scss index 2e16519..76639b6 100644 --- a/scss/core/rounding/corner.scss +++ b/scss/core/rounding/corner.scss @@ -22,6 +22,7 @@ @include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75)); @include corner-rounding-maker("m", #{$border-base-radius}); @include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5)); +@include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0)); /* Utilities > Rounding > Corner > Fixed Sizes */ diff --git a/scss/core/rounding/sided.scss b/scss/core/rounding/sided.scss index 710286d..836668b 100644 --- a/scss/core/rounding/sided.scss +++ b/scss/core/rounding/sided.scss @@ -26,6 +26,7 @@ @include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75)); @include sided-rounding-maker("m", #{$border-base-radius}); @include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5)); +@include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0)); /* Utilities > Rounding > Sided > Fixed Sizes */ diff --git a/scss/site/backgrounds.scss b/scss/site/backgrounds.scss index 114aeec..abb2a57 100644 --- a/scss/site/backgrounds.scss +++ b/scss/site/backgrounds.scss @@ -18,6 +18,11 @@ .bkgd-grid10, .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; + + //background: + // #{$color-background-surround} + // url("data:image/png;base64,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") + // repeat scroll center center; } .bkgd-grid20 { @@ -31,7 +36,12 @@ } .bkgd-grid40, .bkgd-grid { - background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center; + background: + #{$color-background-surround} + url("data:image/png;base64,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") + repeat scroll center center; + + //background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center; } .bkgd-transparent {