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