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