Initial commit
Update .gitignore, LICENSE-CC0, and 70 more files...
This commit is contained in:
71
htdocs/.htaccess
Normal file
71
htdocs/.htaccess
Normal file
@@ -0,0 +1,71 @@
|
||||
# Preventing access to .htaccess
|
||||
<Files ~ "^.*\.([Hh][Tt][Aa]|[Pp][Yy])">
|
||||
Require all denied
|
||||
</Files>
|
||||
|
||||
|
||||
# Fixing some encoding issues on non-HTML files.
|
||||
# Mostly affects the old privacy policies written in french. (Accents have issues in non-utf8 encodings !)
|
||||
AddCharset utf-8 .css .txt .js .md .ts .mjs
|
||||
#<Files ~ "\.txt?$">
|
||||
# Header set Content-Type "text/plain; charset=utf-8"
|
||||
#</Files>
|
||||
#AddDefaultCharset utf-8
|
||||
|
||||
|
||||
# Adding MIME types
|
||||
AddType text/typescript .ts
|
||||
AddType text/javascript .js
|
||||
AddType text/javascript .mjs
|
||||
AddType application/wasm .wasm
|
||||
AddType video/x-matroska .mkv
|
||||
AddType image/apng .apng
|
||||
|
||||
|
||||
# Correcting some default options for security and language/content redirection.
|
||||
# FollowSymlinks is also on since it's required for "mod_rewrite" and the server is jailed/containerized.
|
||||
Options -Indexes +FollowSymlinks -ExecCGI
|
||||
|
||||
|
||||
# Setting up GZIP.
|
||||
# It's optional since reverse-proxies or caching layers will usually do it for us.
|
||||
<ifModule mod_gzip.c>
|
||||
mod_gzip_on Yes
|
||||
mod_gzip_dechunk Yes
|
||||
mod_gzip_item_include file \.(html?|txt|css|js|mjs|php|pl)$
|
||||
mod_gzip_item_include handler ^cgi-script$
|
||||
mod_gzip_item_include mime ^text/.*
|
||||
mod_gzip_item_include mime ^application/x-javascript.*
|
||||
mod_gzip_item_exclude mime ^image/.*
|
||||
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
|
||||
</ifModule>
|
||||
|
||||
|
||||
# Setting some headers for security.
|
||||
# Will cause "fail-safe crashes" if the "headers" module isn't enabled.
|
||||
Header always set X-Frame-Options "deny"
|
||||
#Header always set Content-Security-Policy "default-src 'self' archives.nibblepoker.lu archives.nibblepoker.com nibblepoker.com nibblepoker.lu; style-src 'self' nibblepoker.lu;img-src 'self' archives.nibblepoker.lu archives.nibblepoker.com nibblepoker.com nibblepoker.lu data:; object-src 'none'; child-src 'self'; frame-ancestors 'none'; upgrade-insecure-requests; block-all-mixed-content"
|
||||
Header always set X-XSS-Protection " 1; mode=block"
|
||||
Header always set Referrer-Policy "no-referrer"
|
||||
Header always set X-Content-Type-Options "nosniff"
|
||||
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
|
||||
#Header always set Cache-Control "max-age=300, public"
|
||||
Header always set Access-Control-Allow-Origin "*"
|
||||
Header always set Permissions-Policy "browsing-topics=(), interest-cohort=()"
|
||||
|
||||
# Removing some headers since they often raise BS alarms about too much back-end info being sent to clients.
|
||||
# Note: These headers can actually be removed by most reverse-proxies.
|
||||
Header unset X-Powered-By
|
||||
|
||||
|
||||
# Handling all other redirections.
|
||||
# Will cause "fail-safe crashes" if the "rewrite" module isn't enabled.
|
||||
RewriteEngine On
|
||||
|
||||
# Serving normal pages when a specific language key is at the beginning of the requested path.
|
||||
# We use a regex to match all supported languages and use the 3rd ground, `(.*)` as `$3`, as the "real" path.
|
||||
RewriteRule ^((en|fr)/)(.*)$ /$3 [QSA]
|
||||
|
||||
# Handling requests for "robots.txt" and "sitemap.txt" via PHP.
|
||||
RewriteRule ^(en/|fr/)?robots.txt$ robots.php [L]
|
||||
RewriteRule ^(en/|fr/)?sitemap.txt$ sitemap.php [L]
|
||||
BIN
htdocs/css/3px-tile-0.1.png
Normal file
BIN
htdocs/css/3px-tile-0.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
htdocs/css/3px-tile-0.2.png
Normal file
BIN
htdocs/css/3px-tile-0.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
htdocs/css/3px-tile-0.4.png
Normal file
BIN
htdocs/css/3px-tile-0.4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
htdocs/css/bright-squares-p100-0.125.png
Normal file
BIN
htdocs/css/bright-squares-p100-0.125.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
htdocs/favicon.ico
Normal file
BIN
htdocs/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
1
htdocs/favicon.svg
Normal file
1
htdocs/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
5
htdocs/img/logo-large-fluent-unshaded.svg
Normal file
5
htdocs/img/logo-large-fluent-unshaded.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1303.2" height="542.16" viewBox="0 0 1303.2 542.16"><defs><linearGradient id="a299bf6a-8cf5-4474-8656-cb5f76fa41e8" x1="13" y1="134.65" x2="210.29" y2="476.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#73275c"/><stop offset="1" stop-color="#422445"/></linearGradient><linearGradient id="ee3e14d5-0e76-4b0e-bdc4-78e7350c1c13" x1="203.44" y1="-1.32" x2="500.56" y2="513.32" xlink:href="#a299bf6a-8cf5-4474-8656-cb5f76fa41e8"/><linearGradient id="be64de5a-5784-4fee-a23a-8deec0a0df70" x1="-308.68" y1="178.76" x2="-153.18" y2="448.1" xlink:href="#a299bf6a-8cf5-4474-8656-cb5f76fa41e8"/><linearGradient id="ada75ce1-0735-4fc3-ba29-5391be39058f" x1="-115.19" y1="112.25" x2="68.74" y2="430.82" xlink:href="#a299bf6a-8cf5-4474-8656-cb5f76fa41e8"/><linearGradient id="a77ec1c7-55af-4751-99ba-13e7a8addfce" x1="391.98" y1="2.42" x2="688.35" y2="515.75" xlink:href="#a299bf6a-8cf5-4474-8656-cb5f76fa41e8"/><linearGradient id="f501e634-1283-45b8-bc28-8049a13e865d" x1="621.76" y1="82.53" x2="874" y2="519.42" xlink:href="#a299bf6a-8cf5-4474-8656-cb5f76fa41e8"/><linearGradient id="b1e2793d-c82b-4bd5-9181-4980d34d2f50" x1="218.59" y1="256" x2="485.41" y2="256" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#80366b"/><stop offset="1" stop-color="#5a265e"/></linearGradient><linearGradient id="b1a4c64b-a0f2-46e8-9198-0ff75de5db55" x1="34.99" y1="167.52" x2="199.85" y2="453.07" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="f42ceb00-7d58-40f0-98e3-f042bf926c4b" x1="-304.25" y1="195.8" x2="-166.93" y2="433.63" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="ad01f831-7684-4759-8ae7-6eb9382a0d0f" x1="-110.75" y1="129.29" x2="54.99" y2="416.36" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="bbd6ec22-7c24-4911-8383-730b66694d7d" x1="410.93" y1="34.61" x2="675.92" y2="493.6" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="b1a8e433-cdfa-469f-b44e-4db26505afa9" x1="640.7" y1="114.72" x2="861.57" y2="497.27" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="e5751782-aece-46ae-ae62-286a85acd032" x1="-308.68" y1="178.76" x2="-153.18" y2="448.1" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="a9f99389-288f-4a68-92e9-54c382d416b4" x1="621.76" y1="82.53" x2="874" y2="519.42" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="e24f505c-a92f-494b-87fc-7ed52166559e" x1="-115.19" y1="112.25" x2="68.74" y2="430.82" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/><linearGradient id="a6197c74-717d-4a5f-9f07-81ca3820d7aa" x1="391.98" y1="2.42" x2="688.35" y2="515.75" xlink:href="#b1e2793d-c82b-4bd5-9181-4980d34d2f50"/></defs><g style="isolation:isolate"><g id="ba1b9400-1e7c-49cf-a78f-a732f1f0b446" data-name="Letter Fluent Test">
|
||||
<image width="5430" height="2259" transform="scale(0.24)" xlink:href=" " style="opacity:0.5;mix-blend-mode:multiply"/>
|
||||
<path d="M12,512c-6.6,0-10.1-5.06-7.79-11.24L175.79,43.24c2.31-6.18,6.11-6.18,8.42,0l55.58,148.19c2.31,6.18,2.31,16.29,0,22.47l-23.58,62.86C213.9,282.94,217.4,288,224,288h40c6.6,0,13.9,5.06,16.21,11.24l39.58,105.52C322.1,410.94,318.6,416,312,416H176c-6.6,0-13.9,5.06-16.21,11.24l-27.58,73.52C129.9,506.94,122.6,512,116,512Z" transform="translate(395.64 15)" style="fill:url(#a299bf6a-8cf5-4474-8656-cb5f76fa41e8)"/><path d="M196.21,11.24C193.9,5.06,197.4,0,204,0H308c6.6,0,13.9,5.06,16.21,11.24L507.79,500.76C510.1,506.94,506.6,512,500,512H396c-6.6,0-13.9-5.06-16.21-11.24Z" transform="translate(395.64 15)" style="fill:url(#ee3e14d5-0e76-4b0e-bdc4-78e7350c1c13)"/><path d="M-251.79,500.76C-254.1,506.94-261.4,512-268,512H-372c-6.6,0-10.1-5.06-7.79-11.24l131.21-349.89c2.32-6.18,9.27-13.13,15.45-15.45L-106.65,88c6.18-2.32,9.34.84,7,7Z" transform="translate(395.64 15)" style="fill:url(#be64de5a-5784-4fee-a23a-8deec0a0df70)"/><path d="M-180,512c-6.6,0-10.1-5.06-7.79-11.24L-25.16,67.09C-22.84,60.91-15.89,54-9.71,51.64L116.76,4.21c6.18-2.31,9.34.85,7,7L-59.79,500.76C-62.1,506.94-69.4,512-76,512Z" transform="translate(395.64 15)" style="fill:url(#ada75ce1-0735-4fc3-ba29-5391be39058f)"/><path d="M388.21,11.24c-2.31-6.18.85-9.34,7-7L521.71,51.64c6.18,2.32,13.13,9.27,15.45,15.45L699.79,500.76C702.1,506.94,698.6,512,692,512H588c-6.6,0-13.9-5.06-16.21-11.24Z" transform="translate(395.64 15)" style="fill:url(#a77ec1c7-55af-4751-99ba-13e7a8addfce)"/><g id="fc828ee0-7b32-480d-97f1-6908790fe8aa" data-name="L2"><path d="M611.63,95c-2.32-6.18.84-9.34,7-7l126.48,47.42c6.18,2.32,13.13,9.27,15.45,15.45L891.79,500.76C894.1,506.94,890.6,512,884,512H780c-6.6,0-13.9-5.06-16.21-11.24Z" transform="translate(395.64 15)" style="fill:url(#f501e634-1283-45b8-bc28-8049a13e865d)"/></g><g id="f1716b7c-2405-4f53-a021-1ad04814722f" data-name="Front">
|
||||
<image width="5238" height="2126" transform="translate(23.04 15.84) scale(0.24)" xlink:href=" " style="opacity:0.33;mix-blend-mode:multiply"/>
|
||||
<path d="M219.3,27.24C217,21.06,220.49,16,227.09,16h69.82c6.6,0,13.9,5.06,16.22,11.24L484.7,484.76c2.32,6.18-1.19,11.24-7.79,11.24H407.09c-6.6,0-13.9-5.06-16.22-11.24Z" transform="translate(395.64 15)" style="fill:url(#b1e2793d-c82b-4bd5-9181-4980d34d2f50)"/><path d="M35.09,496c-6.6,0-10.11-5.06-7.79-11.24l148.49-396c2.31-6.18,6.11-6.18,8.42,0L222.7,191.43c2.32,6.18,2.32,16.29,0,22.47l-29.57,78.86c-2.32,6.18,1.18,11.24,7.78,11.24h52c6.6,0,13.9,5.06,16.22,11.24l27.57,73.52c2.32,6.18-1.19,11.24-7.79,11.24h-124c-6.6,0-13.89,5.06-16.21,11.24l-27.57,73.52c-2.32,6.18-9.62,11.24-16.22,11.24Z" transform="translate(395.64 15)" style="fill:url(#b1a4c64b-a0f2-46e8-9198-0ff75de5db55)"/><path d="M-348.91,496c-6.6,0-10.11-5.06-7.79-11.24L-236.15,163.3c2.32-6.18,9.27-13.13,15.45-15.45L-134,115.34c6.17-2.32,9.34.84,7,7l-135.9,362.4c-2.32,6.18-9.62,11.24-16.22,11.24Z" transform="translate(395.64 15)" style="fill:url(#f42ceb00-7d58-40f0-98e3-f042bf926c4b)"/><path d="M-156.91,496c-6.6,0-10.11-5.06-7.79-11.24l152-405.24c2.32-6.18,9.27-13.13,15.45-15.45l86.7-32.52c6.18-2.31,9.34.85,7,7L-70.87,484.76C-73.19,490.94-80.49,496-87.09,496Z" transform="translate(395.64 15)" style="fill:url(#ad01f831-7684-4759-8ae7-6eb9382a0d0f)"/><path d="M599.09,496c-6.6,0-13.9-5.06-16.22-11.24L415.55,38.58c-2.31-6.18.85-9.34,7-7l86.7,32.52c6.18,2.32,13.13,9.27,15.45,15.45l152,405.24c2.32,6.18-1.19,11.24-7.79,11.24Z" transform="translate(395.64 15)" style="fill:url(#bbd6ec22-7c24-4911-8383-730b66694d7d)"/><g id="ad6ded3e-9aa2-4716-9cbd-49bae2c35056" data-name="L2"><path d="M868.7,484.76c2.32,6.18-1.19,11.24-7.79,11.24H791.09c-6.6,0-13.9-5.06-16.22-11.24L639,122.36c-2.32-6.18.85-9.34,7-7l86.71,32.51c6.18,2.32,13.13,9.27,15.45,15.45Z" transform="translate(395.64 15)" style="fill:url(#b1a8e433-cdfa-469f-b44e-4db26505afa9)"/></g></g><g style="opacity:0.75;mix-blend-mode:multiply"><g id="b0e50ac8-6aee-49eb-96af-a0338deb1e97" data-name="x2" style="opacity:0.5"><path d="M-379.79,500.76C-382.1,506.94-378.6,512-372,512h104c6.6,0,13.9-5.06,16.21-11.24L-99.63,95c2.32-6.18-.84-9.34-7-7l-126.48,47.42c-6.18,2.32-13.13,9.27-15.45,15.45Z" transform="translate(395.64 15)" style="fill:url(#e5751782-aece-46ae-ae62-286a85acd032)"/><path d="M760.58,150.87c-2.32-6.18-9.27-13.13-15.45-15.45L618.65,88c-6.18-2.32-9.34.84-7,7L763.79,500.76C766.1,506.94,773.4,512,780,512H884c6.6,0,10.1-5.06,7.79-11.24Z" transform="translate(395.64 15)" style="fill:url(#a9f99389-288f-4a68-92e9-54c382d416b4)"/></g><g id="f803c4f0-f3ae-4d0f-9e31-b2e9bc6c90f1" data-name="x1" style="opacity:0.25"><path d="M-187.79,500.76C-190.1,506.94-186.6,512-180,512H-76c6.6,0,13.9-5.06,16.21-11.24L123.79,11.24c2.31-6.18-.85-9.34-7-7L-9.71,51.64C-15.89,54-22.84,60.91-25.16,67.09Z" transform="translate(395.64 15)" style="fill:url(#e24f505c-a92f-494b-87fc-7ed52166559e)"/><path d="M537.16,67.09c-2.32-6.18-9.27-13.13-15.45-15.45L395.24,4.21c-6.18-2.31-9.34.85-7,7L571.79,500.76C574.1,506.94,581.4,512,588,512H692c6.6,0,10.1-5.06,7.79-11.24Z" transform="translate(395.64 15)" style="fill:url(#a6197c74-717d-4a5f-9f07-81ca3820d7aa)"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 7.9 KiB |
129
htdocs/index.php
Normal file
129
htdocs/index.php
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<!--<meta name="viewport" content="width=device-width"/>-->
|
||||
<meta name="author" content="Herwin Bozet">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="alternate icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/nibblepoker.min.css">
|
||||
<link rel="stylesheet" href="/css/debugger.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<title>NibblePoker's CSS Theme</title>
|
||||
<meta name="description" content="...">
|
||||
<meta property="og:title" content="NibblePoker"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://css.nibblepoker.com/"/>
|
||||
<meta property="og:image" content="???"/>
|
||||
<meta property="og:image:type" content="image/png"/>
|
||||
<meta property="og:description" content="..."/>
|
||||
</head>
|
||||
|
||||
<body class="layout-generic">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<?php include("./parts/sidebar.php"); ?>
|
||||
|
||||
<header class="w-full p-m pl-s">
|
||||
<h1 class="t-size-17 t-w-500">
|
||||
<i class="fa-solid fa-house mr-s"></i><span np-l10n-key="header.title">Homepage</span>
|
||||
</h1>
|
||||
<details id="lang-selector" class="b p-mxs px-s bkgd-blank-dark r-m">
|
||||
<summary>
|
||||
<i class="fad fa-language"></i>
|
||||
<span class="mobile-hide t-w-500"> Language</span>
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</summary>
|
||||
<div class="p-xs border bkgd-surround r-m t-w-500">
|
||||
<a href="/en/" class="bland-link">
|
||||
<p class="mb-s px-xxs">English</p>
|
||||
</a>
|
||||
<a href="/fr/" class="bland-link">
|
||||
<p class="my-s px-xxs">French</p>
|
||||
</a>
|
||||
<hr class="subtle m-0">
|
||||
<a href="/" class="bland-link">
|
||||
<p class="mt-xs px-xxs">Automatic</p>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
</header>
|
||||
|
||||
<main id="main" class="b br-0 p-m rl-m">
|
||||
<!-- PHP Utils -->
|
||||
<?php
|
||||
$root_path = __DIR__;
|
||||
|
||||
// Source: https://stackoverflow.com/a/2510459
|
||||
function formatBytes($bytes, $precision = 2): string {
|
||||
$units = array('B', 'KiB', 'MiB', 'GiB', 'TiB');
|
||||
|
||||
$bytes = max($bytes, 0);
|
||||
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
|
||||
$pow = min($pow, count($units) - 1);
|
||||
|
||||
$bytes /= pow(1024, $pow);
|
||||
|
||||
return round($bytes, $precision) . " " . $units[$pow];
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- Introduction -->
|
||||
<?php include("./parts/intro.php"); ?>
|
||||
|
||||
<!-- Text > Weights -->
|
||||
<?php include("./parts/text_weights.php"); ?>
|
||||
|
||||
<!-- Text > Styles -->
|
||||
<?php include("./parts/text_styles.php"); ?>
|
||||
|
||||
<!-- Text > Alignment -->
|
||||
<?php include("./parts/text_alignment.php"); ?>
|
||||
|
||||
<!-- Text > Modifiers -->
|
||||
<?php include("./parts/text_modifiers.php"); ?>
|
||||
|
||||
<!-- Text > Links -->
|
||||
<?php include("./parts/text_links.php"); ?>
|
||||
|
||||
<!-- Text > Misc -->
|
||||
<?php include("./parts/text_misc.php"); ?>
|
||||
|
||||
<!-- Spacing -->
|
||||
<?php include("./parts/spacing.php"); ?>
|
||||
|
||||
<!-- Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Lists -->
|
||||
<?php include("./parts/lists.php"); ?>
|
||||
|
||||
<!-- Grids -->
|
||||
<?php include("./parts/grids.php"); ?>
|
||||
|
||||
<!-- Horizontal Rulers -->
|
||||
<?php include("./parts/horizontal_rulers.php"); ?>
|
||||
</main>
|
||||
|
||||
<footer class="d-flex flex-align-center w-full p-s py-xs">
|
||||
<button id="sidebar-toggle-footer" class="p-xs border r-s t-size-10"
|
||||
aria-label="Open and close the navigation sidebar.">
|
||||
<i class="fa fa-bars px-xxs" aria-hidden="true"></i>
|
||||
</button>
|
||||
<p class="flex-fill t-center t-size-10 t-w-500 t-half-muted">
|
||||
<a class="a-hidden" href="https://nibblepoker.lu/privacy/">Privacy policy</a>
|
||||
</p>
|
||||
<a href="/">
|
||||
<img id="logo-footer" alt="Website's logo" draggable="false"
|
||||
src="https://nibblepoker.lu/resources/NibblePoker/images/logos/v2_full_unshaded_original.svg">
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="/js/sidebar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
htdocs/js/sidebar.js
Normal file
18
htdocs/js/sidebar.js
Normal file
@@ -0,0 +1,18 @@
|
||||
let isSidebarVisible = true;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const eSidebar = document.getElementById("sidebar");
|
||||
const eMain = document.getElementById("main");
|
||||
|
||||
// TODO: Emit an event to help Splide re-align after the sidebar has changed state.
|
||||
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;
|
||||
};
|
||||
});
|
||||
137
htdocs/parts/grids.php
Normal file
137
htdocs/parts/grids.php
Normal file
@@ -0,0 +1,137 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="grids"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Grids
|
||||
<i class="fa-solid fa-table-cells-large f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>
|
||||
Grids are defined by using the <span class="code">grid</span> and <span class="code">col-X</span> class where
|
||||
<span class="code">X</span> represents the number of columns and can be
|
||||
<span class="code">1</span>, <span class="code">2</span>,
|
||||
<span class="code">3</span>, <span class="code">4</span>,
|
||||
<span class="code">6</span> or <span class="code">8</span>.
|
||||
</p>
|
||||
|
||||
<!--<p>You should preferably use <span class="code"><div></span> elements for the grid container and each cell.</p>-->
|
||||
<!--<p>[Equal width for cells, maybe]</p>-->
|
||||
|
||||
<p class="t-bold">Examples without inter-cell gaps:</p>
|
||||
<div class="gap-xs">
|
||||
<p><span class="code">div.grid.col-1>div</span></p>
|
||||
<div class="grid col-1 debug p-xxs">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
</div>
|
||||
|
||||
<p><span class="code">div.grid.col-2>div*2</span></p>
|
||||
<div class="grid col-2 debug p-xxs">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #2</div>
|
||||
</div>
|
||||
|
||||
<p><span class="code">div.grid.col-6>div*6</span></p>
|
||||
<div class="grid col-6 debug p-xxs">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #2</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #3</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #4</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #5</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
|
||||
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
|
||||
with the standard size suffixes.
|
||||
</p>
|
||||
|
||||
<p class="t-bold">Examples with inter-cell gaps:</p>
|
||||
<div class="gap-xs">
|
||||
<?php
|
||||
foreach(["xs", "m", "l"] as &$gapSize) {
|
||||
echo('<p><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '>div*6</span></p>');
|
||||
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs">');
|
||||
for($iGap = 1; $iGap <= 6; $iGap++) {
|
||||
echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>');
|
||||
}
|
||||
echo('</div>');
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<b>TODO: All mobile rules, Add non-identical sizing</b>
|
||||
|
||||
|
||||
<details class="border bkgd-blank r-m mt-s">
|
||||
<summary class="p-xs">Click to show/hide all classes</summary>
|
||||
<div class="p-xs bt bkgd-blank-dark">
|
||||
<p>
|
||||
<span class="code mr-xs">grid</span>
|
||||
<span class="t-super-muted">Defined a grid container</span>
|
||||
</p>
|
||||
|
||||
|
||||
<hr class="subtle my-s">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p><span class="code mr-xs">grid-col-1</span></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><span class="code mr-xs">col-1</span></p>
|
||||
</td>
|
||||
<td rowspan="6">
|
||||
<span class="t-super-muted">Specifies the column count</span></p>
|
||||
</td>
|
||||
</tr>
|
||||
<?php
|
||||
$gridColCounts = [/*"1",*/ "2", "3", "4", "6", "8"];
|
||||
foreach($gridColCounts as &$gridColCount){
|
||||
echo('<tr>');
|
||||
echo('<td><p><span class="code mr-xs">grid-col-'.$gridColCount.'</span></p></td>');
|
||||
echo('<td><p><span class="code mr-xs">col-'.$gridColCount.'</span></p></td>');
|
||||
echo('</tr>');
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
|
||||
<hr class="subtle my-s">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p><span class="code mr-xs">grid-gap-xs</span></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><span class="code mr-xs">gap-xs</span></p>
|
||||
</td>
|
||||
<td rowspan="6">
|
||||
<span class="t-super-muted">Specifies the inter-cell gap size</span></p>
|
||||
</td>
|
||||
</tr>
|
||||
<?php
|
||||
$gridGapSizes = [/*"xs",*/ "s", "m", "l", "xl"];
|
||||
foreach($gridGapSizes as &$gridGapSize){
|
||||
echo('<tr>');
|
||||
echo('<td><p><span class="code mr-xs">grid-gap-'.$gridGapSize.'</span></p></td>');
|
||||
echo('<td><p><span class="code mr-xs">gap-'.$gridGapSize.'</span></p></td>');
|
||||
echo('</tr>');
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
|
||||
<?php
|
||||
echo('<hr class="subtle my-s">');
|
||||
?>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</section>
|
||||
40
htdocs/parts/horizontal_rulers.php
Normal file
40
htdocs/parts/horizontal_rulers.php
Normal file
@@ -0,0 +1,40 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="horizontal-rulers"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Horizontal Rulers
|
||||
<i class="fa-solid fa-ruler f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>Generic: <span class="code">hr</span></p>
|
||||
<hr>
|
||||
|
||||
<p class="mt-s">Subtle: <span class="code">hr.subtle</span>, <span class="code">hr.hr-subtle</span></p>
|
||||
<hr class="subtle">
|
||||
|
||||
<p class="mt-s">Dashed: <span class="code">hr.dashed</span>, <span class="code">hr.hr-dashed</span></p>
|
||||
<hr class="dashed">
|
||||
|
||||
<p class="mt-s">Dotted: <span class="code">hr.dotted</span>, <span class="code">hr.hr-dotted</span></p>
|
||||
<hr class="dotted">
|
||||
|
||||
<p class="mt-s">Double:
|
||||
<span class="code">hr.double</span>, <span class="code">hr.hr-double</span>,
|
||||
<span class="code">hr.thick</span>, <span class="code">hr.hr-thick</span>
|
||||
</p>
|
||||
<hr class="double">
|
||||
|
||||
<p class="mt-s">Outset: <span class="code">hr.outset</span>, <span class="code">hr.hr-outset</span></p>
|
||||
<hr class="outset">
|
||||
<hr class="subtle outset">
|
||||
|
||||
<p class="mt-s">Cutting indicator: <span class="code">hr.cut-here</span>, <span class="code">hr.hr-cut-here</span></p>
|
||||
<hr class="dotted cut-here">
|
||||
<hr class="dashed cut-here">
|
||||
|
||||
</section>
|
||||
116
htdocs/parts/intro.php
Normal file
116
htdocs/parts/intro.php
Normal file
@@ -0,0 +1,116 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="p-xs b r-s bkgd-grid">
|
||||
<h2 class="t-w-500 t-size-14">Welcome to <i class="ml-xxs">NibblePoker.com</i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-size-12 mb-xxs">About the stylesheet</h3>
|
||||
<p class="ml-xs">
|
||||
<i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
|
||||
off-the-shelf stylesheets on low-end and mobile devices.<br>
|
||||
However, it rapidly got used outside its intended environment and was spun-off into a separate a
|
||||
publicly accessible and truly free project.
|
||||
</p>
|
||||
<p class="ml-xs mt-s">
|
||||
<i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
|
||||
or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
|
||||
Following that philosophy, <i>NibbleCSS</i> also makes use of
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
|
||||
which was also released into the public domain in 2011.
|
||||
</p>
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11">Core Stylesheet</h4>
|
||||
<p>These rules apply to the "core" part of the stylesheet:</p>
|
||||
<ul>
|
||||
<li>No implicit sizes, margins or paddings</li>
|
||||
<li>No styles from class-less DOM, except for styling elements</li>
|
||||
<li>Self-sufficient and embeddable as a single file or text blob</li>
|
||||
<li>Competitive minified size</li>
|
||||
<li>Standardized naming scheme</li>
|
||||
</ul>
|
||||
<!-- Avoid nested divs, keep the logical DOM layout, -->
|
||||
<h4 class="t-size-11 mt-s">Site Stylesheet</h4>
|
||||
<ul>
|
||||
<li>Prefabs for common elements</li>
|
||||
<ul>
|
||||
<li>Bound to specific elements</li>
|
||||
<li>???</li>
|
||||
<li>???</li>
|
||||
<li>No forced smooth transition</li>
|
||||
<li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
|
||||
<thead>
|
||||
<th>Stylesheet</th>
|
||||
<th>Minified CSS</th>
|
||||
<th>Regular CSS</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NibbleCSS</td>
|
||||
<td>
|
||||
<a href="/css/nibblepoker.min.css"
|
||||
title="Download the minified full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="success p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
nibblepoker.min.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/nibblepoker.min.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/css/nibblepoker.css"
|
||||
title="Download the full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
nibblepoker.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/nibblepoker.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Debugger</td>
|
||||
<td>
|
||||
<a href="/css/debugger.min.css"
|
||||
title="Download the minified debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
debugger.min.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/debugger.min.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/css/debugger.css"
|
||||
title="Download the debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
debugger.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/debugger.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
25
htdocs/parts/lists.php
Normal file
25
htdocs/parts/lists.php
Normal file
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="lists"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Lists
|
||||
<i class="fa-solid fa-list f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>???.</p>
|
||||
|
||||
<div class="debug">
|
||||
<ul>
|
||||
<li>Line 1</li>
|
||||
<li>Line 2<br>Line 2 continued</li>
|
||||
<li>Line 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<b>TODO: All a detail of all classes</b>
|
||||
</section>
|
||||
33
htdocs/parts/rounding.php
Normal file
33
htdocs/parts/rounding.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="rounding"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Rounding
|
||||
<i class="fa-solid fa-bezier-curve f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>Rounding can be done on a corner/side/global basis using the standard size suffixes and some special ones.</p>
|
||||
<p>These examples will have ???.</p>
|
||||
|
||||
<p class="t-bold">Sizes:</p>
|
||||
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
|
||||
<div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">r-0</span></div>
|
||||
<div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">r-xs</span></div>
|
||||
<div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">r-s</span></div>
|
||||
<div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">r-m</span></div>
|
||||
<div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">r-l</span></div>
|
||||
<div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">r-xl</span></div>
|
||||
</div>
|
||||
|
||||
<p class="t-bold">Special classes:</p>
|
||||
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
|
||||
<div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">r-r</span></div>
|
||||
</div>
|
||||
|
||||
<b>TODO: All a detail of all classes</b>
|
||||
</section>
|
||||
99
htdocs/parts/sidebar.php
Normal file
99
htdocs/parts/sidebar.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<nav id="sidebar" class="sidebar p-m pt-l">
|
||||
<a href="/" class="no-select">
|
||||
<img class="logo-sidebar-v2"
|
||||
src="/img/logo-large-fluent-unshaded.svg"
|
||||
alt="Website's logo"
|
||||
draggable="false">
|
||||
</a>
|
||||
<p class="quantum t-logo-text mb-s mt-xs t-muted ucase">
|
||||
N<span class="t-super-muted">ibble</span>P<span class="t-super-muted">oker</span>
|
||||
</p>
|
||||
<hr class="subtle">
|
||||
|
||||
<p class="t-bold t-size-14 py-xxs t-half-muted _t-underline t-center">Text</p>
|
||||
<a class="a-hidden" href="#text-weights">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Weights</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-styles">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-italic pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Styles</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-alignment">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-text-width pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Alignment</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-modifiers">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-subscript pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Modifiers</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-links">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-link pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Links</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-misc">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Miscellaneous</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Spacing</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#rounding">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-bezier-curve pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Rounding</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<a class="a-hidden" href="#lists">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Lists</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<a class="a-hidden" href="#grids">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Grids</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<a class="a-hidden" href="#horizontal-rulers">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ruler pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Horizontal Rulers</span>
|
||||
</p>
|
||||
</a>
|
||||
</nav>
|
||||
92
htdocs/parts/spacing.php
Normal file
92
htdocs/parts/spacing.php
Normal file
@@ -0,0 +1,92 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="spacing"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Spacing
|
||||
<i class="fa-solid fa-ellipsis f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>
|
||||
Paddings and margins can be applied on a side/axis/global basis using the standard size suffixes.<br>
|
||||
Additionally, the <span class="code">xxs</span> size is also available for those rare tiny spacing needs.
|
||||
</p>
|
||||
|
||||
<p class="mt-s">
|
||||
The examples below have a bordered & padded container, and a regular bordered sub-container.<br>
|
||||
Using margins would have the same effect, if you ignore margin folding.
|
||||
</p>
|
||||
|
||||
<div class="grid col-3 col-medium-2 col-mobile-1 gap-xs mt-s t-center">
|
||||
<div><div class="debug p-xxs"><div class="debug"><p><span class="code">p-xxs</span></p></div></div></div>
|
||||
<div><div class="debug p-xs"><div class="debug"><p><span class="code">p-xs</span></p></div></div></div>
|
||||
<div><div class="debug p-s"><div class="debug"><p><span class="code">p-s</span></p></div></div></div>
|
||||
<div><div class="debug p-m"><div class="debug"><p><span class="code">p-m</span></p></div></div></div>
|
||||
<div><div class="debug p-l"><div class="debug"><p><span class="code">p-l</span> </p></div></div></div>
|
||||
<div><div class="debug p-xl"><div class="debug"><p><span class="code">p-xl</span></p></div></div></div>
|
||||
</div>
|
||||
|
||||
<details class="border bkgd-blank r-m mt-s">
|
||||
<summary class="p-xs">Click to show/hide all classes</summary>
|
||||
<div class="p-xs bt bkgd-blank-dark">
|
||||
<?php
|
||||
$spacingSizes = ["0", "xxs", "xs", "s", "m", "l", "xl"];
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">p-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">General padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">m-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">General margin</span></p>');
|
||||
|
||||
echo('<hr class="subtle my-s">');
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">px-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Horizontal padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">py-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Vertical padding</span></p>');
|
||||
|
||||
echo('<p class="mt-xs">');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mx-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Horizontal margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">my-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Vertical margin</span></p>');
|
||||
|
||||
echo('<hr class="subtle my-s">');
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pt-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Top padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pb-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Bottom padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pl-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Left padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pr-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Right padding</span></p>');
|
||||
|
||||
echo('<p class="mt-xs">');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mt-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Top margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mb-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Bottom margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">ml-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Left margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mr-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Right margin</span></p>');
|
||||
?>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
54
htdocs/parts/text_alignment.php
Normal file
54
htdocs/parts/text_alignment.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-alignment"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Alignment
|
||||
<i class="fa-solid fa-text-width f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">Left</p></td>
|
||||
<td><p class="t-left">Left</p></td>
|
||||
<td><span class="code">t-left</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Center</p></td>
|
||||
<td><p class="t-center">Centered</p></td>
|
||||
<td><span class="code">t-center</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Right</p></td>
|
||||
<td><p class="t-right">Right</p></td>
|
||||
<td><span class="code">t-right</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Start</p></td>
|
||||
<td><p class="t-start">Start</p></td>
|
||||
<td><span class="code">t-start</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">End</p></td>
|
||||
<td><p class="t-end">End</p></td>
|
||||
<td><span class="code">t-end</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Justify</p></td>
|
||||
<td><p class="t-justify">Lorem ipsum.<br>Donor si amet elit.</p></td>
|
||||
<td><span class="code">t-justify</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button>Switch text direction</button>
|
||||
</section>
|
||||
67
htdocs/parts/text_links.php
Normal file
67
htdocs/parts/text_links.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-links"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Links
|
||||
<i class="fa-solid fa-link f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-size-12 mb-xs">Regular anchors</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Real anchor</a></td>
|
||||
<td><span class="code">a</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a">Fake anchor</p></td>
|
||||
<td><span class="code">*.a</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="t-size-12 mb-xs mt-m">Bland anchors</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="a-bland">Bland anchor</a></td>
|
||||
<td><span class="code">a.a-bland</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a a-bland">Bland 'anchor'</p></td>
|
||||
<td><span class="code">*.a.a-bland</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="t-size-12 mb-xs mt-m">Hidden anchors</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="a-hidden">Hidden anchor</a></td>
|
||||
<td><span class="code">a.a-hidden</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a a-hidden">Hidden 'anchor'</p></td>
|
||||
<td><span class="code">*.a.a-hidden</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
43
htdocs/parts/text_misc.php
Normal file
43
htdocs/parts/text_misc.php
Normal file
@@ -0,0 +1,43 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-misc"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Miscellaneous
|
||||
<i class="fa-solid fa-ellipsis f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">No wrap</p></td>
|
||||
<td><p class="t-nowrap">Cannot really be shown</p></td>
|
||||
<td><span class="code">t-nowrap</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Half muted</p></td>
|
||||
<td><p class="t-half-muted">Half muted</p></td>
|
||||
<td><span class="code">t-half-muted</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Muted</p></td>
|
||||
<td><p class="t-muted">Muted text</p></td>
|
||||
<td><span class="code">t-muted</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Super muted</p></td>
|
||||
<td><p class="t-super-muted">Super Muted</p></td>
|
||||
<td><span class="code">t-super-muted</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
42
htdocs/parts/text_modifiers.php
Normal file
42
htdocs/parts/text_modifiers.php
Normal file
@@ -0,0 +1,42 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-modifiers"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Modifiers
|
||||
<i class="fa-solid fa-subscript f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Original</th>
|
||||
<th>Transformed</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">Uppercase</p></td>
|
||||
<td><p>Regular Case</p></td>
|
||||
<td><p class="t-ucase">Regular Case</p></td>
|
||||
<td><span class="code">t-ucase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Lowercase</p></td>
|
||||
<td><p>Regular Case</p></td>
|
||||
<td><p class="t-lcase">Regular Case</p></td>
|
||||
<td><span class="code">t-lcase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Capitalize</p></td>
|
||||
<td><p>no case</p></td>
|
||||
<td><span class="t-capitalize">no case</span></td>
|
||||
<td><span class="code">t-capitalize</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
54
htdocs/parts/text_styles.php
Normal file
54
htdocs/parts/text_styles.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-styles"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Styles
|
||||
<i class="fa-solid fa-italic f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
<th>Elements</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">Italic</p></td>
|
||||
<td><p class="t-italic">Italic text</p></td>
|
||||
<td><span class="code">t-italic</span></td>
|
||||
<td><span class="code">i</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Oblique</p></td>
|
||||
<td><p class="t-oblique">Oblique text</p></td>
|
||||
<td><span class="code">t-oblique</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Underline</p></td>
|
||||
<td><p class="t-underline">Underlined text</p></td>
|
||||
<td><span class="code">t-underline</span></td>
|
||||
<td><span class="code">u</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Strikethrough</p></td>
|
||||
<td><p class="t-strikethrough">Struck text</p></td>
|
||||
<td><span class="code">t-strikethrough</span></td>
|
||||
<td><span class="code">s</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Overline</p></td>
|
||||
<td><p class="t-overline">Overline text</p></td>
|
||||
<td><span class="code">t-overline</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
64
htdocs/parts/text_weights.php
Normal file
64
htdocs/parts/text_weights.php
Normal file
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="text-weights"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Weights
|
||||
<i class="fa-solid fa-text-height f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-size-12 mb-xs">Numeric Weights</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
for($i = 1; $i<=9; $i++) {
|
||||
echo('<tr>');
|
||||
echo('<td class="t-bold">' . ($i * 100) . '</td>');
|
||||
echo('<td class="t-w-' . ($i * 100) . '">Lorem Ipsum donor.</td>');
|
||||
echo('<td><span class="code">t-w-' . ($i * 100) . '</span></td>');
|
||||
echo('</tr>');
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="t-size-12 mb-xs mt-m">Aliased Weights</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">Lighter</p></td>
|
||||
<td><p class="t-lighter">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-lighter</span><span class="code">t-w-lighter</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Normal</p></td>
|
||||
<td><p class="t-normal">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-normal</span><span class="code">t-w-normal</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Bold</p></td>
|
||||
<td><p class="t-bold">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-bold</span><span class="code">t-w-bold</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Bolder</p></td>
|
||||
<td><p class="t-bolder">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-bolder</span><span class="code">t-w-bolder</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
Reference in New Issue
Block a user