andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1 from 30-seconds/master

Browse Source 
update
This commit is contained in:
Henry
2018-10-08 21:44:58 +08:00
committed by GitHub
parent 96057709a1 8ac2ce645e
commit a2e49e3ba7
1247 changed files with 50111 additions and 9095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
.codeclimate.yml Normal file
View File

@ -0,0 +1,45 @@
version: "2" # required to adjust maintainability checks
plugins:
eslint:
enabled: true
markdownlint:
enabled: true
# initial: .mdlrc
# config: .mdlrc.style.rb
fixme:
enabled: true
checks:
argument-count:
config:
threshold: 4
complex-logic:
config:
threshold: 4
file-lines:
config:
threshold: 250
method-complexity:
config:
threshold: 5
method-count:
config:
threshold: 20
method-lines:
config:
threshold: 25
nested-control-flow:
config:
threshold: 4
return-statements:
config:
threshold: 4
similar-code:
config:
threshold: # language-specific defaults. an override will affect all languages.
identical-code:
config:
threshold: # language-specific defaults. an override will affect all languages
exclude_patterns:
- "locale/"
- "**/test/"
- "dist/"

25
.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,25 +0,0 @@
<!--- Provide a general summary of the issue in the Title above -->
<!--- Add the prefix [BUG] or [FEATURE] to the Title -->
<!--- In case it's a feature suggestion, otherwise delete this section -->
<!--- Make sure there isn't already a snippet accomplishing your goal -->
## [FEATURE] _REPLACE THIS WITH A BRIEF SUMMARY OF THE SUGGESTED SNIPPET_
**Category:** <!-- One of the existing categories preferably -->
### Description <!-- IF NEEDED -->
<!-- More detailed description of the snippet you want to be included in 30-seconds-of-code -->
<!--- In case it's a bug, otherwise delete this section-->
<!--- Make sure there isn't already an open issue for your problem -->
## [BUG] _REPLACE THIS WITH A BRIEF SUMMARY OF YOUR ISSUE_
### Expected Snippet Behavior
<!--- If you're describing a bug, tell us what should happen -->
<!--- If you're suggesting a change/improvement, tell us how it should work -->
### Current Snippet Behavior
<!--- If describing a bug, tell us what happens instead of the expected behavior -->
<!--- If suggesting a change/improvement, explain the difference from current behavior -->
### Possible Solution
<!--- Not obligatory, but suggest a fix/reason for the bug, -->
<!--- or ideas how to implement the addition or change -->

20
.github/ISSUE_TEMPLATE/bug-report.md vendored Normal file
View File

@ -0,0 +1,20 @@
---
name: Bug report
about: Create a report to help us improve
---
## Bug description
<!-- A clear and concise description of what the bug is. -->
## Steps to reproduce
<!-- Where did you encounter the bug/What code caused the bug to appear? -->
## Expected behavior
<!-- A clear and concise description of what you expected to happen. -->
## Screenshots
<!-- If applicable, add screenshots to help explain your problem. -->
## Environment
<!-- Provide some information about your OS, Browser or mobile device (if applicable). -->

8
.github/ISSUE_TEMPLATE/discussion.md vendored Normal file
View File

@ -0,0 +1,8 @@
---
name: Discussion
about: Discuss something with us
---
## Description
<!-- A clear and concise description of what you want to discuss. -->

9
.github/ISSUE_TEMPLATE/feature_request.md vendored Normal file
View File

@ -0,0 +1,9 @@
---
name: Feature request
about: Suggest an idea for this project
---
## Description
<!-- A clear and concise description of what you want to happen. -->
<!-- Provide sample code, useful information, possible solutions and examples whenever possible. -->

44
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -1,36 +1,16 @@
<!--- Provide a general summary of your changes in the Title above -->
<!--- Add the prefix [FIX: #(issue number)], [FEATURE] or [ENHANCEMENT] to the Title -->
<!-- Use a descriptive title, prefix it with [FIX], [FEATURE] or [ENHANCEMENT] if applicable (use only one) -->
## Description
<!--- Describe your changes in detail -->
**Resolves** #(issue number) <!--- Delete if not a issue fix-->
<!-- Write a detailed description of your changes/additions here -->
<!-- If your PR resolves an issue, please state "Resolves #(issue number)" to help maintainers process it faster -->
<!-- If you think your PR will cause breaking changes, require changes in the documentation etc, please be so kind as to explain what, where and how -->
<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description -->
**Lodash[ACTION]** #100 -> https://lodash.com/docs/4.17.4#(method) <!--- Delete if not a Lodash[ADD OR UPDATE] -->
## PR Type
- [ ] Snippets, Tests & Tags (new snippets, updated snippets, re-tagging of snippets, added/updated tests)
- [ ] Scripts & Website & Meta (anything related to files in the [scripts folder](https://github.com/30-seconds/30-seconds-of-code/tree/master/scripts), how the repository's automated procedures work and the website)
- [ ] Glossary & Secondary Features (anything related to the glossary, such as new or updated terms or other secondary features)
- [ ] General, Typos, Misc. & Meta (everything else, typos, general stuff and meta files in the repository - e.g. the issue template)
## What does your PR belong to?
- [ ] Website
- [ ] Snippets
- [ ] General / Things regarding the repository (like CI Integration)
## Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] Enhancement (non-breaking improvement of a snippet)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
## [Lodash Backlog](https://github.com/Chalarangelo/30-seconds-of-code/issues/100)
<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description above -->
<!--- Add the prefix [UPDATE: `method.md`] or [ADD: `method.md`] to the Title & Desciption -->
- [ ] I added the prefix [UPDATE: `method.md`] or [ADD: `method.md`]
- [ ] I have referenced the `method` to the lodash backlog.
## Checklist:
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have checked that the changes are working properly
- [ ] I have checked that there isn't any PR doing the same
- [ ] I have read the **CONTRIBUTING** document.
## Guidelines
- [ ] I have read the guidelines in the [CONTRIBUTING](https://github.com/30-seconds/30-seconds-of-code/blob/master/CONTRIBUTING.md) document.
- [ ] My PR doesn't include any `testlog` changes.

8
.gitignore vendored
View File

@ -3,4 +3,10 @@ currentSnippet\.js
*.md.temp.js
.idea
test.sh
test/
/*.log
dist/flavor\.min\.css
dist/flavor\.css
test_old/

12
.mdlrc Normal file
View File

@ -0,0 +1,12 @@
rules "MD003", // header style - atx
"MD004", // ul list style - asterisk
"MD009", // no trailing whitespaces
"MD010", // no hard tabs
"MD011", // no reversed links
"MD018", // no space after hash on atx style header
"MD023", // headers should start on the start of the line
"MD025", // no multiple h1 headers
"MD031", // blanks around fences
"MD038", // no spaces inside code elements
"MD040" // fenced code blocks need to have a language specified
style ".mdlrc.style.rb"

7
.mdlrc.style.rb Normal file
View File

@ -0,0 +1,7 @@
all
rule 'header-style', :style => "atx"
rule 'ul-style', :style => "asterisk"
exclude_rule 'first-header-h1'
exclude_rule 'first-line-h1'
exclude_rule 'no-inline-html'

19
.npmignore Normal file
View File

@ -0,0 +1,19 @@
snippet-template.md
tag_database
travis.log
CONTRIBUTING.md
COLLABORATING.md
CODE_OF_CONDUCT.md
.travis.yml
.mdlrc.style.rb
.mdlrc
.codeclimate.yml
test/*
static-parts/*
snippet_data/*
snippets_archive/*
scripts/*
locale/*
docs/*
.travis/*
.github/*

8
.travis.yml
View File

@ -10,9 +10,13 @@ before_install:
script:
- npm run tagger
- npm run linter
- npm run builder
- npm run webber
- npm run module
- npm run builder
- npm run packager
- npm run tester
- npm run extractor
- npm run glossary:keymaker
- npm run glossary:librarian
after_success:
- chmod +x .travis/push.sh
- .travis/push.sh

3
.travis/push.sh
View File

@ -1,3 +1,4 @@
#!/bin/bash
setup_git() {
git config --global user.email "30secondsofcode@gmail.com"
git config --global user.name "30secondsofcode"
@ -24,7 +25,7 @@ upload_files() {
if [ $TRAVIS_EVENT_TYPE != "pull_request" ]; then
if [ $TRAVIS_BRANCH == "master" ]; then
echo "Pushing to master branch..."
git push --force --quiet "https://${GH_TOKEN}@github.com/Chalarangelo/30-seconds-of-code.git" master > /dev/null 2>&1
git push --force --quiet "https://${GH_TOKEN}@github.com/30-seconds/30-seconds-of-code.git" master > /dev/null 2>&1
fi
fi
}

2
CODE_OF_CONDUCT.md
View File

@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at chalarangelo@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at 30secondsofcode@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

10
COLLABORATING.md
View File

@ -8,17 +8,17 @@ As a member of the team that manages **30 seconds of code**, you have the follow
- **Be part of the conversation in the issue tracker.** That includes (but is not limited to) helping out new members, discussing new features and explaining decisions to people.
- **Review pull requests.** You do not have to read through all of the pull requests and review them, but taking the time each day to review a few can help a great deal.
- **Be civil and polite.** If you are about to lose your temper, take a step back and go do something else. We want our interactions with the community to be polite, so that more people can join the project and contribute in any way they can. Remember to always thank contributors for their help, even if it's minor changes or changes that did not make it into the project. This way we can reward and encourage people to keep being part of the community.
- **Be civil and polite.** If you are about to lose your temper, take a step back and do something else. We want our interactions with the community to be polite so that more people can join the project and contribute in any way they can. Remember to always thank contributors for their help, even if it's minor changes or changes that did not make it into the project. This way we can reward and encourage people to keep being part of the community.
- **Contribute when you want, moderate when you can.** If you have a lot on your plate outside of this project, it's alright. It's better to take a break for a few days rather than hastily deal with issues and pull requests that might break things.
## Guidelines for merging pull requests and making changes to the project
- **[Usual guidelines](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md) apply.** Make sure to follow them, like everybody else.
- **[Usual guidelines](https://github.com/30-seconds/30-seconds-of-code/blob/master/CONTRIBUTING.md) apply.** Make sure to follow them, like everybody else.
- **For a pull request to be considered ready to merge, there should be at least 2 (preferably 3) reviews approving it for merge.** There are, however, certain exceptions:
- **If a pull request only fixes typos**, there is no need to wait for a second reviewer (unless you are not absolutely certain these were not typos in the first place).
- **If a pull request only clarifies a snippet's description or enforces the styleguide for an existng snippet**, you might be able to merge it without getting a second reviewer to review it, but only if you are absolutely certain about it.
- **If a pull request only fixes typos**, there is no need to wait for a second reviewer (unless you are not certain these were not typos in the first place).
- **If a pull request only clarifies a snippet's description or enforces the style guide for an existing snippet**, you might be able to merge it without getting a second reviewer to review it, but only if you are certain about it.
- **Make sure pull requests pass the Travis CI build**, otherwise try and find out what's wrong and inform the author of the pull request.
- **Changes to build scripts, guidelines and things that might break the processes we have in place need to be reviewed by [@Chalarangelo](https://github.com/Chalarangelo)** (this is temporary, but we need a baseline to make sure we break as few things as possible in the beginning).
- **After merging a pull request, make sure to check for untagged snippets and tag them appropriately.** Try to keep all snippets tagged, so that the list and website are up to date.
- **If you make changes or additions to existing snippets or if you want to add you own snippets, you will go through the pull request process that everyone else goes.** Exceptions apply similarly to the ones mentioned above about merging pull requests (i.e. typos, description clarification and the way script and build process changes are handled). Pull requests suggested by collaborators should be reviewed by at least two other collaborators to be considered ready to merge.
- **If you make changes or additions to existing snippets or if you want to add your own snippets, you will go through the pull request process that everyone else goes.** Exceptions apply similarly to the ones mentioned above about merging pull requests (i.e. typos, description clarification and the way script and build process changes are handled). Pull requests suggested by collaborators should be reviewed by at least two other collaborators to be considered ready to merge.
- **Pull requests that are inactive for over a week should be closed or put on hold.**

46
CONTRIBUTING.md
View File

@ -1,23 +1,23 @@
## Contributing
![contribution guidelines](https://i.imgur.com/8Wk9nat.png)
**30 seconds of code** is a community effort, so feel free to contribute in any way you can. Every contribution helps!
Here's what you can do to help:
- [Open issues](https://github.com/Chalarangelo/30-seconds-of-code/issues/new) for things you want to see added or modified.
- Be part of the discussion by helping out with [existing issues](https://github.com/Chalarangelo/30-seconds-of-code/issues) or talking on our [gitter channel](https://gitter.im/30-seconds-of-code/Lobby).
- Submit [pull requests](https://github.com/Chalarangelo/30-seconds-of-code/pulls) with snippets you have created (see below for guidelines).
- Tag uncategorized snippets by running `npm run tagger` and adding the appropriate tag next to the script name in `tag_database`.
- Submit [pull requests](https://github.com/30-seconds/30-seconds-of-code/pulls) with snippets and tests that you have created (see below for guidelines).
- [Open issues](https://github.com/30-seconds/30-seconds-of-code/issues/new) for things you want to see added or modified.
- Be part of the discussion by helping out with [existing issues](https://github.com/30-seconds/30-seconds-of-code/issues) or talking on our [gitter channel](https://gitter.im/30-seconds-of-code/Lobby).
- Tag uncategorized snippets by running `npm run tagger` and adding the appropriate tags next to the script name in `tag_database`.
- Fix typos in existing snippets, improve snippet descriptions and explanations or provide better examples.
- Write tests for existing snippets (see below for guidelines).
### Snippet submission and Pull request guidelines
- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run builder` to update the README.md file automatically, based on the changes you have made.
- **DO NOT MODIFY THE index.html FILE!** Make changes to individual snippet files. You can optionally run `npm run webber` to update the index.md file automatically, based on the changes you have made.
- **DO NOT MODIFY THE README.md or index.html FILES!** Make changes to individual snippet files. **Travis CI** will automatically build the `README.md` and `index.html` files when your pull request is merged.
- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `### awesomeSnippet` the filename should be `awesomeSnippet.md`.
- Use `camelCase`, not `kebab-case` or `snake_case`.
- Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title).
- **Snippet titles** should have be the same as the name of the function that is present in the snippet.
- **Snippet titles** should be the same as the name of the function that is present in the snippet.
- All snippet titles must be prefixed with `###` and be at the very first line of your snippet.
- Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out).
- Follow snippet titles with an empty line.
@ -26,7 +26,7 @@ Here's what you can do to help:
- **Snippet code** must be enclosed inside ` ```js ` and ` ``` `.
- Remember to start your snippet's code on a new line below the opening backticks.
- Use ES6 notation to define your function. For example `const myFunction = ( arg1, arg2 ) => { }`.
- Please use Javacript [Semi-Standard Style](https://github.com/Flet/semistandard).
- Please use Javascript [Semi-Standard Style](https://github.com/Flet/semistandard).
- Try to keep your snippets' code short and to the point. Use modern techniques and features. Make sure to test your code before submitting.
- All snippets must be followed by one (more if necessary) test case after the code, in a new block enclosed inside ` ```js ` and ` ``` `. The syntax for this is `myFunction('testInput') // 'testOutput'`. Use multiline examples only if necessary.
- Try to make your function name unique, so that it does not conflict with existing snippets.
@ -36,11 +36,23 @@ Here's what you can do to help:
- Snippets *should* be abstract enough to be applied to different scenarios.
- It is not mandatory but highly appreciated if you provide **test cases** and/or performance tests (we recommend using [jsPerf](https://jsperf.com/)).
- You can start creating a new snippet, by using the [snippet template](snippet-template.md) to format your snippets.
- Updating the index.html or README.md files should only be done by altering the scripts in the **scripts** folder or altering their relative static parts in the **static-parts** folder.
### Writing tests
- Before writing any tests run `npm run tester` script. It will update test directory to include new snippets as well as update old ones if needed.
- **DO NOT MODIFY THE snippetName.js files** under test directory.
- We are using [tape](https://github.com/substack/tape) for testing.
- Write tests under `snippetName.test.js` file. If you have trouble doing so, check out tests of other snippets.
- Be sure to run `npm run test`. It is going to run all tests for all snippets.
- Make a new pull request **only if all the tests are passing**.
#### Browser specific tests
- If your snippet belongs to `browser` category, then you will need to modify the tests to make them work.
- By default, `Node.js` isn't browser environment. That said we have to use an external package to help us simulate the browser for our tests.
- We use [jsdom](https://www.npmjs.com/package/jsdom) for our browser specific tests. You can find their [documentation](https://github.com/jsdom/jsdom) on GitHub as well.
### Additional guidelines and conventions regarding snippets
- When describing snippets, refer to methods, using their full name. For example, use `Array.reduce()`, instead of `reduce()`.
- When describing snippets, refer to methods, using their full name. For example, use `Array.prototype.reduce()`, instead of `reduce()`.
- If your snippet contains argument with default parameters, explain what happens if they are omitted when calling the function and what the default case is.
- If your snippet uses recursion, explain the base cases.
- Always use `const functionName` for function definitions.
@ -49,16 +61,16 @@ Here's what you can do to help:
- Try to give meaningful names to variables. For example use `letter`, instead of `lt`. Some exceptions to convention are:
- `arr` for arrays (usually as the snippet function's argument).
- `str` for strings.
- `n` for a numeric value (usually as the snippet function's argument).
- `num` or `n` for a numeric value (usually as the snippet function's argument).
- `el` for DOM elements (usually as the snippet function's argument).
- `val` or `v` for value (usually when iterating a list, mapping, sorting etc.).
- `acc` for accumulators in `Array.reduce()`.
- `(a,b)` for the two values compared when using `Array.sort()`.
- `acc` for accumulators in `Array.prototype.reduce()`.
- `(a,b)` for the two values compared when using `Array.prototype.sort()`.
- `i` for indexes.
- `func` for function arguments.
- `fn` for function arguments.
- `nums` for arrays of numbers.
- Use `()` if your function takes no arguments.
- Use `_` if an argument inside some function (e.g. `Array.reduce()`) is not used anywhere in your code.
- Use `_` if an argument inside some function (e.g. `Array.prototype.reduce()`) is not used anywhere in your code.
- Specify default parameters for arguments, if necessary. It is preferred to put default parameters last unless you have pretty good reason not to.
- If your snippet's function takes variadic arguments, use `...args` (although in certain cases, it might be needed to use a different name).
- If your snippet function's body is a single statement, omit the `return` keyword and use an expression instead.
@ -67,7 +79,7 @@ Here's what you can do to help:
- Always use single quotes for string literals. Use template literals, instead, if necessary.
- If your snippet's code is short enough (around 80 characters), you can make it a single-line function (although not mandatory). Otherwise, use multiple lines.
- Prefer using `Array` methods whenever possible.
- Prefer `Array.concat()` instead of `Array.push()` when working with `Array.reduce()`.
- Prefer `Array.prototype.concat()` instead of `Array.prototype.push()` when working with `Array.prototype.reduce()`.
- Use strict equality checking (`===` and `!==` instead of `==` and `!=`), unless you specifically have reason not to.
- Prefer using the ternary operator (`condition ? trueResult : falseResult`) instead of `if else` statements whenever possible.
- Avoid nesting ternary operators (but you can do it if you feel like you should).

6268
README.md
View File

File diff suppressed because it is too large Load Diff

1
advanced.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect height="20" rx="3" fill="#fff" width="64"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h65v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><text x="325" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="530">advanced</text><text x="325" y="140" transform="scale(.1)" textLength="530">advanced</text></g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

1493
dist/_30s.es5.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/_30s.es5.min.js vendored
View File

File diff suppressed because one or more lines are too long

879
dist/_30s.esm.js vendored
View File

File diff suppressed because it is too large Load Diff

879
dist/_30s.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/_30s.min.js vendored
View File

File diff suppressed because one or more lines are too long

121
docs/about.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>About - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
</head>
<body>
<a href="https://github.com/30-seconds/30-seconds-of-code"
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title">&nbsp;30
seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<main class="col-centered">
<span id="top"><br><br></span>
<h2 class="category-name">Our philosophy</h2>
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
<h2 class="category-name">Related projects</h2>
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
<ul>
<li><a href="https://30-seconds.github.io/30-seconds-of-css/">30 seconds of CSS</a></li>
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> <em>(unofficial)</em></li>
<li><a href="https://github.com/appzcoder/30-seconds-of-php-code">30 seconds of PHP</a> <em>(unofficial)</em></li>
</ul><br />
<h2 class="category-name">Maintainers</h2>
<div class="flex-row">
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
<a href="https://github.com/atomiks" class="section button">atomiks</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
</div>
</div>
</div>
<h2 class="category-name">Past maintainers</h2>
<div class="flex-row">
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
</div>
</div>
</div><h2 class="category-name">License</h2>
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
always credit us, but that is not mandatory.</p><br />
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
width="20px" height="20px" alt="DigitalOcean"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
<br />
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

161
docs/adapter.html Normal file
View File

File diff suppressed because one or more lines are too long

280
docs/archive.html Normal file
View File

File diff suppressed because one or more lines are too long

19
docs/array.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Array - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png">
<link rel="manifest" href="manifest.json">
<meta http-equiv="refresh" content="0; url=https://30secondsofcode.org">
</head></html>

385
docs/browser.html Normal file
View File

File diff suppressed because one or more lines are too long

71
docs/contributing.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Contributing - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
</head>
<body>
<a href="https://github.com/30-seconds/30-seconds-of-code"
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title">&nbsp;30
seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<main class="col-centered">
<span id="top"><br><br></span>
<h2 class="category-name">How to contribute</h2>
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p><br/>
<h3 class="category-name">1. Create</h3>
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
<ul style="text-align: justify">
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
<li>Use the snippet description to explain what your snippet does and how it works.</li>
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
<li>Remember to provide an example of how your snippet works.</li>
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
<li>Never modify README.md or any of the HTML files.</li>
</ul><br />
<h3 class="category-name">2. Tag</h3>
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p><br />
<h3 class="category-name">3. Test</h3>
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p><br />
<h3 class="category-name">4. Pull request</h3>
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p><br />
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
width="20px" height="20px" alt="DigitalOcean"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
<br />
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

162
docs/date.html Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docs/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

310
docs/function.html Normal file
View File

File diff suppressed because one or more lines are too long

79
docs/glossary.html Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/icons/chevron-left.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

1
docs/icons/chevron-right.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-right" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3l5 5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

1
docs/icons/code.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-code" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 234 B

1
docs/icons/dashboard.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-dashboard" aria-hidden="true"><path fill-rule="evenodd" d="M9 5H8V4h1v1zm4 3h-1v1h1V8zM6 5H5v1h1V5zM5 8H4v1h1V8zm11-5.5l-.5-.5L9 7c-.06-.02-1 0-1 0-.55 0-1 .45-1 1v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-.92l6-5.58zm-1.59 4.09c.19.61.3 1.25.3 1.91 0 3.42-2.78 6.2-6.2 6.2-3.42 0-6.21-2.78-6.21-6.2 0-3.42 2.78-6.2 6.2-6.2 1.2 0 2.31.34 3.27.94l.94-.94A7.459 7.459 0 0 0 8.51 1C4.36 1 1 4.36 1 8.5 1 12.64 4.36 16 8.5 16c4.14 0 7.5-3.36 7.5-7.5 0-1.03-.2-2.02-.59-2.91l-1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

1
docs/icons/git-branch.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="10" height="16" viewBox="0 0 10 16" class="octicon octicon-git-branch" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 805 B

1
docs/icons/law.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-law" aria-hidden="true"><path fill-rule="evenodd" d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

1
docs/icons/organization.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-organization" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088A6.78 6.78 0 0 1 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

1
docs/icons/star.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-star" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

1542
docs/index.html
View File

File diff suppressed because one or more lines are too long

24
docs/logos/logo.svg Normal file
View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewbox="0 0 512 512">
<defs>
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600);
</style>
</defs>
<ellipse id="yellow-bg" cx="256" cy="256" fill="#f7df1e" stroke-linecap="round" rx="224" ry="224"/>
<path id="left-outline" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="15" d="M107.75 427.164c-46.086-41.619-75.262-102.447-76.632-170.59-.298-19.408 1.73-38.295 5.816-56.375"/>
<path id="right-outline" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="13.803" d="M211.607 35.363A224.31 224.31 0 0 1 256 30.95c123.712 0 224 100.632 224 224.768 0 124.135-100.288 224.767-224 224.767-16.58 0-32.74-1.807-48.293-5.237"/>
<path id="left-detail" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="14" d="M76.974 122.656a83.03 83.03 0 0 1 6.014-8.151"/>
<path id="right-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M32 256h20"/>
<path id="left-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M460 256h20"/>
<path id="top-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M256 32v20"/>
<path id="bottom-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M256 460v20"/>
<path id="right-bottom-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M72 384l12-10"/>
<path id="left-mid-bt-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M440 384l-12-10"/>
<path id="left-mid-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M430 118l-12 10"/>
<path id="top-left-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M350 70l9-14"/>
<path id="bottom-left-line" fill="none" stroke="#060606" stroke-linecap="round" stroke-width="10" d="M350 442l9 14"/>
<path id="hand" fill="rgba(170,170,170,1)" stroke="#060606" stroke-width="9.584" d="M279.967 249.94c-3.009-14.768-16.44-24.085-30-20.808-13.56 3.276-22.114 17.905-19.106 32.674 3.008 14.769 50.44 120.443 50.57 118.892.068-.81 1.544-115.988-1.464-130.757z"/>
<text x="196" y="188" fill="#060606" font-family="Source Sans Pro" font-size="120">
JS
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/logos/logo_128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
docs/logos/logo_128_o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
docs/logos/logo_128_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
docs/logos/logo_256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/logos/logo_256_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/logos/logo_32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
docs/logos/logo_32_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
docs/logos/logo_384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/logos/logo_384_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/logos/logo_512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/logos/logo_512_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/logos/logo_64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
docs/logos/logo_64_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

36
docs/manifest.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "30 seconds of code",
"short_name": "30s of code",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#202124",
"description": "Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.",
"icons": [
{
"src": "./logos/logo_32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "./logos/logo_64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "./logos/logo_128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "./logos/logo_256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "./logos/logo_512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

291
docs/math.html Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/mini.css
View File

File diff suppressed because one or more lines are too long

354
docs/mini/_contextual.scss
View File

@ -1,354 +0,0 @@
/*
Definitions for contextual background elements, toasts and tooltips.
*/
$mark-back-color: #0277bd !default; // Background color for <mark>
$mark-fore-color: #fafafa !default; // Text color for <mark>
$mark-font-size: 0.95em !default; // Font size for <mark>
$mark-line-height: 1em !default; // Line height for <mark>
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
$toast-name: 'toast' !default; // Class name for toast component
$toast-back-color: #424242 !default; // Background color for toast component
$toast-fore-color: #fafafa !default; // Text color for toast component
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
$modal-name: 'modal' !default; // Class name for modal dialog component
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
$collapse-name: 'collapse' !default; // Class name for collapse component
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
$collapse-border-color: #ddd !default; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
// CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default;
$toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
$modal-overlay-color-var: '--modal-overlay-color' !default;
$modal-close-color-var: '--modal-close-color' !default;
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
$collapse-border-color-var: '--collapse-border-color' !default;
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-line-height: 1.5 !default; // Line height for most elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_contextual_mixins.scss` file to find this module's mixins.
@import '_contextual_mixins';
/* Contextual module CSS variable definitions */
:root {
#{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color;
}
// Default styling for mark. Use mixins for alternate styles.
mark {
background: var(#{$mark-back-color-var});
color: var(#{$mark-fore-color-var});
font-size: $mark-font-size;
line-height: $mark-line-height;
border-radius: var(#{$universal-border-radius-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&.#{$mark-inline-block-name} {
display: inline-block;
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
font-size: 1em;
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
line-height: $base-line-height;
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
}
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$toast-fore-color-var});
background: var(#{$toast-back-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
}
// Styling for tooltips.
@if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: var(#{$universal-margin-var}) solid transparent;
// Newer browsers will center the tail properly
left: calc(50% - var(#{$universal-margin-var}));
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
color: var(#{$tooltip-fore-color-var});
background: var(#{$tooltip-back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
white-space: nowrap;
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: calc(2 * var(#{$universal-margin-var}));
}
}
}
// Styling for modal dialogs.
@if $_include-modal {
:root {
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
}
[type="checkbox"].#{$modal-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
& + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(#{$modal-overlay-color-var});
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: 0;
right: 0;
width: $modal-close-size;
height: $modal-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0;
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
content: '\00D7';
color: var(#{$modal-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $modal-close-size;
line-height: 1;
text-align: center;
}
&:hover, &:focus {
background: var(#{$modal-close-hover-back-color-var});
}
}
}
}
&:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
}
// Styling for collapse.
@if $_include-collapse {
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
.#{$collapse-name} {
width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1;
display: flex;
flex-direction: column;
margin: var(#{$universal-margin-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > [type="radio"], & > [type="checkbox"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
& > label {
flex-grow: 1;
display: inline-block;
height: $collapse-label-height;
cursor: pointer;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ div {
flex-basis: auto;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: max-height 0.3s;
max-height: 1px; // for transition
}
}
> :checked + label {
background: var(#{$collapse-selected-label-back-color-var});
// border: 0.0625rem solid #bdbdbd; // var it
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
& + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 0;
background: var(#{$collapse-content-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: var(#{$universal-padding-var});
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
max-height: $collapse-content-max-height;
}
}
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
border-top: 0;
}
& > label:first-of-type {
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
}
& > label:last-of-type:not(:first-of-type) {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
& > label:last-of-type:first-of-type {
border-radius: var(#{$universal-border-radius-var});
}
& > :checked:last-of-type:not(:first-of-type) + label {
border-radius: 0;
}
& > :checked:last-of-type + label + div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
}
}

27
docs/mini/_contextual_mixins.scss
View File

@ -1,27 +0,0 @@
// Contextual module's mixin definitions are here. For the module itself
// check `_contextual.scss`.
// Mark color variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-back-color: Background color for <mark> variant.
// $mark-alt-fore-color: Text color for <mark> variant.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
$mark-alt-fore-color : $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
#{$mark-back-color-var}: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color{
#{$mark-fore-color-var}: $mark-alt-fore-color;
}
}
}
// Mark size variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-padding: The padding of the <mark> variant.
// $mark-alt-border-radius: The border radius of the <mark> variant.
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
mark.#{$mark-alt-name} {
padding: $mark-alt-padding;
border-radius: $mark-alt-border-radius;
}
}

304
docs/mini/_core.scss
View File

@ -1,304 +0,0 @@
/*
Browsers resets and base typography.
*/
// TODO: Add fluid type and test thoroughly
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$base-line-height: 1.5 !default; // Line height for most elements
$base-font-size: 1rem !default; // Font sizing for all elements
$_body-margin: 0 !default; // [Hidden] Margin for body
$fore-color: #111 !default; // Text & foreground color
$secondary-fore-color: #444 !default; // Secondary text & foreground color
$back-color: #f8f8f8 !default; // Background color
$secondary-back-color: #f0f0f0 !default; // Secondary background color
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
$pre-color: #1565c0 !default; // <pre> sidebar color
$border-color: #aaa !default; // Border color
$secondary-border-color: #ddd !default; // Secondary border color
$heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$universal-margin: 0.5rem !default; // Universal margin for the most elements
$universal-padding: 0.5rem !default; // Universal padding for the most elements
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
$universal-box-shadow: none !default; // Universal box-shadow for most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements
$heading-font-weight: 500 !default; // Font weight for headings
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
$sup-top: -0.5em !default; // <sup> top
$sub-bottom: -0.25em !default; // <sub> bottom
$a-link-color: #0277bd !default; // Color for <a>:link
$a-visited-color: #01579b !default; // Color for <a>:visited
// CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color' !default;
$secondary-fore-color-var: '--secondary-fore-color' !default;
$back-color-var: '--back-color' !default;
$secondary-back-color-var: '--secondary-back-color' !default;
$blockquote-color-var: '--blockquote-color' !default;
$pre-color-var: '--pre-color' !default;
$border-color-var: '--border-color' !default;
$secondary-border-color-var: '--secondary-border-color' !default;
$heading-ratio-var: '--heading-ratio' !default;
$universal-margin-var: '--universal-margin' !default;
$universal-padding-var: '--universal-padding' !default;
$universal-border-radius-var: '--universal-border-radius' !default;
$universal-box-shadow-var: '--universal-box-shadow' !default;
$a-link-color-var: '--a-link-color' !default;
$a-visited-color-var: '--a-visited-color' !default;
/* Core module CSS variable definitions */
:root {
#{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color;
#{$secondary-back-color-var}: $secondary-back-color;
#{$blockquote-color-var}: $blockquote-color;
#{$pre-color-var}: $pre-color;
#{$border-color-var}: $border-color;
#{$secondary-border-color-var}: $secondary-border-color;
#{$heading-ratio-var}: $heading-ratio;
#{$universal-margin-var}: $universal-margin;
#{$universal-padding-var}: $universal-padding;
#{$universal-border-radius-var}: $universal-border-radius;
#{$a-link-color-var} : $a-link-color;
#{$a-visited-color-var} : $a-visited-color;
@if $universal-box-shadow != none {
#{$universal-box-shadow-var}: $universal-box-shadow;
}
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em; // Fix for elements inside headings not displaying properly.
}
@if $_apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $_body-margin;
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
details {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
}
// Show overflow in Edge.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
}
@if $subheading-font-size != $small-font-size {
font-size: $subheading-font-size;
}
}
}
h1 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(#{$heading-ratio-var}));
}
p {
margin: var(#{$universal-margin-var});
}
ol, ul {
margin: var(#{$universal-margin-var});
padding-left: calc(2 * var(#{$universal-margin-var}));
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: var(#{$universal-margin-var});
height: $__1px;
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
}
blockquote { // Doesn't have a back color by default, can be added manually.
display: block;
position: relative;
font-style: italic;
color: var(#{$secondary-fore-color-var});
margin: var(#{$universal-margin-var});
padding: calc(3 * var(#{$universal-padding-var}));
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 6*$__1px solid var(#{$blockquote-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&:before {
position: absolute;
top: calc(0rem - var(#{$universal-padding-var}));
left: 0;
font-family: sans-serif;
font-size: $blockquote-quotation-size;
font-weight: 700;
content: "\201c";
color: var(#{$blockquote-color-var});
}
&[cite]:after{
font-style: normal;
font-size: $blockquote-cite-size;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
}
code, kbd, pre, samp {
font-family: #{$code-font-family}; // Display fix should be applied manually!
font-size: $code-font-size;
}
code { // No border color by default and fore color is the default for text, can be altered manually.
background: var(#{$secondary-back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
kbd { // No border color by default, can be altered manually.
background: var(#{$fore-color-var});
color: var(#{$back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
pre { // Fore color is the default, can be altered manually.
overflow: auto; // Responsiveness
background: var(#{$secondary-back-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 4*$__1px solid var(#{$pre-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Prevent elements from affecting the line height in all browsers.
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub, figcaption {
font-size: $small-element-font-size;
}
sup {
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
figure {
margin: var(#{$universal-margin-var});
}
figcaption {
color: var(#{$secondary-fore-color-var});
}
a {
text-decoration: none;
&:link{
color: var(#{$a-link-color-var});
}
&:visited {
color: var(#{$a-visited-color-var});
}
&:hover, &:focus {
text-decoration: underline;
}
}

317
docs/mini/_input_control.scss
View File

@ -1,317 +0,0 @@
/*
Definitions for forms and input elements.
*/
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$button-group-name: 'button-group' !default; // Class name for button groups.
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
$form-back-color: #f0f0f0 !default; // Background color for forms.
$form-fore-color: #111 !default; // Text color for forms.
$form-border-color: #ddd !default; // Border color for forms.
$input-back-color: #f8f8f8 !default; // Background color for input elements.
$input-fore-color: #111 !default; // Text color for input elements.
$input-border-color: #ddd !default; // Border color for input elements.
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
$button-back-color: #e2e2e2 !default; // Background color for buttons.
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
$button-fore-color: #212121 !default; // Text color for buttons.
$button-border-color: transparent !default; // Border color for buttons.
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
// CSS variable name definitions [exercise caution if modifying these]
$form-back-color-var: '--form-back-color' !default;
$form-fore-color-var: '--form-fore-color' !default;
$form-border-color-var: '--form-border-color' !default;
$input-back-color-var: '--input-back-color' !default;
$input-fore-color-var: '--input-fore-color' !default;
$input-border-color-var: '--input-border-color' !default;
$input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default;
$button-back-color-var: '--button-back-color' !default;
$button-hover-back-color-var: '--button-hover-back-color' !default;
$button-fore-color-var: '--button-fore-color' !default;
$button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
$button-group-border-color-var: '--button-group-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-font-size: 1rem !default; // Font sizing for all elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
/* Input_control module CSS variable definitions */
:root {
#{$form-back-color-var}: $form-back-color;
#{$form-fore-color-var}: $form-fore-color;
#{$form-border-color-var}: $form-border-color;
#{$input-back-color-var}: $input-back-color;
#{$input-fore-color-var}: $input-fore-color;
#{$input-border-color-var}: $input-border-color;
#{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color;
#{$button-back-color-var}: $button-back-color;
#{$button-hover-back-color-var}: $button-hover-back-color;
#{$button-fore-color-var}: $button-fore-color;
#{$button-border-color-var}: $button-border-color;
#{$button-hover-border-color-var}: $button-hover-border-color;
#{$button-group-border-color-var}: $button-group-border-color;
}
// Base form styling
form { // Text color is the default, this can be changed manually.
background: var(#{$form-back-color-var});
color: var(#{$form-fore-color-var});
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Fieldset styling
fieldset {
// Apply always to overwrite defaults for all of the below.
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 4);
padding: var(#{$universal-padding-var});
}
// Legend styling.
legend {
// Edge fixes.
box-sizing: border-box;
display: table;
max-width: 100%;
white-space: normal;
// Actual styling.
font-weight: $bold-font-weight;
padding: calc(var(#{$universal-padding-var}) / 2);
}
// Label syling. - Basically just padding, but there might be more in the future.
label {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
// Input group styling.
.#{$input-group-name} {
display: inline-block;
// Fluid input groups
@if $_include-fluid-input-group {
&.#{$input-group-fluid-name} {
display: flex;
align-items: center;
justify-content: center;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
// On mobile
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
align-items: stretch;
flex-direction: column;
}
}
// Vertical input groups
&.#{$input-group-vertical-name} {
display: flex;
align-items: stretch;
flex-direction: column;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
}
}
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling. - Avoid using box-shadow with these.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$input-back-color-var});
color: var(#{$input-fore-color-var});
border: $__1px solid var(#{$input-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
&:hover, &:focus {
border-color: var(#{$input-focus-color-var});
box-shadow: none;
}
&:invalid, &:focus:invalid{
border-color: var(#{$input-invalid-color-var});
box-shadow: none;
}
&[readonly]{
background: var(#{$secondary-back-color-var});
}
}
// Fix for select and option elements overflowing their parent container.
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Styling for checkboxes and radio buttons.
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
vertical-align: text-bottom;
padding: 0; // Remove padding added from previous styles.
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
&:checked:before {
position: absolute;
}
}
[type="checkbox"] {
&:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
top: calc(0rem - var(#{$universal-padding-var}));
left: calc(var(#{$universal-padding-var}) / 4);
}
}
[type="radio"] {
border-radius: 100%;
&:checked:before {
border-radius: 100%;
content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: var(#{$input-fore-color-var});
width: 0.5rem;
height: 0.5rem;
}
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$input-fore-color-var});
}
::-ms-placeholder {
color: var(#{$input-fore-color-var});
opacity: 0.54;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements.
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
// Other fixes.
button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}
// Default styling
button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: var(#{$button-back-color-var});
color: var(#{$button-fore-color-var});
border: $__1px solid var(#{$button-border-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
text-decoration: none;
cursor: pointer;
transition: background 0.3s;
&:hover, &:focus {
background: var(#{$button-hover-back-color-var});
border-color: var(#{$button-hover-border-color-var});
}
}
// Disabled styling for input and button elements.
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
}
// Button group styling.
.#{$button-group-name} {
display: flex;
border: $__1px solid var(#{$button-group-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
& > .#{$button-class-name}, & > [role="button"] {
margin: 0;
max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;
border-radius: 0;
box-shadow: none;
}
& > :not(:first-child) {
border-left: $__1px solid var(#{$button-group-border-color-var});
}
// Responsiveness for button groups
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
flex-direction: column;
& > :not(:first-child) {
border: 0; // Reapply to remove the left border from elements.
border-top: $__1px solid var(#{$button-group-border-color-var});
}
}
}

46
docs/mini/_input_control_mixins.scss
View File

@ -1,46 +0,0 @@
// Input_control module's mixin definitions are here. For the module itself
// check `_input_control.scss`.
// Button color variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-back-color: Background color for button variant.
// $button-alt-hover-back-color: Background color for button variant (hover).
// $button-alt-fore-color: Text color for button variant.
// $button-alt-border-color: Border color for button variant.
// $button-alt-hover-border-color: Border color for button variant (hover).
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
@if $button-alt-back-color != $button-back-color {
#{$button-back-color-var}: $button-alt-back-color;
}
@if $button-alt-fore-color != $button-fore-color{
#{$button-fore-color-var}: $button-alt-fore-color;
}
@if $button-alt-border-color != $button-border-color{
#{$button-border-color-var}: $button-alt-border-color;
}
&:hover, &:focus {
@if $button-alt-hover-back-color != $button-hover-back-color{
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
}
@if $button-alt-hover-border-color != $button-hover-border-color{
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
}
}
}
}
}
// Button size variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-padding: The padding of the button variant.
// $button-alt-margin The margin of the button variant.
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
padding: $button-alt-padding;
margin: $button-alt-margin;
}
}
}

199
docs/mini/_layout.scss
View File

@ -1,199 +0,0 @@
/*
Definitions for the grid system, cards and containers.
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$card-name: 'card' !default; // Class name for the cards.
$card-section-name: 'section' !default; // Class name for the cards' sections.
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
$card-normal-width: 320px !default; // Width for normal cards.
$card-section-media-height: 200px !default; // Height for cards' media sections.
$card-fore-color: #111 !default; // Text color for the cards.
$card-back-color: #f8f8f8 !default; // Background color for the cards.
$card-border-color: #ddd !default; // Border color for the cards.
// CSS variable name definitions [exercise caution if modifying these]
$card-fore-color-var: '--card-fore-color' !default;
$card-back-color-var: '--card-back-color' !default;
$card-border-color-var: '--card-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_layout_mixins.scss` file to find this module's mixins.
@import 'layout_mixins';
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
}
// Grid row definition.
.#{$grid-row-name} {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
}
// Inline mixin, used to generate class definitions for each grid step.
@mixin generate-grid-size ($size-prefix){
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
@else {
// Grid column generic definitions.
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix} {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
// Offest definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
@if ($i - 1) == 0 {
margin-left: 0;
}
@else {
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
}
}
}
// Reordering definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
order: initial;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
order: -999;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
order: 999;
}
}
// Definitions for smaller screens.
@include generate-grid-size($grid-small-prefix);
// Definitions for medium screens.
@media screen and (min-width: #{$grid-medium-breakpoint}){
@include generate-grid-size($grid-medium-prefix);
}
// Definitions for large screens.
@media screen and (min-width: #{$grid-large-breakpoint}){
@include generate-grid-size($grid-large-prefix);
}
/* Card component CSS variable definitions */
:root {
#{$card-back-color-var}: $card-back-color;
#{$card-fore-color-var}: $card-fore-color;
#{$card-border-color-var}: $card-border-color;
}
// Card styling
.#{$card-name} {
// New syntax
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
border: $__1px solid var(#{$card-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
overflow: hidden; // Hide overflow from section borders
// Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) {
max-width: $card-normal-width;
}
// Card sections
& > .#{$card-section-name} {
// Reapply background and foreground colors, so that mixins can be applied properly.
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $__1px solid var(#{$card-border-color-var});
padding: var(#{$universal-padding-var});
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}

62
docs/mini/_layout_mixins.scss
View File

@ -1,62 +0,0 @@
// Layout (card) module's mixin definitions are here. For the module itself
// check `_layout.scss`.
// Mixin for alternate card sizes:
// $card-alt-size-name: The name of the class used for the alternate size card.
// $card-alt-size-width: The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
}
// Mixin for alternate cards (card color variants):
// $card-alt-name: The name of the class used for the alternate card.
// $card-alt-back-color: The background color of the alternate card.
// $card-alt-fore-color: The text color of the alternate card.
// $card-alt-border-color: The border style of the alternate card.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-alt-fore-color;
}
@if $card-alt-border-color != $card-border-color {
#{$card-border-color-var}: $card-alt-border-color;
}
}
}
// Mixin for alternate card sections (card section color variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-back-color: The background color of the alternate card section.
// $card-section-alt-fore-color: The text color of the alternate card section.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
$card-section-alt-fore-color : $card-fore-color) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-section-alt-fore-color;
}
}
}
// Mixin for alternate card sections (card section padding variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-padding: The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}

315
docs/mini/_navigation.scss
View File

@ -1,315 +0,0 @@
/*
Definitions for navigation elements.
*/
// Different elements are styled based on the same set of rules.
$header-height: 3.1875rem !default; // Height of the header element.
$header-back-color: #f8f8f8 !default; // Background color for the header element.
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
$header-fore-color: #444 !default; // Text color for the header element.
$header-border-color: #ddd !default; // Border color for the header element.
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
$nav-fore-color: #444 !default; // Text color for the nav element.
$nav-border-color: #ddd !default; // Border color for the nav element.
$nav-link-color: #0277bd !default; // Color for link in the nav element.
$footer-fore-color: #444 !default; // Text color for the footer element.
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
$footer-border-color: #ddd !default; // Border color for the footer element.
$footer-link-color: #0277bd !default; // Color for link in the footer element.
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
$drawer-border-color: #ddd !default; // Border color for the drawer component.
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
$header-logo-name: 'logo' !default; // Class name for the header logo element.
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
// CSS variable name definitions [exercise caution if modifying these]
$header-fore-color-var: '--header-fore-color' !default;
$header-back-color-var: '--header-back-color' !default;
$header-hover-back-color-var: '--header-hover-back-color' !default;
$header-border-color-var: '--header-border-color' !default;
$nav-fore-color-var: '--nav-fore-color' !default;
$nav-back-color-var: '--nav-back-color' !default;
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
$nav-border-color-var: '--nav-border-color' !default;
$nav-link-color-var: '--nav-link-color' !default;
$footer-fore-color-var: '--footer-fore-color' !default;
$footer-back-color-var: '--footer-back-color' !default;
$footer-border-color-var: '--footer-border-color' !default;
$footer-link-color-var: '--footer-link-color' !default;
$drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
$drawer-close-color-var: '--drawer-close-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Navigation module CSS variable definitions */
:root {
#{$header-back-color-var}: $header-back-color;
#{$header-hover-back-color-var}: $header-hover-back-color;
#{$header-fore-color-var}: $header-fore-color;
#{$header-border-color-var}: $header-border-color;
#{$nav-back-color-var}: $nav-back-color;
#{$nav-hover-back-color-var}: $nav-hover-back-color;
#{$nav-fore-color-var}: $nav-fore-color;
#{$nav-border-color-var}: $nav-border-color;
#{$nav-link-color-var}: $nav-link-color;
#{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color;
#{$footer-border-color-var}: $footer-border-color;
#{$footer-link-color-var}: $footer-link-color;
#{$drawer-back-color-var}: $drawer-back-color;
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
#{$drawer-border-color-var}: $drawer-border-color;
#{$drawer-close-color-var}: $drawer-close-color;
}
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
header {
height: $header-height;
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$header-fore-color-var});
@if $_header-only-bottom-border {
border-bottom: $__1px solid var(#{$header-border-color-var});
}
@else {
border: $__1px solid var(#{$header-border-color-var});
}
padding: calc(var(#{$universal-padding-var}) / 4) 0;
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
// Header logo styling.
.#{$header-logo-name} {
color: var(#{$header-fore-color-var});
font-size: $header-logo-font-size;
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
text-decoration: none;
}
// Link styling.
button, [type="button"], .#{$button-class-name}, [role="button"] {
box-sizing: border-box;
position: relative;
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
text-align: center;
color: var(#{$header-fore-color-var});
border: 0;
border-radius: 0;
margin: 0;
@if $_header-links-uppercase {
text-transform: uppercase;
}
&:hover, &:focus {
background: var(#{$header-hover-back-color-var});
}
}
}
// Navigation sidebar styling.
nav {
background: var(#{$nav-back-color-var});
color: var(#{$nav-fore-color-var});
border: $__1px solid var(#{$nav-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
* {
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
a, a:visited {
display: block;
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
border-radius: var(#{$universal-border-radius-var});
transition: background 0.3s;
&:hover, &:focus {
text-decoration: none;
background: var(#{$nav-hover-back-color-var});
}
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
position: relative;
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
&:before {
position: absolute;
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
top: -#{$__1px};
content: '';
height: 100%;
border: $__1px solid var(#{$nav-border-color-var});
border-left: 0;
}
}
}
}
// Footer styling.
footer {
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$footer-fore-color-var});
@if $_footer-only-top-border {
border-top: $__1px solid var(#{$footer-border-color-var});
}
@else {
border: $__1px solid var(#{$footer-border-color-var});
}
// margin: $footer-margin;
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
font-size: $footer-font-size;
a, a:visited {
color: var(#{$footer-link-color-var});
}
}
// Definitions for sticky headers and footers.
header.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
top: 0;
}
footer.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
bottom: 0;
}
// Responsive drawer component.
.#{$drawer-toggle-name} {
&:before { // No color specified, should use the color of its surroundings!
display: inline-block;
position: relative;
vertical-align: bottom;
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
font-family: sans-serif;
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) {
display: none;
}
}
}
[type="checkbox"].#{$drawer-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: var(#{$drawer-back-color-var});
border: $__1px solid var(#{$drawer-border-color-var});
border-radius: 0; // Set to 0 to override the value from `nav`.
margin: 0; // Set to 0 to override the value from `nav`.
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
z-index: 1110;
@if $_drawer-right {
right: -$drawer-width;
transition: right 0.3s;
}
@else {
left: -$drawer-width;
transition: left 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: var(#{$universal-margin-var});
right: var(#{$universal-margin-var});
z-index: 1111;
width: $drawer-close-size;
height: $drawer-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0; // Fixes the offset from label
cursor: pointer;
transition: background 0.3s;
&:before { // Transparent background unless hovered over. Does not block text behind it.
display: block;
content: '\00D7';
color: var(#{$drawer-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $drawer-close-size;
line-height: 1; // Setting to 1 seems to center the 'X' properly.
text-align: center;
}
&:hover, &:focus {
background: var(#{$drawer-hover-back-color-var});
}
}
@media screen and (max-width: #{$drawer-width}) {
width: 100%;
}
}
&:checked + * {
@if $_drawer-right {
right: 0;
}
@else {
left: 0;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) + * {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
}
}

113
docs/mini/_progress.scss
View File

@ -1,113 +0,0 @@
/*
Definitions for progress elements and spinners.
*/
$progress-back-color: #ddd !default; // Background color of <progress>.
$progress-fore-color: #555 !default; // Foreground color of <progress>.
$progress-height: 0.75rem !default; // Height of <progress>.
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
// CSS variable name definitions [exercise caution if modifying these]
$progress-back-color-var: '--progress-back-color' !default;
$progress-fore-color-var: '--progress-fore-color' !default;
$spinner-donut-back-color-var: '--spinner-back-color' !default;
$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_progress_mixins.scss` file to find this module's mixins.
@import '_progress_mixins';
/* Progess module CSS variable definitions */
:root {
#{$progress-back-color-var}: $progress-back-color;
#{$progress-fore-color-var}: $progress-fore-color;
}
// Default styling for progress. Use mixins for alternate styles
progress {
display: block;
vertical-align: baseline; // Correct vertical alignment in some browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: $progress-height;
width: calc(100% - 2 * var(#{$universal-margin-var}));
margin: var(#{$universal-margin-var});
border: 0; // Removes default border
border-radius: calc(2 * var(#{$universal-border-radius-var}));
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: var(#{$progress-back-color-var});
color: var(#{$progress-fore-color-var});
// Foreground color on webkit browsers
&::-webkit-progress-value {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
// Background color on webkit browser
&::-webkit-progress-bar {
background: var(#{$progress-back-color});
}
// Foreground color on Firefox
&::-moz-progress-bar {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&::-moz-progress-bar {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
}
&.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
width: $progress-inline-width;
}
}
// Style for donut spinner
@if $_include-spinner-donut {
:root {
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
}
// Donut spinner animation
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.#{$spinner-donut-name} {
display: inline-block;
margin: var(#{$universal-margin-var});
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
}

32
docs/mini/_progress_mixins.scss
View File

@ -1,32 +0,0 @@
// Progress module's mixin definitions are here. For the module itself
// check `progress.scss`.
// Progress color variant mixin:
// $progress-alt-name: The name of the class used for the <progress> variant.
// $progress-alt-fore-color: Foregound color for <progress> variant.
// $progress-alt-back-color: Background color for <progress> variant.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
$progress-alt-back-color : $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-fore-color != $progress-fore-color{
#{$progress-fore-color-var}: $progress-alt-fore-color;
}
@if $progress-alt-back-color != $progress-back-color {
#{$progress-back-color-var}: $progress-alt-back-color;
}
}
}
// Spinner donut color variant mixin:
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
}
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
}
}
}

321
docs/mini/_table.scss
View File

@ -1,321 +0,0 @@
/*
Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax.
/*
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
$table-scrollable-height: 400px !default; // Height for table scrollable view.
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
$table-striped-name: 'striped' !default; // Class name for striped table.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
*/
$table-mobile-breakpoint: 768px !default;
$table-max-height: 400px !default;
$table-caption-font-size: 1.5rem !default;
$table-mobile-card-label: 'data-label' !default;
$table-mobile-label-font-weight: 600 !default;
$table-border-color: #aaa !default;
$table-border-separator-color: #666 !default;
$_include-horizontal-table: true !default;
$table-horizontal-name: 'horizontal' !default;
// CSS variable name definitions [exercise caution if modifying these]
$table-border-color-var: '--table-border-color' !default;
$table-border-separator-color-var: '--table-border-separator-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Table module CSS variable definitions. */
:root {
#{$table-border-color-var}: $table-border-color;
#{$table-border-separator-color-var}: $table-border-separator-color;
}
// Desktop view.
table {
border-collapse: separate;
border-spacing: 0;
margin: 0;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
padding: var(#{$universal-padding-var});
padding-top: 0;
@if not($_include-horizontal-table) {
overflow: auto;
max-height: $table-max-height;
}
caption {
font-size: $table-caption-font-size;
margin: calc(2 * var(#{$universal-margin-var})) 0;
max-width: 100%;
flex: 0 0 100%;
}
thead, tbody {
display: flex;
flex-flow: row wrap;
border: $__1px solid var(#{$table-border-color-var});
@if not($_include-horizontal-table) {
max-width: 100%;
flex: 0 0 100%;
}
}
thead {
z-index: 999; // Fixes the visibility of the element.
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
@if not($_include-horizontal-table) {
position: sticky;
top: 0;
}
}
tbody {
border-top: 0;
margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
}
tr {
display: flex;
padding: 0; // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex-flow: row wrap;
flex: 0 0 100%;
}
}
th, td {
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
}
th {
text-align: left;
background: #e6e6e6; // use vars
color: #111; // vars
}
td {
background: #fafafa; // use variables, this is a test (body)
border-top: $__1px solid var(#{$table-border-color-var});
}
@if not($_include-horizontal-table) {
tbody tr:first-child td {
border-top: 0;
}
}
}
// Styling for horizntal tables
@if $_include-horizontal-table {
table:not(.#{$table-horizontal-name}) {
overflow: auto;
max-height: $table-max-height;
thead, tbody {
max-width: 100%;
flex: 0 0 100%;
}
tr {
flex-flow: row wrap;
flex: 0 0 100%;
}
th, td {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
thead {
position: sticky;
top: 0;
}
tbody tr:first-child td {
border-top: 0;
}
}
table.#{$table-horizontal-name} {
border: 0;
thead, tbody {
border: 0;
flex-flow: row nowrap;
}
tbody {
overflow: auto;
justify-content: space-between;
flex: 1 0 0;
margin-left: calc( 4 * var(#{$universal-margin-var}));
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
}
tr {
flex-direction: column;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: 0;
border-bottom: $__1px solid var(#{$table-border-color-var});
&:not(:first-child){
border-top: 0;
}
}
th {
text-align: right;
border-left: $__1px solid var(#{$table-border-color-var});
border-right: $__1px solid var(#{$table-border-separator-color-var});
}
thead {
tr:first-child {
padding-left: 0;
}
}
th:first-child, td:first-child {
border-top: $__1px solid var(#{$table-border-color-var});
}
tbody tr:last-child td {
border-right: 1px solid #aaa;
&:first-child{
border-top-right-radius: 0.25rem;
}
&:last-child{
border-bottom-right-radius: 0.25rem;
}
}
thead tr:first-child th {
&:first-child{
border-top-left-radius: 0.25rem;
}
&:last-child{
border-bottom-left-radius: 0.25rem;
}
}
}
}
// Mobile
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
@if $_include-horizontal-table {
table, table.#{$table-horizontal-name} {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
th, td {
width: auto;
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
th:first-child, td:first-child {
border-top: 0;
}
tbody tr:last-child td {
border-right: 0;
}
}
}
@else {
table {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
}
}
}

430
docs/mini/flavor.scss
View File

@ -1,430 +0,0 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file.
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2
*/
$fore-color-var: '--f-col';
$secondary-fore-color-var: '--f-col2';
$back-color-var: '--b-col';
$secondary-back-color-var: '--b-col2';
$blockquote-color-var: '--blq-col';
$pre-color-var: '--pre-col';
$border-color-var: '--br-col';
$secondary-border-color-var: '--br-col2';
$heading-ratio-var: '--h-ratio';
$universal-margin-var: '--u-m';
$universal-padding-var: '--u-p';
$universal-border-radius-var: '--u-br-r';
$universal-box-shadow-var: '--u-bx-shd';
$a-link-color-var: '--a-l-col';
$a-visited-color-var: '--a-v-col';
$code-font-size: 0.8125em;
@import 'core';
$grid-container-name: 'container';
$grid-row-name: 'row';
$grid-row-parent-layout-prefix:'cols';
$grid-column-prefix: 'col';
$grid-column-offset-suffix: 'o';
$grid-order-normal-suffix: 'n';
$grid-order-first-suffix: 'f';
$grid-order-last-suffix: 'l';
$grid-small-prefix: 'sm';
$grid-medium-prefix: 'md';
$grid-large-prefix: 'lg';
$card-fore-color-var: '--cd-f-col';
$card-back-color-var: '--cd-b-col';
$card-border-color-var: '--cd-br-col';
$_include-parent-layout: false;
@import 'layout';
/*
Custom elements for card elements.
*/
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
.#{$card-name} {
box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
}
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
padding: calc(3 * var(#{$universal-padding-var}));
}
.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
}
.#{$card-name} + .#{$card-name} {
margin-top: calc(5 * var(#{$universal-margin-var}));
}
$form-back-color-var: '--frm-b-col';
$form-fore-color-var: '--frm-f-col';
$form-border-color-var: '--frm-br-col';
$input-back-color-var: '--in-b-col';
$input-fore-color-var: '--in-f-col';
$input-border-color-var: '--in-br-col';
$input-focus-color-var: '--in-fc-col';
$input-invalid-color-var: '--in-inv-col';
$button-back-color-var: '--btn-b-col';
$button-hover-back-color-var: '--btn-h-b-col';
$button-fore-color-var: '--btn-f-col';
$button-border-color-var: '--btn-br-col';
$button-hover-border-color-var: '--btn-h-br-col';
$button-group-border-color-var: '--btn-grp-br-col';
$_include-fluid-input-group: false;
@import 'input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$header-fore-color-var: '--hd-f-col';
$header-back-color-var: '--hd-b-col';
$header-hover-back-color-var: '--hd-hv-b-col';
$header-border-color-var: '--hd-br-col';
$nav-fore-color-var: '--nv-f-col';
$nav-back-color-var: '--nv-b-col';
$nav-hover-back-color-var: '--nv-hv-b-col';
$nav-border-color-var: '--nv-br-col';
$nav-link-color-var: '--nv-ln-col';
$footer-fore-color-var: '--ft-f-col';
$footer-back-color-var: '--ft-b-col';
$footer-border-color-var: '--ft-br-col';
$footer-link-color-var: '--ft-ln-col';
$drawer-back-color-var: '--dr-b-col';
$drawer-border-color-var: '--dr-br-col';
$drawer-hover-back-color-var: '--dr-hv-b-col';
$drawer-close-color-var: '--dr-cl-col';
$nav-sublink-depth: 1;
$_drawer-right: false;
@import 'navigation';
$toast-back-color: #212121;
$mark-back-color-var: '--mrk-b-col';
$mark-fore-color-var: '--mrk-f-col';
$toast-back-color-var: '--tst-b-col';
$toast-fore-color-var: '--tst-f-col';
$tooltip-back-color-var: '--tltp-b-col';
$tooltip-fore-color-var: '--tltp-f-col';
$modal-overlay-color-var: '--mdl-ov-col';
$modal-close-color-var: '--mdl-cl-col';
$modal-close-hover-back-color-var: '--mdl-cl-h-col';
$collapse-label-back-color-var: '--clps-lbl-b-col';
$collapse-label-fore-color-var: '--clps-lbl-f-col';
$collapse-label-hover-back-color-var: '--clps-lbl-h-b-col';
$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
$collapse-border-color-var: '--clps-br-col';
$collapse-content-back-color-var: '--clps-cnt-b-col';
$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';
$_include-modal: false;
$_include-tooltip: false;
$_include-collapse: false;
@import 'contextual';
.#{$toast-name} {
bottom: calc(var(#{$universal-margin-var}) / 2);
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
// Website-specific styles
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
font-family: Menlo, Consolas, monospace !important;
}
pre {
border: 0.0625rem solid var(#{$secondary-border-color-var});
border-radius: var(#{$universal-border-radius-var});
}
.group{
position:relative;
margin-top: 2em;
margin-bottom: 1em
}
.search{
font-size: 0.875rem;
margin-top: -0.1em;
display:block;
width:100%;
border:none;
border-bottom: $__1px solid var(#{$nav-link-color-var});
}
.search:focus{
outline:none
}
label#search-label{
color:var(#{$nav-link-color-var});
font-size: 1.125rem;
font-weight:400;
position:absolute;
left: 0.3125rem;
top: 0.625rem;
}
.search:focus ~ label#search-label,.search:valid ~ label#search-label{
top: -1.25rem;
font-size: 0.875rem;
color:var(#{$nav-link-color-var});
}
label#menu-toggle {
width: 3.4375rem;
}
header h1.logo {
margin-top: -0.8rem;
text-align:center;
a {
text-decoration:none;
color: #111;
}
}
header #title {
position:relative;
top: -1rem;
@media screen and (max-width: 500px) { font-size: 1rem; display: block }
}
header h1 small {
display:block;
font-size: 0.875rem;
color: #888;
margin-top: -0.8rem;
@media screen and (max-width: 768px) { font-size: 0.75rem; }
@media screen and (max-width: 600px) { font-size: 0.625rem; }
@media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
}
label#menu-toggle {
position: absolute;
left: 0.5rem;
top: 0.5rem;
width: 3.4375rem;
}
main {
padding: 0;
}
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
label.#{$collapse-name} {
width: 100%;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
border-radius: var(#{$universal-border-radius-var});
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ pre {
box-sizing: border-box;
height: 0;
max-height: 1px;
overflow: auto;
margin: 0;
border: 0;
padding: 0;
transition: max-height 0.3s;
}
&.toggled {
background: var(#{$collapse-selected-label-back-color-var});
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
+ pre {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
width: 100%;
height: auto;
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: calc(2 * var(#{$universal-padding-var}));
max-height: $collapse-content-max-height;
}
}
}
button.primary.clipboard-copy {
width: 100%;
margin-left: 0;
> img {
vertical-align: bottom;
}
}
code[class*="language-"],
pre[class*="language-"] {
color: black;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.8;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hypens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"] {
padding: calc(2 * var(#{$universal-padding-var}));
overflow: auto;
margin: var(#{$universal-margin-var}) 0;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #b3d4fc;
}
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7a8490;
}
.token.punctuation {
color: #666;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.constant,
.token.symbol,
.token.deleted,
.token.function {
color: #005cc5;
}
.token.number{
color: #8132b5;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #007e5d;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.atrule,
.token.attr-value,
.token.keyword {
color: #d73a49;
}
.token.regex {
color: #007972;
}
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

198
docs/node.html Normal file
View File

File diff suppressed because one or more lines are too long

386
docs/object.html Normal file
View File

File diff suppressed because one or more lines are too long

971
docs/scss/style.scss Normal file
View File

@ -0,0 +1,971 @@
$base-font-size: 16px;
$base-line-height: 1.5;
$__1px: (1px/$base-font-size) * 1rem;
$base-font-family: 'Roboto, Helvetica, sans-serif';
$code-font-family: 'Roboto Mono, Menlo, Consolas, monospace';
$code-font-size: 0.875em;
$_body-margin: 0;
$heading-line-height: 1.2;
$fore-color-var: '--fore-color';
$fore-color: #212121;
$back-color-var: '--back-color';
$back-color: #fff;
$card-page-back-color-var: '--card-page-back-color';
$card-page-back-color: #eee;
$border-color-var: '--border-color';
$border-color: #eee;
$a-link-color-var: '--a-link-color';
$a-link-color: #0277bd;
$a-visited-color-var: '--a-visited-color';
$a-visited-color: #01579b;
$code-fore-color-var: '--code-fore-color';
$code-fore-color: #8e24aa;
$code-back-color-var: '--code-back-color';
$code-back-color: #f0f0f0;
$code-selected-color-var: '--code-selected-color';
$code-selected-color: #37474f;
$pre-fore-color-var: '--pre-fore-color';
$pre-fore-color: #e57373;
$pre-back-color-var: '--pre-back-color';
$pre-back-color: #263238;
$token-color-a-var: '--token-color-a'; // Comments
$token-color-a: #7f99a5;
$token-color-b-var: '--token-color-b'; // Punctuation
$token-color-b: #bdbdbd;
$token-color-c-var: '--token-color-c'; // Functions
$token-color-c: #64b5f6;
$token-color-d-var: '--token-color-d'; // Numbers
$token-color-d: #ff8f00;
$token-color-e-var: '--token-color-e'; // Strings
$token-color-e: #c5e1a5;
$token-color-f-var: '--token-color-f'; // Keywords
$token-color-f: #ce93d8;
$token-color-g-var: '--token-color-g'; // Regular expressions
$token-color-g: #26c6da;
$token-color-h-var: '--token-color-h'; // Variables
$token-color-h: #e57373;
$collapse-color-var: '--collapse-color';
$collapse-color: #607d8b;
$copy-button-color-var: '--copy-button-color';
$copy-button-color: #1e88e5;
$copy-button-hover-color-var: '--copy-button-hover-color';
$copy-button-hover-color: #2196f3;
$scrolltop-button-color-var: '--scrolltop-button-color';
$scrolltop-button-color: #26a69a;
$scrolltop-button-hover-color-var: '--scrolltop-button-hover-color';
$scrolltop-button-hover-color: #4db6ac;
$beginner-color-var: '--beginner-color';
$beginner-color: #7cb342;
$intermediate-color-var: '--intermediate-color';
$intermediate-color: #ffb300;
$advanced-color-var: '--advanced-color';
$advanced-color: #e53935;
$header-fore-color-var: '--header-fore-color';
$header-fore-color: #fff;
$header-back-color-var: '--header-back-color';
$header-back-color: #202124;
$nav-fore-color-var: '--nav-fore-color';
$nav-fore-color: #f0f0f0;
$nav-back-color-var: '--nav-back-color';
$nav-back-color: #202124;
$nav-link-border-color-var: '--nav-link-border-color';
$nav-link-border-color: #455a64;
$nav-link-fore-color-var: '--nav-link-fore-color';
$nav-link-fore-color: #e0e0e0;
$nav-link-hover-color-var: '--nav-link-hover-color';
$nav-link-hover-color: #2b2c30;
$search-fore-color-var: '--search-fore-color';
$search-fore-color: #fafafa;
$search-back-color-var: '--search-back-color';
$search-back-color: #111;
$search-border-color-var: '--search-border-color';
$search-border-color: #9e9e9e;
$search-hover-border-color-var: '--search-hover-border-color';
$search-hover-border-color: #26a69a;
$footer-fore-color-var: '--footer-fore-color';
$footer-fore-color: #616161;
$footer-back-color-var: '--footer-back-color';
$footer-back-color: #e0e0e0;
$universal-margin-var: '--universal-margin';
$universal-margin: 0.5rem;
$universal-padding-var: '--universal-padding';
$universal-padding: 0.5rem;
$universal-border-radius-var: '--universal-border-radius';
$universal-border-radius: 0.125rem;
// Load external fonts - progressive loading should help alleviate performance issues
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 300;
src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 300;
src: local('Roboto Mono Light Italic'), local('RobotoMono-LightItalic'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 500;
src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
// Set up variables for everything
:root {
#{$fore-color-var}: $fore-color;
#{$back-color-var}: $back-color;
#{$card-page-back-color-var}: $card-page-back-color;
#{$border-color-var}: $border-color;
#{$universal-margin-var}: $universal-margin;
#{$universal-padding-var}: $universal-padding;
#{$universal-border-radius-var}: $universal-border-radius;
#{$a-link-color-var} : $a-link-color;
#{$a-visited-color-var} : $a-visited-color;
#{$code-fore-color-var}: $code-fore-color;
#{$code-back-color-var}: $code-back-color;
#{$code-selected-color-var}: $code-selected-color;
#{$pre-fore-color-var}: $pre-fore-color;
#{$pre-back-color-var}: $pre-back-color;
#{$token-color-a-var}: $token-color-a;
#{$token-color-b-var}: $token-color-b;
#{$token-color-c-var}: $token-color-c;
#{$token-color-d-var}: $token-color-d;
#{$token-color-e-var}: $token-color-e;
#{$token-color-f-var}: $token-color-f;
#{$token-color-g-var}: $token-color-g;
#{$token-color-h-var}: $token-color-h;
#{$collapse-color-var}: $collapse-color;
#{$copy-button-color-var}: $copy-button-color;
#{$copy-button-hover-color-var}: $copy-button-hover-color;
#{$scrolltop-button-color-var}: $scrolltop-button-color;
#{$scrolltop-button-hover-color-var}: $scrolltop-button-hover-color;
#{$beginner-color-var}: $beginner-color;
#{$intermediate-color-var}: $intermediate-color;
#{$advanced-color-var}: $advanced-color;
#{$header-fore-color-var}: $header-fore-color;
#{$header-back-color-var}: $header-back-color;
#{$nav-fore-color-var}: $nav-fore-color;
#{$nav-back-color-var}: $nav-back-color;
#{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color;
#{$nav-link-fore-color-var}: $nav-link-fore-color;
#{$nav-link-border-color-var}: $nav-link-border-color;
#{$nav-link-hover-color-var}: $nav-link-hover-color;
#{$search-fore-color-var}: $search-fore-color;
#{$search-back-color-var}: $search-back-color;
#{$search-border-color-var}: $search-border-color;
#{$search-hover-border-color-var}: $search-hover-border-color;
}
// Set up some basic styling for everything
html {
font-size: $base-font-size;
scroll-behavior: smooth;
}
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: 1rem;
font-weight: 300;
}
// Apply fixes and defaults as necessary for modern browsers only
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em; // Fix for elements inside headings not displaying properly.
}
body {
margin: $_body-margin;
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
overflow-x: hidden;
&.card-page {
background: var(#{$card-page-back-color-var});
}
}
// Correct display for Edge & Firefox.
details {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
}
// Show overflow in Edge.
input {
overflow: visible;
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
// Style headings according to material design guidelines
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 3.75rem;
}
h3 {
font-size: 3rem;
}
h4 {
font-size: 2.125rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
// Style textual elements
p {
margin: var(#{$universal-margin-var});
}
ol, ul {
margin: var(#{$universal-margin-var});
padding-left: calc(2 * var(#{$universal-margin-var}));
}
b, strong {
font-weight: 500;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
// Actual styling using variables
line-height: 1.25em;
margin: var(#{$universal-margin-var});
height: $__1px;
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
}
// Style code
code, kbd, pre {
font-size: $code-font-size;
}
code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
font-family: #{$code-font-family};
}
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
code {
background: var(#{$code-back-color-var});
color: var(#{$code-fore-color-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
border-radius: var(#{$universal-border-radius-var});
}
/* === Unused so far ===
kbd {
background: var(#{$fore-color-var});
color: var(#{$back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
}
*/
pre {
overflow: auto; // Responsiveness
background: var(#{$pre-back-color-var});
color: var(#{$pre-fore-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border: 0;
}
code[class*="language-"], pre[class*="language-"] {
color: var(#{$pre-fore-color-var});
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.8;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hypens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"] {
padding: calc(2 * var(#{$universal-padding-var}));
overflow: auto;
margin: var(#{$universal-margin-var}) 0;
white-space: pre-wrap;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: var(#{$code-selected-color-var});
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: var(#{$code-selected-color-var});
}
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.namespace {
opacity: .7;
}
.token {
&.comment, &.prolog, &.doctype, &.cdata {
color: var(#{$token-color-a-var});
}
&.punctuation {
color: var(#{$token-color-b-var});
}
&.property, &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function {
color: var(#{$token-color-c-var});
}
&.number, &.class-name {
color: var(#{$token-color-d-var});
}
&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted {
color: var(#{$token-color-e-var});
}
&.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation {
color: var(#{$token-color-f-var});
}
&.regex {
color: var(#{$token-color-g-var});
}
&.important, &.variable {
color: var(#{$token-color-h-var});
}
&.italic, &.comment {
font-style: italic;
}
&.important, &.bold {
font-weight: 500;
}
&.entity {
cursor: help;
}
}
.language-css .token.string, .style .token.string {
color: var(#{$token-color-f-var});
}
a {
text-decoration: none;
&:link{
color: var(#{$a-link-color-var});
}
&:visited {
color: var(#{$a-visited-color-var});
}
&:hover, &:focus {
text-decoration: underline;
}
}
// Github Corner styles - Do not alter
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
/*
blockquote {}
sup {}
sub {}
figure {}
figcaption {}
*/
// ===================================================
// Layout
// ===================================================
$grid-medium-breakpoint: 768px;
$grid-large-breakpoint: 1280px;
// Grid container
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: calc(0.5 * var(#{$universal-margin-var}));
&.card-container {
position: absolute;
padding-top: 3.5rem;
height: calc(100vh - 3.5rem);
}
}
// Generic centered column
.col-centered {
grid-column: span 12;
max-width: 100%;
@media screen and (min-width: #{$grid-medium-breakpoint}) {
grid-column: 2/12;
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
grid-column: 3/11;
}
}
// 25% width - For the 'in numbers' section
.col-quarter {
grid-column: span 3;
}
// 100% width
.col-full-width {
grid-column: span 12;
}
// For the contributors section
.flex-row {
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
.flex-item {
flex: 0 0 auto;
max-width: 50%;
flex-basis: 50%;
@media screen and (min-width: #{$grid-medium-breakpoint}) {
max-width: 25%;
flex-basis: 25%;
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
}
// ===================================================
// Cards
// ===================================================
h2.category-name {
text-align: center;
}
.card {
overflow: hidden;
position: relative;
margin: var(#{$universal-margin-var});
border-radius: calc(4 * var(#{$universal-border-radius-var}));
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
h4 {
text-align: center;
padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
margin-bottom: calc(2 * var(#{$universal-margin-var}));
border-bottom: $__1px solid var(#{$border-color-var});
padding-top: 5rem;
margin-top: -4.25rem;
}
&.code-card {
margin-top: calc(5 * var(#{$universal-margin-var}));
background: var(#{$pre-back-color-var});
.section.card-content{
background: var(#{$back-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
}
.collapse {
display: block;
font-size: 0.75rem;
font-family: #{$code-font-family};
text-transform: uppercase;
background: var(#{$pre-back-color-var});
color: var(#{$collapse-color-var});
padding: calc(1.5 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var})) calc(2.25 * var(#{$universal-padding-var}));
margin-left: calc(1.5 * var(#{$universal-margin-var}));
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
background-position: 0.25rem 0.9375rem;
background-repeat: no-repeat;
+ pre.card-examples {
margin-left: calc(1.5 * var(#{$universal-margin-var}));
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
&.toggled{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
+ pre.card-examples {
position: relative;
transform: scaleY(1);
}
}
}
pre.section {
&.card-code {
position: relative;
margin-bottom: 0;
padding-bottom: 0;
padding-top: calc(3 * var(--universal-padding));
}
&.card-examples {
margin-top: 0;
margin-bottom: 0;
border-radius: 0 0 calc(4 * var(#{$universal-border-radius-var})) calc(4 * var(#{$universal-border-radius-var}));
padding-top: 0;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0.5625rem;
border-left: $__1px solid var(#{$collapse-color-var});
height: calc(100% - 18px);
}
}
}
.copy-button-container {
position: relative;
z-index: 2;
.copy-button {
background: var(#{$copy-button-color-var});
box-sizing: border-box;
position: absolute;
top: -1.75rem;
right: 0;
margin: calc(2 * var(#{$universal-margin-var}));
padding: calc(2.5 * var(#{$universal-padding-var}));
border-radius: 50%;
border: 0;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
&:hover, &:focus {
background-color: var(#{$copy-button-hover-color-var});
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
&:before {
background: var(#{$back-color-var});
position: absolute;
top: -0.25rem;
right: -0.25rem;
content: '';
display: block;
box-sizing: border-box;
padding: calc(2.5 * var(#{$universal-padding-var}));
border-radius: 50%;
border: 0.25rem solid var(#{$back-color-var});
z-index: -1;
}
}
}
.corner {
box-sizing: border-box;
position: absolute;
top: -0.5rem;
right: -2.125rem;
width: 4rem;
height: 2rem;
padding-top: 2rem;
transform: rotate(45deg);
text-align: center;
font-size: 0.75rem;
font-weight: 500;
color: var(#{$back-color-var});
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1);
&.beginner {
background: var(#{$beginner-color-var});
}
&.intermediate {
background: var(#{$intermediate-color-var});
}
&.advanced {
background: var(#{$advanced-color-var});
}
}
}
}
// ===================================================
// Toast
// ===================================================
.toast {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 2);
margin-bottom: 0;
font-size: 0.8125rem;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$back-color-var});
background: var(#{$fore-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
// ===================================================
// Navigation
// ===================================================
header {
box-sizing: border-box;
overflow: hidden;
height: 3.5rem;
position: fixed;
width: 110%;
top: 0;
left: -5%;
box-shadow: 0 2px 4px rgba(0,0,0,.5);
z-index: 5;
background: var(#{$header-back-color-var});
transition: top 0.3s ease;
h1 {
&.logo {
position: relative;
top: 0;
margin-top: 0;
font-size: 1.625rem;
text-align: center;
// transition: top 0.3s ease;
}
a, a:link, a:visited {
color: var(#{$header-fore-color-var});
&:hover, &:focus {
text-decoration: none;
}
}
small {
display: block;
font-size: 0.875rem;
color: var(#{$header-back-color-var});
margin-top: 0.75rem;
}
}
img {
height: 3.5rem;
padding: 0.375rem;
box-sizing: border-box;
}
#title {
position: relative;
top: -1.125rem;
@media screen and (max-width: 768px) { display: none; }
}
}
nav {
position: fixed;
top: 6.5rem;
left: -320px;
width: 320px;
transition: left 0.3s ease;
z-index: 1100;
height: calc(100vh - 6.5rem);
box-sizing: border-box;
display: block;
background: var(#{$nav-back-color-var});
border: 0;
overflow-y: auto;
@media screen and (max-width: 320px) {
width: 100%;
}
@media screen and (min-width: #{$grid-medium-breakpoint}) {
width: 33vw;
left: -33vw;
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
width: 25vw;
left: -25vw;
}
&.col-nav {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
left: 0;
// Also apply the main content style to the footer
@media screen and (min-width: #{$grid-medium-breakpoint}) {
+ main.col-centered, + main.col-centered + footer.col-full-width {
grid-column: 5/13;
}
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
+ main.col-centered {
grid-column: 4/12;
padding-left: 8vw;
}
+ main.col-centered + footer.col-full-width {
grid-column: 4/13;
}
}
}
h4 {
margin: 0;
padding: calc(2.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var})) calc(1 * var(#{$universal-padding-var})) calc(1 * var(#{$universal-padding-var}));
color: var(#{$nav-fore-color-var});
font-size: 1.5rem;
&.collapse {
display: block;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
//background-position: 0rem 1.25rem;
background-position: right 0.5rem top 1.5rem;
background-repeat: no-repeat;
+ ul {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
&.toggled{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
+ ul {
position: relative;
transform: scaleY(1);
}
}
}
+ h4 {
border-top: $__1px solid var(#{$nav-link-border-color-var});
}
> a {
display: block;
line-height: 1;
&:hover, &:focus {
text-decoration: none;
}
}
}
ul {
width: 100%;
margin-left: -0.75rem;
background: var(#{$nav-back-color-var});
+ h4 {
border-top: $__1px solid var(#{$nav-link-border-color-var});
}
}
li {
margin: calc(0.5 * var(#{$universal-margin-var}));
margin-left: var(#{$universal-margin-var});
margin-bottom: 0;
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var}));
border-left: $__1px solid var(#{$nav-link-border-color-var});
&:hover {
text-decoration: none;
background: var(#{$nav-link-hover-color-var});
}
+ li {
margin-top: 0;
}
}
a {
&:link, &:visited {
color: var(#{$nav-link-fore-color-var});
}
}
button.social {
width: 33.333%;
margin: 0;
border: 0;
border-radius: 0;
box-sizing: border-box;
height: 4rem;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
&.fb {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E");
background-color: #1565c0;
}
&.instagram {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
background-color: #ec407a;
}
&.twitter {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");
background-color: #03a9f4;
}
}
}
[type="search"] {
z-index: 1000;
position: fixed;
top: 3.5rem;
height: 3rem;
left: -320px;
width: 320px;
color: var(#{$search-fore-color-var});
background: var(#{$search-back-color-var});
outline: none;
box-sizing: border-box;
border: none;
border-bottom: $__1px solid var(#{$search-border-color-var});
margin-bottom: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
transition: all 0.3s ease;
@media screen and (max-width: 320px) {
width: 100%;
}
@media screen and (min-width: #{$grid-medium-breakpoint}) {
width: 33vw;
left: -33vw;
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
width: 25vw;
left: -25vw;
}
&.col-nav {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
left: 0;
// Also apply the main content style to the footer
@media screen and (min-width: #{$grid-medium-breakpoint}) {
+ main.col-centered, + main.col-centered + footer.col-full-width {
grid-column: 5/13;
}
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
+ main.col-centered {
grid-column: 4/12;
padding-left: 8vw;
}
+ main.col-centered + footer.col-full-width {
grid-column: 4/13;
}
}
}
&:hover, &:focus {
border-bottom: $__1px solid var(#{$search-hover-border-color-var});
}
&:focus {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2), inset 0 0-$__1px 0 0 var(#{$search-hover-border-color-var});
}
}
.menu-button {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-sizing: border-box;
outline: none;
height: 3.5rem;
width: 3.5rem;
border: 0;
background: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.875rem 0.875rem;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: rgba(255,255,255, 0.08);
}
&.toggled {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
}
}
footer {
color: var(#{$footer-fore-color-var});
background: var(#{$footer-back-color-var});
padding-top: calc(2 * var(#{$universal-padding-var}));
padding-bottom: calc(3 * var(#{$universal-padding-var}));
margin-top: calc(6 * var(#{$universal-margin-var}));
* {
font-size: 0.875rem;
}
a, a:link, a:visited {
color: var(#{$fore-color-var});
}
}
.scroll-to-top {
position: fixed;
bottom: 1rem;
right: 1.375rem;
box-sizing: border-box;
z-index: 1100;
height: 2.75rem;
width: 2.75rem;
border: 0;
border-radius: 100%;
background: var(#{$scrolltop-button-color-var});
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
&:hover, &:focus {
background-color: var(#{$scrolltop-button-hover-color-var});
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
}
}
// About page
.card.contributor > .section.button {
font-size: 1rem;
font-weight: 500;
text-align: center;
display: block;
transition: all 0.3s ease;
&:link, &:visited {
color: var(#{$fore-color-var});
&:hover {
color: var(#{$a-link-color-var});
text-decoration: none;
}
}
}

27
docs/sponsors/DO_Logo_icon_blue.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="65.2 173.5 180 180" style="enable-background:new 65.2 173.5 180 180;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0080FF;}
</style>
<g id="XMLID_229_">
<g id="XMLID_690_">
<g id="XMLID_691_">
<g>
<g id="XMLID_44_">
<g id="XMLID_48_">
<path id="XMLID_49_" class="st0" d="M155.2,351.7v-34.2c36.2,0,64.3-35.9,50.4-74c-5.1-14.1-16.4-25.4-30.5-30.5
c-38.1-13.8-74,14.2-74,50.4l0,0H67c0-57.7,55.8-102.7,116.3-83.8c26.4,8.3,47.5,29.3,55.7,55.7
C257.9,295.9,213,351.7,155.2,351.7z"/>
</g>
<polygon id="XMLID_47_" class="st0" points="155.3,317.6 121.3,317.6 121.3,283.6 121.3,283.6 155.3,283.6 155.3,283.6
"/>
<polygon id="XMLID_46_" class="st0" points="121.3,343.8 95.1,343.8 95.1,343.8 95.1,317.6 121.3,317.6 "/>
<path id="XMLID_45_" class="st0" d="M95.1,317.6H73.2l0,0v-21.9l0,0h21.9l0,0V317.6z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

298
docs/string.html Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/style.css Normal file
View File

File diff suppressed because one or more lines are too long

190
docs/type.html Normal file
View File

File diff suppressed because one or more lines are too long

78
docs/uncategorized.html Normal file
View File

File diff suppressed because one or more lines are too long

287
docs/utility.html Normal file
View File

File diff suppressed because one or more lines are too long

3
glossary/AJAX.md Normal file
View File

@ -0,0 +1,3 @@
### AJAX
Asynchronous JavaScript and XML (known as AJAX) is a term that describes a new approach to using multiple technologies together in order to enable web applications to make quick updates to the user interface without reloading the entire browser page.

4
glossary/API.md Normal file
View File

@ -0,0 +1,4 @@
### API
API stands for Application Programming Interface and is a set of features and rules provided by a provided by a software to enable third-party software to interact with it.
The code features of a web API usually include methods, properties, events or URLs.

4
glossary/Argument.md Normal file
View File

@ -0,0 +1,4 @@
### Argument
An argument is a value passed as an input to a function and can be either a primitive or an object.
In JavaScript, functions can also be passed as arguments to other functions.

5
glossary/Array.md Normal file
View File

@ -0,0 +1,5 @@
### Array
Arrays are used to store multiple values in a single variable.
Arrays are ordered and each item in an array has a numeric index associated with it.
JavaScript arrays are zero-indexed, meaning the first element's index is 0.

4
glossary/Asynchronous-programming.md Normal file
View File

@ -0,0 +1,4 @@
### Asynchronous programming
Asynchronous programming is a way to allow multiple events to trigger code without waiting for each other.
The main benefits of asynchronous programming are improved application performance and responsiveness.

3
glossary/Automatic-semicolon-insertion.md Normal file
View File

@ -0,0 +1,3 @@
### Automatic semicolon insertion
Automatic semicolon insertion (ASI) is a JavaScript feature that allows developers to omit semicolons in their code.

4
glossary/Boolean.md Normal file
View File

@ -0,0 +1,4 @@
### Boolean
Booleans are one of the primitive data types in JavaScript.
They represent logical data values and can only be `true` or `false`.

3
glossary/CORS.md Normal file
View File

@ -0,0 +1,3 @@
### CORS
Cross-Origin Resource Sharing (known as CORS) is a mechanism that uses extra HTTP headers to tell a browser to let a web application running at one domain have permission to access resources from a server at a different domain.

4
glossary/CSS.md Normal file
View File

@ -0,0 +1,4 @@
### CSS
CSS stands for Cascading Style Sheets and is a language used to style web pages.
CSS documents are plaintext documents structured with rules, which consist of element selectors and property-value pairs that apply the styles to the specified selectors.

5
glossary/CSV.md Normal file
View File

@ -0,0 +1,5 @@
### CSV
CSV stands for Comma-Separated Values and is a storage format for tabular data.
CSV documents are plaintext documents where each line represents a table row, with table columns separated by commas or some other delimiter (e.g. semicolons).
The first line of a CSV document sometimes consists of the table column headings for the data to follow.

4
glossary/Callback.md Normal file
View File

@ -0,0 +1,4 @@
### Callback
A callback function, also known as a high-order function, is a function that is passed into another function as an argument, which is then executed inside the outer function.
Callbacks can be synchronous or asynchronous.

4
glossary/Character-encoding.md Normal file
View File

@ -0,0 +1,4 @@
### Character encoding
A character encoding defines a mapping between bytes and text, specifying how the sequenece of bytes should be interpreted.
Two commonly used character encodings are ASCII and UTF-8.

3
glossary/Class.md Normal file
View File

@ -0,0 +1,3 @@
### Class
In object-oriented programming, a class is a template definition of an object's properties and methods.

4
glossary/Closure.md Normal file
View File

@ -0,0 +1,4 @@
### Closure
A closure is the combination of a function and the lexical environment within which that function was declared.
The closure allows a function to access the contents of that environment.

3
glossary/CoffeeScript.md Normal file
View File

@ -0,0 +1,3 @@
### CoffeeScript
CoffeeScript is a programming language inspired by Ruby, Python and Haskell that transpiles to JavaScript.

4
glossary/Constant.md Normal file
View File

@ -0,0 +1,4 @@
### Constant
A constant is a value, associated with an identifier.
The value of a constant can be accessed using the identifier and cannot be altered during execution.

4
glossary/Constructor.md Normal file
View File

@ -0,0 +1,4 @@
### Constructor
In class-based object-oriented programming, a constructor is a special type of function called to instantiate an object.
Constructors often accept arguments that are commonly used to set member properties.

4
glossary/Continuous-Deployment.md Normal file
View File

@ -0,0 +1,4 @@
### Continuous Deployment
Continuous Deployment follows the testing that happens during Continuous Integration and pushes changes to a staging or production system.
Continuous Deployment ensures that a version of the codebase is accessible at all times.

4
glossary/Continuous-Integration.md Normal file
View File

@ -0,0 +1,4 @@
### Continuous Integration
Continuous Integration (CI) is the practice of testing each change done to a codebase automatically and as early as possible.
Two popular CI systems that integrate with GitHub are Travis CI and Circle CI.

4
glossary/Cross-site-scripting-xss.md Normal file
View File

@ -0,0 +1,4 @@
### Cross-site scripting (XSS)
XSS refers to client-side code injection where the attacker injects malicious scripts into a legitimate website or web application.
This is often achieved when the application does not validate user input and freely injects dynamic HTML content.

4
glossary/Currying.md Normal file
View File

@ -0,0 +1,4 @@
### Currying
Currying is a way of constructing functions that allows partial application of a function's arguments.
Practically, this means that a function is broken down into a series of functions, each one accepting part of the arguments.

Some files were not shown because too many files have changed in this diff Show More