Angelos Chalaris
5 years ago
parent
91acf51cf7
commit
902fea8b1e
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@ -1 +0,0 @@
|
||||
30secondsofcode.org
|
||||
@ -1,598 +0,0 @@
|
||||
<!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">
|
||||
<script>
|
||||
const search = (node) => {
|
||||
if (node.value.toLowerCase().trim() === '') {
|
||||
document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = '');
|
||||
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
|
||||
return;
|
||||
}
|
||||
let matchingTags = [];
|
||||
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if (data.includes(true)) {
|
||||
x.style.display = '';
|
||||
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
|
||||
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
|
||||
})
|
||||
}
|
||||
function scrollToTop() {
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
if (duration <= 0) return;
|
||||
var difference = to - element.scrollTop;
|
||||
var perTick = difference / duration * 40;
|
||||
|
||||
setTimeout(function () {
|
||||
element.scrollTop = element.scrollTop + perTick;
|
||||
if (element.scrollTop === to) {
|
||||
window.location.href = "#" + id;
|
||||
return;
|
||||
}
|
||||
scrollTo(element, to, id, duration - 40);
|
||||
}, 40);
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if (window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.target.classList.contains('collapse')) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('[type="search"]').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('social')) {
|
||||
if (event.target.classList.contains('fb')) {
|
||||
window.location = "https://www.facebook.com/30secondsofcode";
|
||||
}
|
||||
else if (event.target.classList.contains('instagram')) {
|
||||
window.location = "https://www.instagram.com/30secondsofcode";
|
||||
}
|
||||
else if (event.target.classList.contains('twitter')) {
|
||||
window.location = "https://twitter.com/30secondsofcode";
|
||||
}
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function () {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
document.body.removeChild(tst);
|
||||
}, 300);
|
||||
}, 1700);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<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>
|
||||
<button class="menu-button"></button>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 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">
|
||||
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
|
||||
<nav>
|
||||
undefined<h4 class="collapse">Adapter
|
||||
</h4><ul><li><a tags="adapter,function,intermediate" href="./adapter#ary">ary</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#call">call</a></li>
|
||||
<li><a tags="adapter,function,array,intermediate" href="./adapter#collectinto">collectInto</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#flip">flip</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#over">over</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#overargs">overArgs</a></li>
|
||||
<li><a tags="adapter,function,promise,intermediate" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#pipefunctions">pipeFunctions</a></li>
|
||||
<li><a tags="adapter,function,promise,intermediate" href="./adapter#promisify">promisify</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#rearg">rearg</a></li>
|
||||
<li><a tags="adapter,intermediate" href="./adapter#spreadover">spreadOver</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#unary">unary</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Array
|
||||
</h4><ul><li><a tags="array,function,beginner" href="./index#all">all</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#allequal">allEqual</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#any">any</a></li>
|
||||
<li><a tags="array,string,utility,intermediate" href="./index#arraytocsv">arrayToCSV</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#bifurcate">bifurcate</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#bifurcateby">bifurcateBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#chunk">chunk</a></li>
|
||||
<li><a tags="array,beginner" href="./index#compact">compact</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#countby">countBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#countoccurrences">countOccurrences</a></li>
|
||||
<li><a tags="array,recursion,intermediate" href="./index#deepflatten">deepFlatten</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#difference">difference</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#differenceby">differenceBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#differencewith">differenceWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#drop">drop</a></li>
|
||||
<li><a tags="array,beginner" href="./index#dropright">dropRight</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#droprightwhile">dropRightWhile</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#dropwhile">dropWhile</a></li>
|
||||
<li><a tags="array,beginner" href="./index#everynth">everyNth</a></li>
|
||||
<li><a tags="array,beginner" href="./index#filterfalsy">filterFalsy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#filternonunique">filterNonUnique</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#filternonuniqueby">filterNonUniqueBy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#findlast">findLast</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#findlastindex">findLastIndex</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#flatten">flatten</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#foreachright">forEachRight</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#groupby">groupBy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#head">head</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#indexofall">indexOfAll</a></li>
|
||||
<li><a tags="array,beginner" href="./index#initial">initial</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#initialize2darray">initialize2DArray</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithrange">initializeArrayWithRange</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithrangeright">initializeArrayWithRangeRight</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithvalues">initializeArrayWithValues</a></li>
|
||||
<li><a tags="array,recursion,intermediate" href="./index#initializendarray">initializeNDArray</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#intersection">intersection</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#intersectionby">intersectionBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#intersectionwith">intersectionWith</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#issorted">isSorted</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#join">join</a></li>
|
||||
<li><a tags="array,string,object,advanced" href="./index#jsontocsv">JSONtoCSV</a></li>
|
||||
<li><a tags="array,beginner" href="./index#last">last</a></li>
|
||||
<li><a tags="array,string,utility,intermediate" href="./index#longestitem">longestItem</a></li>
|
||||
<li><a tags="array,object,advanced" href="./index#mapobject">mapObject</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#maxn">maxN</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#minn">minN</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#none">none</a></li>
|
||||
<li><a tags="array,beginner" href="./index#nthelement">nthElement</a></li>
|
||||
<li><a tags="array,beginner" href="./index#offset">offset</a></li>
|
||||
<li><a tags="array,object,function,intermediate" href="./index#partition">partition</a></li>
|
||||
<li><a tags="array,recursion,advanced" href="./index#permutations">permutations</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#pull">pull</a></li>
|
||||
<li><a tags="array,advanced" href="./index#pullatindex">pullAtIndex</a></li>
|
||||
<li><a tags="array,advanced" href="./index#pullatvalue">pullAtValue</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#pullby">pullBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#reducedfilter">reducedFilter</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#reducesuccessive">reduceSuccessive</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#reducewhich">reduceWhich</a></li>
|
||||
<li><a tags="array,beginner" href="./index#reject">reject</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#remove">remove</a></li>
|
||||
<li><a tags="array,random,beginner" href="./index#sample">sample</a></li>
|
||||
<li><a tags="array,random,intermediate" href="./index#samplesize">sampleSize</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#shank">shank</a></li>
|
||||
<li><a tags="array,random,intermediate" href="./index#shuffle">shuffle</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#similarity">similarity</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#sortedindex">sortedIndex</a></li>
|
||||
<li><a tags="array,math,function,intermediate" href="./index#sortedindexby">sortedIndexBy</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#sortedlastindex">sortedLastIndex</a></li>
|
||||
<li><a tags="array,math,function,intermediate" href="./index#sortedlastindexby">sortedLastIndexBy</a></li>
|
||||
<li><a tags="array,sort,advanced,intermediate" href="./index#stablesort">stableSort</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#symmetricdifference">symmetricDifference</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#symmetricdifferenceby">symmetricDifferenceBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#symmetricdifferencewith">symmetricDifferenceWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#tail">tail</a></li>
|
||||
<li><a tags="array,beginner" href="./index#take">take</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#takeright">takeRight</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#takerightwhile">takeRightWhile</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#takewhile">takeWhile</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#tohash">toHash</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#union">union</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#unionby">unionBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#unionwith">unionWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#uniqueelements">uniqueElements</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#uniqueelementsby">uniqueElementsBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#uniqueelementsbyright">uniqueElementsByRight</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#uniquesymmetricdifference">uniqueSymmetricDifference</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#unzip">unzip</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#unzipwith">unzipWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#without">without</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#xprod">xProd</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#zip">zip</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#zipobject">zipObject</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#zipwith">zipWith</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Browser
|
||||
</h4><ul><li><a tags="browser,array,intermediate" href="./browser#arraytohtmllist">arrayToHtmlList</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#bottomvisible">bottomVisible</a></li>
|
||||
<li><a tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a></li>
|
||||
<li><a tags="browser,advanced" href="./browser#counter">counter</a></li>
|
||||
<li><a tags="browser,utility,beginner" href="./browser#createelement">createElement</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a></li>
|
||||
<li><a tags="browser,url,beginner" href="./browser#currenturl">currentURL</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#detectdevicetype">detectDeviceType</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#elementcontains">elementContains</a></li>
|
||||
<li><a tags="browser,advanced" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a></li>
|
||||
<li><a tags="browser,object,intermediate" href="./browser#formtoobject">formToObject</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#getimages">getImages</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#getscrollposition">getScrollPosition</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#getstyle">getStyle</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#hasclass">hasClass</a></li>
|
||||
<li><a tags="browser,utility,advanced,promise,advanced" href="./browser#hashbrowser">hashBrowser</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#hide">hide</a></li>
|
||||
<li><a tags="browser,url,intermediate" href="./browser#httpsredirect">httpsRedirect</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#insertafter">insertAfter</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#insertbefore">insertBefore</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a></li>
|
||||
<li><a tags="browser,array,beginner" href="./browser#nodelisttoarray">nodeListToArray</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#off">off</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#on">on</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a></li>
|
||||
<li><a tags="browser,utility,intermediate" href="./browser#prefix">prefix</a></li>
|
||||
<li><a tags="browser,utility,intermediate" href="./browser#recordanimationframes">recordAnimationFrames</a></li>
|
||||
<li><a tags="browser,url,beginner" href="./browser#redirect">redirect</a></li>
|
||||
<li><a tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#scrolltotop">scrollToTop</a></li>
|
||||
<li><a tags="browser,string,intermediate" href="./browser#serializeform">serializeForm</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#setstyle">setStyle</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#show">show</a></li>
|
||||
<li><a tags="browser,css,intermediate" href="./browser#smoothscroll">smoothScroll</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#toggleclass">toggleClass</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#triggerevent">triggerEvent</a></li>
|
||||
<li><a tags="browser,utility,random,intermediate" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Date
|
||||
</h4><ul><li><a tags="date,beginner" href="./date#dayofyear">dayOfYear</a></li>
|
||||
<li><a tags="date,math,string,utility,intermediate" href="./date#formatduration">formatDuration</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#getcolontimefromdate">getColonTimeFromDate</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a></li>
|
||||
<li><a tags="date,beginner" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#isafterdate">isAfterDate</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#isbeforedate">isBeforeDate</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#issamedate">isSameDate</a></li>
|
||||
<li><a tags="date,beginner" href="./date#isweekday">isWeekday</a></li>
|
||||
<li><a tags="date,beginner" href="./date#isweekend">isWeekend</a></li>
|
||||
<li><a tags="date,math,beginner" href="./date#maxdate">maxDate</a></li>
|
||||
<li><a tags="date,math,beginner" href="./date#mindate">minDate</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#tomorrow">tomorrow</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#yesterday">yesterday</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Function
|
||||
</h4><ul><li><a tags="function,intermediate" href="./function#attempt">attempt</a></li>
|
||||
<li><a tags="function,object,intermediate" href="./function#bind">bind</a></li>
|
||||
<li><a tags="function,object,intermediate" href="./function#bindkey">bindKey</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#chainasync">chainAsync</a></li>
|
||||
<li><a tags="function,object,utility,beginner" href="./function#checkprop">checkProp</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#compose">compose</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#composeright">composeRight</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#converge">converge</a></li>
|
||||
<li><a tags="function,recursion,intermediate" href="./function#curry">curry</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#debounce">debounce</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#defer">defer</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#delay">delay</a></li>
|
||||
<li><a tags="function,utility,beginner" href="./function#functionname">functionName</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#hz">hz</a></li>
|
||||
<li><a tags="function,advanced" href="./function#memoize">memoize</a></li>
|
||||
<li><a tags="function,beginner" href="./function#negate">negate</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#once">once</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#partial">partial</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#partialright">partialRight</a></li>
|
||||
<li><a tags="function,promise,intermediate" href="./function#runpromisesinseries">runPromisesInSeries</a></li>
|
||||
<li><a tags="function,promise,intermediate" href="./function#sleep">sleep</a></li>
|
||||
<li><a tags="function,advanced" href="./function#throttle">throttle</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#times">times</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#uncurry">uncurry</a></li>
|
||||
<li><a tags="function,array,intermediate" href="./function#unfold">unfold</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#when">when</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Math
|
||||
</h4><ul><li><a tags="math,beginner" href="./math#approximatelyequal">approximatelyEqual</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#average">average</a></li>
|
||||
<li><a tags="math,array,function,intermediate" href="./math#averageby">averageBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#binomialcoefficient">binomialCoefficient</a></li>
|
||||
<li><a tags="math,beginner" href="./math#clampnumber">clampNumber</a></li>
|
||||
<li><a tags="math,beginner" href="./math#degreestorads">degreesToRads</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#digitize">digitize</a></li>
|
||||
<li><a tags="math,beginner" href="./math#distance">distance</a></li>
|
||||
<li><a tags="math,array,advanced" href="./math#elo">elo</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#factorial">factorial</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#fibonacci">fibonacci</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#gcd">gcd</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#geometricprogression">geometricProgression</a></li>
|
||||
<li><a tags="math,beginner" href="./math#hammingdistance">hammingDistance</a></li>
|
||||
<li><a tags="math,beginner" href="./math#inrange">inRange</a></li>
|
||||
<li><a tags="math,beginner" href="./math#isdivisible">isDivisible</a></li>
|
||||
<li><a tags="math,beginner" href="./math#iseven">isEven</a></li>
|
||||
<li><a tags="math,utility,beginner" href="./math#isnegativezero">isNegativeZero</a></li>
|
||||
<li><a tags="math,beginner,intermediate" href="./math#isprime">isPrime</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#lcm">lcm</a></li>
|
||||
<li><a tags="math,utility,advanced" href="./math#luhncheck">luhnCheck</a></li>
|
||||
<li><a tags="math,beginner" href="./math#mapnumrange">mapNumRange</a></li>
|
||||
<li><a tags="math,array,function,beginner" href="./math#maxby">maxBy</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#median">median</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#midpoint">midpoint</a></li>
|
||||
<li><a tags="math,array,function,beginner" href="./math#minby">minBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#percentile">percentile</a></li>
|
||||
<li><a tags="math,beginner" href="./math#powerset">powerset</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#primes">primes</a></li>
|
||||
<li><a tags="math,beginner" href="./math#radstodegrees">radsToDegrees</a></li>
|
||||
<li><a tags="math,utility,random,intermediate" href="./math#randomintarrayinrange">randomIntArrayInRange</a></li>
|
||||
<li><a tags="math,utility,random,beginner" href="./math#randomintegerinrange">randomIntegerInRange</a></li>
|
||||
<li><a tags="math,utility,random,beginner" href="./math#randomnumberinrange">randomNumberInRange</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#round">round</a></li>
|
||||
<li><a tags="math,utility,intermediate" href="./math#sdbm">sdbm</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#standarddeviation">standardDeviation</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#sum">sum</a></li>
|
||||
<li><a tags="math,array,function,intermediate" href="./math#sumby">sumBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#sumpower">sumPower</a></li>
|
||||
<li><a tags="math,beginner" href="./math#tosafeinteger">toSafeInteger</a></li>
|
||||
<li><a tags="math,beginner" href="./math#vectordistance">vectorDistance</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Node
|
||||
</h4><ul><li><a tags="node,string,utility,beginner" href="./node#atob">atob</a></li>
|
||||
<li><a tags="node,string,utility,beginner" href="./node#btoa">btoa</a></li>
|
||||
<li><a tags="node,utility,string,intermediate" href="./node#colorize">colorize</a></li>
|
||||
<li><a tags="node,beginner" href="./node#createdirifnotexists">createDirIfNotExists</a></li>
|
||||
<li><a tags="node,intermediate" href="./node#hasflags">hasFlags</a></li>
|
||||
<li><a tags="node,utility,promise,intermediate" href="./node#hashnode">hashNode</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isduplexstream">isDuplexStream</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isreadablestream">isReadableStream</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isstream">isStream</a></li>
|
||||
<li><a tags="node,intermediate" href="./node#istravisci">isTravisCI</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#iswritablestream">isWritableStream</a></li>
|
||||
<li><a tags="node,json,intermediate" href="./node#jsontofile">JSONToFile</a></li>
|
||||
<li><a tags="node,array,string,beginner" href="./node#readfilelines">readFileLines</a></li>
|
||||
<li><a tags="node,string,beginner" href="./node#untildify">untildify</a></li>
|
||||
<li><a tags="node,utility,random,intermediate" href="./node#uuidgeneratornode">UUIDGeneratorNode</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Object
|
||||
</h4><ul><li><a tags="object,function,intermediate" href="./object#bindall">bindAll</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#deepclone">deepClone</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#deepfreeze">deepFreeze</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#deepget">deepGet</a></li>
|
||||
<li><a tags="object,recursion,advanced" href="./object#deepmapkeys">deepMapKeys</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#defaults">defaults</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#dig">dig</a></li>
|
||||
<li><a tags="object,array,type,advanced" href="./object#equals">equals</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#findkey">findKey</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#findlastkey">findLastKey</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#flattenobject">flattenObject</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#forown">forOwn</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#forownright">forOwnRight</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#functions">functions</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#get">get</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#invertkeyvalues">invertKeyValues</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#lowercasekeys">lowercaseKeys</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#mapkeys">mapKeys</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#mapvalues">mapValues</a></li>
|
||||
<li><a tags="object,type,intermediate" href="./object#matches">matches</a></li>
|
||||
<li><a tags="object,type,function,intermediate" href="./object#matcheswith">matchesWith</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#merge">merge</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#nest">nest</a></li>
|
||||
<li><a tags="object,array,beginner" href="./object#objectfrompairs">objectFromPairs</a></li>
|
||||
<li><a tags="object,array,beginner" href="./object#objecttopairs">objectToPairs</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#omit">omit</a></li>
|
||||
<li><a tags="object,array,function,intermediate" href="./object#omitby">omitBy</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#orderby">orderBy</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#pick">pick</a></li>
|
||||
<li><a tags="object,array,function,intermediate" href="./object#pickby">pickBy</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#renamekeys">renameKeys</a></li>
|
||||
<li><a tags="object,beginner" href="./object#shallowclone">shallowClone</a></li>
|
||||
<li><a tags="object,array,string,intermediate" href="./object#size">size</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#transform">transform</a></li>
|
||||
<li><a tags="object,logic,array,intermediate" href="./object#truthcheckcollection">truthCheckCollection</a></li>
|
||||
<li><a tags="object,advanced" href="./object#unflattenobject">unflattenObject</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">String
|
||||
</h4><ul><li><a tags="string,beginner" href="./string#bytesize">byteSize</a></li>
|
||||
<li><a tags="string,array,intermediate" href="./string#capitalize">capitalize</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#capitalizeeveryword">capitalizeEveryWord</a></li>
|
||||
<li><a tags="string,regexp,beginner" href="./string#compactwhitespace">compactWhitespace</a></li>
|
||||
<li><a tags="string,array,utility,intermediate" href="./string#csvtoarray">CSVToArray</a></li>
|
||||
<li><a tags="string,array,object,advanced" href="./string#csvtojson">CSVToJSON</a></li>
|
||||
<li><a tags="string,array,intermediate" href="./string#decapitalize">decapitalize</a></li>
|
||||
<li><a tags="string,browser,regexp,intermediate" href="./string#escapehtml">escapeHTML</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#escaperegexp">escapeRegExp</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#fromcamelcase">fromCamelCase</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#indentstring">indentString</a></li>
|
||||
<li><a tags="string,utility,browser,url,intermediate" href="./string#isabsoluteurl">isAbsoluteURL</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#isanagram">isAnagram</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#islowercase">isLowerCase</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#isuppercase">isUpperCase</a></li>
|
||||
<li><a tags="string,array,function,utility,beginner" href="./string#mapstring">mapString</a></li>
|
||||
<li><a tags="string,utility,regexp,intermediate" href="./string#mask">mask</a></li>
|
||||
<li><a tags="string,beginner" href="./string#pad">pad</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#palindrome">palindrome</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#pluralize">pluralize</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#removenonascii">removeNonASCII</a></li>
|
||||
<li><a tags="string,array,beginner" href="./string#reversestring">reverseString</a></li>
|
||||
<li><a tags="string,beginner" href="./string#sortcharactersinstring">sortCharactersInString</a></li>
|
||||
<li><a tags="string,beginner" href="./string#splitlines">splitLines</a></li>
|
||||
<li><a tags="string,recursion,advanced" href="./string#stringpermutations">stringPermutations</a></li>
|
||||
<li><a tags="string,utility,regexp,beginner" href="./string#striphtmltags">stripHTMLTags</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tocamelcase">toCamelCase</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tokebabcase">toKebabCase</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tosnakecase">toSnakeCase</a></li>
|
||||
<li><a tags="string,regepx,intermediate" href="./string#totitlecase">toTitleCase</a></li>
|
||||
<li><a tags="string,beginner" href="./string#truncatestring">truncateString</a></li>
|
||||
<li><a tags="string,browser,beginner" href="./string#unescapehtml">unescapeHTML</a></li>
|
||||
<li><a tags="string,utility,regexp,advanced" href="./string#urljoin">URLJoin</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#words">words</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Type
|
||||
</h4><ul><li><a tags="type,beginner" href="./type#gettype">getType</a></li>
|
||||
<li><a tags="type,array,regexp,beginner" href="./type#is">is</a></li>
|
||||
<li><a tags="type,array,intermediate" href="./type#isarraylike">isArrayLike</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isboolean">isBoolean</a></li>
|
||||
<li><a tags="type,array,object,string,beginner" href="./type#isempty">isEmpty</a></li>
|
||||
<li><a tags="type,function,beginner" href="./type#isfunction">isFunction</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isnil">isNil</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isnull">isNull</a></li>
|
||||
<li><a tags="type,math,beginner" href="./type#isnumber">isNumber</a></li>
|
||||
<li><a tags="type,object,beginner" href="./type#isobject">isObject</a></li>
|
||||
<li><a tags="type,object,beginner" href="./type#isobjectlike">isObjectLike</a></li>
|
||||
<li><a tags="type,object,intermediate" href="./type#isplainobject">isPlainObject</a></li>
|
||||
<li><a tags="type,function,array,string,intermediate" href="./type#isprimitive">isPrimitive</a></li>
|
||||
<li><a tags="type,function,promise,intermediate" href="./type#ispromiselike">isPromiseLike</a></li>
|
||||
<li><a tags="type,string,beginner" href="./type#isstring">isString</a></li>
|
||||
<li><a tags="type,beginner" href="./type#issymbol">isSymbol</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isundefined">isUndefined</a></li>
|
||||
<li><a tags="type,json,intermediate" href="./type#isvalidjson">isValidJSON</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Utility
|
||||
</h4><ul><li><a tags="utility,array,type,beginner" href="./utility#castarray">castArray</a></li>
|
||||
<li><a tags="utility,regexp,intermediate" href="./utility#cloneregexp">cloneRegExp</a></li>
|
||||
<li><a tags="utility,beginner" href="./utility#coalesce">coalesce</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#coalescefactory">coalesceFactory</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#extendhex">extendHex</a></li>
|
||||
<li><a tags="utility,browser,string,url,intermediate" href="./utility#geturlparameters">getURLParameters</a></li>
|
||||
<li><a tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a></li>
|
||||
<li><a tags="utility,url,browser,intermediate" href="./utility#httpget">httpGet</a></li>
|
||||
<li><a tags="utility,url,browser,intermediate" href="./utility#httppost">httpPost</a></li>
|
||||
<li><a tags="utility,browser,intermediate" href="./utility#isbrowser">isBrowser</a></li>
|
||||
<li><a tags="utility,function" href="./utility#mostperformant">mostPerformant</a></li>
|
||||
<li><a tags="utility,function,beginner" href="./utility#ntharg">nthArg</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#parsecookie">parseCookie</a></li>
|
||||
<li><a tags="utility,string,math,advanced" href="./utility#prettybytes">prettyBytes</a></li>
|
||||
<li><a tags="utility,random,beginner" href="./utility#randomhexcolorcode">randomHexColorCode</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#rgbtohex">RGBToHex</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#serializecookie">serializeCookie</a></li>
|
||||
<li><a tags="utility,beginner" href="./utility#timetaken">timeTaken</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#tocurrency">toCurrency</a></li>
|
||||
<li><a tags="utility,math,beginner" href="./utility#todecimalmark">toDecimalMark</a></li>
|
||||
<li><a tags="utility,math,intermediate" href="./utility#toordinalsuffix">toOrdinalSuffix</a></li>
|
||||
<li><a tags="utility,math,intermediate" href="./utility#validatenumber">validateNumber</a></li>
|
||||
<li><a tags="utility,regexp,intermediate" href="./utility#yesno">yesNo</a></li>
|
||||
</ul>
|
||||
|
||||
<h4 class="static-link"><a href="./archive">Archive</a></h4>
|
||||
<h4 class="static-link"><a href="./glossary">Glossary</a></h4>
|
||||
<h4 class="static-link"><a href="./contributing">Contributing</a></h4>
|
||||
<h4 class="static-link"><a href="./about">About</a></h4>
|
||||
<div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
|
||||
</nav>
|
||||
<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/30-seconds/30-seconds-of-python-code">30 seconds of Python</a></li>
|
||||
<li><a href="https://github.com/30-seconds/30-seconds-of-php-code">30 seconds of PHP</a></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.</p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,19 +0,0 @@
|
||||
<!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>
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 367 B |
@ -1,549 +0,0 @@
|
||||
<!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">
|
||||
<script>
|
||||
const search = (node) => {
|
||||
if (node.value.toLowerCase().trim() === '') {
|
||||
document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = '');
|
||||
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
|
||||
return;
|
||||
}
|
||||
let matchingTags = [];
|
||||
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if (data.includes(true)) {
|
||||
x.style.display = '';
|
||||
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
|
||||
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
|
||||
})
|
||||
}
|
||||
function scrollToTop() {
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
if (duration <= 0) return;
|
||||
var difference = to - element.scrollTop;
|
||||
var perTick = difference / duration * 40;
|
||||
|
||||
setTimeout(function () {
|
||||
element.scrollTop = element.scrollTop + perTick;
|
||||
if (element.scrollTop === to) {
|
||||
window.location.href = "#" + id;
|
||||
return;
|
||||
}
|
||||
scrollTo(element, to, id, duration - 40);
|
||||
}, 40);
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if (window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.target.classList.contains('collapse')) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('[type="search"]').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('social')) {
|
||||
if (event.target.classList.contains('fb')) {
|
||||
window.location = "https://www.facebook.com/30secondsofcode";
|
||||
}
|
||||
else if (event.target.classList.contains('instagram')) {
|
||||
window.location = "https://www.instagram.com/30secondsofcode";
|
||||
}
|
||||
else if (event.target.classList.contains('twitter')) {
|
||||
window.location = "https://twitter.com/30secondsofcode";
|
||||
}
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function () {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
document.body.removeChild(tst);
|
||||
}, 300);
|
||||
}, 1700);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<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>
|
||||
<button class="menu-button"></button>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 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">
|
||||
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
|
||||
<nav>
|
||||
undefined<h4 class="collapse">Adapter
|
||||
</h4><ul><li><a tags="adapter,function,intermediate" href="./adapter#ary">ary</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#call">call</a></li>
|
||||
<li><a tags="adapter,function,array,intermediate" href="./adapter#collectinto">collectInto</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#flip">flip</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#over">over</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#overargs">overArgs</a></li>
|
||||
<li><a tags="adapter,function,promise,intermediate" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#pipefunctions">pipeFunctions</a></li>
|
||||
<li><a tags="adapter,function,promise,intermediate" href="./adapter#promisify">promisify</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#rearg">rearg</a></li>
|
||||
<li><a tags="adapter,intermediate" href="./adapter#spreadover">spreadOver</a></li>
|
||||
<li><a tags="adapter,function,intermediate" href="./adapter#unary">unary</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Array
|
||||
</h4><ul><li><a tags="array,function,beginner" href="./index#all">all</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#allequal">allEqual</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#any">any</a></li>
|
||||
<li><a tags="array,string,utility,intermediate" href="./index#arraytocsv">arrayToCSV</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#bifurcate">bifurcate</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#bifurcateby">bifurcateBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#chunk">chunk</a></li>
|
||||
<li><a tags="array,beginner" href="./index#compact">compact</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#countby">countBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#countoccurrences">countOccurrences</a></li>
|
||||
<li><a tags="array,recursion,intermediate" href="./index#deepflatten">deepFlatten</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#difference">difference</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#differenceby">differenceBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#differencewith">differenceWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#drop">drop</a></li>
|
||||
<li><a tags="array,beginner" href="./index#dropright">dropRight</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#droprightwhile">dropRightWhile</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#dropwhile">dropWhile</a></li>
|
||||
<li><a tags="array,beginner" href="./index#everynth">everyNth</a></li>
|
||||
<li><a tags="array,beginner" href="./index#filterfalsy">filterFalsy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#filternonunique">filterNonUnique</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#filternonuniqueby">filterNonUniqueBy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#findlast">findLast</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#findlastindex">findLastIndex</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#flatten">flatten</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#foreachright">forEachRight</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#groupby">groupBy</a></li>
|
||||
<li><a tags="array,beginner" href="./index#head">head</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#indexofall">indexOfAll</a></li>
|
||||
<li><a tags="array,beginner" href="./index#initial">initial</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#initialize2darray">initialize2DArray</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithrange">initializeArrayWithRange</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithrangeright">initializeArrayWithRangeRight</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#initializearraywithvalues">initializeArrayWithValues</a></li>
|
||||
<li><a tags="array,recursion,intermediate" href="./index#initializendarray">initializeNDArray</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#intersection">intersection</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#intersectionby">intersectionBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#intersectionwith">intersectionWith</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#issorted">isSorted</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#join">join</a></li>
|
||||
<li><a tags="array,string,object,advanced" href="./index#jsontocsv">JSONtoCSV</a></li>
|
||||
<li><a tags="array,beginner" href="./index#last">last</a></li>
|
||||
<li><a tags="array,string,utility,intermediate" href="./index#longestitem">longestItem</a></li>
|
||||
<li><a tags="array,object,advanced" href="./index#mapobject">mapObject</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#maxn">maxN</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#minn">minN</a></li>
|
||||
<li><a tags="array,function,beginner" href="./index#none">none</a></li>
|
||||
<li><a tags="array,beginner" href="./index#nthelement">nthElement</a></li>
|
||||
<li><a tags="array,beginner" href="./index#offset">offset</a></li>
|
||||
<li><a tags="array,object,function,intermediate" href="./index#partition">partition</a></li>
|
||||
<li><a tags="array,recursion,advanced" href="./index#permutations">permutations</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#pull">pull</a></li>
|
||||
<li><a tags="array,advanced" href="./index#pullatindex">pullAtIndex</a></li>
|
||||
<li><a tags="array,advanced" href="./index#pullatvalue">pullAtValue</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#pullby">pullBy</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#reducedfilter">reducedFilter</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#reducesuccessive">reduceSuccessive</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#reducewhich">reduceWhich</a></li>
|
||||
<li><a tags="array,beginner" href="./index#reject">reject</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#remove">remove</a></li>
|
||||
<li><a tags="array,random,beginner" href="./index#sample">sample</a></li>
|
||||
<li><a tags="array,random,intermediate" href="./index#samplesize">sampleSize</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#shank">shank</a></li>
|
||||
<li><a tags="array,random,intermediate" href="./index#shuffle">shuffle</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#similarity">similarity</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#sortedindex">sortedIndex</a></li>
|
||||
<li><a tags="array,math,function,intermediate" href="./index#sortedindexby">sortedIndexBy</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#sortedlastindex">sortedLastIndex</a></li>
|
||||
<li><a tags="array,math,function,intermediate" href="./index#sortedlastindexby">sortedLastIndexBy</a></li>
|
||||
<li><a tags="array,sort,advanced,intermediate" href="./index#stablesort">stableSort</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#symmetricdifference">symmetricDifference</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#symmetricdifferenceby">symmetricDifferenceBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#symmetricdifferencewith">symmetricDifferenceWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#tail">tail</a></li>
|
||||
<li><a tags="array,beginner" href="./index#take">take</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#takeright">takeRight</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#takerightwhile">takeRightWhile</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#takewhile">takeWhile</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#tohash">toHash</a></li>
|
||||
<li><a tags="array,math,beginner" href="./index#union">union</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#unionby">unionBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#unionwith">unionWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#uniqueelements">uniqueElements</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#uniqueelementsby">uniqueElementsBy</a></li>
|
||||
<li><a tags="array,function,intermediate" href="./index#uniqueelementsbyright">uniqueElementsByRight</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#uniquesymmetricdifference">uniqueSymmetricDifference</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#unzip">unzip</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#unzipwith">unzipWith</a></li>
|
||||
<li><a tags="array,beginner" href="./index#without">without</a></li>
|
||||
<li><a tags="array,math,intermediate" href="./index#xprod">xProd</a></li>
|
||||
<li><a tags="array,intermediate" href="./index#zip">zip</a></li>
|
||||
<li><a tags="array,object,intermediate" href="./index#zipobject">zipObject</a></li>
|
||||
<li><a tags="array,function,advanced" href="./index#zipwith">zipWith</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Browser
|
||||
</h4><ul><li><a tags="browser,array,intermediate" href="./browser#arraytohtmllist">arrayToHtmlList</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#bottomvisible">bottomVisible</a></li>
|
||||
<li><a tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a></li>
|
||||
<li><a tags="browser,advanced" href="./browser#counter">counter</a></li>
|
||||
<li><a tags="browser,utility,beginner" href="./browser#createelement">createElement</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a></li>
|
||||
<li><a tags="browser,url,beginner" href="./browser#currenturl">currentURL</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#detectdevicetype">detectDeviceType</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#elementcontains">elementContains</a></li>
|
||||
<li><a tags="browser,advanced" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a></li>
|
||||
<li><a tags="browser,object,intermediate" href="./browser#formtoobject">formToObject</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#getimages">getImages</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#getscrollposition">getScrollPosition</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#getstyle">getStyle</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#hasclass">hasClass</a></li>
|
||||
<li><a tags="browser,utility,advanced,promise,advanced" href="./browser#hashbrowser">hashBrowser</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#hide">hide</a></li>
|
||||
<li><a tags="browser,url,intermediate" href="./browser#httpsredirect">httpsRedirect</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#insertafter">insertAfter</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#insertbefore">insertBefore</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a></li>
|
||||
<li><a tags="browser,array,beginner" href="./browser#nodelisttoarray">nodeListToArray</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#off">off</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#on">on</a></li>
|
||||
<li><a tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a></li>
|
||||
<li><a tags="browser,utility,intermediate" href="./browser#prefix">prefix</a></li>
|
||||
<li><a tags="browser,utility,intermediate" href="./browser#recordanimationframes">recordAnimationFrames</a></li>
|
||||
<li><a tags="browser,url,beginner" href="./browser#redirect">redirect</a></li>
|
||||
<li><a tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a></li>
|
||||
<li><a tags="browser,intermediate" href="./browser#scrolltotop">scrollToTop</a></li>
|
||||
<li><a tags="browser,string,intermediate" href="./browser#serializeform">serializeForm</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#setstyle">setStyle</a></li>
|
||||
<li><a tags="browser,css,beginner" href="./browser#show">show</a></li>
|
||||
<li><a tags="browser,css,intermediate" href="./browser#smoothscroll">smoothScroll</a></li>
|
||||
<li><a tags="browser,beginner" href="./browser#toggleclass">toggleClass</a></li>
|
||||
<li><a tags="browser,event,intermediate" href="./browser#triggerevent">triggerEvent</a></li>
|
||||
<li><a tags="browser,utility,random,intermediate" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Date
|
||||
</h4><ul><li><a tags="date,beginner" href="./date#dayofyear">dayOfYear</a></li>
|
||||
<li><a tags="date,math,string,utility,intermediate" href="./date#formatduration">formatDuration</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#getcolontimefromdate">getColonTimeFromDate</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a></li>
|
||||
<li><a tags="date,beginner" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#isafterdate">isAfterDate</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#isbeforedate">isBeforeDate</a></li>
|
||||
<li><a tags="date,utility,beginner" href="./date#issamedate">isSameDate</a></li>
|
||||
<li><a tags="date,beginner" href="./date#isweekday">isWeekday</a></li>
|
||||
<li><a tags="date,beginner" href="./date#isweekend">isWeekend</a></li>
|
||||
<li><a tags="date,math,beginner" href="./date#maxdate">maxDate</a></li>
|
||||
<li><a tags="date,math,beginner" href="./date#mindate">minDate</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#tomorrow">tomorrow</a></li>
|
||||
<li><a tags="date,intermediate" href="./date#yesterday">yesterday</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Function
|
||||
</h4><ul><li><a tags="function,intermediate" href="./function#attempt">attempt</a></li>
|
||||
<li><a tags="function,object,intermediate" href="./function#bind">bind</a></li>
|
||||
<li><a tags="function,object,intermediate" href="./function#bindkey">bindKey</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#chainasync">chainAsync</a></li>
|
||||
<li><a tags="function,object,utility,beginner" href="./function#checkprop">checkProp</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#compose">compose</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#composeright">composeRight</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#converge">converge</a></li>
|
||||
<li><a tags="function,recursion,intermediate" href="./function#curry">curry</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#debounce">debounce</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#defer">defer</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#delay">delay</a></li>
|
||||
<li><a tags="function,utility,beginner" href="./function#functionname">functionName</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#hz">hz</a></li>
|
||||
<li><a tags="function,advanced" href="./function#memoize">memoize</a></li>
|
||||
<li><a tags="function,beginner" href="./function#negate">negate</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#once">once</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#partial">partial</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#partialright">partialRight</a></li>
|
||||
<li><a tags="function,promise,intermediate" href="./function#runpromisesinseries">runPromisesInSeries</a></li>
|
||||
<li><a tags="function,promise,intermediate" href="./function#sleep">sleep</a></li>
|
||||
<li><a tags="function,advanced" href="./function#throttle">throttle</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#times">times</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#uncurry">uncurry</a></li>
|
||||
<li><a tags="function,array,intermediate" href="./function#unfold">unfold</a></li>
|
||||
<li><a tags="function,intermediate" href="./function#when">when</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Math
|
||||
</h4><ul><li><a tags="math,beginner" href="./math#approximatelyequal">approximatelyEqual</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#average">average</a></li>
|
||||
<li><a tags="math,array,function,intermediate" href="./math#averageby">averageBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#binomialcoefficient">binomialCoefficient</a></li>
|
||||
<li><a tags="math,beginner" href="./math#clampnumber">clampNumber</a></li>
|
||||
<li><a tags="math,beginner" href="./math#degreestorads">degreesToRads</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#digitize">digitize</a></li>
|
||||
<li><a tags="math,beginner" href="./math#distance">distance</a></li>
|
||||
<li><a tags="math,array,advanced" href="./math#elo">elo</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#factorial">factorial</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#fibonacci">fibonacci</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#gcd">gcd</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#geometricprogression">geometricProgression</a></li>
|
||||
<li><a tags="math,beginner" href="./math#hammingdistance">hammingDistance</a></li>
|
||||
<li><a tags="math,beginner" href="./math#inrange">inRange</a></li>
|
||||
<li><a tags="math,beginner" href="./math#isdivisible">isDivisible</a></li>
|
||||
<li><a tags="math,beginner" href="./math#iseven">isEven</a></li>
|
||||
<li><a tags="math,utility,beginner" href="./math#isnegativezero">isNegativeZero</a></li>
|
||||
<li><a tags="math,beginner,intermediate" href="./math#isprime">isPrime</a></li>
|
||||
<li><a tags="math,recursion,beginner" href="./math#lcm">lcm</a></li>
|
||||
<li><a tags="math,utility,advanced" href="./math#luhncheck">luhnCheck</a></li>
|
||||
<li><a tags="math,beginner" href="./math#mapnumrange">mapNumRange</a></li>
|
||||
<li><a tags="math,array,function,beginner" href="./math#maxby">maxBy</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#median">median</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#midpoint">midpoint</a></li>
|
||||
<li><a tags="math,array,function,beginner" href="./math#minby">minBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#percentile">percentile</a></li>
|
||||
<li><a tags="math,beginner" href="./math#powerset">powerset</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#primes">primes</a></li>
|
||||
<li><a tags="math,beginner" href="./math#radstodegrees">radsToDegrees</a></li>
|
||||
<li><a tags="math,utility,random,intermediate" href="./math#randomintarrayinrange">randomIntArrayInRange</a></li>
|
||||
<li><a tags="math,utility,random,beginner" href="./math#randomintegerinrange">randomIntegerInRange</a></li>
|
||||
<li><a tags="math,utility,random,beginner" href="./math#randomnumberinrange">randomNumberInRange</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#round">round</a></li>
|
||||
<li><a tags="math,utility,intermediate" href="./math#sdbm">sdbm</a></li>
|
||||
<li><a tags="math,array,intermediate" href="./math#standarddeviation">standardDeviation</a></li>
|
||||
<li><a tags="math,array,beginner" href="./math#sum">sum</a></li>
|
||||
<li><a tags="math,array,function,intermediate" href="./math#sumby">sumBy</a></li>
|
||||
<li><a tags="math,intermediate" href="./math#sumpower">sumPower</a></li>
|
||||
<li><a tags="math,beginner" href="./math#tosafeinteger">toSafeInteger</a></li>
|
||||
<li><a tags="math,beginner" href="./math#vectordistance">vectorDistance</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Node
|
||||
</h4><ul><li><a tags="node,string,utility,beginner" href="./node#atob">atob</a></li>
|
||||
<li><a tags="node,string,utility,beginner" href="./node#btoa">btoa</a></li>
|
||||
<li><a tags="node,utility,string,intermediate" href="./node#colorize">colorize</a></li>
|
||||
<li><a tags="node,beginner" href="./node#createdirifnotexists">createDirIfNotExists</a></li>
|
||||
<li><a tags="node,intermediate" href="./node#hasflags">hasFlags</a></li>
|
||||
<li><a tags="node,utility,promise,intermediate" href="./node#hashnode">hashNode</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isduplexstream">isDuplexStream</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isreadablestream">isReadableStream</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#isstream">isStream</a></li>
|
||||
<li><a tags="node,intermediate" href="./node#istravisci">isTravisCI</a></li>
|
||||
<li><a tags="node,type,intermediate" href="./node#iswritablestream">isWritableStream</a></li>
|
||||
<li><a tags="node,json,intermediate" href="./node#jsontofile">JSONToFile</a></li>
|
||||
<li><a tags="node,array,string,beginner" href="./node#readfilelines">readFileLines</a></li>
|
||||
<li><a tags="node,string,beginner" href="./node#untildify">untildify</a></li>
|
||||
<li><a tags="node,utility,random,intermediate" href="./node#uuidgeneratornode">UUIDGeneratorNode</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Object
|
||||
</h4><ul><li><a tags="object,function,intermediate" href="./object#bindall">bindAll</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#deepclone">deepClone</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#deepfreeze">deepFreeze</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#deepget">deepGet</a></li>
|
||||
<li><a tags="object,recursion,advanced" href="./object#deepmapkeys">deepMapKeys</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#defaults">defaults</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#dig">dig</a></li>
|
||||
<li><a tags="object,array,type,advanced" href="./object#equals">equals</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#findkey">findKey</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#findlastkey">findLastKey</a></li>
|
||||
<li><a tags="object,recursion,intermediate" href="./object#flattenobject">flattenObject</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#forown">forOwn</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#forownright">forOwnRight</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#functions">functions</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#get">get</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#invertkeyvalues">invertKeyValues</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#lowercasekeys">lowercaseKeys</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#mapkeys">mapKeys</a></li>
|
||||
<li><a tags="object,function,intermediate" href="./object#mapvalues">mapValues</a></li>
|
||||
<li><a tags="object,type,intermediate" href="./object#matches">matches</a></li>
|
||||
<li><a tags="object,type,function,intermediate" href="./object#matcheswith">matchesWith</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#merge">merge</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#nest">nest</a></li>
|
||||
<li><a tags="object,array,beginner" href="./object#objectfrompairs">objectFromPairs</a></li>
|
||||
<li><a tags="object,array,beginner" href="./object#objecttopairs">objectToPairs</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#omit">omit</a></li>
|
||||
<li><a tags="object,array,function,intermediate" href="./object#omitby">omitBy</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#orderby">orderBy</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#pick">pick</a></li>
|
||||
<li><a tags="object,array,function,intermediate" href="./object#pickby">pickBy</a></li>
|
||||
<li><a tags="object,intermediate" href="./object#renamekeys">renameKeys</a></li>
|
||||
<li><a tags="object,beginner" href="./object#shallowclone">shallowClone</a></li>
|
||||
<li><a tags="object,array,string,intermediate" href="./object#size">size</a></li>
|
||||
<li><a tags="object,array,intermediate" href="./object#transform">transform</a></li>
|
||||
<li><a tags="object,logic,array,intermediate" href="./object#truthcheckcollection">truthCheckCollection</a></li>
|
||||
<li><a tags="object,advanced" href="./object#unflattenobject">unflattenObject</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">String
|
||||
</h4><ul><li><a tags="string,beginner" href="./string#bytesize">byteSize</a></li>
|
||||
<li><a tags="string,array,intermediate" href="./string#capitalize">capitalize</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#capitalizeeveryword">capitalizeEveryWord</a></li>
|
||||
<li><a tags="string,regexp,beginner" href="./string#compactwhitespace">compactWhitespace</a></li>
|
||||
<li><a tags="string,array,utility,intermediate" href="./string#csvtoarray">CSVToArray</a></li>
|
||||
<li><a tags="string,array,object,advanced" href="./string#csvtojson">CSVToJSON</a></li>
|
||||
<li><a tags="string,array,intermediate" href="./string#decapitalize">decapitalize</a></li>
|
||||
<li><a tags="string,browser,regexp,intermediate" href="./string#escapehtml">escapeHTML</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#escaperegexp">escapeRegExp</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#fromcamelcase">fromCamelCase</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#indentstring">indentString</a></li>
|
||||
<li><a tags="string,utility,browser,url,intermediate" href="./string#isabsoluteurl">isAbsoluteURL</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#isanagram">isAnagram</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#islowercase">isLowerCase</a></li>
|
||||
<li><a tags="string,utility,beginner" href="./string#isuppercase">isUpperCase</a></li>
|
||||
<li><a tags="string,array,function,utility,beginner" href="./string#mapstring">mapString</a></li>
|
||||
<li><a tags="string,utility,regexp,intermediate" href="./string#mask">mask</a></li>
|
||||
<li><a tags="string,beginner" href="./string#pad">pad</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#palindrome">palindrome</a></li>
|
||||
<li><a tags="string,intermediate" href="./string#pluralize">pluralize</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#removenonascii">removeNonASCII</a></li>
|
||||
<li><a tags="string,array,beginner" href="./string#reversestring">reverseString</a></li>
|
||||
<li><a tags="string,beginner" href="./string#sortcharactersinstring">sortCharactersInString</a></li>
|
||||
<li><a tags="string,beginner" href="./string#splitlines">splitLines</a></li>
|
||||
<li><a tags="string,recursion,advanced" href="./string#stringpermutations">stringPermutations</a></li>
|
||||
<li><a tags="string,utility,regexp,beginner" href="./string#striphtmltags">stripHTMLTags</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tocamelcase">toCamelCase</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tokebabcase">toKebabCase</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#tosnakecase">toSnakeCase</a></li>
|
||||
<li><a tags="string,regepx,intermediate" href="./string#totitlecase">toTitleCase</a></li>
|
||||
<li><a tags="string,beginner" href="./string#truncatestring">truncateString</a></li>
|
||||
<li><a tags="string,browser,beginner" href="./string#unescapehtml">unescapeHTML</a></li>
|
||||
<li><a tags="string,utility,regexp,advanced" href="./string#urljoin">URLJoin</a></li>
|
||||
<li><a tags="string,regexp,intermediate" href="./string#words">words</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Type
|
||||
</h4><ul><li><a tags="type,beginner" href="./type#gettype">getType</a></li>
|
||||
<li><a tags="type,array,regexp,beginner" href="./type#is">is</a></li>
|
||||
<li><a tags="type,array,intermediate" href="./type#isarraylike">isArrayLike</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isboolean">isBoolean</a></li>
|
||||
<li><a tags="type,array,object,string,beginner" href="./type#isempty">isEmpty</a></li>
|
||||
<li><a tags="type,function,beginner" href="./type#isfunction">isFunction</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isnil">isNil</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isnull">isNull</a></li>
|
||||
<li><a tags="type,math,beginner" href="./type#isnumber">isNumber</a></li>
|
||||
<li><a tags="type,object,beginner" href="./type#isobject">isObject</a></li>
|
||||
<li><a tags="type,object,beginner" href="./type#isobjectlike">isObjectLike</a></li>
|
||||
<li><a tags="type,object,intermediate" href="./type#isplainobject">isPlainObject</a></li>
|
||||
<li><a tags="type,function,array,string,intermediate" href="./type#isprimitive">isPrimitive</a></li>
|
||||
<li><a tags="type,function,promise,intermediate" href="./type#ispromiselike">isPromiseLike</a></li>
|
||||
<li><a tags="type,string,beginner" href="./type#isstring">isString</a></li>
|
||||
<li><a tags="type,beginner" href="./type#issymbol">isSymbol</a></li>
|
||||
<li><a tags="type,beginner" href="./type#isundefined">isUndefined</a></li>
|
||||
<li><a tags="type,json,intermediate" href="./type#isvalidjson">isValidJSON</a></li>
|
||||
</ul>
|
||||
<h4 class="collapse">Utility
|
||||
</h4><ul><li><a tags="utility,array,type,beginner" href="./utility#castarray">castArray</a></li>
|
||||
<li><a tags="utility,regexp,intermediate" href="./utility#cloneregexp">cloneRegExp</a></li>
|
||||
<li><a tags="utility,beginner" href="./utility#coalesce">coalesce</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#coalescefactory">coalesceFactory</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#extendhex">extendHex</a></li>
|
||||
<li><a tags="utility,browser,string,url,intermediate" href="./utility#geturlparameters">getURLParameters</a></li>
|
||||
<li><a tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a></li>
|
||||
<li><a tags="utility,url,browser,intermediate" href="./utility#httpget">httpGet</a></li>
|
||||
<li><a tags="utility,url,browser,intermediate" href="./utility#httppost">httpPost</a></li>
|
||||
<li><a tags="utility,browser,intermediate" href="./utility#isbrowser">isBrowser</a></li>
|
||||
<li><a tags="utility,function" href="./utility#mostperformant">mostPerformant</a></li>
|
||||
<li><a tags="utility,function,beginner" href="./utility#ntharg">nthArg</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#parsecookie">parseCookie</a></li>
|
||||
<li><a tags="utility,string,math,advanced" href="./utility#prettybytes">prettyBytes</a></li>
|
||||
<li><a tags="utility,random,beginner" href="./utility#randomhexcolorcode">randomHexColorCode</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#rgbtohex">RGBToHex</a></li>
|
||||
<li><a tags="utility,string,intermediate" href="./utility#serializecookie">serializeCookie</a></li>
|
||||
<li><a tags="utility,beginner" href="./utility#timetaken">timeTaken</a></li>
|
||||
<li><a tags="utility,intermediate" href="./utility#tocurrency">toCurrency</a></li>
|
||||
<li><a tags="utility,math,beginner" href="./utility#todecimalmark">toDecimalMark</a></li>
|
||||
<li><a tags="utility,math,intermediate" href="./utility#toordinalsuffix">toOrdinalSuffix</a></li>
|
||||
<li><a tags="utility,math,intermediate" href="./utility#validatenumber">validateNumber</a></li>
|
||||
<li><a tags="utility,regexp,intermediate" href="./utility#yesno">yesNo</a></li>
|
||||
</ul>
|
||||
|
||||
<h4 class="static-link"><a href="./archive">Archive</a></h4>
|
||||
<h4 class="static-link"><a href="./glossary">Glossary</a></h4>
|
||||
<h4 class="static-link"><a href="./contributing">Contributing</a></h4>
|
||||
<h4 class="static-link"><a href="./about">About</a></h4>
|
||||
<div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
|
||||
</nav>
|
||||
<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> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 196 B |
|
Before Width: | Height: | Size: 197 B |
|
Before Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 563 B |
|
Before Width: | Height: | Size: 805 B |
|
Before Width: | Height: | Size: 516 B |
|
Before Width: | Height: | Size: 561 B |
|
Before Width: | Height: | Size: 229 B |
File diff suppressed because one or more lines are too long
@ -1,36 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,971 +0,0 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
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 {
|
||||
display: block;
|
||||
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var}));
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 20 KiB |
@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import '../styles/index.scss';
|
||||
|
||||
// ===================================================
|
||||
// Page metadata (using Helmet)
|
||||
// ===================================================
|
||||
const Meta = ({ description = '', lang = 'en', meta = [], title }) => {
|
||||
const { site, file } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
file(relativePath: { eq: "logo.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
fluid(maxHeight: 400) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
);
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description;
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title ? title : site.siteMetadata.title}
|
||||
titleTemplate={title ? `%s - ${site.siteMetadata.title}` : '%s'}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: `author`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `viewport`,
|
||||
content: `width=device-width, initial-scale=1`,
|
||||
},
|
||||
{
|
||||
name: `og:title`,
|
||||
content: site.siteMetadata.title,
|
||||
},
|
||||
{
|
||||
name: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `og:image`,
|
||||
content: file.childImageSharp.fluid.src,
|
||||
},
|
||||
].concat(meta)}
|
||||
bodyAttributes={{
|
||||
class: 'card-page',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Meta;
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
const BackArrowIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='18'
|
||||
height='18'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-arrow-left ${className}`}
|
||||
>
|
||||
<line x1='19' y1='12' x2='5' y2='12'></line>
|
||||
<polyline points='12 19 5 12 12 5'></polyline>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default BackArrowIcon;
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
const ClipboardIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-clipboard ${className}`}
|
||||
>
|
||||
<path 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'></path>
|
||||
<rect x='8' y='2' width='8' height='4' rx='1' ry='1'></rect>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ClipboardIcon;
|
||||
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
|
||||
const CollapseClosedIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='16'
|
||||
height='16'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='1'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-plus-square ${className}`}
|
||||
>
|
||||
<rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
|
||||
<line x1='12' y1='8' x2='12' y2='16'></line>
|
||||
<line x1='8' y1='12' x2='16' y2='12'></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default CollapseClosedIcon;
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
const CollapseOpenIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='16'
|
||||
height='16'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='1'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-minus-square ${className}`}
|
||||
>
|
||||
<rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
|
||||
<line x1='8' y1='12' x2='16' y2='12'></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default CollapseOpenIcon;
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
const DarkModeIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-moon ${className}`}
|
||||
>
|
||||
<path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default DarkModeIcon;
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
const GithubIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-github ${className}`}
|
||||
>
|
||||
<path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default GithubIcon;
|
||||
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
const LightModeIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-sun ${className}`}
|
||||
>
|
||||
<circle cx='12' cy='12' r='5'></circle>
|
||||
<line x1='12' y1='1' x2='12' y2='3'></line>
|
||||
<line x1='12' y1='21' x2='12' y2='23'></line>
|
||||
<line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line>
|
||||
<line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line>
|
||||
<line x1='1' y1='12' x2='3' y2='12'></line>
|
||||
<line x1='21' y1='12' x2='23' y2='12'></line>
|
||||
<line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line>
|
||||
<line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LightModeIcon;
|
||||
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
const ListIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-list ${className}`}
|
||||
>
|
||||
<line x1='8' y1='6' x2='21' y2='6'></line>
|
||||
<line x1='8' y1='12' x2='21' y2='12'></line>
|
||||
<line x1='8' y1='18' x2='21' y2='18'></line>
|
||||
<line x1='3' y1='6' x2='3' y2='6'></line>
|
||||
<line x1='3' y1='12' x2='3' y2='12'></line>
|
||||
<line x1='3' y1='18' x2='3' y2='18'></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ListIcon;
|
||||
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
|
||||
const SearchIcon = ({ className, onClick }) => {
|
||||
return (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-search ${className}`}
|
||||
>
|
||||
<circle cx='11' cy='11' r='8'></circle>
|
||||
<line x1='21' y1='21' x2='16.65' y2='16.65'></line>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchIcon;
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
const ShareIcon = ({ className, onClick }) => (
|
||||
<svg
|
||||
onClick={onClick}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={`feather feather-share-2 ${className}`}
|
||||
>
|
||||
<circle cx='18' cy='5' r='3'></circle>
|
||||
<circle cx='6' cy='12' r='3'></circle>
|
||||
<circle cx='18' cy='19' r='3'></circle>
|
||||
<line x1='8.59' y1='13.51' x2='15.42' y2='17.49'></line>
|
||||
<line x1='15.41' y1='6.51' x2='8.59' y2='10.49'></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ShareIcon;
|
||||
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
|
||||
// ===================================================
|
||||
// Simple, stateful search component
|
||||
// ===================================================
|
||||
const Search = ({ defaultValue = '', setSearchQuery, className = '' }) => {
|
||||
const [value, setValue] = React.useState(defaultValue);
|
||||
|
||||
React.useEffect(() => {
|
||||
setSearchQuery(value);
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<input
|
||||
defaultValue={defaultValue}
|
||||
className='search-box'
|
||||
type='search'
|
||||
id='searchInput'
|
||||
placeholder='Search...'
|
||||
aria-label='Snippet search'
|
||||
onKeyUp={e => {
|
||||
setValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@ -0,0 +1,148 @@
|
||||
import React from 'react';
|
||||
import { graphql, useStaticQuery } from 'gatsby';
|
||||
import { connect } from 'react-redux';
|
||||
import AniLink from 'gatsby-plugin-transition-link/AniLink';
|
||||
import ReactCSSTransitionReplace from 'react-css-transition-replace';
|
||||
import config from '../../../config';
|
||||
|
||||
import { toggleDarkMode } from '../state/app';
|
||||
|
||||
import SearchIcon from './SVGs/SearchIcon';
|
||||
import GithubIcon from './SVGs/GithubIcon';
|
||||
import DarkModeIcon from './SVGs/DarkModeIcon';
|
||||
import LightModeIcon from './SVGs/LightModeIcon';
|
||||
import ListIcon from './SVGs/ListIcon';
|
||||
|
||||
// ===================================================
|
||||
// Application-level UI component
|
||||
// ===================================================
|
||||
const Shell = ({
|
||||
isDarkMode,
|
||||
isSearch,
|
||||
isList,
|
||||
dispatch,
|
||||
withIcon = true,
|
||||
withTitle = true,
|
||||
children,
|
||||
}) => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query SiteTitleQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
}
|
||||
}
|
||||
file(relativePath: { eq: "30s-icon.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
|
||||
data {
|
||||
title
|
||||
id
|
||||
attributes {
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
let viewportWidth = typeof window !== 'undefined' && window.innerWidth;
|
||||
|
||||
return (
|
||||
<div className={isDarkMode ? 'page-container dark' : 'page-container'}>
|
||||
{/* Menu */}
|
||||
<header className='menu'>
|
||||
<AniLink
|
||||
cover
|
||||
direction={viewportWidth < 600 ? 'up' : 'right'}
|
||||
bg={isDarkMode ? '#434E76' : '#FFFFFF'}
|
||||
to='/search'
|
||||
aria-label='Search'
|
||||
className={isSearch ? 'menu-button active' : 'menu-button'}
|
||||
>
|
||||
<SearchIcon />
|
||||
</AniLink>
|
||||
<AniLink
|
||||
cover
|
||||
direction={viewportWidth < 600 ? 'up' : 'right'}
|
||||
bg={isDarkMode ? '#434E76' : '#FFFFFF'}
|
||||
to='/list'
|
||||
aria-label='Snippet list'
|
||||
className={isList ? 'menu-button active' : 'menu-button'}
|
||||
>
|
||||
<ListIcon />
|
||||
</AniLink>
|
||||
{/* eslint-disable-next-line */}
|
||||
<a target='_blank'
|
||||
rel='noopener'
|
||||
href={config.repositoryUrl}
|
||||
aria-label='View on GitHub'
|
||||
className='menu-button'
|
||||
>
|
||||
<GithubIcon />
|
||||
</a>
|
||||
{/*
|
||||
The use of React.Fragment here will cause a lot of errors to show up in webber:dev.
|
||||
Truth is, this is the only decent way I found to deal with this module's odd behavior.
|
||||
Keep as is, unless you can provide a better solution, in which case please send a PR.
|
||||
*/}
|
||||
<ReactCSSTransitionReplace
|
||||
transitionName='cross-fade'
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}
|
||||
component='button'
|
||||
className='menu-button'
|
||||
childComponent={React.Fragment}
|
||||
>
|
||||
{isDarkMode ? (
|
||||
<LightModeIcon
|
||||
key='lmit'
|
||||
onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
|
||||
/>
|
||||
) : (
|
||||
<DarkModeIcon
|
||||
key='dmit'
|
||||
onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
|
||||
/>
|
||||
)}
|
||||
</ReactCSSTransitionReplace>
|
||||
</header>
|
||||
{/* Content */}
|
||||
<div className='content'>
|
||||
{withTitle ? (
|
||||
<h1 className='website-title'>
|
||||
{data.site.siteMetadata.title}
|
||||
{withIcon ? (
|
||||
<img
|
||||
src={data.file.childImageSharp.original.src}
|
||||
alt='Logo'
|
||||
className='website-logo'
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</h1>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
isDarkMode: state.app.isDarkMode,
|
||||
lastPageTitle: state.app.lastPageTitle,
|
||||
lastPageUrl: state.app.lastPageUrl,
|
||||
searchQuery: state.app.searchQuery,
|
||||
}),
|
||||
null,
|
||||
)(Shell);
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
// ===================================================
|
||||
// Generic card (displays textual content)
|
||||
// ===================================================
|
||||
const SimpleCard = ({
|
||||
title,
|
||||
children,
|
||||
isDarkMode
|
||||
}) => (
|
||||
<div className='card short'>
|
||||
<h4 className='card-title'>
|
||||
{title}
|
||||
</h4>
|
||||
<div className='card-description'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default SimpleCard;
|
||||
@ -0,0 +1,175 @@
|
||||
import React from 'react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import config from '../../../config';
|
||||
|
||||
import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util';
|
||||
import ClipboardIcon from './SVGs/ClipboardIcon';
|
||||
// import ShareIcon from './SVGs/ShareIcon';
|
||||
import AniLink from 'gatsby-plugin-transition-link/AniLink';
|
||||
import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
|
||||
import CollapseClosedIcon from './SVGs/CollapseClosedIcon';
|
||||
import ReactCSSTransitionReplace from 'react-css-transition-replace';
|
||||
|
||||
// ===================================================
|
||||
// Snippet Card HOC - check components below for more
|
||||
// ===================================================
|
||||
const SnippetCard = ({ short, snippetData, ...rest }) => {
|
||||
let difficulty = snippetData.tags.includes('advanced')
|
||||
? 'advanced'
|
||||
: snippetData.tags.includes('beginner')
|
||||
? 'beginner'
|
||||
: 'intermediate';
|
||||
return short ? (
|
||||
<ShortCard snippetData={snippetData} difficulty={difficulty} {...rest} />
|
||||
) : (
|
||||
<FullCard snippetData={snippetData} difficulty={difficulty} {...rest} />
|
||||
);
|
||||
};
|
||||
|
||||
// ===================================================
|
||||
// Simple card corner for difficulty display
|
||||
// ===================================================
|
||||
const CardCorner = ({ difficulty = 'intermediate' }) => (
|
||||
<div
|
||||
className={`card-corner ${difficulty}`}
|
||||
aria-label={difficulty}
|
||||
title={difficulty}
|
||||
/>
|
||||
);
|
||||
|
||||
// ===================================================
|
||||
// Full snippet view (tags, code, title, description)
|
||||
// ===================================================
|
||||
const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
|
||||
const [examplesOpen, setExamplesOpen] = React.useState(false);
|
||||
const tags = snippetData.tags;
|
||||
let cardCodeHtml = `${optimizeAllNodes(
|
||||
getCodeBlocks(snippetData.html).code,
|
||||
)}`;
|
||||
let cardExamplesHtml = `${optimizeAllNodes(
|
||||
getCodeBlocks(snippetData.html).example,
|
||||
)}`;
|
||||
return (
|
||||
<div className='card'>
|
||||
<CardCorner difficulty={difficulty} />
|
||||
<h4 className='card-title'>{snippetData.title}</h4>
|
||||
{tags.map(tag => (
|
||||
<span className='tag' key={`tag_${tag}`}>{tag}</span>
|
||||
))}
|
||||
<div
|
||||
className='card-description'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `${getTextualContent(snippetData.html)}`,
|
||||
}}
|
||||
/>
|
||||
<div className='card-bottom'>
|
||||
<CopyToClipboard
|
||||
text={snippetData.code}
|
||||
onCopy={() => {
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
}, 300);
|
||||
}, 1700);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className='button button-a button-copy'
|
||||
aria-label='Copy to clipboard'
|
||||
>
|
||||
<ClipboardIcon />
|
||||
</button>
|
||||
</CopyToClipboard>
|
||||
{/* <button className="button button-b button-social-sh" aria-label="Share">
|
||||
<ShareIcon />
|
||||
</button> */}
|
||||
<pre
|
||||
className={`card-code language-${config.language}`}
|
||||
dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
|
||||
/>
|
||||
<button
|
||||
className='button button-example-toggler'
|
||||
onClick={() => setExamplesOpen(!examplesOpen)}
|
||||
>
|
||||
{examplesOpen ? <CollapseOpenIcon /> : <CollapseClosedIcon />}Examples
|
||||
</button>
|
||||
<ReactCSSTransitionReplace
|
||||
transitionName='roll-up'
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}
|
||||
>
|
||||
{examplesOpen && (
|
||||
<pre
|
||||
className='section card-examples language-js'
|
||||
dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
|
||||
/>
|
||||
)}
|
||||
</ReactCSSTransitionReplace>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ===================================================
|
||||
// Short snippet view (title, description, code*)
|
||||
// ===================================================
|
||||
const ShortCard = ({ snippetData, difficulty, isDarkMode }) => {
|
||||
let cardCodeHtml = `${optimizeAllNodes(
|
||||
getCodeBlocks(snippetData.html).code,
|
||||
)}`;
|
||||
return (
|
||||
<div className='card short'>
|
||||
<CardCorner difficulty={difficulty} />
|
||||
<h4 className='card-title'>
|
||||
<AniLink
|
||||
paintDrip
|
||||
to={`/${snippetData.id}`}
|
||||
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
|
||||
>
|
||||
{snippetData.title}
|
||||
</AniLink>
|
||||
</h4>
|
||||
<div
|
||||
className='card-description'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `${getTextualContent(snippetData.html)}`,
|
||||
}}
|
||||
/>
|
||||
<div className='card-bottom'>
|
||||
<CopyToClipboard
|
||||
text={snippetData.code}
|
||||
onCopy={() => {
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
}, 300);
|
||||
}, 1700);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className='button button-a button-copy'
|
||||
aria-label='Copy to clipboard'
|
||||
>
|
||||
<ClipboardIcon />
|
||||
</button>
|
||||
</CopyToClipboard>
|
||||
<pre
|
||||
className={`card-code language-${config.language}`}
|
||||
dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SnippetCard;
|
||||
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import AniLink from 'gatsby-plugin-transition-link/AniLink';
|
||||
|
||||
import Shell from '../components/Shell';
|
||||
import Meta from '../components/Meta';
|
||||
|
||||
// ===================================================
|
||||
// Not found page
|
||||
// ===================================================
|
||||
const NotFoundPage = ({ isDarkMode }) => (
|
||||
<>
|
||||
<Meta title='Page not found' />
|
||||
<Shell withIcon={true}>
|
||||
<h2 className='page-title'>404</h2>
|
||||
<div className='page-graphic page-not-found'>
|
||||
<p className='empty-page-text'>
|
||||
<strong>Page not found</strong>
|
||||
<br />
|
||||
</p>
|
||||
<p className='empty-page-subtext'>
|
||||
Seems like you have reached a page that does not exist.
|
||||
</p>
|
||||
<AniLink
|
||||
paintDrip
|
||||
to='/'
|
||||
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
|
||||
className='button button-a button-home'
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
stroke-linecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='feather feather-home'
|
||||
>
|
||||
<path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path>
|
||||
<polyline points='9 22 9 12 15 12 15 22'></polyline>
|
||||
</svg>
|
||||
Go home
|
||||
</AniLink>
|
||||
</div>
|
||||
</Shell>
|
||||
</>
|
||||
);
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
isDarkMode: state.app.isDarkMode,
|
||||
lastPageTitle: state.app.lastPageTitle,
|
||||
lastPageUrl: state.app.lastPageUrl,
|
||||
searchQuery: state.app.searchQuery,
|
||||
}),
|
||||
null,
|
||||
)(NotFoundPage);
|
||||
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Shell from '../components/Shell';
|
||||
import Meta from '../components/Meta';
|
||||
import SimpleCard from '../components/SimpleCard';
|
||||
|
||||
// ===================================================
|
||||
// About page
|
||||
// ===================================================
|
||||
const AboutPage = ({ isDarkMode }) => (
|
||||
<>
|
||||
<Meta title='About' />
|
||||
<Shell withIcon={true}>
|
||||
<h2 className='page-title'>About</h2>
|
||||
<p className='light-sub'>
|
||||
A few word about us, our goals and our projects.
|
||||
</p>
|
||||
<SimpleCard title='Our philosophy'>
|
||||
<p style={{textAlign: 'justify'}}>
|
||||
The core goal of <strong>30 seconds</strong> is to provide a quality resource for beginner and advanced developers alike. We want to help improve the software development ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones.
|
||||
</p>
|
||||
<p style={{textAlign: 'justify'}}>
|
||||
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.
|
||||
</p>
|
||||
<p style={{textAlign: 'justify'}}>
|
||||
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>
|
||||
</SimpleCard>
|
||||
<SimpleCard title='Our story'>
|
||||
<p style={{ textAlign: 'justify' }}>
|
||||
The <strong>30 seconds</strong> movement started back in December, 2017, with the release of <a href='https://github.com/30-seconds/30-seconds-of-code' target='_blank' rel='noopener noreferrer'>30 seconds of code</a> by <a href='https://github.com/Chalarangelo' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code.
|
||||
</p>
|
||||
<p style={{ textAlign: 'justify' }}>
|
||||
In late 2018, the <a href='https://github.com/30-seconds'>30 seconds organization</a> was formed on GitHub, in order to expand upon existing projects and ensure that they will remain high-quality resources in the future.
|
||||
</p>
|
||||
</SimpleCard>
|
||||
<SimpleCard title='Who we are'>
|
||||
<p style={{ textAlign: 'justify' }}>
|
||||
The <strong>30 seconds</strong> movement and, to some extent, the associated GitHub organization consists of all the people who have invested time and ideas to be part of this amazing community. Meanwhile, these fine folks are currently responsible for maintaining the codebases and dealing with organizational matters:
|
||||
</p>
|
||||
<div className='flex-row'>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/Chalarangelo.png' alt='chalarangelo' />
|
||||
<a href='https://github.com/Chalarangelo' className='button-section' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/fejes713.png' alt='fejes713' />
|
||||
<a href='https://github.com/fejes713' className='button-section' target='_blank' rel='noopener noreferrer'>Stefan Fejes</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/flxwu.png' alt='flxwu' />
|
||||
<a href='https://github.com/flxwu' className='button-section' target='_blank' rel='noopener noreferrer'>Felix Wu</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/atomiks.png' alt='atomiks' />
|
||||
<a href='https://github.com/atomiks' className='button-section' target='_blank' rel='noopener noreferrer'>atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-row'>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/skatcat31.png' alt='skatcat31' />
|
||||
<a href='https://github.com/skatcat31' className='button-section' target='_blank' rel='noopener noreferrer'>Robert Mennell</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/petrovicstefanrs.png' alt='petrovicstefanrs' />
|
||||
<a href='https://github.com/petrovicstefanrs' className='button-section' target='_blank' rel='noopener noreferrer'>Stefan Petrovic</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/kirjs.png' alt='kirjs' />
|
||||
<a href='https://github.com/kirjs' className='button-section' target='_blank' rel='noopener noreferrer'>Kirill Cherkashin</a>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img className='media-section' src='https://github.com/sohelamin.png' alt='sohelamin' />
|
||||
<a href='https://github.com/sohelamin' className='button-section' target='_blank' rel='noopener noreferrer'>Sohel Amin</a>
|
||||
</div>
|
||||
</div>
|
||||
</SimpleCard>
|
||||
<SimpleCard title='License'>
|
||||
<p style={{ textAlign: 'justify' }}>
|
||||
In order for the code provided via the <strong>30 seconds</strong> projects to be as accessible and useful as possible, all of the snippets in these collections are licensed under the <a href='https://creativecommons.org/publicdomain/zero/1.0/' target='_blank' rel='noopener noreferrer'>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>
|
||||
<p style={{ textAlign: 'justify' }}>
|
||||
Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the <strong>30 seconds</strong> GitHub organization. The only exception to this is the usage of the <strong>30-seconds-of-</strong> name in open source projects, licensed under the <a href='https://creativecommons.org/publicdomain/zero/1.0/' target='_blank' rel='noopener noreferrer'>CC0-1.0 License</a> and hosted on GitHub, if their README and website clearly states that they are unofficial projects and in no way affiliated with the organization.
|
||||
</p>
|
||||
</SimpleCard>
|
||||
</Shell>
|
||||
</>
|
||||
);
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
isDarkMode: state.app.isDarkMode,
|
||||
lastPageTitle: state.app.lastPageTitle,
|
||||
lastPageUrl: state.app.lastPageUrl,
|
||||
searchQuery: state.app.searchQuery,
|
||||
}),
|
||||
null,
|
||||
)(AboutPage);
|
||||
@ -0,0 +1,158 @@
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import { connect } from 'react-redux';
|
||||
import { pushNewPage, pushNewQuery } from '../state/app';
|
||||
|
||||
import Shell from '../components/Shell';
|
||||
import Meta from '../components/Meta';
|
||||
import Search from '../components/Search';
|
||||
import SnippetCard from '../components/SnippetCard';
|
||||
|
||||
import { getRawCodeBlocks as getCodeBlocks } from '../util';
|
||||
|
||||
// ===================================================
|
||||
// Home page (splash and search)
|
||||
// ===================================================
|
||||
const IndexPage = props => {
|
||||
console.log(props);
|
||||
const snippets = props.data.snippetDataJson.data.map(snippet => ({
|
||||
title: snippet.title,
|
||||
html: props.data.allMarkdownRemark.edges.find(
|
||||
v => v.node.frontmatter.title === snippet.title,
|
||||
).node.html,
|
||||
tags: snippet.attributes.tags,
|
||||
text: snippet.attributes.text,
|
||||
id: snippet.id,
|
||||
code: getCodeBlocks(
|
||||
props.data.allMarkdownRemark.edges.find(
|
||||
v => v.node.frontmatter.title === snippet.title,
|
||||
).node.rawMarkdownBody,
|
||||
).code,
|
||||
}));
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
|
||||
const [searchResults, setSearchResults] = React.useState(snippets);
|
||||
|
||||
React.useEffect(() => {
|
||||
props.dispatch(pushNewQuery(searchQuery));
|
||||
let q = searchQuery.toLowerCase();
|
||||
let results = snippets;
|
||||
if (q.trim().length)
|
||||
results = snippets.filter(
|
||||
v =>
|
||||
v.tags.filter(t => t.indexOf(q) !== -1).length ||
|
||||
v.title.toLowerCase().indexOf(q) !== -1,
|
||||
);
|
||||
setSearchResults(results);
|
||||
}, [searchQuery]);
|
||||
|
||||
React.useEffect(() => {
|
||||
props.dispatch(pushNewPage('Search', '/search'));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta />
|
||||
<Shell withIcon={false} withTitle={false}>
|
||||
<img
|
||||
src={props.data.file.childImageSharp.original.src}
|
||||
alt='Logo'
|
||||
className='index-logo'
|
||||
/>
|
||||
<h1 className='index-title'>{props.data.site.siteMetadata.title}</h1>
|
||||
<p className='index-sub-title'>
|
||||
{props.data.site.siteMetadata.description}
|
||||
</p>
|
||||
<Search
|
||||
setSearchQuery={setSearchQuery}
|
||||
defaultValue={props.searchQuery}
|
||||
/>
|
||||
{searchQuery.length === 0 ? (
|
||||
<p className='light-sub'>
|
||||
Start typing a keyword to see matching snippets.
|
||||
</p>
|
||||
) : searchResults.length === 0 ? (
|
||||
<p className='light-sub'>
|
||||
We couldn't find any results for the keyword{' '}
|
||||
<strong>{searchQuery}</strong>.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p className='light-sub'>
|
||||
Click on a snippet's name to view its code.
|
||||
</p>
|
||||
<h2 className='page-sub-title'>Search results</h2>
|
||||
{searchResults.map(snippet => (
|
||||
<SnippetCard
|
||||
short
|
||||
key={`snippet_${snippet.id}`}
|
||||
snippetData={snippet}
|
||||
isDarkMode={props.isDarkMode}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Shell>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
isDarkMode: state.app.isDarkMode,
|
||||
lastPageTitle: state.app.lastPageTitle,
|
||||
lastPageUrl: state.app.lastPageUrl,
|
||||
searchQuery: state.app.searchQuery,
|
||||
}),
|
||||
null,
|
||||
)(IndexPage);
|
||||
|
||||
export const indexPageQuery = graphql`
|
||||
query snippetList {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
file(relativePath: { eq: "30s-icon.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
text
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 1000
|
||||
sort: { fields: [frontmatter___title], order: ASC }
|
||||
) {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
html
|
||||
rawMarkdownBody
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,151 @@
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import { connect } from 'react-redux';
|
||||
import { pushNewPage, pushNewQuery } from '../state/app';
|
||||
|
||||
import Shell from '../components/Shell';
|
||||
import Meta from '../components/Meta';
|
||||
import Search from '../components/Search';
|
||||
import SnippetCard from '../components/SnippetCard';
|
||||
|
||||
import { getRawCodeBlocks as getCodeBlocks } from '../util';
|
||||
|
||||
// ===================================================
|
||||
// Search page
|
||||
// ===================================================
|
||||
const SearchPage = props => {
|
||||
const snippets = props.data.snippetDataJson.data.map(snippet => ({
|
||||
title: snippet.title,
|
||||
html: props.data.allMarkdownRemark.edges.find(
|
||||
v => v.node.frontmatter.title === snippet.title,
|
||||
).node.html,
|
||||
tags: snippet.attributes.tags,
|
||||
text: snippet.attributes.text,
|
||||
id: snippet.id,
|
||||
code: getCodeBlocks(
|
||||
props.data.allMarkdownRemark.edges.find(
|
||||
v => v.node.frontmatter.title === snippet.title,
|
||||
).node.rawMarkdownBody,
|
||||
).code,
|
||||
}));
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
|
||||
const [searchResults, setSearchResults] = React.useState(snippets);
|
||||
|
||||
React.useEffect(() => {
|
||||
props.dispatch(pushNewQuery(searchQuery));
|
||||
let q = searchQuery.toLowerCase();
|
||||
let results = snippets;
|
||||
if (q.trim().length)
|
||||
results = snippets.filter(
|
||||
v =>
|
||||
v.tags.filter(t => t.indexOf(q) !== -1).length ||
|
||||
v.title.toLowerCase().indexOf(q) !== -1,
|
||||
);
|
||||
setSearchResults(results);
|
||||
}, [searchQuery]);
|
||||
|
||||
React.useEffect(() => {
|
||||
props.dispatch(pushNewPage('Search', '/search'));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta title='Search' />
|
||||
<Shell withIcon={false} isSearch>
|
||||
<Search
|
||||
setSearchQuery={setSearchQuery}
|
||||
defaultValue={props.searchQuery}
|
||||
/>
|
||||
<p className='light-sub'>Click on a snippet's name to view its code.</p>
|
||||
{/* Display page background or results depending on state */}
|
||||
{searchQuery.length === 0 ? (
|
||||
<>
|
||||
<div className='page-graphic search-empty'>
|
||||
<p className='empty-page-text search-page-text'>
|
||||
Start typing a keyword to see matching snippets.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : searchResults.length === 0 ? (
|
||||
<>
|
||||
<div className='page-graphic search-no-results'>
|
||||
<p className='empty-page-text'>
|
||||
<strong>No results found</strong>
|
||||
<br />
|
||||
</p>
|
||||
<p className='empty-page-subtext'>
|
||||
We couldn't find any results for the keyword{' '}
|
||||
<strong>{searchQuery}</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className='page-sub-title'>Search results</h2>
|
||||
{searchResults.map(snippet => (
|
||||
<SnippetCard
|
||||
key={`snippet_${snippet.id}`}
|
||||
short
|
||||
snippetData={snippet}
|
||||
isDarkMode={props.isDarkMode}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Shell>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
isDarkMode: state.app.isDarkMode,
|
||||
lastPageTitle: state.app.lastPageTitle,
|
||||
lastPageUrl: state.app.lastPageUrl,
|
||||
searchQuery: state.app.searchQuery,
|
||||
}),
|
||||
null,
|
||||
)(SearchPage);
|
||||
|
||||
export const searchPageQuery = graphql`
|
||||
query searchSnippetList {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
text
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 1000
|
||||
sort: { fields: [frontmatter___title], order: ASC }
|
||||
) {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
html
|
||||
rawMarkdownBody
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore as reduxCreateStore } from 'redux';
|
||||
import rootReducer from '.';
|
||||
|
||||
const createStore = () => reduxCreateStore(rootReducer);
|
||||
|
||||
// ===================================================
|
||||
// Wrapper for Gatsby
|
||||
// ===================================================
|
||||
export default ({ element }) => (
|
||||
<Provider store={createStore()}>{element}</Provider>
|
||||
);
|
||||
@ -0,0 +1,49 @@
|
||||
// Defalt state
|
||||
const initialState = {
|
||||
isDarkMode: false,
|
||||
lastPageTitle: 'Home',
|
||||
lastPageUrl: '/',
|
||||
searchQuery: '',
|
||||
};
|
||||
|
||||
// Actions
|
||||
const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';
|
||||
const PUSH_NEW_PAGE = 'PUSH_NEW_PAGE';
|
||||
const PUSH_NEW_QUERY = 'PUSH_NEW_QUERY';
|
||||
export const toggleDarkMode = isDarkMode => ({
|
||||
type: TOGGLE_DARKMODE,
|
||||
isDarkMode,
|
||||
});
|
||||
export const pushNewPage = (pageTitle, pageUrl) => ({
|
||||
type: PUSH_NEW_PAGE,
|
||||
pageTitle,
|
||||
pageUrl,
|
||||
});
|
||||
export const pushNewQuery = query => ({
|
||||
type: PUSH_NEW_QUERY,
|
||||
query,
|
||||
});
|
||||
|
||||
// Reducer
|
||||
export default (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case TOGGLE_DARKMODE:
|
||||
return {
|
||||
...state,
|
||||
isDarkMode: action.isDarkMode,
|
||||
};
|
||||
case PUSH_NEW_PAGE:
|
||||
return {
|
||||
...state,
|
||||
lastPageTitle: action.pageTitle,
|
||||
lastPageUrl: action.pageUrl,
|
||||
};
|
||||
case PUSH_NEW_QUERY:
|
||||
return {
|
||||
...state,
|
||||
searchQuery: action.query,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import app from './app';
|
||||
|
||||
export default combineReducers({ app });
|
||||
@ -0,0 +1,79 @@
|
||||
// ===================================================
|
||||
// Buttons
|
||||
// ===================================================
|
||||
.button, a.button {
|
||||
color: var(--button-fore-color);
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
transition: 0.3s ease all;
|
||||
padding: 0.625rem 0.875rem;
|
||||
margin-top: 0.75rem;
|
||||
border-radius: 1rem;
|
||||
display: inline-block;
|
||||
box-shadow: 0px 4px 8px var(--button-shadow-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0px 8px 16px var(--button-shadow-color);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
&.button-a {
|
||||
background: var(--button-back-color-a);
|
||||
}
|
||||
&.button-b {
|
||||
background: var(--button-back-color-b);
|
||||
}
|
||||
svg {
|
||||
vertical-align: sub;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
|
||||
// Home button (404 page)
|
||||
.button.button-home {
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
margin-top: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy and share buttons (snippet card)
|
||||
.button.button-copy {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
right: 24px;
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
.button.button-social-sh {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
right: 80px;
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
|
||||
// Show/hide examples button (snippet card)
|
||||
.button.button-example-toggler {
|
||||
margin: -2rem 0px -1rem 0px;
|
||||
background: var(--pre-back-color);
|
||||
border-radius: 0px 0px 0.125rem 0.125rem;
|
||||
width: calc(100%);
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
color: var(--button-example-toggler-fore-color);
|
||||
box-shadow: none;
|
||||
font-family: 'Roboto Mono', Menlo, Consolas, monospace;
|
||||
&:hover, &:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
svg {
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
// ===================================================
|
||||
// Cards
|
||||
// ===================================================
|
||||
.card {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
margin: 1rem 1.25rem;
|
||||
background: var(--card-back-color);
|
||||
color: var(--card-fore-color);
|
||||
box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
|
||||
border-radius: 0.125rem;
|
||||
padding: 1rem;
|
||||
.card-title {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375;
|
||||
font-weight: 500;
|
||||
margin: 0px 0px 0.125rem;
|
||||
a, a:link, a:visited {
|
||||
font-weight: 500;
|
||||
transition: 0.3s ease all;
|
||||
color: var(--card-fore-color);
|
||||
}
|
||||
}
|
||||
.card-description {
|
||||
margin: 0.125rem -0.5rem 0.125rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--card-fore-color-light);
|
||||
line-height: 1.35;
|
||||
font-weight: 500;
|
||||
}
|
||||
.card-bottom {
|
||||
position: relative;
|
||||
background: blue;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
border-radius: 0.125rem;
|
||||
border-top-left-radius: 22px;
|
||||
}
|
||||
.card-code {
|
||||
margin: 1.5rem 0px -1rem 0px;
|
||||
background: var(--pre-back-color);
|
||||
width: calc(100% - 36px);
|
||||
border-radius: 1.375rem 0px 0.125rem 0.125rem;
|
||||
line-height: 1.15;
|
||||
padding: 2.25rem 1.125rem 2.25rem;
|
||||
}
|
||||
.card-examples {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
margin: 0.5rem 0px -1rem 0px;
|
||||
background: var(--pre-back-color);
|
||||
width: calc(100% - 52px);
|
||||
border-radius: 0px 0px 0.125rem 0.125rem;
|
||||
line-height: 1.15;
|
||||
padding: 0.5rem 1.125rem 2.25rem 2.125rem;
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
opacity: 0.75;
|
||||
height: calc(100% - 24px);
|
||||
background: var(--button-example-toggler-fore-color);
|
||||
}
|
||||
}
|
||||
&.short {
|
||||
.card-bottom {
|
||||
display: none;
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.short) {
|
||||
background: linear-gradient(to bottom, var(--card-back-color) 0px, var(--card-back-color) calc(100% - 17px), var(--pre-back-color) calc(100% - 16px));
|
||||
}
|
||||
}
|
||||
|
||||
// Card expertise corners
|
||||
.card-corner {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 16px;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--corner-color);
|
||||
&.beginner {
|
||||
--corner-color: var(--beginner-color);
|
||||
}
|
||||
&.intermediate {
|
||||
--corner-color: var(--intermediate-color);
|
||||
}
|
||||
&.advanced {
|
||||
--corner-color: var(--advanced-color);
|
||||
}
|
||||
&.intermediate, &.advanced {
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0px;
|
||||
right: 12px;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--corner-color);
|
||||
}
|
||||
}
|
||||
&.advanced {
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0px;
|
||||
right: 24px;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--corner-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tags
|
||||
.tag {
|
||||
transition: 0.3s ease all;
|
||||
border: 2px solid var(--tag-border-color);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--tag-fore-color);
|
||||
text-transform: uppercase;
|
||||
margin: 0px 0.375rem 0.25rem 0px;
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.25rem;
|
||||
letter-spacing: 0.25px;
|
||||
font-size: 0.625rem;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
&:first-of-type {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation for card example
|
||||
.roll-up-height {
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
// Style code
|
||||
code, kbd, pre {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
||||
font-family: 'Roboto Mono', Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--code-back-color);
|
||||
color: var(--code-fore-color);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
background: var(--pre-back-color);
|
||||
color: var(--pre-fore-color);
|
||||
padding: 0.375rem;
|
||||
margin: 0.5rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
code[class*="language-"], pre[class*="language-"] {
|
||||
color: var(--pre-fore-color);
|
||||
|
||||
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: 1rem;
|
||||
overflow: auto;
|
||||
margin: 0.5rem 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(--pre-selected-color);
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
background: var(--pre-selected-color);
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
&.punctuation {
|
||||
color: var(--token-color-b);
|
||||
}
|
||||
&.property, &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function {
|
||||
color: var(--token-color-c);
|
||||
}
|
||||
&.number, &.class-name {
|
||||
color: var(--token-color-d);
|
||||
}
|
||||
&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted {
|
||||
color: var(--token-color-e);
|
||||
}
|
||||
&.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation {
|
||||
color: var(--token-color-f);
|
||||
}
|
||||
&.regex {
|
||||
color: var(--token-color-g);
|
||||
}
|
||||
&.important, &.variable {
|
||||
color: var(--token-color-h);
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
|
||||
p > code {
|
||||
&, &[class*="language-"] {
|
||||
color: var(--code-fore-color);
|
||||
background: var(--code-back-color);
|
||||
&::-moz-selection, & ::-moz-selection {
|
||||
background: var(--code-selected-color);
|
||||
}
|
||||
&::selection, & ::selection {
|
||||
background: var(--code-selected-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,140 @@
|
||||
:root {
|
||||
// Interface color palette
|
||||
--back-color: #F5F6FA;
|
||||
--back-color-dark: #D7DDF3;
|
||||
--fore-color: #404454;
|
||||
--fore-color-light: #575E7A;
|
||||
--fore-color-lighter: #666E8F;
|
||||
--fore-color-dark: #1F253D;
|
||||
--fore-color-darker: #060709;
|
||||
|
||||
// Scrollbar
|
||||
--scrollbar-back-color: #D7DDF3;
|
||||
--scrollbar-fore-color: #666E8F;
|
||||
|
||||
// Menu color palette
|
||||
--menu-back-color: #FFFFFF;
|
||||
--menu-border-color: #E4E6EC;
|
||||
--menu-fore-color: #53586A;
|
||||
--menu-active-fore-color: #2747C7;
|
||||
|
||||
// Card corner palette
|
||||
--beginner-color: #7CB342;
|
||||
--intermediate-color: #FFB300;
|
||||
--advanced-color: #D66361;
|
||||
|
||||
// Search color palette
|
||||
--search-back-color: #FFFFFF;
|
||||
--search-fore-color: #0D0E17;
|
||||
--search-placeholder-color: #C5C6CD;
|
||||
--search-shadow-color: rgba(0, 32, 128, 0.1);
|
||||
--search-shadow-focus-color: rgba(0, 32, 128, 0.17);
|
||||
|
||||
// Button color palette
|
||||
--button-back-color-a: #3B3EFC;
|
||||
--button-back-color-b: #DC325F;
|
||||
--button-fore-color: #FFFFFF;
|
||||
--button-shadow-color: rgba(0, 0, 0, 0.25);
|
||||
--button-shadow-focus-color: rgba(0, 0, 0, 0.29);
|
||||
--button-example-toggler-fore-color: #607d8b;
|
||||
|
||||
// Card color palette
|
||||
--card-back-color: #FFFFFF;
|
||||
--card-fore-color: #212121;
|
||||
--card-fore-color-light: #424242;
|
||||
--card-shadow-color-a: rgba(240, 242, 247, 0.1);
|
||||
--card-shadow-color-b: rgba(0, 32, 128, 0.1);
|
||||
|
||||
// Pre & Code color palette
|
||||
--pre-fore-color: #e57373;
|
||||
--pre-back-color: #1e253d;
|
||||
--pre-selected-color: #041248;
|
||||
|
||||
// Token color palette
|
||||
--token-color-a: #7f99a5; // Comments
|
||||
--token-color-b: #bdbdbd; // Punctuation
|
||||
--token-color-c: #64b5f6; // Functions
|
||||
--token-color-d: #ff8f00; // Numbers
|
||||
--token-color-e: #c5e1a5; // Strings
|
||||
--token-color-f: #ce93d8; // Keywords
|
||||
--token-color-g: #26c6da; // Regular expressions
|
||||
--token-color-h: #e57373; // Variables
|
||||
|
||||
// Tag color palette
|
||||
--tag-border-color: #D7DDF3;
|
||||
--tag-fore-color: #616B8F;
|
||||
|
||||
// Toast color palette
|
||||
--toast-back-color: #05A864;
|
||||
--toast-fore-color: #FFFFFF;
|
||||
--toast-shadow-color: rgba(0, 32, 128, 0.26);
|
||||
|
||||
// Link color palette
|
||||
--a-link-color: #0277bd;
|
||||
--a-visited-color: #01579b;
|
||||
|
||||
// Code color palette
|
||||
--code-fore-color: #0324AB;
|
||||
--code-back-color: #EDF0FC;
|
||||
--code-selected-color: #BDEDFE;
|
||||
}
|
||||
|
||||
// Dark mode colors
|
||||
.page-container.dark {
|
||||
// Interface color palette
|
||||
--back-color: #2A314C;
|
||||
--back-color-dark: #8993BE;
|
||||
--fore-color: #ABAFBF;
|
||||
--fore-color-light: #858CA8;
|
||||
--fore-color-lighter: #707899;
|
||||
--fore-color-dark: #B4BCD9;
|
||||
--fore-color-darker: #FCFCFD;
|
||||
|
||||
// Scrollbar
|
||||
--scrollbar-back-color: #434E76;
|
||||
--scrollbar-fore-color: #707899;
|
||||
|
||||
// Menu color palette
|
||||
--menu-back-color: #434E76;
|
||||
--menu-border-color: #13151B;
|
||||
--menu-fore-color: #959AAC;
|
||||
--menu-active-fore-color: #CDD4EF;
|
||||
|
||||
// Card corner palette remains unchanged for consistency
|
||||
|
||||
// Search color palette
|
||||
--search-back-color: #434E76;
|
||||
--search-fore-color: #E8E9F2;
|
||||
--search-placeholder-color: #999EBD;
|
||||
--search-shadow-color: rgba(1, 8, 30, 0.24);
|
||||
--search-shadow-focus-color: rgba(1, 8, 30, 0.31);
|
||||
|
||||
// Button color palette remains unchanged for consistency
|
||||
|
||||
// Card color palette
|
||||
--card-back-color: #434E76;
|
||||
--card-fore-color: #F0F0F0;
|
||||
--card-fore-color-light: #D6D6D6; // previously C0C0C0, careful
|
||||
--card-shadow-color-b: rgba(1, 8, 30, 0.24);
|
||||
|
||||
// Pre & Code color palette remains unchanged for consistency
|
||||
|
||||
// Token color palette remains unchanged for consistency
|
||||
|
||||
// Tag color palette
|
||||
--tag-border-color: #2A3765;
|
||||
--tag-fore-color: #BEC1CB; // previously 999DAD, careful
|
||||
|
||||
// Toast color palette
|
||||
--toast-shadow-color: rgba(1, 8, 30, 0.44);
|
||||
|
||||
// Link color palette
|
||||
--a-link-color: #6DC7FD;
|
||||
--a-visited-color: #5DB7FE;
|
||||
|
||||
// Code color palette
|
||||
--code-fore-color: #d1dafe;
|
||||
--code-back-color: #4f5fa0;
|
||||
--code-selected-color: #0dbcfb;
|
||||
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
// Load external fonts - progressive loading should help alleviate performance issues
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(../../../assets/RobotoMono-Regular.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-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto Mono Italic'), local('RobotoMono-Italic'), url(../../../assets/RobotoMono-Italic.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-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url(../../../assets/RobotoMono-Medium.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: 'Noto Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.ttf) format('truetype');
|
||||
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-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.ttf) format('truetype');
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,340 @@
|
||||
// ===================================================
|
||||
// Layout
|
||||
// ===================================================
|
||||
// Grid container
|
||||
.page-container {
|
||||
overflow: hidden;
|
||||
transition: 0.3s ease all;
|
||||
background: var(--back-color);
|
||||
display: grid;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
grid-template-areas: "content" "menu";
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: calc(100vh - 62px) 62px;
|
||||
// Medium screen size (mobile landscape, tablet)
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
grid-template-areas: "menu content";
|
||||
grid-template-columns: 62px calc(100vw - 62px);
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
// Large screen size (desktop, laptop)
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
grid-template-areas: "menu . content .";
|
||||
grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2);
|
||||
}
|
||||
}
|
||||
// Menu container
|
||||
header.menu {
|
||||
grid-area: menu;
|
||||
}
|
||||
// Content container
|
||||
.content {
|
||||
transition: 0.3s ease all;
|
||||
grid-area: content;
|
||||
overflow: auto;
|
||||
background: var(--back-color);
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-back-color);
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-fore-color);
|
||||
border: 1px solid var(--scrollbar-fore-color-lighter);
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Website title
|
||||
h1.website-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--fore-color-lighter);
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin: 1.5rem 1.25rem 0.125rem;
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
// Website logo
|
||||
img.website-logo {
|
||||
transition: 0.3s ease all;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
// Homepage logo
|
||||
.index-logo {
|
||||
transition: 0.3s ease all;
|
||||
display: block;
|
||||
margin: 1.5rem 1.25rem 0.5rem;
|
||||
vertical-align: middle;
|
||||
@media screen and (min-width: 144px) {
|
||||
max-width: 128px;
|
||||
margin: 1.5rem auto 0.5rem;
|
||||
}
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
display: inline-block;
|
||||
margin: 1.5rem 2rem 0.5rem 1.25rem;
|
||||
}
|
||||
}
|
||||
// Homepage title
|
||||
.index-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 2rem;
|
||||
color: var(--fore-color-dark);
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
display: inline-block;
|
||||
}
|
||||
margin: 0.75rem 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
// Homepage subtitle
|
||||
.index-sub-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem 1.25rem 1.25rem;
|
||||
color: var(--fore-color);
|
||||
text-align: center;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Page title
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.36;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--fore-color-darker);
|
||||
margin: 0 1.25rem;
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
// Page subtitle
|
||||
.page-sub-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.35;
|
||||
margin: 1rem 1.25rem 0.5rem;
|
||||
color: var(--fore-color);
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
// Page light subtitle
|
||||
p.light-sub {
|
||||
transition: 0.3s ease all;
|
||||
color: var(--fore-color-light);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin: 0.125rem 1.25rem 0px;
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
// Category/tag title
|
||||
.tag-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 1.125rem;
|
||||
color: var(-fore-color-dark);
|
||||
line-height: 1.375;
|
||||
a {
|
||||
&, &:link, &:visited {
|
||||
color: var(--fore-color-dark);
|
||||
}
|
||||
}
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
margin: 1.5rem 1.25rem 0.5rem;
|
||||
}
|
||||
|
||||
// Return to previous page link
|
||||
a.link-back {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
margin: 1rem 1.25rem 1.5rem;
|
||||
font-weight: 500;
|
||||
&, &:link, &:visited {
|
||||
color: var(--fore-color-dark);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// About page maintainers card
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
.flex-item {
|
||||
flex: 0 0 auto;
|
||||
max-width: calc(50% - 24px);
|
||||
flex-basis: calc(50% - 24px);
|
||||
margin: 12px;
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
max-width: calc(25% - 24px);
|
||||
flex-basis: calc(25% - 24px);
|
||||
}
|
||||
.media-section {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.button-section {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
&, &:link, &:visited {
|
||||
font-weight: 600;
|
||||
color: var(--card-fore-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Page background graphic
|
||||
.page-graphic {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
height: calc(50vmin);
|
||||
&::before {
|
||||
top: 0;
|
||||
right: 27.5vmin;
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 45vmin;
|
||||
height: 44vmin;
|
||||
background-position-x: 52.5%, center;
|
||||
background-position-y: 1%, top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 45vmin, 44vmin;
|
||||
}
|
||||
padding-top: 46vmin;
|
||||
text-align: center;
|
||||
@media screen and (orientation: landscape) and (max-height: calc(#{$layout-medium-breakpoint} - 1px)) {
|
||||
margin-top: 2rem;
|
||||
padding-top: 38vmin;
|
||||
height: 40vmin;
|
||||
&::before {
|
||||
right: calc(50vw - 45vmin / 2 - 31px);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
padding-top: 2vmin;
|
||||
padding-right: 400px;
|
||||
&::before {
|
||||
background-size: 395px, 393px;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
right: 1.125rem;
|
||||
margin-top: -2vmin;
|
||||
background-position-x: 95.5%, 93%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty page text
|
||||
.empty-page-text {
|
||||
transition: color 0.3s ease, background 0.3s ease;
|
||||
text-align: center;
|
||||
margin: 2.25rem auto 0.75rem;
|
||||
max-width: 200px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--fore-color-darker);
|
||||
font-weight: 400;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
max-width: 400px;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.35;
|
||||
margin: 2.25rem auto 1.375rem 1.25rem;
|
||||
&.search-page-text {
|
||||
margin-top: 12vmin;
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty-page-subtext {
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
max-width: 200px;
|
||||
color: var(--fore-color-darker);
|
||||
margin: 0.5rem auto;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
max-width: 256px;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
// Background graphic styles and dark mode
|
||||
.search-empty::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.search-no-results::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.page-not-found::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%23575E7A'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23D7DDF3'/%3E%3C/svg%3E%0A");
|
||||
background-position-x: 53.5%, center;
|
||||
background-position-y: 8.5%, top;
|
||||
background-size: 41vmin, 44vmin;
|
||||
&::before {
|
||||
background-size: 395px, 393px;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
right: 1.125rem;
|
||||
margin-top: -15vmin;
|
||||
background-position-x: 95.5%, 93%;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
background-size: 367px, 393px;
|
||||
background-position-x: 96.5%, 93%;
|
||||
}
|
||||
}
|
||||
.page-container.dark {
|
||||
.search-empty::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E");
|
||||
}
|
||||
.search-no-results::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%238993BE' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E");
|
||||
}
|
||||
.page-not-found::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%238993BE'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23555C7C'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
// ===================================================
|
||||
// Menu
|
||||
// ===================================================
|
||||
.menu {
|
||||
// z-index: 8;
|
||||
transition: 0.3s ease all;
|
||||
// Menu container
|
||||
background: var(--menu-back-color);
|
||||
border-top: 1px solid var(--menu-border-color);
|
||||
@media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
z-index: 1001;
|
||||
}
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
border-top: none;
|
||||
border-right: 1px solid var(--menu-border-color);
|
||||
padding-top: 17vh;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
padding-top: 23.5vh;
|
||||
}
|
||||
// Menu buttons
|
||||
.menu-button {
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease all;
|
||||
background: transparent;
|
||||
color: var(--menu-fore-color);
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
height: 61px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
border: none;
|
||||
line-height: 61px;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
height: 12.5vh;
|
||||
width: 100%;
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
@media screen and (min-width: $layout-large-breakpoint) {
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
outline: 0;
|
||||
color: var(--menu-active-fore-color);
|
||||
}
|
||||
&.active {
|
||||
color: var(--menu-active-fore-color);
|
||||
svg {
|
||||
color: var(--menu-active-fore-color);
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: var(--menu-fore-color);
|
||||
}
|
||||
&:last-of-type {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animate transition between light and dark mode
|
||||
.cross-fade-leave {
|
||||
transform: scale(1);
|
||||
}
|
||||
.cross-fade-leave.cross-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
|
||||
transform: scale(0.1);
|
||||
}
|
||||
.cross-fade-enter {
|
||||
transform: scale(0.1);
|
||||
}
|
||||
.cross-fade-enter.cross-fade-enter-active {
|
||||
transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
|
||||
transform: scale(0.95)
|
||||
}
|
||||
.cross-fade-height {
|
||||
height: 61px;
|
||||
transition: height 0.15s ease-in-out 0.15s;
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
// Set up some basic styling for everything
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
html, * {
|
||||
font-family: 'Noto Sans', Helvetica, sans-serif;
|
||||
line-height: 1.5;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
// Apply fixes and defaults as necessary for modern browsers only
|
||||
a, b, del, em, i, ins, q, span, strong, u {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 1em; // Fix for elements inside headings not displaying properly.
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--fore-color);
|
||||
background: var(--background-color);
|
||||
overflow-x: hidden;
|
||||
&.card-page {
|
||||
background: var(--card-page-color);
|
||||
}
|
||||
}
|
||||
// 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: 1.2;
|
||||
margin: 0.75rem 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
&.landing-title {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
& small {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
color: var(--secondary-fore-color);
|
||||
}
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
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: 0.5rem;
|
||||
}
|
||||
ol, ul {
|
||||
margin: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
// Actual styling using variables
|
||||
line-height: 1.25em;
|
||||
margin: 0.5rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
|
||||
}
|
||||
sup, sub, code, kbd {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:link{
|
||||
color: var(--a-link-color);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--a-visited-color);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue