redo main/register page
This commit is contained in:
SowinskiBraeden committed
1 parent
eaa2febbf2
commit
1ad5eb654b
400 files changed
+93168
-323
No files matched your search
@@ -0,0 +1 @@
|
||||
animate.style
|
||||
File diff suppressed because one or more lines are too long.
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,14 @@
|
||||
import buildDocsIndex from './modules/buildDocsIndex.mjs';
|
||||
import playground from './modules/playground.mjs';
|
||||
import startAnimations from './modules/startAnimations.mjs';
|
||||
import toggleOnClick from './modules/toggle.mjs';
|
||||
|
||||
buildDocsIndex();
|
||||
playground();
|
||||
|
||||
toggleOnClick('.callout-showList', 'html', 'animationList-active');
|
||||
toggleOnClick('.callout-hideList', 'html', 'animationList-active');
|
||||
toggleOnClick('.hamburger', 'html', 'hamburger-active');
|
||||
toggleOnClick('.docs-index', 'html', 'hamburger-active');
|
||||
|
||||
requestAnimationFrame(startAnimations);
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
Docs index
|
||||
*/
|
||||
|
||||
const indexItemTemplate = (item = '', id) => `
|
||||
<li class="docs-indexItem"><a href="#${id}" title="${item}">${item}</a></li>
|
||||
`
|
||||
|
||||
const indexList = (sections = [], container = '.sidebar', heading = 'h2') => {
|
||||
const containerEl = document.querySelector(container)
|
||||
const list = document.createElement('ul')
|
||||
|
||||
const children = sections.map(section => {
|
||||
const title = section.querySelector(heading)
|
||||
const id = section.getAttribute('id')
|
||||
|
||||
return title && indexItemTemplate(title.innerText, id)
|
||||
})
|
||||
|
||||
list.classList.add('docs-index')
|
||||
list.innerHTML = children.join('\n')
|
||||
|
||||
containerEl.insertAdjacentElement('beforeend', list)
|
||||
|
||||
return list
|
||||
}
|
||||
|
||||
const buildDocsIndex = (docs = '#documentation', docSection = '[class*="docSection-"]', titles = 'h2') => {
|
||||
const docsEl = document.querySelector(docs)
|
||||
const sections = [...docsEl.querySelectorAll(docSection)]
|
||||
|
||||
const list = indexList(sections)
|
||||
|
||||
return list
|
||||
}
|
||||
|
||||
export default buildDocsIndex
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
Animation playground
|
||||
*/
|
||||
|
||||
const clearAll = (items = [], className = 'active') => {
|
||||
items.forEach((item) => item.classList.remove(className));
|
||||
};
|
||||
|
||||
const setEndListener = (target, defaultClass) => {
|
||||
target.addEventListener('animationend', (e) => {
|
||||
target.setAttribute('class', defaultClass);
|
||||
document.documentElement.classList.remove('isPlaying');
|
||||
});
|
||||
};
|
||||
|
||||
const playground = (
|
||||
container = '.animation-list',
|
||||
item = '.animation-item',
|
||||
target = '.callout-title',
|
||||
) => {
|
||||
const containerEl = document.querySelector(container);
|
||||
const items = [...containerEl.querySelectorAll(item)];
|
||||
const targetEl = document.querySelector(target);
|
||||
|
||||
setEndListener(targetEl, target.replace('.', ''));
|
||||
|
||||
containerEl.addEventListener('click', (e) => {
|
||||
const el = e.target
|
||||
|
||||
if(el.classList.contains('animation-item--title')) {
|
||||
clearAll(items);
|
||||
const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
|
||||
|
||||
targetEl.classList.add('animate__animated', animation);
|
||||
document.documentElement.classList.add('isPlaying');
|
||||
document.documentElement.classList.remove('animationList-active');
|
||||
}
|
||||
|
||||
if (el.classList.contains('copy-icon')) {
|
||||
const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
|
||||
navigator.clipboard.writeText(animation);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default playground;
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
Slows animations
|
||||
*/
|
||||
|
||||
const slowDownAnimations = (target) => {
|
||||
const targetEl = document.querySelector(target)
|
||||
const doc = document.documentElement
|
||||
|
||||
targetEl.addEventListener('click', () => {
|
||||
const currentDuration = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--animate-duration')
|
||||
const newDuration = currentDuration === '1s' ? '2s' : '1s'
|
||||
|
||||
document.documentElement.style.setProperty('--animate-duration', newDuration);
|
||||
})
|
||||
}
|
||||
|
||||
export default slowDownAnimations
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
Intro animation
|
||||
*/
|
||||
|
||||
const startAnimation = () => {
|
||||
const title = document.querySelector('.callout-title')
|
||||
const subTitle = document.querySelector('.callout-subtitle')
|
||||
const sidebar = document.querySelector('.animation-list')
|
||||
const button = document.querySelector('.callout-showList')
|
||||
|
||||
|
||||
const titleAnimation = 'zoomInDown'
|
||||
const subTitleAnimation = 'zoomInDown'
|
||||
const buttonAnimation = 'zoomInUp'
|
||||
const sidebarAnimation = 'fadeInRight'
|
||||
|
||||
title.classList.add('animate__animated', `animate__${titleAnimation}`)
|
||||
subTitle.classList.add('animate__animated', `animate__${subTitleAnimation}`)
|
||||
button.classList.add('animate__animated', `animate__${buttonAnimation}`)
|
||||
sidebar.classList.add('animate__animated', `animate__${sidebarAnimation}`)
|
||||
}
|
||||
|
||||
export default startAnimation
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
Mobile animation list
|
||||
*/
|
||||
|
||||
const toggleOnClick = (el, target, className) => {
|
||||
const element = document.querySelector(el)
|
||||
const targetEl = document.querySelector(target)
|
||||
|
||||
element.addEventListener('click', e => {
|
||||
targetEl.classList.toggle(className)
|
||||
})
|
||||
}
|
||||
|
||||
export default toggleOnClick
|
||||
@@ -0,0 +1,604 @@
|
||||
/*-----------------------------------*\
|
||||
$BASE
|
||||
\*-----------------------------------*/
|
||||
|
||||
:root {
|
||||
--c-main: #351c75;
|
||||
--c-secondary: #e69138;
|
||||
--c-dark: #333;
|
||||
--c-background: #fce5cd;
|
||||
--c-background-dark: #f7d7b5;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
color: var(--c-dark);
|
||||
font-size: 100%;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) {
|
||||
html {
|
||||
font-size: 112.5%;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
* *,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--c-main);
|
||||
}
|
||||
|
||||
pre,
|
||||
table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1em;
|
||||
background: var(--c-background);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--c-dark);
|
||||
border-radius: 0.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$TYPOGRAPHY
|
||||
\*-----------------------------------*/
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
hr,
|
||||
table,
|
||||
pre,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--c-main);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.998rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.999rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.414rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$GENERICS
|
||||
\*-----------------------------------*/
|
||||
|
||||
.button {
|
||||
padding: 0.4em 1em;
|
||||
|
||||
color: var(--c-main);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--c-main);
|
||||
background: transparent;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 6px solid var(--c-secondary);
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$INTRO
|
||||
\*-----------------------------------*/
|
||||
|
||||
.intro {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: [callout] 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 1rem;
|
||||
column-gap: 0;
|
||||
row-gap: 1rem;
|
||||
grid-template-areas:
|
||||
'callout animation-list'
|
||||
'footer aimation-list';
|
||||
|
||||
max-width: 100%;
|
||||
height: calc(100vh - 2.55rem);
|
||||
overflow: hidden;
|
||||
|
||||
background-color: var(--c-background);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.intro {
|
||||
height: calc(100vh - 2.8rem);
|
||||
grid-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: [callout] 1fr [sidebar] 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.callout {
|
||||
grid-area: callout;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
margin-bottom: 0;
|
||||
|
||||
animation-delay: 0.25s;
|
||||
|
||||
font-size: 4rem;
|
||||
font-size: min(14vw, 4rem);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.callout-title {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-subtitle {
|
||||
margin-top: 0;
|
||||
|
||||
animation-delay: 0.3s;
|
||||
|
||||
color: var(--c-secondary);
|
||||
font-size: 1.3333rem;
|
||||
font-size: min(10vw, 1.3333rem);
|
||||
}
|
||||
|
||||
.callout-showList {
|
||||
margin-top: 2rem;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.callout-showList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.callout-hideList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
z-index: 90;
|
||||
|
||||
grid-area: animation-list;
|
||||
grid-row: 1 / 3;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: backwards;
|
||||
transition: transform 0.2s ease-out;
|
||||
|
||||
background-color: var(--c-background-dark);
|
||||
}
|
||||
|
||||
.animationList-active .animation-list {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.animation-list {
|
||||
position: relative;
|
||||
left: auto;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-footer {
|
||||
grid-area: footer;
|
||||
justify-self: center;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.animation-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.76em);
|
||||
right: -1em;
|
||||
padding: 0.5em 0.75em;
|
||||
|
||||
background-color: var(--c-main);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 1.1em;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 6px 4px 0 4px;
|
||||
border-color: var(--c-main) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
align-self: center;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.867 477.867'%3E%3Cpath d='M341.333 85.333H51.2c-28.277 0-51.2 22.923-51.2 51.2v290.133c0 28.277 22.923 51.2 51.2 51.2h290.133c28.277 0 51.2-22.923 51.2-51.2V136.533c0-28.277-22.923-51.2-51.2-51.2zM358.4 426.667c0 9.426-7.641 17.067-17.067 17.067H51.2c-9.426 0-17.067-7.641-17.067-17.067V136.533c0-9.426 7.641-17.067 17.067-17.067h290.133c9.426 0 17.067 7.641 17.067 17.067v290.134z'/%3E%3Cpath d='M426.667 0h-307.2c-28.277 0-51.2 22.923-51.2 51.2 0 9.426 7.641 17.067 17.067 17.067S102.4 60.626 102.4 51.2s7.641-17.067 17.067-17.067h307.2c9.426 0 17.067 7.641 17.067 17.067v307.2c0 9.426-7.641 17.067-17.067 17.067s-17.067 7.641-17.067 17.067 7.641 17.067 17.067 17.067c28.277 0 51.2-22.923 51.2-51.2V51.2c0-28.277-22.923-51.2-51.2-51.2z'/%3E%3C/svg%3E");
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px;
|
||||
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.animation-item:hover .copy-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.copy-icon:hover .tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.animation-group,
|
||||
.animation-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.animation-title {
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
color: var(--c-dark);
|
||||
}
|
||||
|
||||
.animation-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$DOCS
|
||||
\*-----------------------------------*/
|
||||
|
||||
.container {
|
||||
gap: 1rem;
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: calc(100% - 300px - 1rem) 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.container {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr 1100px 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
.docs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
position: relative;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
background-color: var(--c-main);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.docs-mainTitle {
|
||||
grid-column: 1 / 2;
|
||||
padding-left: 1rem;
|
||||
margin-top: 0;
|
||||
|
||||
font-size: 1.3333rem;
|
||||
}
|
||||
|
||||
.docs-mainTitle a {
|
||||
color: var(--c-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.docs-mainTitle {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
padding-left: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.content {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
--size: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
left: 100%;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
background-color: var(--c-secondary);
|
||||
transition: transform 0.2s ease-out;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hamburger-active .hamburger {
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 100;
|
||||
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
padding-right: 1rem;
|
||||
|
||||
background: var(--c-background-dark);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.hamburger-active .sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.hamburger-active .sidebar {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-github {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.docs-index {
|
||||
top: 1rem;
|
||||
padding-left: 2rem;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.docs-index {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-indexItem {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.edit-github {
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[class*='docSection'] {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
[class*='docSection']:last-of-type {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.docSection-contributors table {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.docSection-contributors table th,
|
||||
.docSection-contributors table td {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.docSection-contributors table img {
|
||||
width: 150px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$FOOTER
|
||||
\*-----------------------------------*/
|
||||
|
||||
.main-footer {
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--c-main);
|
||||
color: #fff;
|
||||
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-footer a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$REDUCED MOTION BANNER
|
||||
\*-----------------------------------*/
|
||||
|
||||
.motionless__banner a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.motionless__banner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 150;
|
||||
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-top: 2px solid #ff5722;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.motionless__paragraph {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (print), (prefers-reduced-motion: reduce) {
|
||||
.motionless__banner {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.docs {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.animation-list {
|
||||
text-align: left;
|
||||
}
|
||||
Reference in new issue
Block a user