Edit folder structure and webpack configuration
This commit is contained in:
Paul Nicoué
parent
362f6012c2
commit
0cbffaaae9
46 changed files with 2594 additions and 48 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +0,0 @@
|
|||
/*!
|
||||
* circletype 2.3.0
|
||||
* A JavaScript library that lets you curve type on the web.
|
||||
* Copyright © 2014-2018 Peter Hrynkow
|
||||
* Licensed MIT
|
||||
* https://github.com/peterhry/CircleType#readme
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"assets/build/app.js": "/assets/build/app.js",
|
||||
"assets/build/main.css": "/assets/build/main.css",
|
||||
"assets/build/panel.css": "/assets/build/panel.css",
|
||||
"assets/build/fonts/Nunito-MediumItalic.ttf": "/assets/build/fonts/Nunito-MediumItalic.57991510.ttf",
|
||||
"assets/build/fonts/Nunito-Italic.ttf": "/assets/build/fonts/Nunito-Italic.18662850.ttf",
|
||||
"assets/build/fonts/Nunito-SemiBoldItalic.ttf": "/assets/build/fonts/Nunito-SemiBoldItalic.e0d50cda.ttf",
|
||||
"assets/build/fonts/Nunito-BoldItalic.ttf": "/assets/build/fonts/Nunito-BoldItalic.bf268a33.ttf",
|
||||
"assets/build/fonts/Nunito-Medium.ttf": "/assets/build/fonts/Nunito-Medium.6cf31fae.ttf",
|
||||
"assets/build/fonts/Nunito-Regular.ttf": "/assets/build/fonts/Nunito-Regular.fd0c54f3.ttf",
|
||||
"assets/build/fonts/Nunito-SemiBold.ttf": "/assets/build/fonts/Nunito-SemiBold.56124591.ttf",
|
||||
"assets/build/fonts/Nunito-Bold.ttf": "/assets/build/fonts/Nunito-Bold.bb33ef1f.ttf",
|
||||
"assets/build/fonts/GloriaHallelujah-Regular.ttf": "/assets/build/fonts/GloriaHallelujah-Regular.c9da976c.ttf"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}
|
||||
|
|
@ -1,701 +0,0 @@
|
|||
@use 'utils/minireset';
|
||||
@use 'plyr/src/sass/plyr';
|
||||
@use 'partials/fonts';
|
||||
@use 'partials/variables' as *;
|
||||
@use 'partials/animations';
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// GENERALITIES
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Fonts and colors
|
||||
|
||||
body {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--text-font-size);
|
||||
line-height: var(--text-font-size);
|
||||
color: var(--jet);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--logo-font-family);
|
||||
font-size: var(--h1-font-size);
|
||||
line-height: var(--h1-font-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--h2-font-size);
|
||||
line-height: var(--h2-font-size);
|
||||
margin: 0 0 4rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--h3-font-size);
|
||||
line-height: var(--h3-font-size);
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
line-height: var(--text-line-height);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-font-weight);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Link style
|
||||
|
||||
a {
|
||||
color: var(--jet);
|
||||
text-decoration: underline;
|
||||
border-radius: 2px;
|
||||
transition: color 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--black);
|
||||
outline-offset: 2px;
|
||||
animation: expand-outline 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// General grid layout
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
grid:
|
||||
'header' var(--header-bar-height)
|
||||
'main' 1fr
|
||||
'footer' auto
|
||||
/ 1fr;
|
||||
}
|
||||
|
||||
.body--hidden-overflow-y {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// HEADER
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Header bar
|
||||
|
||||
.header-bar {
|
||||
width: 100%;
|
||||
height: var(--header-bar-height);
|
||||
margin: auto;
|
||||
padding: var(--header-bar-vertical-padding) Max(var(--header-bar-horizontal-padding), calc((100vw - var(--content-max-width)) / 2 + var(--header-bar-horizontal-padding)));
|
||||
background-color: var(--transparent-white);
|
||||
border-bottom: 1px solid var(--transparent-white);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
transition:
|
||||
height 400ms ease-in-out,
|
||||
border-bottom 400ms ease-in-out;
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
--header-bar-vertical-padding: 0.5rem;
|
||||
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
top: calc(-1 * var(--header-bar-height));
|
||||
border-bottom: 1px solid var(--light-gray);
|
||||
transition: transform 400ms ease-in-out;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
transform: translateY(var(--header-bar-height));
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar__logo {
|
||||
width: max-content;
|
||||
transition: transform 400ms ease-in-out;
|
||||
transform-origin: left;
|
||||
|
||||
&--small {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar__logo-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-bar__nav {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-bar__nav-button {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: var(--jet);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition:
|
||||
transform 200ms ease-in-out,
|
||||
background-color 400ms ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10%;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
opacity 400ms ease-in-out,
|
||||
transform 400ms ease-in-out;
|
||||
}
|
||||
|
||||
svg:nth-child(1) {
|
||||
fill: var(--white);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg:nth-child(2) {
|
||||
fill: var(--black);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&--custom-focus {
|
||||
background-color: var(--white);
|
||||
|
||||
svg {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
svg:nth-child(1) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
svg:nth-child(2) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar__nav-menu {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 100vw;
|
||||
min-width: 100vw;
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
padding: calc(var(--header-bar-height) + 4rem) Max(4rem, calc((100vw - var(--content-max-width)) / 2 + 4rem)) 4rem 4rem;
|
||||
background-color: var(--transparent-black);
|
||||
color: var(--white);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: transform 400ms ease-in-out;
|
||||
|
||||
> li {
|
||||
|
||||
+ li {
|
||||
border-top: 1px solid var(--spanish-gray);
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 0 0 2rem;
|
||||
border-top: 1px solid var(--granite-gray);
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 1rem 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 400ms ease-in-out;
|
||||
|
||||
a,
|
||||
span {
|
||||
color: var(--light-gray);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar__nav-item--active {
|
||||
list-style: disc outside;
|
||||
|
||||
a {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&--visible {
|
||||
transform: translateX(calc(-1 * 100%));
|
||||
|
||||
@for $i from 1 through 20 {
|
||||
.header-bar__nav-item-#{$i} {
|
||||
|
||||
div {
|
||||
transform: translateX(0);
|
||||
transition: transform calc(400ms + $i * 100ms) ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar__nav-overlay {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--black);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
will-change: opacity;
|
||||
transition: opacity 400ms ease-in-out;
|
||||
|
||||
&--visible {
|
||||
opacity: 0.2;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
.header-bar__nav-menu {
|
||||
min-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop-media-query) {
|
||||
|
||||
.header-bar__nav-menu {
|
||||
min-width: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// MAIN
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Home section
|
||||
|
||||
.home-section {
|
||||
max-width: var(--content-max-width);
|
||||
min-height: var(--home-section-min-height);
|
||||
margin: auto;
|
||||
padding: var(--home-section-vertical-padding) var(--home-section-horizontal-padding);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home__nav {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid:
|
||||
'top-left top top-right' var(--home-nav-item-size)
|
||||
'left center right' auto
|
||||
'bottom-left bottom bottom-right' var(--home-nav-item-size)
|
||||
/ var(--home-nav-item-size) auto var(--home-nav-item-size);
|
||||
place-content: center center;
|
||||
gap: var(--home-nav-gap);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.home__nav-image {
|
||||
grid-area: center;
|
||||
|
||||
img {
|
||||
min-width: 12rem;
|
||||
max-width: Min(100%, 2500px);
|
||||
min-height: 12rem;
|
||||
max-height: var(--home-nav-image-max-height);
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav--2-items {
|
||||
|
||||
.home__nav-item-1 {
|
||||
grid-area: top-left;
|
||||
place-self: end end;
|
||||
transform:
|
||||
rotate(-45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
|
||||
.home__nav-item-2 {
|
||||
grid-area: top-right;
|
||||
place-self: end start;
|
||||
transform:
|
||||
rotate(45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav--3-items {
|
||||
|
||||
.home__nav-item-1 {
|
||||
grid-area: top-left;
|
||||
place-self: end end;
|
||||
transform:
|
||||
rotate(-45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
|
||||
.home__nav-item-2 {
|
||||
grid-area: top-right;
|
||||
place-self: end start;
|
||||
transform:
|
||||
rotate(45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
|
||||
.home__nav-item-3 {
|
||||
grid-area: bottom;
|
||||
place-self: start center;
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav--4-items {
|
||||
|
||||
.home__nav-item-1 {
|
||||
grid-area: top-left;
|
||||
place-self: end end;
|
||||
transform:
|
||||
rotate(-45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
|
||||
.home__nav-item-2 {
|
||||
grid-area: top-right;
|
||||
place-self: end start;
|
||||
transform:
|
||||
rotate(45deg)
|
||||
translateY(var(--home-nav-item-translation));
|
||||
}
|
||||
|
||||
.home__nav-item-3 {
|
||||
grid-area: bottom-left;
|
||||
place-self: start end;
|
||||
transform:
|
||||
rotate(45deg)
|
||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
||||
}
|
||||
|
||||
.home__nav-item-4 {
|
||||
grid-area: bottom-right;
|
||||
place-self: start start;
|
||||
transform:
|
||||
rotate(-45deg)
|
||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav-link {
|
||||
color: var(--black);
|
||||
font-size: var(--h3-font-size);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 600ms ease-in-out;
|
||||
|
||||
div {
|
||||
opacity: 0;
|
||||
transition: opacity 600ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav-link--visible {
|
||||
opacity: 1;
|
||||
|
||||
div {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.home__nav-letter--wave-up {
|
||||
animation: wave-up 600ms ease-in-out;
|
||||
}
|
||||
|
||||
.home__nav-letter--wave-down {
|
||||
animation: wave-down 600ms ease-in-out;
|
||||
}
|
||||
|
||||
// Gallery & biography sections
|
||||
|
||||
.gallery-section,
|
||||
.biography-section {
|
||||
max-width: var(--content-max-width);
|
||||
margin: auto;
|
||||
padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);
|
||||
}
|
||||
|
||||
.gallery__title,
|
||||
.biography__title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery__introduction,
|
||||
.biography__presentation {
|
||||
max-width: var(--text-max-width);
|
||||
margin: auto;
|
||||
|
||||
h3:nth-child(1) {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
+ p,
|
||||
+ ul {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: var(--text-line-height);
|
||||
|
||||
+ ul,
|
||||
+ p {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
li:before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__artwork {
|
||||
display: table;
|
||||
max-width: Min(1280px, 100%);
|
||||
margin: auto;
|
||||
|
||||
+ .gallery__artwork {
|
||||
margin: 2rem auto 0 auto;
|
||||
}
|
||||
|
||||
.gallery__image,
|
||||
.gallery__video {
|
||||
display: block;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.gallery__video {
|
||||
|
||||
&--full-screen {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
margin: 1rem auto 0 auto;
|
||||
font-size: var(--caption-font-size);
|
||||
line-height: var(--text-line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
.gallery__artwork {
|
||||
|
||||
+ .gallery__artwork {
|
||||
margin: 3rem auto 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error section
|
||||
|
||||
.error-section {
|
||||
max-width: var(--content-max-width);
|
||||
margin: auto;
|
||||
padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);
|
||||
}
|
||||
|
||||
.error__title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error__message {
|
||||
max-width: var(--text-max-width);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error__button {
|
||||
margin: 1rem 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.8rem;
|
||||
border-radius: 10px;
|
||||
color: var(--white);
|
||||
background-color: var(--jet);
|
||||
text-decoration: none;
|
||||
font-weight: var(--semi-bold-font-weight);
|
||||
transition: transform 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// FOOTER
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Footer bar
|
||||
|
||||
.footer-bar {
|
||||
max-width: var(--content-max-width);
|
||||
height: var(--footer-bar-height);
|
||||
margin: auto;
|
||||
padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-bar__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
border-radius: 50%;
|
||||
background-color: var(--jet);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: transform 200ms ease-in-out;
|
||||
|
||||
+ a {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
a.footer-bar__instagram-button {
|
||||
|
||||
svg {
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
a.footer-bar__email-button {
|
||||
|
||||
svg {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar__copyright {
|
||||
font-size: var(--footnote-font-size);
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
.footer-bar {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.footer-bar__social {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.footer-bar__copyright {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
// KIRBY PANEL CUSTOMIZATION
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Textarea headline buttons
|
||||
|
||||
.k-textarea-field {
|
||||
|
||||
.k-toolbar {
|
||||
|
||||
.k-dropdown {
|
||||
|
||||
.k-button:nth-of-type(2),
|
||||
.k-button:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visual image crop field properties
|
||||
|
||||
.kirby-imagecrop-field {
|
||||
|
||||
.k-column:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
// ANIMATIONS
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@keyframes expand-outline {
|
||||
from {
|
||||
outline-offset: 0;
|
||||
}
|
||||
to {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-up {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
60% {
|
||||
top: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-down {
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
60% {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
// FONTS
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Nunito
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Gloria Hallelujah
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gloria Hallelujah';
|
||||
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
// VARIABLES
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-family: 'Nunito', Verdana, sans-serif;
|
||||
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--text-font-size: 1rem;
|
||||
--caption-font-size: 0.9rem;
|
||||
--footnote-font-size: 0.8rem;
|
||||
--text-line-height: 1.4rem;
|
||||
--h1-font-size: 1.8rem;
|
||||
--h2-font-size: 1.4rem;
|
||||
--h3-font-size: 1.2rem;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--content-max-width: 140rem;
|
||||
--text-max-width: 70rem;
|
||||
--icon-size: 2.5rem;
|
||||
--header-bar-vertical-padding: 1rem;
|
||||
--header-bar-horizontal-padding: 2rem;
|
||||
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--footer-bar-vertical-padding: 1rem;
|
||||
--footer-bar-horizontal-padding: 2rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
|
||||
--generic-section-vertical-padding: 3rem;
|
||||
--generic-section-horizontal-padding: 2rem;
|
||||
--home-section-vertical-padding: 2rem;
|
||||
--home-section-horizontal-padding: 2rem;
|
||||
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
|
||||
--home-nav-gap: 1rem;
|
||||
--home-nav-item-size: 2rem;
|
||||
--home-nav-item-translation: 0;
|
||||
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
|
||||
|
||||
// Colors
|
||||
|
||||
--black: #000;
|
||||
--transparent-black: rgba(0, 0, 0, 0.8);
|
||||
--jet: #333333;
|
||||
--transparent-jet: rgba(51, 51, 51, 0.8);
|
||||
--granite-gray: #666666;
|
||||
--spanish-gray: #999999;
|
||||
--light-gray: #cccccc;
|
||||
--white: #fff;
|
||||
--transparent-white: rgba(255, 255, 255, 0.8);
|
||||
|
||||
// Plyr (audio player)
|
||||
|
||||
--plyr-color-main: var(--transparent-jet);
|
||||
--plyr-tab-focus-color: var(--white);
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
||||
$tablet-media-query: 48rem;
|
||||
$desktop-media-query: 62rem;
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 1.6rem;
|
||||
--h3-font-size: 1.4rem;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--icon-size: 3rem;
|
||||
--header-bar-vertical-padding: 2rem;
|
||||
--header-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-vertical-padding: 2rem;
|
||||
--footer-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--generic-section-horizontal-padding: 4rem;
|
||||
--home-section-horizontal-padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/* ----------------------------------------------------------------------------
|
||||
MINIRESET V0.0.6
|
||||
---------------------------------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,369 +0,0 @@
|
|||
import Plyr from 'plyr';
|
||||
import CircleType from 'circletype';
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// DATA
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
const root = document.documentElement;
|
||||
|
||||
// HOME NAVIGATION DISPLAY //
|
||||
|
||||
const navEl = document.querySelector('.home__nav');
|
||||
const navLinks = document.querySelectorAll('.home__nav-link');
|
||||
const navImage = document.querySelector('.home__nav-image');
|
||||
const circleTypes = [];
|
||||
|
||||
// VIDEO PLAYERS //
|
||||
|
||||
const galleryVideos = document.querySelectorAll('.gallery__video');
|
||||
let videoPlayers = [];
|
||||
|
||||
// HEADER BAR ANIMATION //
|
||||
|
||||
const headerBar = document.querySelector('.header-bar');
|
||||
const headerLogo = document.querySelector('.header-bar__logo');
|
||||
let scrollOffset = 0;
|
||||
|
||||
// NAVIGATION MENU ANIMATION //
|
||||
|
||||
const headerNavBtn = document.querySelector('.header-bar__nav-button');
|
||||
const headerNavMenu = document.querySelector('.header-bar__nav-menu');
|
||||
const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
|
||||
const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
|
||||
const touchPosition = {
|
||||
initialX: null,
|
||||
initialY: null
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// UTILS
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Convert rem to pixels by getting font-size CSS property
|
||||
function convertRemToPixels(rem) {
|
||||
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
|
||||
return rem * fontSize;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// LOGIC
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// HOME NAVIGATION DISPLAY //
|
||||
|
||||
// Calculate navigation grid inner width
|
||||
function calculateNavGridInnerWidth() {
|
||||
if (root && navImage) {
|
||||
let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
|
||||
let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
|
||||
return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate navigation grid inner diagonal
|
||||
function calculateNavGridInnerDiagonal() {
|
||||
return calculateNavGridInnerWidth() * Math.sqrt(2);
|
||||
}
|
||||
|
||||
// Create new instance of CircleType for each navigation link, set radius and direction
|
||||
function curveNavLinks() {
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].dir(-1);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set --home-nav-item-translation CSS property
|
||||
function setNavItemTranslationProperty() {
|
||||
let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
|
||||
if (root) {
|
||||
root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
// Set navigation grid display depending on number of links
|
||||
function setNavGridDisplay() {
|
||||
if (navEl && navLinks.length !== 0) {
|
||||
if (navLinks.length === 2) {
|
||||
navEl.classList.add('home__nav--2-items');
|
||||
} else if (navLinks.length === 3) {
|
||||
navEl.classList.add('home__nav--3-items');
|
||||
} else if (navLinks.length === 4) {
|
||||
navEl.classList.add('home__nav--4-items');
|
||||
}
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.add('home__nav-link--visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edit navigation links radius and translation on window resize event
|
||||
function editNavLinksOnResize() {
|
||||
window.addEventListener('resize', function(e) {
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
setNavItemTranslationProperty();
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave up animation to a single letter and remove it on animationend event
|
||||
function waveNavLetterUp(navLetter) {
|
||||
navLetter.classList.add('home__nav-letter--wave-up');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-up');
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave down animation to a single letter and remove it on animationend event
|
||||
function waveNavLetterDown(navLetter) {
|
||||
navLetter.classList.add('home__nav-letter--wave-down');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-down');
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave up animation to every letters of a single link with a slight delay
|
||||
function waveNavLinkUp(navLink) {
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
}
|
||||
|
||||
// Add wave down animation to every letters of a single link with a slight delay
|
||||
function waveNavLinkDown(navLink) {
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
}
|
||||
|
||||
// Add wave (up or down) animation to every letters of each link on mouseover event
|
||||
function waveNavLinksOnHover() {
|
||||
if (navLinks.length !== 0) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkUp(navLinks[i]);
|
||||
});
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkDown(navLinks[i]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// VIDEO PLAYERS //
|
||||
|
||||
// Set up Plyr video players
|
||||
function setUpVideoPlayers() {
|
||||
if (galleryVideos.length !== 0) {
|
||||
videoPlayers = Plyr.setup(galleryVideos, {
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'duration',
|
||||
'mute',
|
||||
'volume',
|
||||
'fullscreen'
|
||||
],
|
||||
i18n: {
|
||||
play: 'Lire',
|
||||
pause: 'Mettre sur pause',
|
||||
seek: 'Parcourir la piste audio',
|
||||
currentTime: 'Temps écoulé depuis le début de la piste audio',
|
||||
duration: 'Durée de la piste audio',
|
||||
volume: 'Ajuster le volume',
|
||||
mute: 'Couper le son',
|
||||
unmute: 'Activer le son',
|
||||
enterFullscreen: 'Activer le mode plein écran',
|
||||
exitFullscreen: 'Quitter le mode plein écran'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle videos full screen mode on Plyr enterfullscreen and exitfullscreen media events
|
||||
function toggleVideosFullScreen() {
|
||||
if (videoPlayers.length !== 0) {
|
||||
for (let i = 0; i < videoPlayers.length; i++) {
|
||||
videoPlayers[i].on('enterfullscreen', function(e) {
|
||||
galleryVideos[i].classList.add('gallery__video--full-screen');
|
||||
});
|
||||
videoPlayers[i].on('exitfullscreen', function(e) {
|
||||
galleryVideos[i].classList.remove('gallery__video--full-screen');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER BAR ANIMATION //
|
||||
|
||||
// Toggle header bar depending on scroll offset
|
||||
function toggleHeaderBar() {
|
||||
if (headerBar && headerLogo) {
|
||||
let headerBarHeight = headerBar.getBoundingClientRect().height;
|
||||
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
|
||||
headerBar.classList.add('header-bar--fixed');
|
||||
headerLogo.classList.add('header-bar__logo--small');
|
||||
} else if (window.pageYOffset <= 0) {
|
||||
headerBar.classList.remove('header-bar--fixed');
|
||||
headerLogo.classList.remove('header-bar__logo--small');
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
}
|
||||
if (headerBar.classList.contains('header-bar--fixed')) {
|
||||
if (scrollOffset < window.pageYOffset) { // Scroll down
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
} else if (scrollOffset > window.pageYOffset) { // Scroll up
|
||||
headerBar.classList.add('header-bar--visible');
|
||||
}
|
||||
scrollOffset = window.pageYOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAVIGATION MENU ANIMATION //
|
||||
|
||||
// Toggle header navigation
|
||||
function toggleHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
|
||||
document.body.classList.toggle('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Open header navigation
|
||||
function openHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.add('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
|
||||
document.body.classList.add('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation
|
||||
function closeHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
|
||||
document.body.classList.remove('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle header navigation on button click event
|
||||
function toggleHeaderNavOnClick() {
|
||||
headerNavBtn.addEventListener('click', toggleHeaderNav);
|
||||
}
|
||||
|
||||
// Close header navigation on document click event
|
||||
function closeHeaderNavOnClick() {
|
||||
document.addEventListener('click', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
|
||||
closeHeaderNav(e);
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Open header navigation on menu list focusin event
|
||||
function openHeaderNavBeforeFocus() {
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation on menu list focusout event
|
||||
function closeHeaderNavAfterFocus() {
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation on touchstart and touchmove events (swipe right)
|
||||
function closeHeaderNavOnSwipe() {
|
||||
headerNavMenu.addEventListener('touchstart', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
|
||||
touchPosition.initialX = event.touches[0].clientX;
|
||||
touchPosition.initialY = event.touches[0].clientY;
|
||||
}
|
||||
}, {passive: true});
|
||||
headerNavMenu.addEventListener('touchmove', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
|
||||
touchPosition.currentX = event.touches[0].clientX;
|
||||
touchPosition.currentY = event.touches[0].clientY;
|
||||
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
|
||||
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
|
||||
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
|
||||
if (touchPosition.diffX < 0) {
|
||||
closeHeaderNav(e);
|
||||
}
|
||||
}
|
||||
touchPosition.initialX = null;
|
||||
touchPosition.initialY = null;
|
||||
}
|
||||
}, {passive: true});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// PROGRAM
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Enable CSS :active pseudo-class in Safari Mobile
|
||||
document.addEventListener("touchstart", function() {},false);
|
||||
|
||||
// HOME NAVIGATION DISPLAY //
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
curveNavLinks();
|
||||
setNavItemTranslationProperty();
|
||||
setNavGridDisplay();
|
||||
editNavLinksOnResize();
|
||||
waveNavLinksOnHover();
|
||||
});
|
||||
|
||||
// VIDEO PLAYERS //
|
||||
|
||||
setUpVideoPlayers();
|
||||
toggleVideosFullScreen();
|
||||
|
||||
// HEADER BAR ANIMATION //
|
||||
|
||||
document.addEventListener('scroll', function() {
|
||||
toggleHeaderBar();
|
||||
});
|
||||
|
||||
// NAVIGATION MENU ANIMATION //
|
||||
|
||||
toggleHeaderNavOnClick();
|
||||
closeHeaderNavOnClick();
|
||||
openHeaderNavBeforeFocus();
|
||||
closeHeaderNavAfterFocus();
|
||||
closeHeaderNavOnSwipe();
|
||||
482
public/build/app.js
Normal file
482
public/build/app.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -2,17 +2,17 @@
|
|||
"entrypoints": {
|
||||
"app": {
|
||||
"js": [
|
||||
"/assets/build/app.js"
|
||||
"/build/app.js"
|
||||
]
|
||||
},
|
||||
"main": {
|
||||
"css": [
|
||||
"/assets/build/main.css"
|
||||
"/build/main.css"
|
||||
]
|
||||
},
|
||||
"panel": {
|
||||
"css": [
|
||||
"/assets/build/panel.css"
|
||||
"/build/panel.css"
|
||||
]
|
||||
}
|
||||
}
|
||||
2063
public/build/main.css
Normal file
2063
public/build/main.css
Normal file
File diff suppressed because one or more lines are too long
14
public/build/manifest.json
Normal file
14
public/build/manifest.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"build/app.js": "/build/app.js",
|
||||
"build/main.css": "/build/main.css",
|
||||
"build/panel.css": "/build/panel.css",
|
||||
"build/fonts/Nunito-MediumItalic.ttf": "/build/fonts/Nunito-MediumItalic.57991510.ttf",
|
||||
"build/fonts/Nunito-Italic.ttf": "/build/fonts/Nunito-Italic.18662850.ttf",
|
||||
"build/fonts/Nunito-SemiBoldItalic.ttf": "/build/fonts/Nunito-SemiBoldItalic.e0d50cda.ttf",
|
||||
"build/fonts/Nunito-BoldItalic.ttf": "/build/fonts/Nunito-BoldItalic.bf268a33.ttf",
|
||||
"build/fonts/Nunito-Medium.ttf": "/build/fonts/Nunito-Medium.6cf31fae.ttf",
|
||||
"build/fonts/Nunito-Regular.ttf": "/build/fonts/Nunito-Regular.fd0c54f3.ttf",
|
||||
"build/fonts/Nunito-SemiBold.ttf": "/build/fonts/Nunito-SemiBold.56124591.ttf",
|
||||
"build/fonts/Nunito-Bold.ttf": "/build/fonts/Nunito-Bold.bb33ef1f.ttf",
|
||||
"build/fonts/GloriaHallelujah-Regular.ttf": "/build/fonts/GloriaHallelujah-Regular.c9da976c.ttf"
|
||||
}
|
||||
13
public/build/panel.css
Normal file
13
public/build/panel.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./assets/css/panel.scss ***!
|
||||
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),
|
||||
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kirby-imagecrop-field .k-column:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlHOztFQUVDO0FDWEo7O0FEcUJDO0VBQ0M7QUNsQkYsQyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2Fzc2V0cy9jc3MvcGFuZWwuc2NzcyIsIndlYnBhY2s6Ly8vLi4vLi4vLi4vLi4vRG9ubiVDMyVBOWVzL1Byb2dyYW1tYXRpb24vUHJvamV0cy94aWFvd2FuZy9hc3NldHMvY3NzL3BhbmVsLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gS0lSQlkgUEFORUwgQ1VTVE9NSVpBVElPTlxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBUZXh0YXJlYSBoZWFkbGluZSBidXR0b25zXG5cbi5rLXRleHRhcmVhLWZpZWxkIHtcblxuXHQuay10b29sYmFyIHtcblxuXHRcdC5rLWRyb3Bkb3duIHtcblxuXHRcdFx0LmstYnV0dG9uOm50aC1vZi10eXBlKDIpLFxuXHRcdFx0LmstYnV0dG9uOm50aC1vZi10eXBlKDMpIHtcblx0XHRcdFx0ZGlzcGxheTogbm9uZTtcblx0XHRcdH1cblx0XHR9XG5cdH1cbn1cblxuLy8gVmlzdWFsIGltYWdlIGNyb3AgZmllbGQgcHJvcGVydGllc1xuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIHtcblxuXHQuay1jb2x1bW46bnRoLW9mLXR5cGUoMikge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cbn1cbiIsIi5rLXRleHRhcmVhLWZpZWxkIC5rLXRvb2xiYXIgLmstZHJvcGRvd24gLmstYnV0dG9uOm50aC1vZi10eXBlKDIpLFxuLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMykge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59Il0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9*/
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Loading…
Add table
Add a link
Reference in a new issue