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

Updated website navigation

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-28 19:35:25 +03:00
parent 596e2ca849
commit 34fba9cf7c
18 changed files with 226 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/adapter.html
View File

File diff suppressed because one or more lines are too long

6
docs/browser.html
View File

File diff suppressed because one or more lines are too long

6
docs/date.html
View File

File diff suppressed because one or more lines are too long

6
docs/function.html
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

File diff suppressed because one or more lines are too long

8
docs/math.html
View File

File diff suppressed because one or more lines are too long

6
docs/node.html
View File

File diff suppressed because one or more lines are too long

6
docs/object.html
View File

File diff suppressed because one or more lines are too long

97
docs/scss/style.scss
View File

@ -706,12 +706,12 @@ header {
nav { nav {
position: fixed; position: fixed;
top: 3.5rem; top: 6.5rem;
left: -320px; left: -320px;
width: 320px; width: 320px;
transition: left 0.3s ease; transition: left 0.3s ease;
z-index: 1100; z-index: 1100;
height: calc(100vh - 3.5rem); height: calc(100vh - 6.5rem);
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
background: var(#{$nav-back-color-var}); background: var(#{$nav-back-color-var});
@ -748,13 +748,51 @@ nav {
} }
} }
h4 { h4 {
margin: var(#{$universal-margin-var}); margin: 0;
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); 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}));
padding-left: 0; color: var(#{$nav-fore-color-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;
}
}
} }
a { ul {
display: block; 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: calc(0.5 * var(#{$universal-margin-var}));
margin-left: var(#{$universal-margin-var}); margin-left: var(#{$universal-margin-var});
margin-bottom: 0; margin-bottom: 0;
@ -764,9 +802,11 @@ nav {
text-decoration: none; text-decoration: none;
background: var(#{$nav-link-hover-color-var}); background: var(#{$nav-link-hover-color-var});
} }
+ a { + li {
margin-top: 0; margin-top: 0;
} }
}
a {
&:link, &:visited { &:link, &:visited {
color: var(#{$nav-link-fore-color-var}); color: var(#{$nav-link-fore-color-var});
} }
@ -774,21 +814,56 @@ nav {
} }
[type="search"] { [type="search"] {
z-index: 1000;
position: fixed;
top: 3.5rem;
height: 3rem;
left: -320px;
width: 320px;
color: var(#{$search-fore-color-var}); color: var(#{$search-fore-color-var});
background: var(#{$search-back-color-var}); background: var(#{$search-back-color-var});
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
border-bottom: $__1px solid var(#{$search-border-color-var}); border-bottom: $__1px solid var(#{$search-border-color-var});
width: 100%;
margin-bottom: var(#{$universal-margin-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})); 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; 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 { &:hover, &:focus {
border-bottom: $__1px solid var(#{$search-hover-border-color-var}); border-bottom: $__1px solid var(#{$search-hover-border-color-var});
} }
&:focus { &:focus {
box-shadow: 0 $__1px 0 0 var(#{$search-hover-border-color-var}); 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});
} }
} }

6
docs/string.html
View File

File diff suppressed because one or more lines are too long

2
docs/style.css
View File

File diff suppressed because one or more lines are too long

6
docs/type.html
View File

File diff suppressed because one or more lines are too long

6
docs/utility.html
View File

File diff suppressed because one or more lines are too long

16
scripts/web.js
View File

@ -169,12 +169,12 @@ try {
// Loop over tags and snippets to create the table of contents // Loop over tags and snippets to create the table of contents
for (let tag of taggedData) { for (let tag of taggedData) {
output += output +=
'<h4>' + '<h4 class="collapse">' +
md md
.render(`${util.capitalize(tag, true)}\n`) .render(`${util.capitalize(tag, true)}\n`)
.replace(/<p>/g, '') .replace(/<p>/g, '')
.replace(/<\/p>/g, '') + .replace(/<\/p>/g, '') +
'</h4>'; '</h4><ul>';
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag)) for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
output += md output += md
.render( .render(
@ -183,11 +183,15 @@ try {
}#${taggedSnippet[0].toLowerCase()})\n` }#${taggedSnippet[0].toLowerCase()})\n`
) )
.replace(/<p>/g, '') .replace(/<p>/g, '')
.replace(/<\/p>/g, '') .replace(/<\/p>/g, '</li>')
.replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`); .replace(/<a/g, `<li><a tags="${taggedSnippet[1].join(',')}"`);
output += '\n'; output += '</ul>\n';
} }
output += '</nav><main class="col-centered"><span id="top"><br/><br/></span>'; output += `<h4><a href="./archive">Archive</a></h4>
<h4><a href="./glossary">Glossary</a></h4>
<h4><a href="./contributing">Contributing</a></h4>
<h4><a href="./about">About</a></h4>
</nav><main class="col-centered"><span id="top"><br/><br/></span>`;
// Loop over tags and snippets to create the list of snippets // Loop over tags and snippets to create the list of snippets
for (let tag of taggedData) { for (let tag of taggedData) {
let localOutput = output let localOutput = output

34
static-parts/archived-page-start.html
View File

@ -18,7 +18,7 @@
let matchingTags = []; let matchingTags = [];
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => { Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1)); let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if(data.includes(true)){ if (data.includes(true)) {
x.style.display = ''; x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]); matchingTags.push(x.getAttribute('tags').split(',')[0]);
} }
@ -28,7 +28,7 @@
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none'; x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
}) })
} }
function scrollToTop(){ function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop; const c = document.querySelector('.card-container').scrollTop;
if (c > 0) { if (c > 0) {
window.requestAnimationFrame(scrollToTop); window.requestAnimationFrame(scrollToTop);
@ -40,33 +40,35 @@
var difference = to - element.scrollTop; var difference = to - element.scrollTop;
var perTick = difference / duration * 40; var perTick = difference / duration * 40;
setTimeout(function() { setTimeout(function () {
element.scrollTop = element.scrollTop + perTick; element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) { if (element.scrollTop === to) {
window.location.href = "#"+id; window.location.href = "#" + id;
return; return;
} }
scrollTo(element, to, id, duration - 40); scrollTo(element, to, id, duration - 40);
}, 40); }, 40);
}; };
function loader() { function loader() {
registerClickListener(); registerClickListener();
if(window.innerWidth >= '768') if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop; document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop; document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
} }
function registerClickListener() { function registerClickListener() {
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
if ( event.target.classList.contains('collapse') ) { if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
} }
else if (event.target.classList.contains('menu-button')) { else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav'; 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'; event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
} }
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') { else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = ''; document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button'; document.querySelector('.menu-button').classList = 'menu-button';
} }
else if (event.target.classList.contains('copy-button')) { else if (event.target.classList.contains('copy-button')) {
@ -81,12 +83,12 @@
tst.classList = 'toast'; tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!'; tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst); document.body.appendChild(tst);
setTimeout(function() { setTimeout(function () {
tst.style.opacity = 0; tst.style.opacity = 0;
setTimeout(function() { setTimeout(function () {
document.body.removeChild(tst); document.body.removeChild(tst);
},300); }, 300);
},1700); }, 1700);
} }
}, false); }, false);
} }

69
static-parts/beginner-page-start.html
View File

@ -14,11 +14,25 @@
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"> <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"> <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script> <script>
function scrollToTop(){ const search = (node) => {
const c = document.querySelector('html').scrollTop; let matchingTags = [];
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
})
}
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) { if (c > 0) {
window.requestAnimationFrame(scrollToTop); window.requestAnimationFrame(scrollToTop);
document.querySelector('html').scrollTo(0, c - c / 4); document.querySelector('.card-container').scrollTo(0, c - c / 4);
} }
}; };
function scrollTo(element, to, id, duration) { function scrollTo(element, to, id, duration) {
@ -26,24 +40,38 @@
var difference = to - element.scrollTop; var difference = to - element.scrollTop;
var perTick = difference / duration * 40; var perTick = difference / duration * 40;
setTimeout(function() { setTimeout(function () {
element.scrollTop = element.scrollTop + perTick; element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) { if (element.scrollTop === to) {
window.location.href = "#"+id; window.location.href = "#" + id;
return; return;
} }
scrollTo(element, to, id, duration - 40); scrollTo(element, to, id, duration - 40);
}, 40); }, 40);
}; };
function loader() { function loader() {
registerClickListener(); 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() { function registerClickListener() {
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
if ( event.target.classList.contains('collapse') ) { if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
} }
else if (event.target.classList.contains('clipboard-copy')) { 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('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent; const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea"); const textArea = document.createElement("textarea");
textArea.value = text.trim(); textArea.value = text.trim();
@ -55,21 +83,12 @@
tst.classList = 'toast'; tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!'; tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst); document.body.appendChild(tst);
setTimeout(function() { setTimeout(function () {
tst.style.opacity = 0; tst.style.opacity = 0;
setTimeout(function() { setTimeout(function () {
document.body.removeChild(tst); document.body.removeChild(tst);
},300); }, 300);
},1700); }, 1700);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.classList.contains('sublink-1')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
document.getElementById('doc-drawer-checkbox').checked = false;
} }
}, false); }, false);
} }

34
static-parts/glossary-page-start.html
View File

@ -18,7 +18,7 @@
let matchingTags = []; let matchingTags = [];
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => { Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1)); let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if(data.includes(true)){ if (data.includes(true)) {
x.style.display = ''; x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]); matchingTags.push(x.getAttribute('tags').split(',')[0]);
} }
@ -28,7 +28,7 @@
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none'; x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
}) })
} }
function scrollToTop(){ function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop; const c = document.querySelector('.card-container').scrollTop;
if (c > 0) { if (c > 0) {
window.requestAnimationFrame(scrollToTop); window.requestAnimationFrame(scrollToTop);
@ -40,33 +40,35 @@
var difference = to - element.scrollTop; var difference = to - element.scrollTop;
var perTick = difference / duration * 40; var perTick = difference / duration * 40;
setTimeout(function() { setTimeout(function () {
element.scrollTop = element.scrollTop + perTick; element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) { if (element.scrollTop === to) {
window.location.href = "#"+id; window.location.href = "#" + id;
return; return;
} }
scrollTo(element, to, id, duration - 40); scrollTo(element, to, id, duration - 40);
}, 40); }, 40);
}; };
function loader() { function loader() {
registerClickListener(); registerClickListener();
if(window.innerWidth >= '768') if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop; document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop; document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
} }
function registerClickListener() { function registerClickListener() {
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
if ( event.target.classList.contains('collapse') ) { if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
} }
else if (event.target.classList.contains('menu-button')) { else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav'; 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'; event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
} }
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') { else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = ''; document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button'; document.querySelector('.menu-button').classList = 'menu-button';
} }
else if (event.target.classList.contains('copy-button')) { else if (event.target.classList.contains('copy-button')) {
@ -81,12 +83,12 @@
tst.classList = 'toast'; tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!'; tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst); document.body.appendChild(tst);
setTimeout(function() { setTimeout(function () {
tst.style.opacity = 0; tst.style.opacity = 0;
setTimeout(function() { setTimeout(function () {
document.body.removeChild(tst); document.body.removeChild(tst);
},300); }, 300);
},1700); }, 1700);
} }
}, false); }, false);
} }

6
static-parts/page-start.html
View File

@ -63,10 +63,12 @@
} }
else if (event.target.classList.contains('menu-button')) { else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav'; 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'; event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
} }
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') { else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = ''; document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button'; document.querySelector('.menu-button').classList = 'menu-button';
} }
else if (event.target.classList.contains('copy-button')) { else if (event.target.classList.contains('copy-button')) {
@ -101,5 +103,5 @@
</a></h1> </a></h1>
</header> </header>
<div class="container card-container"> <div class="container card-container">
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav> <nav>
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">