Init
This commit is contained in:
atomiks
39
src/css/components/back-to-top-button.scss
Normal file
39
src/css/components/back-to-top-button.scss
Normal file
@ -0,0 +1,39 @@
|
||||
.back-to-top-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
background: white;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.15);
|
||||
transition: all 0.2s ease-out;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(0, 32, 128, 0.1);
|
||||
outline: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15);
|
||||
color: #35a8ff;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15), 0 0 2px 2px #35a8ff;
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
60
src/css/components/base.scss
Normal file
60
src/css/components/base.scss
Normal file
@ -0,0 +1,60 @@
|
||||
html {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, 'Helvetica Neue', Helvetica,
|
||||
Arial, sans-serif;
|
||||
background: #f6f7fd;
|
||||
color: rgb(50, 75, 100);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #157bda;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
color: #0090ff;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(0, 32, 128, 0.1);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
padding: 0 2%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main > .container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 579px) {
|
||||
.main > .container {
|
||||
padding: 0 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.content-wrapper {
|
||||
margin-left: 200px;
|
||||
}
|
||||
}
|
||||
927
src/css/components/hamburger.scss
Normal file
927
src/css/components/hamburger.scss
Normal file
@ -0,0 +1,927 @@
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
* @author Jonathan Suh @jonsuh
|
||||
* @site https://jonsuh.com/hamburgers
|
||||
* @link https://github.com/jonsuh/hamburgers
|
||||
*/
|
||||
.hamburger {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
outline: 0;
|
||||
}
|
||||
.hamburger:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hamburger-box {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
display: block;
|
||||
top: 50%;
|
||||
}
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
width: 36px;
|
||||
height: 2px;
|
||||
background-color: #e3f5ff;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
.hamburger-inner::before {
|
||||
top: -10px;
|
||||
}
|
||||
.hamburger-inner::after {
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DX
|
||||
*/
|
||||
.hamburger--3dx .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dx .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dx .hamburger-inner::before,
|
||||
.hamburger--3dx .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dx.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.hamburger--3dx.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dx.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DX Reverse
|
||||
*/
|
||||
.hamburger--3dx-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dx-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dx-r .hamburger-inner::before,
|
||||
.hamburger--3dx-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dx-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
.hamburger--3dx-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dx-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DY
|
||||
*/
|
||||
.hamburger--3dy .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dy .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dy .hamburger-inner::before,
|
||||
.hamburger--3dy .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dy.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
.hamburger--3dy.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dy.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DY Reverse
|
||||
*/
|
||||
.hamburger--3dy-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dy-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dy-r .hamburger-inner::before,
|
||||
.hamburger--3dy-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dy-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.hamburger--3dy-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dy-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DXY
|
||||
*/
|
||||
.hamburger--3dxy .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dxy .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dxy .hamburger-inner::before,
|
||||
.hamburger--3dxy .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dxy.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.hamburger--3dxy.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dxy.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DXY Reverse
|
||||
*/
|
||||
.hamburger--3dxy-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dxy-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dxy-r .hamburger-inner::before,
|
||||
.hamburger--3dxy-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
||||
}
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow
|
||||
*/
|
||||
.hamburger--arrow.is-active .hamburger-inner::before {
|
||||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrow.is-active .hamburger-inner::after {
|
||||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Right
|
||||
*/
|
||||
.hamburger--arrow-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrow-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Alt
|
||||
*/
|
||||
.hamburger--arrowalt .hamburger-inner::before {
|
||||
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Alt Right
|
||||
*/
|
||||
.hamburger--arrowalt-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Turn
|
||||
*/
|
||||
.hamburger--arrowturn.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
||||
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
||||
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Turn Right
|
||||
*/
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Boring
|
||||
*/
|
||||
.hamburger--boring .hamburger-inner,
|
||||
.hamburger--boring .hamburger-inner::before,
|
||||
.hamburger--boring .hamburger-inner::after {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.hamburger--boring.is-active .hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.hamburger--boring.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--boring.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Collapse
|
||||
*/
|
||||
.hamburger--collapse .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--collapse .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
|
||||
}
|
||||
.hamburger--collapse .hamburger-inner::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--collapse.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--collapse.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
|
||||
}
|
||||
.hamburger--collapse.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Collapse Reverse
|
||||
*/
|
||||
.hamburger--collapse-r .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--collapse-r .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
|
||||
}
|
||||
.hamburger--collapse-r .hamburger-inner::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--collapse-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--collapse-r.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
|
||||
}
|
||||
.hamburger--collapse-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Elastic
|
||||
*/
|
||||
.hamburger--elastic .hamburger-inner {
|
||||
top: 2px;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.hamburger--elastic .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
.hamburger--elastic .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.hamburger--elastic.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(135deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
.hamburger--elastic.is-active .hamburger-inner::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--elastic.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(-270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Elastic Reverse
|
||||
*/
|
||||
.hamburger--elastic-r .hamburger-inner {
|
||||
top: 2px;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.hamburger--elastic-r .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
.hamburger--elastic-r .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.hamburger--elastic-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(-135deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
.hamburger--elastic-r.is-active .hamburger-inner::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--elastic-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Emphatic
|
||||
*/
|
||||
.hamburger--emphatic {
|
||||
overflow: hidden;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner::after {
|
||||
top: 10px;
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner::before {
|
||||
left: -80px;
|
||||
top: -80px;
|
||||
transform: translate3d(80px, 80px, 0) rotate(45deg);
|
||||
transition: left 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner::after {
|
||||
right: -80px;
|
||||
top: -80px;
|
||||
transform: translate3d(-80px, 80px, 0) rotate(-45deg);
|
||||
transition: right 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Emphatic Reverse
|
||||
*/
|
||||
.hamburger--emphatic-r {
|
||||
overflow: hidden;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner::after {
|
||||
top: 10px;
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner::before {
|
||||
left: -80px;
|
||||
top: 80px;
|
||||
transform: translate3d(80px, -80px, 0) rotate(-45deg);
|
||||
transition: left 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner::after {
|
||||
right: -80px;
|
||||
top: 80px;
|
||||
transform: translate3d(-80px, -80px, 0) rotate(45deg);
|
||||
transition: right 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Minus
|
||||
*/
|
||||
.hamburger--minus .hamburger-inner::before,
|
||||
.hamburger--minus .hamburger-inner::after {
|
||||
transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::before,
|
||||
.hamburger--minus.is-active .hamburger-inner::after {
|
||||
opacity: 0;
|
||||
transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slider
|
||||
*/
|
||||
.hamburger--slider .hamburger-inner {
|
||||
top: 2px;
|
||||
}
|
||||
.hamburger--slider .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.hamburger--slider .hamburger-inner::after {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.hamburger--slider.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--slider.is-active .hamburger-inner::before {
|
||||
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--slider.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(-90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Slider Reverse
|
||||
*/
|
||||
.hamburger--slider-r .hamburger-inner {
|
||||
top: 2px;
|
||||
}
|
||||
.hamburger--slider-r .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.hamburger--slider-r .hamburger-inner::after {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.hamburger--slider-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(-45deg);
|
||||
}
|
||||
.hamburger--slider-r.is-active .hamburger-inner::before {
|
||||
transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--slider-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spin
|
||||
*/
|
||||
.hamburger--spin .hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::before {
|
||||
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spin.is-active .hamburger-inner {
|
||||
transform: rotate(225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spin Reverse
|
||||
*/
|
||||
.hamburger--spin-r .hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spin-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
|
||||
}
|
||||
.hamburger--spin-r .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spin-r.is-active .hamburger-inner {
|
||||
transform: rotate(-225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spin-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
.hamburger--spin-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spring
|
||||
*/
|
||||
.hamburger--spring .hamburger-inner {
|
||||
top: 2px;
|
||||
transition: background-color 0s 0.13s linear;
|
||||
}
|
||||
.hamburger--spring .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spring .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spring.is-active .hamburger-inner {
|
||||
transition-delay: 0.22s;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--spring.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--spring.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spring Reverse
|
||||
*/
|
||||
.hamburger--spring-r .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spring-r .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
|
||||
}
|
||||
.hamburger--spring-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spring-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spring-r.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
|
||||
}
|
||||
.hamburger--spring-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Stand
|
||||
*/
|
||||
.hamburger--stand .hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
}
|
||||
.hamburger--stand .hamburger-inner::before {
|
||||
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--stand .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--stand.is-active .hamburger-inner {
|
||||
transform: rotate(90deg);
|
||||
background-color: transparent;
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
}
|
||||
.hamburger--stand.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--stand.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Stand Reverse
|
||||
*/
|
||||
.hamburger--stand-r .hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
}
|
||||
.hamburger--stand-r .hamburger-inner::before {
|
||||
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--stand-r .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--stand-r.is-active .hamburger-inner {
|
||||
transform: rotate(-90deg);
|
||||
background-color: transparent;
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
}
|
||||
.hamburger--stand-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--stand-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Squeeze
|
||||
*/
|
||||
.hamburger--squeeze .hamburger-inner {
|
||||
transition-duration: 0.075s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--squeeze .hamburger-inner::before {
|
||||
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
|
||||
}
|
||||
.hamburger--squeeze .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--squeeze.is-active .hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--squeeze.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
|
||||
}
|
||||
.hamburger--squeeze.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Vortex
|
||||
*/
|
||||
.hamburger--vortex .hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::before,
|
||||
.hamburger--vortex .hamburger-inner::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
|
||||
.hamburger--vortex.is-active .hamburger-inner {
|
||||
transform: rotate(765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::before,
|
||||
.hamburger--vortex.is-active .hamburger-inner::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Vortex Reverse
|
||||
*/
|
||||
.hamburger--vortex-r .hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::before,
|
||||
.hamburger--vortex-r .hamburger-inner::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
|
||||
.hamburger--vortex-r.is-active .hamburger-inner {
|
||||
transform: rotate(-765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::before,
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
76
src/css/components/header.scss
Normal file
76
src/css/components/header.scss
Normal file
File diff suppressed because one or more lines are too long
104
src/css/components/sidebar.scss
Normal file
104
src/css/components/sidebar.scss
Normal file
@ -0,0 +1,104 @@
|
||||
.sidebar {
|
||||
background: #202e4e;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2);
|
||||
|
||||
&__menu {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&__menu-icon {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&__links {
|
||||
background: #202e4e;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transform-origin: 0% 0%;
|
||||
transform: rotateX(-90deg);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
max-height: 378px;
|
||||
margin-top: 44px;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2);
|
||||
|
||||
&.is-active {
|
||||
transform: rotateX(0);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
color: #e3f5ff;
|
||||
padding: 0.5rem 0.75rem;
|
||||
transition: all 0.1s ease-out;
|
||||
border-left: 2px solid #576a85;
|
||||
margin: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
|
||||
&:hover {
|
||||
color: #88f4ff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sidebar {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
background: linear-gradient(-30deg, #2a3d67, #14264e);
|
||||
box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 32, 64, 0.1);
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #4b6191;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #4b6191;
|
||||
}
|
||||
|
||||
&__links {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: rotateX(0);
|
||||
margin-top: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
128
src/css/components/snippet.scss
Normal file
128
src/css/components/snippet.scss
Normal file
@ -0,0 +1,128 @@
|
||||
.snippet {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 2rem 5%;
|
||||
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.1), 0 0 0 1px #f0f2f7;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(0, 32, 128, 0.1);
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
code:not([class*='lang']) {
|
||||
background: #fcfaff;
|
||||
border: 1px solid #e2ddff;
|
||||
color: #4b00da;
|
||||
border-radius: 0.15rem;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
ol > li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
margin: 1rem 0 0.5rem;
|
||||
line-height: 2;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
background: #333;
|
||||
border: 1px solid #c6d6ea;
|
||||
border-bottom-color: darken(#c6d6ea, 5);
|
||||
background: white;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 64, 0.15);
|
||||
|
||||
&[data-type='HTML'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
}
|
||||
&[data-type='CSS'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #7983ff, #5f9de9);
|
||||
}
|
||||
&[data-type='JavaScript'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #ffb000, #f58818);
|
||||
}
|
||||
}
|
||||
|
||||
&__browser-support {
|
||||
display: inline-block;
|
||||
font-size: 2rem;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
&__subheading.is-html {
|
||||
color: #e22f70;
|
||||
}
|
||||
|
||||
&__subheading.is-css {
|
||||
color: #0a91d4;
|
||||
}
|
||||
|
||||
&__subheading.is-explanation {
|
||||
color: #4b00da;
|
||||
}
|
||||
|
||||
&__support-note {
|
||||
color: #9fa5b5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__requires-javascript {
|
||||
position: absolute;
|
||||
background: red;
|
||||
background: linear-gradient(145deg, #ff003b, #ff4b39);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
transform: rotate(20deg);
|
||||
font-weight: bold;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-demo {
|
||||
background: #f5f6f9;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
|
||||
&.is-distinct {
|
||||
background: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.snippet {
|
||||
&__requires-javascript {
|
||||
right: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/css/deps/prism.css
Normal file
146
src/css/deps/prism.css
Normal file
@ -0,0 +1,146 @@
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: rgb(50, 75, 100);
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
overflow: auto;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
pre.is-option {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f6f9;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8ca2d3;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name {
|
||||
color: #da7800;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #93a0c7;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #e22f70;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #0087ca;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.language-css .token.string,
|
||||
.token.url,
|
||||
.token.attr-value,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #008a7e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.style .token.string {
|
||||
color: #f53737;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword {
|
||||
color: #7552ff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #396dff;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #00a8d4;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
6
src/css/index.scss
Normal file
6
src/css/index.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import './components/base.scss';
|
||||
@import './components/hamburger.scss';
|
||||
@import './components/sidebar.scss';
|
||||
@import './components/header.scss';
|
||||
@import './components/snippet.scss';
|
||||
@import './components/back-to-top-button.scss';
|
||||
BIN
src/img/logo.png
Normal file
BIN
src/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
14
src/js/components/BackToTopButton.js
Normal file
14
src/js/components/BackToTopButton.js
Normal file
@ -0,0 +1,14 @@
|
||||
import jump from '../deps/jump'
|
||||
import { select, scrollY, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const backToTopButton = select('.back-to-top-button')
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
backToTopButton.classList[scrollY() > 500 ? 'add' : 'remove']('is-visible')
|
||||
})
|
||||
backToTopButton.onclick = () => {
|
||||
jump('.header', {
|
||||
duration: 750,
|
||||
easing: easeOutQuint
|
||||
})
|
||||
}
|
||||
34
src/js/components/Menu.js
Normal file
34
src/js/components/Menu.js
Normal file
@ -0,0 +1,34 @@
|
||||
import jump from '../deps/jump'
|
||||
import { select, selectAll, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const menu = select('.hamburger')
|
||||
const links = select('.sidebar__links')
|
||||
const ACTIVE_CLASS = 'is-active'
|
||||
|
||||
const toggle = () => [menu, links].forEach(el => el.classList.toggle(ACTIVE_CLASS))
|
||||
|
||||
menu.addEventListener('click', toggle)
|
||||
|
||||
links.addEventListener('click', e => {
|
||||
setTimeout(toggle, 40)
|
||||
if (e.target.classList.contains('sidebar__link')) {
|
||||
e.preventDefault()
|
||||
jump(e.target.getAttribute('href'), {
|
||||
duration: 750,
|
||||
offset: window.innerWidth <= 768 ? -64 : -32,
|
||||
easing: easeOutQuint
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if (
|
||||
!e.target.closest('.sidebar__links') &&
|
||||
!e.target.closest('.hamburger') &&
|
||||
links.classList.contains(ACTIVE_CLASS)
|
||||
) {
|
||||
toggle()
|
||||
}
|
||||
})
|
||||
|
||||
export default { toggle }
|
||||
196
src/js/deps/jump.js
Normal file
196
src/js/deps/jump.js
Normal file
@ -0,0 +1,196 @@
|
||||
;(function(global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined'
|
||||
? (module.exports = factory())
|
||||
: typeof define === 'function' && define.amd ? define(factory) : (global.Jump = factory())
|
||||
})(this, function() {
|
||||
'use strict'
|
||||
|
||||
// Robert Penner's easeInOutQuad
|
||||
|
||||
// find the rest of his easing functions here: http://robertpenner.com/easing/
|
||||
// find them exported for ES6 consumption here: https://github.com/jaxgeller/ez.js
|
||||
|
||||
var easeInOutQuad = function easeInOutQuad(t, b, c, d) {
|
||||
t /= d / 2
|
||||
if (t < 1) return c / 2 * t * t + b
|
||||
t--
|
||||
return -c / 2 * (t * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
var _typeof =
|
||||
typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
|
||||
? function(obj) {
|
||||
return typeof obj
|
||||
}
|
||||
: function(obj) {
|
||||
return obj &&
|
||||
typeof Symbol === 'function' &&
|
||||
obj.constructor === Symbol &&
|
||||
obj !== Symbol.prototype
|
||||
? 'symbol'
|
||||
: typeof obj
|
||||
}
|
||||
|
||||
var jumper = function jumper() {
|
||||
// private variable cache
|
||||
// no variables are created during a jump, preventing memory leaks
|
||||
|
||||
var element = void 0 // element to scroll to (node)
|
||||
|
||||
var start = void 0 // where scroll starts (px)
|
||||
var stop = void 0 // where scroll stops (px)
|
||||
|
||||
var offset = void 0 // adjustment from the stop position (px)
|
||||
var easing = void 0 // easing function (function)
|
||||
var a11y = void 0 // accessibility support flag (boolean)
|
||||
|
||||
var distance = void 0 // distance of scroll (px)
|
||||
var duration = void 0 // scroll duration (ms)
|
||||
|
||||
var timeStart = void 0 // time scroll started (ms)
|
||||
var timeElapsed = void 0 // time spent scrolling thus far (ms)
|
||||
|
||||
var next = void 0 // next scroll position (px)
|
||||
|
||||
var callback = void 0 // to call when done scrolling (function)
|
||||
|
||||
// scroll position helper
|
||||
|
||||
function location() {
|
||||
return window.scrollY || window.pageYOffset
|
||||
}
|
||||
|
||||
// element offset helper
|
||||
|
||||
function top(element) {
|
||||
return element.getBoundingClientRect().top + start
|
||||
}
|
||||
|
||||
// rAF loop helper
|
||||
|
||||
function loop(timeCurrent) {
|
||||
// store time scroll started, if not started already
|
||||
if (!timeStart) {
|
||||
timeStart = timeCurrent
|
||||
}
|
||||
|
||||
// determine time spent scrolling so far
|
||||
timeElapsed = timeCurrent - timeStart
|
||||
|
||||
// calculate next scroll position
|
||||
next = easing(timeElapsed, start, distance, duration)
|
||||
|
||||
// scroll to it
|
||||
window.scrollTo(0, next)
|
||||
|
||||
// check progress
|
||||
timeElapsed < duration
|
||||
? window.requestAnimationFrame(loop) // continue scroll loop
|
||||
: done() // scrolling is done
|
||||
}
|
||||
|
||||
// scroll finished helper
|
||||
|
||||
function done() {
|
||||
// account for rAF time rounding inaccuracies
|
||||
window.scrollTo(0, start + distance)
|
||||
|
||||
// if scrolling to an element, and accessibility is enabled
|
||||
if (element && a11y) {
|
||||
// add tabindex indicating programmatic focus
|
||||
element.setAttribute('tabindex', '-1')
|
||||
|
||||
// focus the element
|
||||
element.focus()
|
||||
}
|
||||
|
||||
// if it exists, fire the callback
|
||||
if (typeof callback === 'function') {
|
||||
callback()
|
||||
}
|
||||
|
||||
// reset time for next jump
|
||||
timeStart = false
|
||||
}
|
||||
|
||||
// API
|
||||
|
||||
function jump(target) {
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}
|
||||
|
||||
// resolve options, or use defaults
|
||||
duration = options.duration || 1000
|
||||
offset = options.offset || 0
|
||||
callback = options.callback // "undefined" is a suitable default, and won't be called
|
||||
easing = options.easing || easeInOutQuad
|
||||
a11y = options.a11y || false
|
||||
|
||||
// cache starting position
|
||||
start = location()
|
||||
|
||||
// resolve target
|
||||
switch (typeof target === 'undefined' ? 'undefined' : _typeof(target)) {
|
||||
// scroll from current position
|
||||
case 'number':
|
||||
element = undefined // no element to scroll to
|
||||
a11y = false // make sure accessibility is off
|
||||
stop = start + target
|
||||
break
|
||||
|
||||
// scroll to element (node)
|
||||
// bounding rect is relative to the viewport
|
||||
case 'object':
|
||||
element = target
|
||||
stop = top(element)
|
||||
break
|
||||
|
||||
// scroll to element (selector)
|
||||
// bounding rect is relative to the viewport
|
||||
case 'string':
|
||||
element = document.querySelector(target)
|
||||
stop = top(element)
|
||||
break
|
||||
}
|
||||
|
||||
// resolve scroll distance, accounting for offset
|
||||
distance = stop - start + offset
|
||||
|
||||
// resolve duration
|
||||
switch (_typeof(options.duration)) {
|
||||
// number in ms
|
||||
case 'number':
|
||||
duration = options.duration
|
||||
break
|
||||
|
||||
// function passed the distance of the scroll
|
||||
case 'function':
|
||||
duration = options.duration(distance)
|
||||
break
|
||||
}
|
||||
|
||||
// start the loop
|
||||
window.requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
// expose only the jump method
|
||||
return jump
|
||||
}
|
||||
|
||||
// export singleton
|
||||
|
||||
var singleton = jumper()
|
||||
|
||||
return (() => {
|
||||
let scrolling
|
||||
const end = () => (scrolling = false)
|
||||
return (to, options = {}) => {
|
||||
if (scrolling) return
|
||||
const scrollY = window.scrollY || window.pageYOffset
|
||||
if (to !== '.header') location.hash = to
|
||||
scroll(0, scrollY)
|
||||
scrolling = true
|
||||
setTimeout(end, options.duration || 0)
|
||||
return singleton(to, options)
|
||||
}
|
||||
})()
|
||||
})
|
||||
16
src/js/deps/polyfills.js
Normal file
16
src/js/deps/polyfills.js
Normal file
@ -0,0 +1,16 @@
|
||||
const e = Element.prototype
|
||||
if (!e.matches) {
|
||||
e.matches =
|
||||
e.matchesSelector || e.msMatchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector
|
||||
}
|
||||
if (!e.closest) {
|
||||
e.closest = function(s) {
|
||||
var el = this
|
||||
if (!document.documentElement.contains(el)) return null
|
||||
do {
|
||||
if (el.matches(s)) return el
|
||||
el = el.parentElement || el.parentNode
|
||||
} while (el !== null && el.nodeType === 1)
|
||||
return null
|
||||
}
|
||||
}
|
||||
40
src/js/deps/utils.js
Normal file
40
src/js/deps/utils.js
Normal file
@ -0,0 +1,40 @@
|
||||
export const select = s => document.querySelector(s)
|
||||
export const selectAll = s => [].slice.call(document.querySelectorAll(s))
|
||||
export const scrollY = () => window.scrollY || window.pageYOffset
|
||||
export const easeOutQuint = (t, b, c, d) => c * ((t = t / d - 1) * t ** 4 + 1) + b
|
||||
|
||||
/*
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
;(() => {
|
||||
const ua = navigator.userAgent
|
||||
|
||||
// macOS 10.11 (El Capitan) came with San Francisco. Previous versions used Helvetica
|
||||
const isRelevantMacOS =
|
||||
/Mac/.test(navigator.platform) && (ua.match(/OS X 10[._](\d{1,2})/) || [])[1] >= 11
|
||||
|
||||
// Chrome v64 and FF v58 fix the issue
|
||||
const isAffectedBrowser =
|
||||
(ua.match(/Chrome\/(\d+)\./) || [])[1] < 64 || (ua.match(/Firefox\/(\d+)\./) || [])[1] < 58
|
||||
|
||||
const allEls = [].slice.call(document.querySelectorAll('*'))
|
||||
|
||||
if (isRelevantMacOS && isAffectedBrowser) {
|
||||
document.documentElement.style.letterSpacing = '-0.3px'
|
||||
allEls.forEach(el => {
|
||||
const fontSize = parseFloat(getComputedStyle(el).fontSize)
|
||||
if (fontSize >= 20) el.style.letterSpacing = '0.3px'
|
||||
})
|
||||
} else if (isRelevantMacOS && !isAffectedBrowser) {
|
||||
// Italics fix
|
||||
allEls.forEach(el => {
|
||||
const { fontSize, fontStyle } = getComputedStyle(el)
|
||||
if (fontStyle === 'italic') {
|
||||
el.style.letterSpacing = parseFloat(fontSize) >= 20 ? '0.3px' : '-0.3px'
|
||||
}
|
||||
})
|
||||
}
|
||||
})()
|
||||
14
src/js/index.js
Normal file
14
src/js/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
// Deps
|
||||
import 'normalize.css'
|
||||
import 'prismjs'
|
||||
|
||||
// CSS
|
||||
import '../css/deps/prism.css'
|
||||
import '../css/index.scss'
|
||||
|
||||
// Polyfills
|
||||
import './deps/polyfills'
|
||||
|
||||
// Components
|
||||
import Menu from './components/Menu'
|
||||
import BackToTopButton from './components/BackToTopButton'
|
||||
Reference in New Issue
Block a user