commit 88a40efb4eb7bb67f9fcc42431e7a485f609c41e Author: Herwin Bozet Date: Mon Nov 4 22:52:24 2024 +0100 Initial commit Update .gitignore, LICENSE-CC0, and 70 more files... diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9b1c97 --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +# IDEs +.idea/ + +# NodeJS Trash +node_modules/ + +# Build Artifacts +*.css +*.min.html diff --git a/LICENSE-CC0 b/LICENSE-CC0 new file mode 100644 index 0000000..0e259d4 --- /dev/null +++ b/LICENSE-CC0 @@ -0,0 +1,121 @@ +Creative Commons Legal Code + +CC0 1.0 Universal + + CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE + LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN + ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS + INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES + REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS + PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM + THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED + HEREUNDER. + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator +and subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for +the purpose of contributing to a commons of creative, cultural and +scientific works ("Commons") that the public can reliably and without fear +of later claims of infringement build upon, modify, incorporate in other +works, reuse and redistribute as freely as possible in any form whatsoever +and for any purposes, including without limitation commercial purposes. +These owners may contribute to the Commons to promote the ideal of a free +culture and the further production of creative, cultural and scientific +works, or to gain reputation or greater distribution for their Work in +part through the use and efforts of others. + +For these and/or other purposes and motivations, and without any +expectation of additional consideration or compensation, the person +associating CC0 with a Work (the "Affirmer"), to the extent that he or she +is an owner of Copyright and Related Rights in the Work, voluntarily +elects to apply CC0 to the Work and publicly distribute the Work under its +terms, with knowledge of his or her Copyright and Related Rights in the +Work and the meaning and intended legal effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not +limited to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, + communicate, and translate a Work; + ii. moral rights retained by the original author(s) and/or performer(s); +iii. publicity and privacy rights pertaining to a person's image or + likeness depicted in a Work; + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + v. rights protecting the extraction, dissemination, use and reuse of data + in a Work; + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation + thereof, including any amended or successor version of such + directive); and +vii. other similar, equivalent or corresponding rights throughout the + world based on applicable law or treaty, and any national + implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention +of, applicable law, Affirmer hereby overtly, fully, permanently, +irrevocably and unconditionally waives, abandons, and surrenders all of +Affirmer's Copyright and Related Rights and associated claims and causes +of action, whether now known or unknown (including existing as well as +future claims and causes of action), in the Work (i) in all territories +worldwide, (ii) for the maximum duration provided by applicable law or +treaty (including future time extensions), (iii) in any current or future +medium and for any number of copies, and (iv) for any purpose whatsoever, +including without limitation commercial, advertising or promotional +purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each +member of the public at large and to the detriment of Affirmer's heirs and +successors, fully intending that such Waiver shall not be subject to +revocation, rescission, cancellation, termination, or any other legal or +equitable action to disrupt the quiet enjoyment of the Work by the public +as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason +be judged legally invalid or ineffective under applicable law, then the +Waiver shall be preserved to the maximum extent permitted taking into +account Affirmer's express Statement of Purpose. In addition, to the +extent the Waiver is so judged Affirmer hereby grants to each affected +person a royalty-free, non transferable, non sublicensable, non exclusive, +irrevocable and unconditional license to exercise Affirmer's Copyright and +Related Rights in the Work (i) in all territories worldwide, (ii) for the +maximum duration provided by applicable law or treaty (including future +time extensions), (iii) in any current or future medium and for any number +of copies, and (iv) for any purpose whatsoever, including without +limitation commercial, advertising or promotional purposes (the +"License"). The License shall be deemed effective as of the date CC0 was +applied by Affirmer to the Work. Should any part of the License for any +reason be judged legally invalid or ineffective under applicable law, such +partial invalidity or ineffectiveness shall not invalidate the remainder +of the License, and in such case Affirmer hereby affirms that he or she +will not (i) exercise any of his or her remaining Copyright and Related +Rights in the Work or (ii) assert any associated claims and causes of +action with respect to the Work, in either case contrary to Affirmer's +express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + b. Affirmer offers the Work as-is and makes no representations or + warranties of any kind concerning the Work, express, implied, + statutory or otherwise, including without limitation warranties of + title, merchantability, fitness for a particular purpose, non + infringement, or the absence of latent or other defects, accuracy, or + the present or absence of errors, whether or not discoverable, all to + the greatest extent permissible under applicable law. + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person's Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the + Work. + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to + this CC0 or use of the Work. diff --git a/apache2.conf b/apache2.conf new file mode 100644 index 0000000..ae4b2c3 --- /dev/null +++ b/apache2.conf @@ -0,0 +1,227 @@ +# This is the main Apache server configuration file. It contains the +# configuration directives that give the server its instructions. +# See http://httpd.apache.org/docs/2.4/ for detailed information about +# the directives and /usr/share/doc/apache2/README.Debian about Debian specific +# hints. +# +# +# Summary of how the Apache 2 configuration works in Debian: +# The Apache 2 web server configuration in Debian is quite different to +# upstream's suggested way to configure the web server. This is because Debian's +# default Apache2 installation attempts to make adding and removing modules, +# virtual hosts, and extra configuration directives as flexible as possible, in +# order to make automating the changes and administering the server as easy as +# possible. + +# It is split into several files forming the configuration hierarchy outlined +# below, all located in the /etc/apache2/ directory: +# +# /etc/apache2/ +# |-- apache2.conf +# | `-- ports.conf +# |-- mods-enabled +# | |-- *.load +# | `-- *.conf +# |-- conf-enabled +# | `-- *.conf +# `-- sites-enabled +# `-- *.conf +# +# +# * apache2.conf is the main configuration file (this file). It puts the pieces +# together by including all remaining configuration files when starting up the +# web server. +# +# * ports.conf is always included from the main configuration file. It is +# supposed to determine listening ports for incoming connections which can be +# customized anytime. +# +# * Configuration files in the mods-enabled/, conf-enabled/ and sites-enabled/ +# directories contain particular configuration snippets which manage modules, +# global configuration fragments, or virtual host configurations, +# respectively. +# +# They are activated by symlinking available configuration files from their +# respective *-available/ counterparts. These should be managed by using our +# helpers a2enmod/a2dismod, a2ensite/a2dissite and a2enconf/a2disconf. See +# their respective man pages for detailed information. +# +# * The binary is called apache2. Due to the use of environment variables, in +# the default configuration, apache2 needs to be started/stopped with +# /etc/init.d/apache2 or apache2ctl. Calling /usr/bin/apache2 directly will not +# work with the default configuration. + + +# Global configuration +# + +# +# ServerRoot: The top of the directory tree under which the server's +# configuration, error, and log files are kept. +# +# NOTE! If you intend to place this on an NFS (or otherwise network) +# mounted filesystem then please read the Mutex documentation (available +# at ); +# you will save yourself a lot of trouble. +# +# Do NOT add a slash at the end of the directory path. +# +#ServerRoot "/etc/apache2" + +# +# The accept serialization lock file MUST BE STORED ON A LOCAL DISK. +# +#Mutex file:${APACHE_LOCK_DIR} default + +# +# The directory where shm and other runtime files will be stored. +# + +DefaultRuntimeDir ${APACHE_RUN_DIR} + +# +# PidFile: The file in which the server should record its process +# identification number when it starts. +# This needs to be set in /etc/apache2/envvars +# +PidFile ${APACHE_PID_FILE} + +# +# Timeout: The number of seconds before receives and sends time out. +# +Timeout 300 + +# +# KeepAlive: Whether or not to allow persistent connections (more than +# one request per connection). Set to "Off" to deactivate. +# +KeepAlive On + +# +# MaxKeepAliveRequests: The maximum number of requests to allow +# during a persistent connection. Set to 0 to allow an unlimited amount. +# We recommend you leave this number high, for maximum performance. +# +MaxKeepAliveRequests 100 + +# +# KeepAliveTimeout: Number of seconds to wait for the next request from the +# same client on the same connection. +# +KeepAliveTimeout 5 + + +# These need to be set in /etc/apache2/envvars +User ${APACHE_RUN_USER} +Group ${APACHE_RUN_GROUP} + +# +# HostnameLookups: Log the names of clients or just their IP addresses +# e.g., www.apache.org (on) or 204.62.129.132 (off). +# The default is off because it'd be overall better for the net if people +# had to knowingly turn this feature on, since enabling it means that +# each client request will result in AT LEAST one lookup request to the +# nameserver. +# +HostnameLookups Off + +# ErrorLog: The location of the error log file. +# If you do not specify an ErrorLog directive within a +# container, error messages relating to that virtual host will be +# logged here. If you *do* define an error logfile for a +# container, that host's errors will be logged there and not here. +# +ErrorLog ${APACHE_LOG_DIR}/error.log + +# +# LogLevel: Control the severity of messages logged to the error_log. +# Available values: trace8, ..., trace1, debug, info, notice, warn, +# error, crit, alert, emerg. +# It is also possible to configure the log level for particular modules, e.g. +# "LogLevel info ssl:warn" +# +LogLevel warn + +# Include module configuration: +IncludeOptional mods-enabled/*.load +IncludeOptional mods-enabled/*.conf + +# Include list of ports to listen on +Include ports.conf + + +# Sets the default security model of the Apache2 HTTPD server. It does +# not allow access to the root filesystem outside of /usr/share and /var/www. +# The former is used by web applications packaged in Debian, +# the latter may be used for local directories served by the web server. If +# your system is serving content from a sub-directory in /srv you must allow +# access here, or in any related virtual host. + + Options FollowSymLinks + AllowOverride None + Require all denied + + + + AllowOverride None + Require all granted + + + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + +# +# Options Indexes FollowSymLinks +# AllowOverride None +# Require all granted +# + + + + +# AccessFileName: The name of the file to look for in each directory +# for additional configuration directives. See also the AllowOverride +# directive. +# +AccessFileName .htaccess + +# +# The following lines prevent .htaccess and .htpasswd files from being +# viewed by Web clients. +# + + Require all denied + + + +# +# The following directives define some format nicknames for use with +# a CustomLog directive. +# +# These deviate from the Common Log Format definitions in that they use %O +# (the actual bytes sent including headers) instead of %b (the size of the +# requested file), because the latter makes it impossible to detect partial +# requests. +# +# Note that the use of %{X-Forwarded-For}i instead of %h is not recommended. +# Use mod_remoteip instead. +# +LogFormat "%v:%p %h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" vhost_combined +LogFormat "%h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" combined +LogFormat "%h %l %u %t \"%r\" %>s %O" common +LogFormat "%{Referer}i -> %U" referer +LogFormat "%{User-agent}i" agent + +# Include of directories ignores editors' and dpkg's backup files, +# see README.Debian for details. + +# Include generic snippets of statements +IncludeOptional conf-enabled/*.conf + +# Include the virtual host configurations: +IncludeOptional sites-enabled/*.conf + +# vim: syntax=apache ts=4 sw=4 sts=4 sr noet diff --git a/compile.cmd b/compile.cmd new file mode 100644 index 0000000..aaea608 --- /dev/null +++ b/compile.cmd @@ -0,0 +1,41 @@ +@echo off +setlocal enabledelayedexpansion + +:: Going into the script's directory +cd /D "%~dp0" + + +:sass +echo. +echo Handling the SASS files +echo ----------------------- + +:sass-clean +echo Cleaning old files... +pushd %CD% +cd /d %~dp0\htdocs\ +rmdir /Q /S ".\css" +mkdir css +popd + +:sass-compile +echo Compiling SASS files... +pushd %CD% +cd /d %~dp0\htdocs\css\ +call sass "../../scss/nibblepoker.scss" -q --no-source-map > "nibblepoker.css" +call sass "../../scss/nibblepoker.scss" -q --no-source-map --style compressed > "nibblepoker.min.css" +call sass "../../scss/debugger.scss" -q --no-source-map > "debugger.css" +call sass "../../scss/debugger.scss" -q --no-source-map --style compressed > "debugger.min.css" +popd + +:sass-assets +echo Copying assets... +pushd %CD% +cd /d %~dp0 +copy ".\bkgds\*.png" ".\htdocs\css\" +popd + +:sass-end + + +:end diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml new file mode 100644 index 0000000..8ecdd24 --- /dev/null +++ b/docker-compose.dev.yml @@ -0,0 +1,17 @@ +services: + nibblepoker_css: + container_name: nibblepoker-css-dev + image: php:apache + ports: + - 32133:80 + - 32134:443 + environment: + - TZ=Europe/Brussels + volumes: + - ./htdocs:/var/www/html:ro + - ./apache2.conf:/etc/apache2/apache2.conf:ro + restart: unless-stopped + stop_grace_period: 5s + labels: + - "com.centurylinklabs.watchtower.enable=true" + command: ["/bin/sh", "-c", "a2enmod headers && a2enmod rewrite && a2enmod ratelimit && apache2-foreground"] diff --git a/dockerize.cmd b/dockerize.cmd new file mode 100644 index 0000000..a9ed925 --- /dev/null +++ b/dockerize.cmd @@ -0,0 +1,21 @@ +@echo off +setlocal enabledelayedexpansion + +:: Going into the script's directory +cd /D "%~dp0" + + +:dockerize +echo. +echo Preparing the container +echo ----------------------- + +:dockerize-up +pushd %CD% +docker-compose -f docker-compose.dev.yml up -d --force-recreate +popd + +:dockerize-end + + +:end diff --git a/htdocs/.htaccess b/htdocs/.htaccess new file mode 100644 index 0000000..f63278c --- /dev/null +++ b/htdocs/.htaccess @@ -0,0 +1,71 @@ +# Preventing access to .htaccess + + Require all denied + + + +# 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 +# +# Header set Content-Type "text/plain; charset=utf-8" +# +#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. + + 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.* + + + +# 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] diff --git a/htdocs/css/3px-tile-0.1.png b/htdocs/css/3px-tile-0.1.png new file mode 100644 index 0000000..d00539d Binary files /dev/null and b/htdocs/css/3px-tile-0.1.png differ diff --git a/htdocs/css/3px-tile-0.2.png b/htdocs/css/3px-tile-0.2.png new file mode 100644 index 0000000..b698f67 Binary files /dev/null and b/htdocs/css/3px-tile-0.2.png differ diff --git a/htdocs/css/3px-tile-0.4.png b/htdocs/css/3px-tile-0.4.png new file mode 100644 index 0000000..14ddaf5 Binary files /dev/null and b/htdocs/css/3px-tile-0.4.png differ diff --git a/htdocs/css/bright-squares-p100-0.125.png b/htdocs/css/bright-squares-p100-0.125.png new file mode 100644 index 0000000..ca6f598 Binary files /dev/null and b/htdocs/css/bright-squares-p100-0.125.png differ diff --git a/htdocs/favicon.ico b/htdocs/favicon.ico new file mode 100644 index 0000000..3c4f0ee Binary files /dev/null and b/htdocs/favicon.ico differ diff --git a/htdocs/favicon.svg b/htdocs/favicon.svg new file mode 100644 index 0000000..acc8f6a --- /dev/null +++ b/htdocs/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/htdocs/img/logo-large-fluent-unshaded.svg b/htdocs/img/logo-large-fluent-unshaded.svg new file mode 100644 index 0000000..e6d5276 --- /dev/null +++ b/htdocs/img/logo-large-fluent-unshaded.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/htdocs/index.php b/htdocs/index.php new file mode 100644 index 0000000..f50ba9f --- /dev/null +++ b/htdocs/index.php @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + NibblePoker's CSS Theme + + + + + + + + + + + + + + +
+

+ Homepage +

+
+ + +  Language +   + +
+ +

English

+ + +

French

+ +
+ +

Automatic

+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/htdocs/js/sidebar.js b/htdocs/js/sidebar.js new file mode 100644 index 0000000..e52301a --- /dev/null +++ b/htdocs/js/sidebar.js @@ -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; + }; +}); diff --git a/htdocs/parts/grids.php b/htdocs/parts/grids.php new file mode 100644 index 0000000..5f1e7a4 --- /dev/null +++ b/htdocs/parts/grids.php @@ -0,0 +1,137 @@ + + + +
+

Grids +

+
+
+

+ 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

+
+
Cell #1
+
+ +

div.grid.col-2>div*2

+
+
Cell #1
+
Cell #2
+
+ +

div.grid.col-6>div*6

+
+
Cell #1
+
Cell #2
+
Cell #3
+
Cell #4
+
Cell #5
+
Cell #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:

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

'); + echo('
'); + for($iGap = 1; $iGap <= 6; $iGap++) { + echo('
Cell #' . $iGap . '
'); + } + echo('
'); + } + ?> +
+ + TODO: All mobile rules, Add non-identical sizing + + +
+ Click to show/hide all classes +
+

+ grid + Defined a grid container +

+ + +
+ + + + + + + + '); + echo(''); + echo(''); + echo(''); + } + ?> +
+

grid-col-1

+ 		+

col-1

+ 		+ Specifies the column count

+

grid-col-'.$gridColCount.'

col-'.$gridColCount.'

+ +
+ + + + + + + + '); + echo(''); + echo(''); + echo(''); + } + ?> +
+

grid-gap-xs

+ 		+

gap-xs

+ 		+ Specifies the inter-cell gap size

+

grid-gap-'.$gridGapSize.'

gap-'.$gridGapSize.'

+ + '); + ?> +
+
+ +
diff --git a/htdocs/parts/horizontal_rulers.php b/htdocs/parts/horizontal_rulers.php new file mode 100644 index 0000000..29cafd3 --- /dev/null +++ b/htdocs/parts/horizontal_rulers.php @@ -0,0 +1,40 @@ + + + +
+

Horizontal Rulers +

+
+
+

Generic: hr

+
+ +

Subtle: hr.subtle, hr.hr-subtle

+
+ +

Dashed: hr.dashed, hr.hr-dashed

+
+ +

Dotted: hr.dotted, hr.hr-dotted

+
+ +

Double: + hr.double, hr.hr-double, + hr.thick, hr.hr-thick +

+
+ +

Outset: hr.outset, hr.hr-outset

+
+
+ +

Cutting indicator: hr.cut-here, hr.hr-cut-here

+
+
+ +
diff --git a/htdocs/parts/intro.php b/htdocs/parts/intro.php new file mode 100644 index 0000000..2325247 --- /dev/null +++ b/htdocs/parts/intro.php @@ -0,0 +1,116 @@ + + +
+

Welcome to NibblePoker.com

+
+
+

About the stylesheet

+

+ NibbleCSS was originally conceived for internal use following a bout of performance issues with + off-the-shelf stylesheets on low-end and mobile devices.
+ However, it rapidly got used outside its intended environment and was spun-off into a separate a + publicly accessible and truly free project. +

+

+ NibbleCSS 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.
+ Following that philosophy, NibbleCSS also makes use of + Eric A. Meyer's Reset.css + which was also released into the public domain in 2011. +

+ +

Design philosophy

+
+

Core Stylesheet

+

These rules apply to the "core" part of the stylesheet:

+
    +
  • No implicit sizes, margins or paddings
    • +
  • No styles from class-less DOM, except for styling elements
    • +
  • Self-sufficient and embeddable as a single file or text blob
    • +
  • Competitive minified size
    • +
  • Standardized naming scheme
    • +
+ +

Site Stylesheet

+
    +
  • Prefabs for common elements
    • +
      +
    • Bound to specific elements
      • +
    • ???
      • +
    • ???
      • +
    • No forced smooth transition
      • +
    • MUST be snappy on low-end hardware, no snagging allowed
      • +
    +
+
+ +

Downloads

+ + + + + + + + + + + + + + + + + + +
StylesheetMinified CSSRegular CSS
NibbleCSS + + + + + + + +
Debugger + + + + + + + +
+
diff --git a/htdocs/parts/lists.php b/htdocs/parts/lists.php new file mode 100644 index 0000000..c05a3fb --- /dev/null +++ b/htdocs/parts/lists.php @@ -0,0 +1,25 @@ + + + +
+

Lists +

+
+
+

???.

+ +
+
    +
  • Line 1
    • +
  • Line 2
    Line 2 continued
    • +
  • Line 3
    • +
+
+ + TODO: All a detail of all classes +
diff --git a/htdocs/parts/rounding.php b/htdocs/parts/rounding.php new file mode 100644 index 0000000..2d58b29 --- /dev/null +++ b/htdocs/parts/rounding.php @@ -0,0 +1,33 @@ + + + +
+

Rounding +

+
+
+

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

+

These examples will have ???.

+ +

Sizes:

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

Special classes:

+
+
r-r
+
+ + TODO: All a detail of all classes +
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php new file mode 100644 index 0000000..5ef15fa --- /dev/null +++ b/htdocs/parts/sidebar.php @@ -0,0 +1,99 @@ + + + diff --git a/htdocs/parts/spacing.php b/htdocs/parts/spacing.php new file mode 100644 index 0000000..e089a90 --- /dev/null +++ b/htdocs/parts/spacing.php @@ -0,0 +1,92 @@ + + + +
+

Spacing +

+
+
+

+ Paddings and margins can be applied on a side/axis/global basis using the standard size suffixes.
+ Additionally, the xxs size is also available for those rare tiny spacing needs. +

+ +

+ The examples below have a bordered & padded container, and a regular bordered sub-container.
+ Using margins would have the same effect, if you ignore margin folding. +

+ +
+

p-xxs

+

p-xs

+

p-s

+

p-m

+

p-l

+

p-xl

+
+ +
+ Click to show/hide all classes +
+ '); + foreach($spacingSizes as &$spacingSize){echo('p-'.$spacingSize.'');} + echo('General padding

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('m-'.$spacingSize.'');} + echo('General margin

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

'); + foreach($spacingSizes as &$spacingSize){echo('px-'.$spacingSize.'');} + echo('Horizontal padding

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('py-'.$spacingSize.'');} + echo('Vertical padding

'); + + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('mx-'.$spacingSize.'');} + echo('Horizontal margin

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('my-'.$spacingSize.'');} + echo('Vertical margin

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

'); + foreach($spacingSizes as &$spacingSize){echo('pt-'.$spacingSize.'');} + echo('Top padding

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('pb-'.$spacingSize.'');} + echo('Bottom padding

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('pl-'.$spacingSize.'');} + echo('Left padding

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('pr-'.$spacingSize.'');} + echo('Right padding

'); + + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('mt-'.$spacingSize.'');} + echo('Top margin

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('mb-'.$spacingSize.'');} + echo('Bottom margin

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('ml-'.$spacingSize.'');} + echo('Left margin

'); + echo('

'); + foreach($spacingSizes as &$spacingSize){echo('mr-'.$spacingSize.'');} + echo('Right margin

'); + ?> +
+
+
diff --git a/htdocs/parts/text_alignment.php b/htdocs/parts/text_alignment.php new file mode 100644 index 0000000..74c527b --- /dev/null +++ b/htdocs/parts/text_alignment.php @@ -0,0 +1,54 @@ + + + +
+

TextAlignment +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleExampleClasses

Left

Left

t-left

Center

Centered

t-center

Right

Right

t-right

Start

Start

t-start

End

End

t-end

Justify

Lorem ipsum.
Donor si amet elit.

t-justify
+ +
diff --git a/htdocs/parts/text_links.php b/htdocs/parts/text_links.php new file mode 100644 index 0000000..0507f58 --- /dev/null +++ b/htdocs/parts/text_links.php @@ -0,0 +1,67 @@ + + + +
+

TextLinks +

+
+
+

Regular anchors

+ + + + + + + + + + + + + + + +
ExampleSource
Real anchora

Fake anchor

*.a
+ +

Bland anchors

+ + + + + + + + + + + + + + + +
ExampleSource
Bland anchora.a-bland

Bland 'anchor'

*.a.a-bland
+ +

Hidden anchors

+ + + + + + + + + + + + + + + +
ExampleSource
Hidden anchora.a-hidden

Hidden 'anchor'

*.a.a-hidden
+
diff --git a/htdocs/parts/text_misc.php b/htdocs/parts/text_misc.php new file mode 100644 index 0000000..a4a2176 --- /dev/null +++ b/htdocs/parts/text_misc.php @@ -0,0 +1,43 @@ + + + +
+

TextMiscellaneous +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleExampleClasses

No wrap

Cannot really be shown

t-nowrap

Half muted

Half muted

t-half-muted

Muted

Muted text

t-muted

Super muted

Super Muted

t-super-muted
+
diff --git a/htdocs/parts/text_modifiers.php b/htdocs/parts/text_modifiers.php new file mode 100644 index 0000000..5363fe1 --- /dev/null +++ b/htdocs/parts/text_modifiers.php @@ -0,0 +1,42 @@ + + + +
+

TextModifiers +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleOriginalTransformedClasses

Uppercase

Regular Case

Regular Case

t-ucase

Lowercase

Regular Case

Regular Case

t-lcase

Capitalize

no case

no caset-capitalize
+
\ No newline at end of file diff --git a/htdocs/parts/text_styles.php b/htdocs/parts/text_styles.php new file mode 100644 index 0000000..2420384 --- /dev/null +++ b/htdocs/parts/text_styles.php @@ -0,0 +1,54 @@ + + + +
+

TextStyles +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleExampleClassesElements

Italic

Italic text

t-italici

Oblique

Oblique text

t-obliqueN/A

Underline

Underlined text

t-underlineu

Strikethrough

Struck text

t-strikethroughs

Overline

Overline text

t-overlineN/A
+
diff --git a/htdocs/parts/text_weights.php b/htdocs/parts/text_weights.php new file mode 100644 index 0000000..eab567d --- /dev/null +++ b/htdocs/parts/text_weights.php @@ -0,0 +1,64 @@ + + + +
+

TextWeights +

+
+
+

Numeric Weights

+ + + + + + + + '); + echo(''); + echo(''); + echo(''); + echo(''); + } + ?> + +
StyleExampleClasses
' . ($i * 100) . 'Lorem Ipsum donor.t-w-' . ($i * 100) . '
+ +

Aliased Weights

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleExampleClasses

Lighter

Lorem Ipsum 123 !

t-lightert-w-lighter

Normal

Lorem Ipsum 123 !

t-normalt-w-normal

Bold

Lorem Ipsum 123 !

t-boldt-w-bold

Bolder

Lorem Ipsum 123 !

t-boldert-w-bolder
+
diff --git a/minify.cmd b/minify.cmd new file mode 100644 index 0000000..40407c9 --- /dev/null +++ b/minify.cmd @@ -0,0 +1,37 @@ +@echo off +setlocal enabledelayedexpansion + +:: Going into the script's directory +cd /D "%~dp0" + + +:minify +echo. +echo Minifying HTML +echo -------------- + +:minify-clean +echo Cleaning old files... +pushd %CD% +cd /d %~dp0\htdocs\ +del /Q /S "*.min.html" +popd + +:minify-run +echo Minifying HTML files... +pushd %CD% +cd /d %~dp0\htdocs +call html-minifier --case-sensitive ^ + --collapse-whitespace ^ + --decode-entities ^ + --remove-attribute-quotes ^ + --remove-comments ^ + --sort-attributes ^ + -o "index.min.html" ^ + "index.html" +popd + +:minify-end + + +:end diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..c496220 --- /dev/null +++ b/readme.md @@ -0,0 +1,12 @@ +# NibblePoker's CSS Theme (W.I.P.) +A simple and minimalist CSS stylesheet used across all my websites and web-based applications. + + +## License +The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0) + +This repository includes and redistributes [reset.css](https://meyerweb.com/eric/tools/css/reset/) from +[meyerweb.com](https://meyerweb.com/) which is also in the public domain. + +**This license doesn't apply to the logos, images, names and other external resources provided +and/or used in this repository.** diff --git a/scss/config.scss b/scss/config.scss new file mode 100644 index 0000000..6d09364 --- /dev/null +++ b/scss/config.scss @@ -0,0 +1,8 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +// Add the "w-000px"/"h-000px" classes. +$add-px-sizing-rules: false; + +$nibblepoker-background-root: "./"; + +$use-b64-backgrounds: true; diff --git a/scss/core/border.scss b/scss/core/border.scss new file mode 100644 index 0000000..7ffc5ca --- /dev/null +++ b/scss/core/border.scss @@ -0,0 +1,64 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Borders */ + +.b, .border { + border: 1px solid #{$color-border-all}; +} + +.b-0 { + border: 0; +} + +@mixin border-maker($side-key, $side-css-key) { + .b#{$side-key} { + border-#{$side-css-key}: 1px solid #{$color-border-all}; + } + .b#{$side-key}-0 { + border-#{$side-css-key}: 0; + } +} + +@include border-maker("t", "top"); +@include border-maker("b", "bottom"); +@include border-maker("l", "left"); +@include border-maker("r", "right"); + +.bx { + border-left: 1px solid #{$color-border-all}; + border-right: 1px solid #{$color-border-all}; +} +.bx-0 { + border-left: 0; + border-right: 0; +} + +.by { + border-top: 1px solid #{$color-border-all}; + border-bottom: 1px solid #{$color-border-all}; +} +.by-0 { + border-top: 0; + border-bottom: 0; +} + +//.border { +// border: 1px solid; +// +// //&.b-light { +// // border: 1px solid #{$color-border-light}; +// //} +//} + +//main { +// .border { +// border: 1px solid #{$color-border-main}; +// } +//} + +//* { +// .dark-mode & { +// border-color: #{$color-border-all}; +// } +//} + diff --git a/scss/core/containers.scss b/scss/core/containers.scss new file mode 100644 index 0000000..12821b8 --- /dev/null +++ b/scss/core/containers.scss @@ -0,0 +1,19 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +/* Core > Containers */ + +.fluid-container { + position: relative; + width: 100%; + height: 100%; + + // First children, or all, don't care tbh. + & > * { + position: absolute; + width: inherit; + height: inherit; + max-height: inherit; + overflow-y: auto; + overflow-x: hidden; + } +} diff --git a/scss/core/display.scss b/scss/core/display.scss new file mode 100644 index 0000000..89daa59 --- /dev/null +++ b/scss/core/display.scss @@ -0,0 +1,18 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Display */ + +.d-none { + display: none; +} + +.d-inline-block { + display: inline-block; +} + +.o-hidden { + overflow: hidden; +} + +// Notes: +// * 'core/grid.scss' defines '.d-grid' ! (Add here if grids are disabled !) diff --git a/scss/core/flex.scss b/scss/core/flex.scss new file mode 100644 index 0000000..bc3098c --- /dev/null +++ b/scss/core/flex.scss @@ -0,0 +1,77 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Flex */ + +// Display properties +.d-flex { + display: flex; +} + +.d-inline-flex { + display: inline-flex; +} + +// Content justification +.flex-justify-start { + justify-content: flex-start; +} + +.flex-justify-end { + justify-content: flex-end; +} + +.flex-justify-center { + justify-content: center; +} + +.flex-justify-between { + justify-content: space-between; +} + +.flex-justify-around { + justify-content: space-around; +} + +.flex-justify-evenly { + justify-content: space-evenly; +} + +.flex-justify-left { + justify-content: left; +} + +.flex-justify-right { + justify-content: right; +} + +// ??? + +.flex-align-center { + align-items: center; +} +.flex-align-start { + align-items: flex-start; +} + +// Missing: start | end + +.flex-direction-row, .flex-row { + flex-direction: row; +} + +.flex-direction-row-reverse, .flex-row-reverse { + flex-direction: row-reverse; +} + +.flex-direction-column, .flex-column { + flex-direction: column; +} + +.flex-direction-column-reverse, .flex-column-reverse { + flex-direction: column-reverse; +} + +.flex-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; +} diff --git a/scss/core/float.scss b/scss/core/float.scss new file mode 100644 index 0000000..e61c96a --- /dev/null +++ b/scss/core/float.scss @@ -0,0 +1,17 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Float */ + +.fl, .f-left { + float: left; +} + +.fr, .f-right { + float: right; +} + +.fn, .f-none { + float: none; +} + +// TODO: Add more types diff --git a/scss/core/grid.scss b/scss/core/grid.scss new file mode 100644 index 0000000..966331f --- /dev/null +++ b/scss/core/grid.scss @@ -0,0 +1,45 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Grids */ + +.grid, .d-grid { + display: grid; +} + +@mixin grid-col-maker($col-count, $middle-part) { + .grid-col-#{$middle-part}#{$col-count}, .col-#{$middle-part}#{$col-count} { + grid-template-columns: repeat(#{$col-count}, 1fr); + } +} + +@mixin grid-gap-maker($gap-size-key, $gap-size-value) { + .grid-gap-#{$gap-size-key}, .gap-#{$gap-size-key} { + grid-gap: #{$gap-size-value}; + } +} + +// Defining rules for all devices. +@include grid-col-maker("1", ""); +@include grid-col-maker("2", ""); +@include grid-col-maker("3", ""); +@include grid-col-maker("4", ""); +@include grid-col-maker("6", ""); +@include grid-col-maker("8", ""); + +@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5)); +@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75)); +@include grid-gap-maker("m", #{$grid-gap-base-size}); +@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5)); +@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0)); + +@media only screen and (max-width: 992px) { + @include grid-col-maker("1", "medium-"); + @include grid-col-maker("2", "medium-"); + @include grid-col-maker("3", "medium-"); +} + +@media only screen and (max-width: 768px) { + @include grid-col-maker("1", "mobile-"); + @include grid-col-maker("2", "mobile-"); + @include grid-col-maker("3", "mobile-"); +} diff --git a/scss/core/lists.scss b/scss/core/lists.scss new file mode 100644 index 0000000..b9236e8 --- /dev/null +++ b/scss/core/lists.scss @@ -0,0 +1,29 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Lists */ + +ul:not(.no-bullet) { + padding-left: 1.5rem; + + &> li { + list-style-type: disc; + } +} + +ol:not(.no-bullet) { + list-style-type: decimal; + padding-left: 1.5rem; +} + +li { + //list-style-type: disc; + + /*&> li { + list-style-type: circle; + }*/ +} + +/*ul.no-bullet, ol.no-bullet { + list-style-type: none; + padding-left: 0; +}*/ diff --git a/scss/core/overflow.scss b/scss/core/overflow.scss new file mode 100644 index 0000000..b615fda --- /dev/null +++ b/scss/core/overflow.scss @@ -0,0 +1,20 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Overflow */ + +@mixin overflow-maker($overflow-type) { + .o-#{$overflow-type} { + overflow: #{$overflow-type}; + } + .ox-#{$overflow-type} { + overflow-x: #{$overflow-type}; + } + .oy-#{$overflow-type} { + overflow-y: #{$overflow-type}; + } +} + +@include overflow-maker(auto); +@include overflow-maker(scroll); +@include overflow-maker(clip); +@include overflow-maker(hidden); diff --git a/scss/core/position.scss b/scss/core/position.scss new file mode 100644 index 0000000..98ba009 --- /dev/null +++ b/scss/core/position.scss @@ -0,0 +1,7 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Positions */ + +.p-relative { + position: relative; +} diff --git a/scss/core/rounding/corner.scss b/scss/core/rounding/corner.scss new file mode 100644 index 0000000..2e16519 --- /dev/null +++ b/scss/core/rounding/corner.scss @@ -0,0 +1,29 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Rounding > Corner */ +@mixin corner-rounding-maker($size-key, $size-value) { + .rtl-#{$size-key} { + border-top-left-radius: #{$size-value}; + } + .rtr-#{$size-key} { + border-top-right-radius: #{$size-value}; + } + .rbl-#{$size-key} { + border-bottom-left-radius: #{$size-value}; + } + .rbr-#{$size-key} { + border-bottom-right-radius: #{$size-value}; + } +} + + +/* Utilities > Rounding > Corner > Variable Sizes */ +@include corner-rounding-maker("xs", calc(#{$border-base-radius} * 0.5)); +@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)); + + +/* Utilities > Rounding > Corner > Fixed Sizes */ +@include corner-rounding-maker("0", 0); +@include corner-rounding-maker("r", 50%); diff --git a/scss/core/rounding/global.scss b/scss/core/rounding/global.scss new file mode 100644 index 0000000..25a80a6 --- /dev/null +++ b/scss/core/rounding/global.scss @@ -0,0 +1,22 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Rounding > Global */ +@mixin global-rounding-maker($size-key, $size-value) { + //, .rounding-#{$size-key} + .r-#{$size-key} { + border-radius: #{$size-value}; + } +} + + +/* Utilities > Rounding > Global > Variable Sizes */ +@include global-rounding-maker("xs", calc(#{$border-base-radius} * 0.5)); +@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); +@include global-rounding-maker("r", 50%); diff --git a/scss/core/rounding/sided.scss b/scss/core/rounding/sided.scss new file mode 100644 index 0000000..710286d --- /dev/null +++ b/scss/core/rounding/sided.scss @@ -0,0 +1,33 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Rounding > Sided */ +@mixin sided-rounding-maker($size-key, $size-value) { + .rt-#{$size-key} { + border-top-left-radius: #{$size-value}; + border-top-right-radius: #{$size-value}; + } + .rb-#{$size-key} { + border-bottom-left-radius: #{$size-value}; + border-bottom-right-radius: #{$size-value}; + } + .rl-#{$size-key} { + border-top-left-radius: #{$size-value}; + border-bottom-left-radius: #{$size-value}; + } + .rr-#{$size-key} { + border-top-right-radius: #{$size-value}; + border-bottom-right-radius: #{$size-value}; + } +} + + +/* Utilities > Rounding > Sided > Variable Sizes */ +@include sided-rounding-maker("xs", calc(#{$border-base-radius} * 0.5)); +@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)); + + +/* Utilities > Rounding > Sided > Fixed Sizes */ +@include sided-rounding-maker("0", 0); +@include sided-rounding-maker("r", 50%); diff --git a/scss/core/sizing.scss b/scss/core/sizing.scss new file mode 100644 index 0000000..fdfb456 --- /dev/null +++ b/scss/core/sizing.scss @@ -0,0 +1,56 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Sizing */ + +// 100 % +.w-full { + width: 100%; +} +.wm-full { + max-width: 100%; +} + +.h-full { + height: 100%; +} +.hm-full { + max-height: 100%; +} + +// 50 % +.w-half { + width: 50%; +} + +.h-half { + height: 50%; +} + +// Pixels Sizing (Deprecated, disabled by default, use custom rules !) +@if($add-px-sizing-rules) { + // 50, 100, ..., 250 px + @for $_ from 1 through 5 { + $pxSize: $_ * 50; + + .w-#{$pxSize} { + width: #{$pxSize}px; + } + + .h-#{$pxSize} { + height: #{$pxSize}px; + } + } + + // 300, 400, ..., 900 px + @for $_ from 3 through 9 { + $pxSize: $_ * 100; + + .w-#{$pxSize} { + width: #{$pxSize}px; + } + + .h-#{$pxSize} { + height: #{$pxSize}px; + } + } +} diff --git a/scss/core/spacing/axis.scss b/scss/core/spacing/axis.scss new file mode 100644 index 0000000..e9e0fbf --- /dev/null +++ b/scss/core/spacing/axis.scss @@ -0,0 +1,39 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Spacing > Sided */ +@mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) { + .#{$type-key}x-#{$size-key} { + #{$type-property}-left: #{$size-value}; + #{$type-property}-right: #{$size-value}; + } + .#{$type-key}y-#{$size-key} { + #{$type-property}-top: #{$size-value}; + #{$type-property}-bottom: #{$size-value}; + } +} + + +/* Utilities > Spacing > Sided > Variable Sizes */ +@include axis-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25)); +@include axis-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5)); +@include axis-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75)); +@include axis-spacing-maker("m", "margin", "m", #{$margin-base-size}); +@include axis-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5)); +@include axis-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0)); + +@include axis-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25)); +@include axis-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5)); +@include axis-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75)); +@include axis-spacing-maker("p", "padding", "m", #{$margin-base-size}); +@include axis-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5)); +@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0)); + + +/* Utilities > Spacing > Sided > Fixed Sizes */ +@include axis-spacing-maker("m", "margin", "0", 0); +@include axis-spacing-maker("p", "padding", "0", 0); + + +/* Utilities > Spacing > Sided > Others */ +@include axis-spacing-maker("m", "margin", "auto", auto); +@include axis-spacing-maker("p", "padding", "auto", auto); diff --git a/scss/core/spacing/global.scss b/scss/core/spacing/global.scss new file mode 100644 index 0000000..b9c028b --- /dev/null +++ b/scss/core/spacing/global.scss @@ -0,0 +1,46 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Spacing > Global */ +@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) { + .#{$type-key}-#{$size-key} { + #{$type-property}: #{$size-value}; + } +} + + +/* Utilities > Spacing > Global > Variable Sizes */ +@include global-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25)); +@include global-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5)); +@include global-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75)); +@include global-spacing-maker("m", "margin", "m", #{$margin-base-size}); +@include global-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5)); +@include global-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0)); + +@include global-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25)); +@include global-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5)); +@include global-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75)); +@include global-spacing-maker("p", "padding", "m", #{$margin-base-size}); +@include global-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5)); +@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0)); + + +/* Utilities > Spacing > Global > Fixed Sizes */ +@include global-spacing-maker("m", "margin", "0", 0); +@include global-spacing-maker("p", "padding", "0", 0); + + +/* Utilities > Spacing > Global > Others */ +@include global-spacing-maker("m", "margin", "auto", auto); +@include global-spacing-maker("p", "padding", "auto", auto); + + +/* Utilities > Spacing > Global > Manual Extras */ +.p-xxxs { + padding: calc(#{$margin-base-size} * 0.125); +} +.p-mxs { + padding: calc(#{$margin-base-size} * 0.375); +} +.p-ms { + padding: calc(#{$margin-base-size} * 0.625); +} diff --git a/scss/core/spacing/sided.scss b/scss/core/spacing/sided.scss new file mode 100644 index 0000000..a7f1cef --- /dev/null +++ b/scss/core/spacing/sided.scss @@ -0,0 +1,43 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Utilities > Spacing > Sided */ +@mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) { + .#{$type-key}t-#{$size-key} { + #{$type-property}-top: #{$size-value}; + } + .#{$type-key}b-#{$size-key} { + #{$type-property}-bottom: #{$size-value}; + } + .#{$type-key}l-#{$size-key} { + #{$type-property}-left: #{$size-value}; + } + .#{$type-key}r-#{$size-key} { + #{$type-property}-right: #{$size-value}; + } +} + + +/* Utilities > Spacing > Sided > Variable Sizes */ +@include sided-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25)); +@include sided-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5)); +@include sided-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75)); +@include sided-spacing-maker("m", "margin", "m", #{$margin-base-size}); +@include sided-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5)); +@include sided-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0)); + +@include sided-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25)); +@include sided-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5)); +@include sided-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75)); +@include sided-spacing-maker("p", "padding", "m", #{$margin-base-size}); +@include sided-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5)); +@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0)); + + +/* Utilities > Spacing > Sided > Fixed Sizes */ +@include sided-spacing-maker("m", "margin", "0", 0); +@include sided-spacing-maker("p", "padding", "0", 0); + + +/* Utilities > Spacing > Sided > Others */ +@include sided-spacing-maker("m", "margin", "auto", auto); +@include sided-spacing-maker("p", "padding", "auto", auto); diff --git a/scss/core/text.scss b/scss/core/text.scss new file mode 100644 index 0000000..fc12f3e --- /dev/null +++ b/scss/core/text.scss @@ -0,0 +1,168 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Core > Text */ + +/* Core > Text > Headings */ + +h1, h2, h3, h4, h5, h6 { + font-weight: #{$text-header-weight}; +} + + +/* Core > Text > Sizes */ + +// ".t-size-6", ".t-size-8", ..., "t-size-40" +@for $_ from 3 through 20 { + $sizeKey: $_ * 2; + $sizeValue: $sizeKey / 10; + + .t-size-#{$sizeKey} { + font-size: #{$sizeValue}rem !important; + } +} + +// Adding special odd values +.t-size-11 { + font-size: 1.1rem !important; +} +.t-size-13 { + font-size: 1.3rem !important; +} +.t-size-15 { + font-size: 1.5rem !important; +} +.t-size-17 { + font-size: 1.7rem !important; +} + +// Jumbo sizes +// ".t-size-35" & ".t-size-40" +@for $_ from 7 through 8 { + $size: $_ * 5; + + .t-size-#{$size} { + font-size: #{$size / 10}rem !important; + } +} + + +/* Core > Text > Weights */ + +.t-w-normal, .t-normal { + font-weight: normal !important; +} +b, .t-w-bold, .t-bold { + font-weight: bold !important; +} +.t-w-bolder, .t-bolder { + font-weight: bolder !important; +} +.t-w-lighter, .t-lighter { + font-weight: lighter !important; +} + +// ".t-w-100", ".t-w-200", ..., ".t-w-900" +@for $_ from 1 through 9 { + $size: $_ * 100; + + .t-w-#{$size} { + font-weight: #{$size} !important; + } +} +// /!\ Firefox moment /!\ +// * The ".t-w-200" to ".t-w-500" classes barely any effect on weight... + + +/* Core > Text > Styles */ + +i, .t-italic { + font-style: italic; +} + +.t-oblique { + font-style: oblique; +} + +u, .t-underline { + text-decoration: underline; +} + +s, .t-strikethrough { + text-decoration: line-through; +} + +.t-overline { + text-decoration: overline; +} + + +/* Core > Text > Alignment */ + +.t-justify { + text-align: justify; +} + +.t-center { + text-align: center; +} + +.t-left { + text-align: left; +} + +.t-right { + text-align: right; +} + +.t-start { + text-align: start; +} + +.t-end { + text-align: end; +} + + +/* Core > Text > Modifiers */ + +.t-ucase { + text-transform: uppercase; +} + +.t-lcase { + text-transform: lowercase; +} + +.t-capitalize { + text-transform: capitalize; +} + + +/* Core > Text > Misc */ + +.t-nowrap { + white-space: nowrap; + text-wrap: nowrap; +} + + +/* Core > Text > Helpers */ + +.t-half-muted { + opacity: 65%; +} + +.t-muted { + //@if $undefined-toggle-css-variables { + // color: var(--color-white-muted); + //} @else { + // color: #{$color-white-muted}; + //} + //color: #A9A9Aa; + opacity: 50%; +} + +.t-super-muted { + // Should be 35% TBH + opacity: 45%; +} diff --git a/scss/debugger.scss b/scss/debugger.scss new file mode 100644 index 0000000..9f68b63 --- /dev/null +++ b/scss/debugger.scss @@ -0,0 +1,17 @@ +// NibblePoker CSS Debugger - CC0 1.0 (Public Domain) + +.debug { + border: 1px dotted deeppink !important; + & *.debug { + border: 1px dotted yellow !important; + & *.debug { + border: 1px dotted cyan !important; + & *.debug { + border: 1px dotted lime !important; + & *.debug { + border: 1px dotted red !important; + } + } + } + } +} diff --git a/scss/external/reset.scss b/scss/external/reset.scss new file mode 100644 index 0000000..640f041 --- /dev/null +++ b/scss/external/reset.scss @@ -0,0 +1,60 @@ +/* + * ----------------------------------------------------------------------------- + * Reset.css + * ----------------------------------------------------------------------------- + * http://meyerweb.com/eric/tools/css/reset/ + * v2.0 | 20110126 + * License: none (public domain) + * ----------------------------------------------------------------------------- + */ + +/* External > Reset.css */ + +*, *:before, *:after { + box-sizing: border-box; +} + +html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, +strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, +td, main, canvas, embed, footer, header, nav, section, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + text-size-adjust: none; +} + +footer, header, nav, section, main { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input { + -webkit-appearance: none; + border-radius: 0; +} diff --git a/scss/nibblepoker.scss b/scss/nibblepoker.scss new file mode 100644 index 0000000..3fdaa48 --- /dev/null +++ b/scss/nibblepoker.scss @@ -0,0 +1,75 @@ +/* + * ----------------------------------------------------------------------------- + * NibblePoker CSS Theme + * ----------------------------------------------------------------------------- + * Author: Herwin Bozet + * License: CC0 1.0 (Public Domain) + * Source: ??? + * ----------------------------------------------------------------------------- + */ + +/* Config */ +@import 'config'; + +/* Externals */ +@import 'external/reset'; // Doesn't reset checkboxes ! + +/* Variables */ +@import 'variables'; + +/* Core */ +@import 'core/border'; // Border rules (.border, .bt-0, ...) +@import 'core/float'; // Floating rules (.f-right, ...) +@import 'core/sizing'; // Rules for setting elements size (.w-full, ...) +@import 'core/flex'; // /!\ Needs an overhaul !!! +@import 'core/grid'; // /!\ Needs an overhaul !!! +@import 'core/text'; // Text-related rules (.t-bold, t-ucase, t-size-14, ...) +//@import 'core/containers'; // Cannot remember why it was used, if ever +@import 'core/display'; // /!\ Needs improvement !!! +@import 'core/position'; // /!\ Needs improvement !!! +@import 'core/overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...) +@import 'core/lists'; + +/* Core > Rounding */ +@import 'core/rounding/global'; +@import 'core/rounding/sided'; +@import 'core/rounding/corner'; + +/* Core > Spacing */ +@import 'core/spacing/global'; +@import 'core/spacing/axis'; +@import 'core/spacing/sided'; + +/* Site */ + +/* Site > Layouts */ +@import 'site/layouts/commons'; // Sets up the page's default sizing rules +@import 'site/layouts/generic'; // Theme used for websites with a toggleable sidebar (Similar to WinUI apps) + +/* Site > Styles */ +@import 'site/base'; // Needs a rework, Defines some basic common broad styling/coloring rules +@import 'site/text'; // Has some hardcoded width for font-awesome icons in sidebar and headings + +/* Site > Elements */ +@import 'site/hr'; // Custom horizontal rulers +@import 'site/scrollbar'; // Personalizes the scrollbars (Horizontal is still unfinished !) +@import 'site/input'; // Has ugly fix for download buttons +@import 'site/table'; // Uses copied paddings for cells & ugly rounding fix +@import 'site/code'; // Uses forced borders, roundings and paddings +@import 'site/video'; + +/* Site > Misc */ +@import 'site/borders'; // Applies the colors mostly, the size are in the elements ! +@import 'site/backgrounds'; + +/* Site > Fixes */ +@import 'site/mobile'; // Has !important overrides for obvious reasons + +/* Site > Unsorted */ +@import 'site/image'; +@import 'site/wedge'; +@import 'site/content'; // Uses fixed sizes and floats +@import 'site/modal'; + +/* Extras */ +@import 'site/splide'; diff --git a/scss/site/backgrounds.scss b/scss/site/backgrounds.scss new file mode 100644 index 0000000..2283edf --- /dev/null +++ b/scss/site/backgrounds.scss @@ -0,0 +1,31 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +/* Site > Misc > Backgrounds */ + +.bkgd-blank { + background: #{$color-background-main-headings}; +} + +// 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 { + background: mix($color-background-main, $color-background-surround, 50%); +} + +.bkgd-grid { + 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("#{$nibblepoker-background-root}/bright-squares-p100-0.125.png") repeat scroll center center; +} + +.bkgd-math { + //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; +} diff --git a/scss/site/base.scss b/scss/site/base.scss new file mode 100644 index 0000000..bdcb172 --- /dev/null +++ b/scss/site/base.scss @@ -0,0 +1,41 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Site > Styles > Base */ + +/* Site > Styles > Base > Coloring & Fonts (TODO: Needs a small rework) */ + +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"; +} + +// 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 ! + // FIXME: Move it to the proper layout file then !!! + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset; +} + + +/* Site > Styles > Base > Trash */ + +// FIXME: Move it out too ! +// Allowed for right-align in headings with 'ml-auto' instead of 'f-right' ! +/*.heading-main { + > h2, > h3, > h4 { + display: flex; + align-items: center; + justify-content: left; + } + &.heading-dyn-width-1 { + min-width: 75%; + } +}*/ diff --git a/scss/site/borders.scss b/scss/site/borders.scss new file mode 100644 index 0000000..8a85824 --- /dev/null +++ b/scss/site/borders.scss @@ -0,0 +1,36 @@ + +.border, code, .code, kbd { + border-color: #{$color-border-surround}; + + //&.b-light { + // border: 1px solid #{$color-border-light}; + //} +} + +code, .code, kbd { + border-color: #{$color-border-code}; +} + +main { + .border { + border-color: #{$color-border-main}; + + //&.b-light { + // border: 1px solid #{$color-border-light}; + //} + } +} + +table.stylish { + // Fixing border issues when using rounded corners by using a "fake" one using the background's color. + // It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently. + // I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit. + &.border { + background-color: #{$color-border-main}; + } +} + +// Special fix for select inputs' dropdown menu +//select.border option::before { +// border: 1px solid deeppink !important; +//} diff --git a/scss/site/code.scss b/scss/site/code.scss new file mode 100644 index 0000000..e9db8eb --- /dev/null +++ b/scss/site/code.scss @@ -0,0 +1,38 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +code, .code, kbd { + font-family: Consolas, "Courier New", monospace; +} + +// For large blocks +code { + +} + +// For spans +.code, kbd { + background-color: #{$color-background-code}; + + border: 1px solid; + + // Using '.r-s' + border-radius: calc(#{$border-base-radius} * 0.75); + + // Using the middle of '.px-xs' and '.px-s' + padding-left: calc(#{$border-base-radius} * 0.625); + padding-right: calc(#{$border-base-radius} * 0.625); +} + +// Removes the background added by highlight.js +.code-line { + background: rgba(0,0,0,0) !important; +} + +code, .code, .code-line { + line-height: 1.35; +} + +// FIXME: Use a proper class !!! +.code:not(code) { + padding: calc(#{$border-base-radius} * 0.625); +} diff --git a/scss/site/content.scss b/scss/site/content.scss new file mode 100644 index 0000000..62c433a --- /dev/null +++ b/scss/site/content.scss @@ -0,0 +1,37 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +.content-search-entry { + min-height: #{$content-search-image-size}; +} + +.content-search-image { + width: #{$content-search-image-size}; + height: #{$content-search-image-size}; + float: left; + filter: drop-shadow(0 0 0.2rem #000000CF); +} + +.content-search-entry > p { + width: 90%; + //max-width: 800px; +} + +.content-error-text { + max-width: 700px; +} + +// Image shown in the smaller inline content cards +.content-card-image { + width: calc(#{$content-search-image-size} * 0.75); + height: calc(#{$content-search-image-size} * 0.75); + float: left; + //filter: drop-shadow(0 0 0.2rem #000000CF); + //box-shadow: 0px 0px 20px 2px #000000CF inset; +} + +// Should be a span with IMG tags inside it. +.app-card-icons { + &>img { + height: 1.25rem; + } +} diff --git a/scss/site/hr.scss b/scss/site/hr.scss new file mode 100644 index 0000000..6ab5628 --- /dev/null +++ b/scss/site/hr.scss @@ -0,0 +1,54 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Site > Elements > Horizontal Rule */ + +hr { + border-color: #{$color-border-all}; + + &.subtle, &.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.2; + } + + &.dashed, &.hr-dashed { + border-style: dashed; + } + + &.dotted, &.hr-dotted { + border-style: dotted; + } + + &.double, &.hr-double, &.thick, &.hr-thick { + border-style: double; + } + + // Default ! + //&.inset, &.inset { + // border-style: inset; + //} + + &.outset, &.hr-outset { + border-style: outset; + } + + &.cut-here, &.ht-cut-here { + border-width: 1px 0 0 0; + height: 9px; + + &:after { + content: '\002702'; + display: inline-block; + position: relative; + color: #{$color-border-all}; + font-size: 18px; + top: -8px; + left: 40px; + + font-family: serif; + //filter: grayscale(1); + //transform: rotate(-90deg); + } + } +} diff --git a/scss/site/image.scss b/scss/site/image.scss new file mode 100644 index 0000000..a8e8d09 --- /dev/null +++ b/scss/site/image.scss @@ -0,0 +1,127 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +.img-text { + height: 1em; + vertical-align: top; +} + +.btn-img { + display: flex; + height: 1em; +} + +.img-showcase { + width: 96px; + height: 96px; +} + +.img-profile { + width: 7.5rem; + height: 7.5rem; +} + +.img-contributor, .img-contributor > img { + width: 6rem; + height: 6rem; + + border-radius: 50%; + + transition: width 0.175s ease-in-out, height 0.175s ease-in-out, opacity 0.175s ease-in-out; + + &:hover, &:hover > img { + width: 7.5rem; + height: 7.5rem; + } + + &.kitty { + cursor: grab; + } +} + +.img-contributor { + display: inline-block; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.75); + + &>img { + position: absolute; + + &:last-child { + box-shadow: none; + position: relative; + opacity: 0.0; + } + } + + &:hover { + img { + opacity: 0.0; + } + &>img:last-child { + opacity: 1.0; + } + } +} + +//.align-v-t + +#logo-sidebar, .logo-sidebar { + 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; +} + +// Based on '#logo-sidebar' +.logo-sidebar-v2 { + filter: drop-shadow(0 0 0.15rem #0000007F) saturate(75%); + width: 13rem; + height: auto; + + transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter; + transition-duration: 0.4s; + transition-timing-function: cubic-bezier(.25, .8, .25, 1.1); + + &:hover { + filter: drop-shadow(0 0 0.15rem #0000007F) saturate(100%); + } + +} + +#logo-footer { + filter: brightness(110%) grayscale(100%); + opacity: 40%; + height: 1.8em; + object-fit: contain; +} + +#error-page-skit { + max-width: 40%; + height: auto; + position: absolute; + bottom: 1.5em; + right: 1.5em; + filter: drop-shadow(0 0 0.25rem #0000007F); + //opacity: 0.25; + + //mix-blend-mode: multiply; + //opacity: 0.2; + + opacity: 0.4; + + // Preventing the selection and dragging of the image for aesthetic reasons. + user-drag: none; + user-select: none; +} + +// Logo colors +//.npl1, .npl6 { +//} +// +//.npl2, .npl5 { +//} +// +//.npl3, .npl4 { +//} + diff --git a/scss/site/input.scss b/scss/site/input.scss new file mode 100644 index 0000000..1af8a28 --- /dev/null +++ b/scss/site/input.scss @@ -0,0 +1,140 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +/* Site > Elements > Inputs */ + +/* Site > Elements > Inputs > Commons */ + +button, input, textarea, select { + border: 0; + + // Removing ugly-ass white glow when editing text-related inputs. + // Shit looks straight out of winforms in 2023... + outline: none; + + color: #{$color-text-inputs}; + background-color: #{$color-background-inputs}; + + &:not(.no-focus) { + &:focus { + box-shadow: 0px 0px 3px 0px #{$color-input-glow}; + } + } + + &:disabled { + cursor: not-allowed; + } +} + +label { + cursor: pointer; + user-select: none; +} + +/* Site > Elements > Inputs > Checkbox */ + +input[type=checkbox] { + width: 1.65em; + height: 1.65em; + background-color: #{$color-background-checkbox-unchecked}; + + cursor: pointer; + + &:checked { + background-color: #{$color-background-checkbox-checked}; + } + + position: relative; + vertical-align: middle; +} +input[type="checkbox"] + label { + position: relative; + display: inline-block; + vertical-align: middle; +} + +/* Site > Elements > Inputs > Buttons */ + +button { + cursor: pointer; + background-color: #{$color-background-button}; + + &:hover { + background-color: #{$color-background-button-hover}; + } + + &.primary { + background-color: #{$color-background-button-primary}; + + &:hover { + background-color: #{$color-background-button-primary-hover}; + } + } + + &.success { + background-color: #{$color-background-button-success}; + + &:hover { + background-color: #{$color-background-button-success-hover}; + } + } + + &.error { + background-color: #{$color-background-button-error}; + + &:hover { + background-color: #{$color-background-button-error-hover}; + } + } + + &.warning { + background-color: #{$color-background-button-warning}; + + &:hover { + background-color: #{$color-background-button-warning-hover}; + } + } +} + +// 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; + //} +} + +textarea { + + &.no-resize { + resize: none; + } +} \ No newline at end of file diff --git a/scss/site/layouts/commons.scss b/scss/site/layouts/commons.scss new file mode 100644 index 0000000..082d0c9 --- /dev/null +++ b/scss/site/layouts/commons.scss @@ -0,0 +1,15 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Site > Layouts */ + +/* Site > Layouts > Commons */ + +html, body { + // Do not use 100vh, it includes the search bar ! + min-width: 100vw; + min-height: 100%; + width: 100vw !important; + height: 100% !important; + max-width: 100vw; + max-height: 100%; +} diff --git a/scss/site/layouts/generic.scss b/scss/site/layouts/generic.scss new file mode 100644 index 0000000..d76a541 --- /dev/null +++ b/scss/site/layouts/generic.scss @@ -0,0 +1,161 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Site > Layouts > Generic */ + +/* Site > Layouts > Generic > Main Grid */ + +body.layout-generic { + 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 > Layouts > Generic > Mobile Fixes */ + +@media only screen and (max-width: 768px) { + body.layout-generic { + & > nav { + //border-right: 1px solid #{$color-border-all}; + border-right: 1px solid #{$color-border-main}; + } + + & > header { + grid-column: 1 / span 2; + } + + & > main { + grid-column: 1 / span 2; + // TODO: Remove scrolling here + } + } +} + + +/* Site > Layouts > Generic > Sidebar */ + +body.layout-generic { + .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 > Layouts > Generic > Sidebar > Mobile Fixes */ + +// Inverting the sidebar's states for mobile devices +@media only screen and (max-width: 768px) { + body.layout-generic { + .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 > Layouts > Generic > Main Extras */ + +@media only screen and (max-width: 768px) { + body.layout-generic { + main { + border-left: 0 !important; + border-radius: 0 !important; + } + } +} + +@media only screen and (min-width: 768px) { + body.layout-generic { + main { + &.expanded { + border-left: 0; + border-radius: 0; + } + } + } +} + + +/* Site > Layouts > Generic > Transitions */ + +body.layout-generic { + 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); + } +} diff --git a/scss/site/mobile.scss b/scss/site/mobile.scss new file mode 100644 index 0000000..c3e3174 --- /dev/null +++ b/scss/site/mobile.scss @@ -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; + } +} diff --git a/scss/site/modal.scss b/scss/site/modal.scss new file mode 100644 index 0000000..14335cf --- /dev/null +++ b/scss/site/modal.scss @@ -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%; +} diff --git a/scss/site/scrollbar.scss b/scss/site/scrollbar.scss new file mode 100644 index 0000000..6d32508 --- /dev/null +++ b/scss/site/scrollbar.scss @@ -0,0 +1,62 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +/* Site > Elements > Scrollbars */ + +//@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; + } +}*/ diff --git a/scss/site/splide.scss b/scss/site/splide.scss new file mode 100644 index 0000000..3dc4af1 --- /dev/null +++ b/scss/site/splide.scss @@ -0,0 +1,16 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Extras > Splide */ + +// Zoom-in effect for image galleries +.splide li { + transition: all 0.20s ease-in-out; +} +.splide li:hover { + transform: scale(1.05); +} + +// Generic max-height rule +.splide, .splide * { + max-height: 400px; +} diff --git a/scss/site/table.scss b/scss/site/table.scss new file mode 100644 index 0000000..f1d4c93 --- /dev/null +++ b/scss/site/table.scss @@ -0,0 +1,56 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +tr, td { + vertical-align: top; +} + +table.stylish { + th { + font-weight: bold; + } + + tr { + background-color: #{$color-background-table-dual}; + } + + tr:not(:last-of-type), th { + border-bottom: 1.5px solid #{$color-table-border}; + } + + tr:nth-child(2n), th { + background-color: #{$color-background-table-main}; + } + + td:not(:last-of-type), th:not(:last-of-type) { + border-right: 1.5px solid #{$color-table-border}; + } + + // See 'site/border.scss' for border fix. +} + +// Applying .p-xs and .p-s to all cells if needed +// See 'core/spacing' for more info. +.table-p-xs { + td, th { + padding: calc(#{$margin-base-size} * 0.5); + } +} + +.table-h-p-s { + th { + padding: calc(#{$margin-base-size} * 0.75); + } +} + +.table-p-s { + td, th { + padding: calc(#{$margin-base-size} * 0.75); + } +} + +// Centers the cells' content vertically +.table-v-center { + tr, td { + vertical-align: middle; + } +} diff --git a/scss/site/text.scss b/scss/site/text.scss new file mode 100644 index 0000000..3f73a25 --- /dev/null +++ b/scss/site/text.scss @@ -0,0 +1,122 @@ +// NibblePoker.lu CSS - MIT (C) 2023-2024 Bozet Herwin + +/* Site > Text */ + +/* Site > Text > Commons */ + +* { + color: #{$color-text-regular-normal}; +} + + +/* Site > Text > Paragraphs */ + +p { + line-height: 1.2; +} + + +/* Site > Text > Links */ + +a, .a { + // Base + text-decoration: underline; + color: #{$color-link-blue}; + + & * { + color: #{$color-link-blue}; + } + + &:hover { + color: #{$color-link-blue-hover}; + cursor: pointer; + + & * { + color: #{$color-link-blue-hover}; + text-decoration: underline; + } + } + + // Special case for buttons + //&.casper-link, &.button-link, &.text-link { + &.a-bland { + text-decoration: none; + &:hover { + text-decoration: none; // Only really applies to content listing entries... + & * { + text-decoration: none; + } + } + } + + // Bland links + //&.casper-link, &.bland-link { + &.a-hidden { + 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; + //} + } + } +} + + +/* Site > Text > Targeted Rules */ + +.t-logo-text { + font-size: 1.775em; + line-height: 1; +} + +/* Site > Text > Targeted Rules > Sidebar */ +// Special rules for the sidebar and FontAwesome icons + +.sidebar-entry { + i { + width: 1.9rem !important; + // Required to prevent a size flicker when hiding/showing the sidebar. + // The about link is the most visible one. + min-width: 1.9rem !important; + } + + // Preventing a subtle line break when hiding/showing the sidebar. + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + // Doesn't work, even with hyper-specific parent selectors... + //> i, > i:hover { + // text-decoration: none !important; + //} +} + +/* Site > Text > Targeted Rules > Headings */ + +// And now for the headings, the exceptions keep popping up :,) +// TODO: Add a simple and nicer divider. +.heading-main { + > h2, > h3, >h4 { + > i { + //margin-left: 0.25rem; + margin-right: 0.4rem; + padding-right: 0.1rem; + width: 1.75rem !important; + text-align: center; + } + } +} diff --git a/scss/site/video.scss b/scss/site/video.scss new file mode 100644 index 0000000..601506b --- /dev/null +++ b/scss/site/video.scss @@ -0,0 +1,9 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) + +/* Site > Elements > Video */ + +// FIXME: Does not respect the core tenets ! +video { + width: 100% !important; + height: auto !important; +} diff --git a/scss/site/wedge.scss b/scss/site/wedge.scss new file mode 100644 index 0000000..290c5d0 --- /dev/null +++ b/scss/site/wedge.scss @@ -0,0 +1,78 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +/* Custom Elements > Wedge */ + +.wedge { + position: absolute; + //top: 0; + //right: 0; + + color: #{$color-text-regular-normal}; + background-color: #{$color-background-button}; + + user-select: none; + cursor: pointer; + + //opacity: 0.875; + + // https://codepen.io/setswon/pen/VJeXXq + // Using a value of ~0.35 feels sluggish. + //transition: color 0.25s ease; + //transition-timing-function: cubic-bezier(.47,1.64,.41,.8); + + &:hover:not(.no-hover) { + background-color: #{$color-background-button-hover}; + } + + &.wedge-shadow { + box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); + } + + &.primary { + background-color: #{$color-background-button-primary}; + &:hover:not(.no-hover) { + background-color: #{$color-background-button-primary-hover}; + } + } + + &.success { + background-color: #{$color-background-button-success}; + &:hover:not(.no-hover) { + background-color: #{$color-background-button-success-hover}; + } + } + + &.error { + background-color: #{$color-background-button-error}; + &:hover:not(.no-hover) { + background-color: #{$color-background-button-error-hover}; + } + } + + &.warning { + background-color: #{$color-background-button-warning}; + &:hover:not(.no-hover) { + background-color: #{$color-background-button-warning-hover}; + } + } + + &.wedge-tr { + top: 0; + right: 0; + } + + &.wedge-br { + bottom: 0; + right: 0; + } + + &.wedge-tl { + top: 0; + left: 0; + } + + &.wedge-bl { + bottom: 0; + left: 0; + } +} diff --git a/scss/variables.scss b/scss/variables.scss new file mode 100644 index 0000000..ebe38e7 --- /dev/null +++ b/scss/variables.scss @@ -0,0 +1,315 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) +@use 'sass:color'; + +/* Variables > Palettes */ + +/* Variables > Palettes > Apollo */ +// https://lospec.com/palette-list/apollo +$color-apollo-00: #172038; +$color-apollo-01: #253a5e; +$color-apollo-02: #3c5e8b; +$color-apollo-03: #4f8fba; +$color-apollo-04: #73bed3; +$color-apollo-05: #a4dddb; +$color-apollo-06: #19332d; +$color-apollo-07: #25562e; +$color-apollo-08: #468232; +$color-apollo-09: #75a743; +$color-apollo-10: #a8ca58; +$color-apollo-11: #d0da91; +$color-apollo-12: #4d2b32; +$color-apollo-13: #7a4841; +$color-apollo-14: #ad7757; +$color-apollo-15: #c09473; +$color-apollo-16: #d7b594; +$color-apollo-17: #e7d5b3; +$color-apollo-18: #341c27; +$color-apollo-19: #602c2c; +$color-apollo-20: #884b2b; +$color-apollo-21: #be772b; +$color-apollo-22: #de9e41; +$color-apollo-23: #e8c170; +$color-apollo-24: #241527; +$color-apollo-25: #411d31; +$color-apollo-26: #752438; +$color-apollo-27: #a53030; +$color-apollo-28: #cf573c; +$color-apollo-29: #da863e; +$color-apollo-30: #1e1d39; +$color-apollo-31: #402751; +$color-apollo-32: #7a367b; +$color-apollo-33: #a23e8c; +$color-apollo-34: #c65197; +$color-apollo-35: #df84a5; +$color-apollo-36: #090a14; +$color-apollo-37: #10141f; +$color-apollo-38: #151d28; +$color-apollo-39: #202e37; +$color-apollo-40: #394a50; +$color-apollo-41: #577277; +$color-apollo-42: #819796; +$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%); +$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%); + +$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%); + +$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%); + +$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button +$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover + +/* Variables > Palettes > Material UI */ +// https://materialui.co/colors + +$color-material-blueGrey-50: #eceff1; +$color-material-blueGrey-100: #cfd8dc; +$color-material-blueGrey-200: #b0bec5; +$color-material-blueGrey-300: #90a4ae; +$color-material-blueGrey-400: #78909c; +$color-material-blueGrey-500: #607d8b; +$color-material-blueGrey-600: #546e7a; +$color-material-blueGrey-700: #455a64; +$color-material-blueGrey-800: #37474f; +$color-material-blueGrey-900: #263238; + +$color-material-blueGrey-1000: #151D21; +$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%); +//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%); +$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%); + +/* Variables > Palettes > WinUI 3 */ + +$color-winui-00: #191919; +$color-winui-01: #1D1D1D; +$color-winui-02: #202020; +$color-winui-03: #232323; +$color-winui-04: #272727; +$color-winui-05: #323232; +$color-winui-06: #3E3E3E; + +// https://flatuicolors.com/palette/defo + +/* Variables > Palettes > Misc */ + +//$color-test-01: mix(#7b6aa5, #000000, 33%); +//$color-test-02: #007c7d; + +/* Variables > Colors Mappings */ + +$color-unset: $color-apollo-34; + +/* Variables > Theme selection */ + +// Available themes: +// * Teal Supreme (teal) +// * WinUI 3 (winui) +// * La Moiti Leune (moon) +// * NibblePoker (nibblepoker) +$theme: nibblepoker; + +/* Variables > Colors Mappings > Backgrounds & Borders */ + +$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); + + +// FIXME: Remove its usage ! +// Left: Code, Kbd, Scrollbar ??? +$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, + nibblepoker: $color-border-surround, +), $theme); + +// TEMP !!! +$color-border-all: $color-border-main; + +$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); + + +$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); + +// TODO: Implement better ones ! +$color-background-checkbox-checked: $color-apollo-08; +$color-background-checkbox-unchecked: $color-apollo-27; + +$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: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%); + +$color-background-button-success: #{$color-apollo-07}; +$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}; + +$color-background-button-warning: #{$color-apollo-20}; +$color-background-button-warning-hover: #{$color-apollo-21}; + + + +/* Variables > Colors Mappings > Text */ + +$color-text-regular-normal: $color-apollo-45; +$color-text-inputs: $color-apollo-45; +$color-text-muted: #{$color-apollo-45}E0; +$color-text-muted-super: #{$color-apollo-45}C0; + +$color-link-hover: rgb(253, 255, 251); + +// Should be a mix of 03-04 and 04-05. +$color-link-blue: #{$color-apollo-04}; +$color-link-blue-hover: #{$color-apollo-05}; + +//$color-border-all: $color-apollo-38; +//$color-border-light: $color-apollo-custom-20; + +$color-input-glow: $color-apollo-02; + +//$color-wedge-blue-background: $color-apollo-03; + +// Still used for wedges !!! - Nope, it looked bad with the new colors ! +//$color-wedge-blue-border: $color-apollo-02; + +//$color-background-body: $color-apollo-custom-00; +//$color-background-main: $color-apollo-custom-02; +//$color-background-surround: $color-apollo-custom-00; +// +//// TMP V2 +//$color-background-body: $color-material-blueGrey-900; +//$color-background-main: $color-material-blueGrey-950; +//$color-background-surround: $color-material-blueGrey-900; + + +/* Variables > Scrollbar */ + +//$color-scrollbar-border: rgba(0, 0, 0, 0.15); +$color-scrollbar-border: $color-border-surround; + +$scrollbar-size: 1.25em; + +/* Variables > Others */ + +$border-base-radius: 5px; + +$margin-base-size: 1rem; + +$grid-gap-base-size: 1rem; + +//$hr-base-height: 0.5rem; // Nope + +$text-header-weight: 600; + +$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; diff --git a/setup.cmd b/setup.cmd new file mode 100644 index 0000000..56ebc1e --- /dev/null +++ b/setup.cmd @@ -0,0 +1,45 @@ +@echo off +setlocal enabledelayedexpansion + +:: Going into the script's directory +cd /D "%~dp0" + + +:setup +echo. +echo Setting up your system +echo ---------------------- + +:setup-npm +echo Updating NPM... +pushd %CD% +call npm update -g npm +popd + +:setup-sass +echo Installing SASS... +pushd %CD% +call npm install -g sass +popd +:setup-sass-update +echo Updating SASS... +pushd %CD% +call npm update -g sass +popd + +:setup-html-minify +echo Installing HTML Minifier... +pushd %CD% +call npm install -g html-minifier +popd + +:setup-html-minify-update +echo Updating HTML Minifier... +pushd %CD% +call npm update -g html-minifier +popd + +:setup-end + + +:end