Add home page

assets/css/minireset.min.css

@@ -0,0 +1 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */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}

assets/css/style.scss

@@ -0,0 +1,841 @@
+// ===========================================================================
+// FONT-FACE
+// ===========================================================================
+
+// 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;
+}
+
+// ===========================================================================
+// VARIABLES
+// ===========================================================================
+
+:root {
+
+  // Fonts
+
+  --text-font-family: 'Nunito', Verdana, sans-serif;
+  --title-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: 1.2rem;
+	--small-text-font-size: 1rem;
+	--h1-font-size: 2rem;
+	--h2-font-size: 1.6rem;
+	--h3-font-size: 1.6rem;
+	--h4-font-size: 1.4rem;
+
+  // Dimensions
+
+  --content-max-width: 140rem;
+  --text-max-width: 70rem;
+  --icon-size: 2.5rem;
+  --header-vertical-padding: 2rem;
+  --header-horizontal-padding: 2rem;
+  --header-height: calc((var(--header-vertical-padding) * 2) + var(--h1-font-size));
+  --footer-vertical-padding: 2rem;
+  --footer-horizontal-padding: 2rem;
+  --footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
+  --generic-section-vertical-padding: 2rem;
+  --generic-section-horizontal-padding: 1rem;
+  --home-section-min-height: calc(100vh - var(--header-height) - var(--footer-height));
+  --home-nav-gap: 1rem;
+  --home-nav-item-size: 2rem;
+  --home-nav-item-translation: 0;
+  --home-nav-image-max-height: calc(100vh - var(--header-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-height));
+
+  // Colors
+
+	--black: #000;
+  --jet: #333333;
+  --white: #fff;
+}
+
+// Media queries
+
+$tablet-media-query: 48rem;
+$desktop-media-query: 62rem;
+
+@media screen and (min-width: $tablet-media-query) {
+
+  :root {
+
+    // Dimensions
+
+    --icon-size: 3rem;
+    --header-horizontal-padding: 4rem;
+    --footer-horizontal-padding: 4rem;
+    --footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size));
+    --generic-section-horizontal-padding: 2rem;
+	}
+}
+
+// ===========================================================================
+// ANIMATIONS
+// ===========================================================================
+
+@-webkit-keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@-webkit-keyframes wave-up {
+  0% {
+		top: 0;
+	}
+  60% {
+		top: -0.5rem;
+	}
+	100% {
+		top: 0;
+	}
+}
+
+@keyframes wave-up {
+	0% {
+		top: 0;
+	}
+  60% {
+		top: -0.5rem;
+	}
+	100% {
+		top: 0;
+	}
+}
+
+@-webkit-keyframes wave-down {
+  0% {
+		bottom: 0;
+	}
+  60% {
+		bottom: -0.5rem;
+	}
+	100% {
+		bottom: 0;
+	}
+}
+
+@keyframes wave-down {
+  0% {
+		bottom: 0;
+	}
+  60% {
+		bottom: -0.5rem;
+	}
+	100% {
+		bottom: 0;
+	}
+}
+
+// ===========================================================================
+// 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,
+h4 {
+  color: var(--black);
+}
+
+h1 {
+  font-family: var(--title-font-family);
+  font-size: var(--h1-font-size);
+  line-height: var(--h1-font-size);
+}
+
+h2 {
+  font-family: var(--title-font-family);
+  font-size: var(--h2-font-size);
+  line-height: var(--h2-font-size);
+  margin: 2rem 0 0 0;
+}
+
+h3 {
+  font-family: var(--text-font-family);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-font-size);
+  margin: 1rem 0;
+}
+
+h4 {
+  font-family: var(--text-font-family);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-font-size);
+  margin: 1rem 0;
+}
+
+p {
+	text-align: justify;
+}
+
+// Link style
+
+a {
+  color: var(--jet);
+	text-decoration: underline;
+  -webkit-transition: color 200ms ease-in-out;
+	-o-transition: color 200ms ease-in-out;
+	transition: color 200ms ease-in-out;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--black);
+  }
+}
+
+
+// General grid layout
+
+body {
+  min-height: 100vh;
+	overflow-x: hidden;
+  display: -ms-grid;
+  display: grid;
+  grid:
+  	'header' auto
+  	'main' 1fr
+  	'footer' auto
+  	/ 1fr;
+}
+
+header {
+  grid-area: header;
+}
+
+main {
+  grid-area: main;
+}
+
+footer {
+  grid-area: footer;
+}
+
+// ===========================================================================
+// HEADER
+// ===========================================================================
+
+header {
+  height: var(--header-height);
+  padding: var(--header-vertical-padding) var(--header-horizontal-padding);
+}
+
+// Header bar
+
+.header-bar {
+  max-width: var(--content-max-width);
+  margin: auto;
+}
+
+.header-bar__logo {
+  width: max-content;
+}
+
+.header-bar__logo-link {
+  text-decoration: none;
+}
+
+// ===========================================================================
+// MAIN
+// ===========================================================================
+
+// Home section
+
+.home-section {
+  max-width: var(--content-max-width);
+  min-height: var(--home-section-min-height);
+  margin: auto;
+  padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);
+  display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+	-webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.home__nav {
+  height: 100%;
+  display: -ms-grid;
+  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;
+    min-height: 12rem;
+    max-height: var(--home-nav-image-max-height);
+  }
+}
+
+.home__nav--2-items {
+
+  .home__nav-item-1 {
+    grid-area: top;
+    place-self: end center;
+  }
+
+  .home__nav-item-2 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav--3-items {
+
+  .home__nav-item-1 {
+    grid-area: top-left;
+    place-self: end end;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-2 {
+    grid-area: top-right;
+    place-self: end start;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		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;
+    place-self: end center;
+  }
+
+  .home__nav-item-2 {
+    grid-area: left;
+    place-self: center end;
+    -webkit-transform: rotate(-90deg);
+		-ms-transform: rotate(-90deg);
+		transform: rotate(-90deg);
+  }
+
+  .home__nav-item-3 {
+    grid-area: right;
+    place-self: center start;
+    -webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+		transform: rotate(90deg);
+  }
+
+  .home__nav-item-4 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav--5-items {
+
+  .home__nav-item-1 {
+    grid-area: top-left;
+    place-self: end end;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-2 {
+    grid-area: top-right;
+    place-self: end start;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-3 {
+    grid-area: left;
+    place-self: center end;
+    -webkit-transform: rotate(-90deg);
+		-ms-transform: rotate(-90deg);
+		transform: rotate(-90deg);
+  }
+
+  .home__nav-item-4 {
+    grid-area: right;
+    place-self: center start;
+    -webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+		transform: rotate(90deg);
+  }
+
+  .home__nav-item-5 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav--6-items {
+
+  .home__nav-item-1 {
+    grid-area: top;
+    place-self: end center;
+  }
+
+  .home__nav-item-2 {
+    grid-area: top-left;
+    place-self: end end;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-3 {
+    grid-area: top-right;
+    place-self: end start;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-4 {
+    grid-area: left;
+    place-self: center end;
+    -webkit-transform: rotate(-90deg);
+		-ms-transform: rotate(-90deg);
+		transform: rotate(-90deg);
+  }
+
+  .home__nav-item-5 {
+    grid-area: right;
+    place-self: center start;
+    -webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+		transform: rotate(90deg);
+  }
+
+  .home__nav-item-6 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav--7-items {
+
+  .home__nav-item-1 {
+    grid-area: top-left;
+    place-self: end end;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-2 {
+    grid-area: top-right;
+    place-self: end start;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-3 {
+    grid-area: left;
+    place-self: center end;
+    -webkit-transform: rotate(-90deg);
+		-ms-transform: rotate(-90deg);
+		transform: rotate(-90deg);
+  }
+
+  .home__nav-item-4 {
+    grid-area: right;
+    place-self: center start;
+    -webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+		transform: rotate(90deg);
+  }
+
+  .home__nav-item-5 {
+    grid-area: bottom-left;
+    place-self: start end;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		-ms-transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+  }
+
+  .home__nav-item-6 {
+    grid-area: bottom-right;
+    place-self: start start;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+  }
+
+  .home__nav-item-7 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav--8-items {
+
+  .home__nav-item-1 {
+    grid-area: top;
+    place-self: end center;
+  }
+
+  .home__nav-item-2 {
+    grid-area: top-left;
+    place-self: end end;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(-45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-3 {
+    grid-area: top-right;
+    place-self: end start;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		-ms-transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+		transform:
+      rotate(45deg)
+      translateY(var(--home-nav-item-translation));
+  }
+
+  .home__nav-item-4 {
+    grid-area: left;
+    place-self: center end;
+    -webkit-transform: rotate(-90deg);
+		-ms-transform: rotate(-90deg);
+		transform: rotate(-90deg);
+  }
+
+  .home__nav-item-5 {
+    grid-area: right;
+    place-self: center start;
+    -webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+		transform: rotate(90deg);
+  }
+
+  .home__nav-item-6 {
+    grid-area: bottom-left;
+    place-self: start end;
+    -webkit-transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		-ms-transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		transform:
+      rotate(45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+  }
+
+  .home__nav-item-7 {
+    grid-area: bottom-right;
+    place-self: start start;
+    -webkit-transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		-ms-transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+		transform:
+      rotate(-45deg)
+      translateY(calc(var(--home-nav-item-translation) * -1));
+  }
+
+  .home__nav-item-8 {
+    grid-area: bottom;
+    place-self: start center;
+  }
+}
+
+.home__nav-link {
+  color: var(--black);
+  text-decoration: none;
+  -webkit-animation: fade-in 1s ease-out;
+  animation: fade-in 1s ease-in-out;
+}
+
+.home__nav-letter--wave-up {
+  -webkit-animation: wave-up 600ms ease-out;
+  animation: wave-up 600ms ease-in-out;
+}
+
+.home__nav-letter--wave-down {
+  -webkit-animation: wave-down 600ms ease-out;
+  animation: wave-down 600ms ease-in-out;
+}
+
+// ===========================================================================
+// FOOTER
+// ===========================================================================
+
+footer {
+  height: var(--footer-height);
+  padding: var(--footer-vertical-padding) var(--footer-horizontal-padding);
+}
+
+// Footer bar
+
+.footer-bar {
+  max-width: var(--content-max-width);
+  margin: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.footer-bar__social {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  a {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: var(--icon-size);
+    height: var(--icon-size);
+
+    svg {
+      fill: var(--jet);
+      width: 100%;
+      height: 100%;
+      -webkit-transition: fill 200ms ease-in-out;
+    	-o-transition: fill 200ms ease-in-out;
+    	transition: fill 200ms ease-in-out;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+
+      svg {
+        fill: var(--black);
+      }
+    }
+  }
+
+  a + a {
+    margin: 0 0 0 1rem;
+  }
+}
+
+.footer-bar__copyright {
+  font-size: var(--small-text-font-size);
+  margin: 1rem 0 0 0;
+}
+
+@media screen and (min-width: $tablet-media-query) {
+
+  .footer-bar {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    align-items: flex-end;
+  }
+
+  .footer-bar__social {
+    order: 2;
+  }
+
+  .footer-bar__copyright {
+    order: 1;
+    margin: 0;
+  }
+}

assets/js/app.js

@@ -0,0 +1,201 @@
+'use strict';
+
+// ----------------------------------------------------------------------------
+// DATA
+// ----------------------------------------------------------------------------
+
+// Get HTML root element
+const root = document.documentElement;
+
+// HOME NAVIGATION DISPLAY //
+
+// Get navigation HTML elements
+const navEl = document.querySelector('.home__nav');
+const navLinks = document.querySelectorAll('.home__nav-link');
+const navImage = document.querySelector('.home__nav-image');
+
+// Declare empty circleTypes array for further use
+const circleTypes = [];
+
+// ----------------------------------------------------------------------------
+// LOGIC
+// ----------------------------------------------------------------------------
+
+// HELPERS
+
+// 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;
+}
+
+// HOME NAVIGATION DISPLAY //
+
+// Calculate navigation grid inner width
+function calculateNavGridInnerWidth() {
+  if (root) {
+    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 && circleTypes) {
+    if (navLinks.length < 7) {
+      for (let i = 0; i < (navLinks.length - 1); i++) {
+        circleTypes[i] = new CircleType(navLinks[i]);
+        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+      }
+      for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
+        circleTypes[i] = new CircleType(navLinks[i]);
+        circleTypes[i].dir(-1);
+        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+      }
+    } else {
+      for (let i = 0; i < (navLinks.length - 3); i++) {
+        circleTypes[i] = new CircleType(navLinks[i]);
+        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+      }
+      for (let i = (navLinks.length - 3); 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 (navLinks) {
+    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');
+    } else if (navLinks.length === 5) {
+      navEl.classList.add('home__nav--5-items');
+    } else if (navLinks.length === 6) {
+      navEl.classList.add('home__nav--6-items');
+    } else if (navLinks.length === 7) {
+      navEl.classList.add('home__nav--7-items');
+    } else if (navLinks.length === 8) {
+      navEl.classList.add('home__nav--8-items');
+    }
+  }
+}
+
+// Edit navigation links radius and translation on window resize event
+function editNavLinksOnResize() {
+  window.addEventListener('resize', function(e) {
+    if (navLinks && 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) {
+    if (navLinks.length < 7) {
+      for (let i = 0; i < (navLinks.length - 1); i++) {
+        navLinks[i].addEventListener('mouseover', function(e) {
+          waveNavLinkUp(navLinks[i]);
+        });
+      }
+      for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
+        navLinks[i].addEventListener('mouseover', function(e) {
+          waveNavLinkDown(navLinks[i]);
+        });
+      }
+    } else {
+      for (let i = 0; i < (navLinks.length - 3); i++) {
+        navLinks[i].addEventListener('mouseover', function(e) {
+          waveNavLinkUp(navLinks[i]);
+        });
+      }
+      for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
+        navLinks[i].addEventListener('mouseover', function(e) {
+          waveNavLinkDown(navLinks[i]);
+        });
+      }
+    }
+  }
+}
+
+function handleNavDisplay() {
+  curveNavLinks();
+  setNavItemTranslationProperty();
+  setNavGridDisplay();
+  editNavLinksOnResize();
+  waveNavLinksOnHover();
+}
+
+// ----------------------------------------------------------------------------
+// PROGRAM
+// ----------------------------------------------------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  document.addEventListener("touchstart", function() {},false); // Enable CSS :active pseudo-class in Safari Mobile
+
+  // HOME NAVIGATION DISPLAY //
+
+  handleNavDisplay();
+
+});

content/1_galerie-1/gallery-image-exemple-01.png.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 1
+Sort: 2

content/1_galerie-1/gallery-image-exemple-02.png.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 2
+Sort: 3

content/1_galerie-1/gallery-image-exemple-03.png.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 4
+Sort: 5

content/1_galerie-1/gallery-image-exemple-04.png.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 5
+Sort: 6

content/1_galerie-1/gallery-image-exemple-05.png.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 6
+Sort: 7

content/1_galerie-1/gallery-video-exemple-01.mp4.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 3
+Sort: 4

content/1_galerie-1/gallery-video-exemple-02.mp4.txt

@@ -14,4 +14,4 @@ Template: artwork
 
 ----
 
-Sort: 7
+Sort: 1

content/2_galerie-2/gallery-image-exemple-01.png.txt

@@ -6,12 +6,12 @@ Caption:
 
 ----
 
-Sort: 1
-
-----
-
 File-type: image
 
 ----
 
-Template: image
+Template: artwork
+
+----
+
+Sort: 1

content/2_galerie-2/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2

content/2_galerie-2/gallery-image-exemple-03.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 4

content/2_galerie-2/gallery-image-exemple-04.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 5

content/2_galerie-2/gallery-image-exemple-05.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 6

content/2_galerie-2/gallery-video-exemple-01.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 3

content/2_galerie-2/gallery-video-exemple-02.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 7

content/2_galerie-2/gallery.txt

@@ -0,0 +1,49 @@
+Title: Galerie 2
+
+----
+
+Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nulla facilisi etiam dignissim. Felis donec et odio pellentesque. Et malesuada fames ac turpis egestas. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Lorem donec massa sapien faucibus et molestie ac feugiat. Mauris augue neque gravida in fermentum et sollicitudin. At urna condimentum mattis pellentesque. Dignissim convallis aenean et tortor at. Sit amet massa vitae tortor condimentum lacinia. Sollicitudin tempor id eu nisl nunc mi ipsum. Nibh nisl condimentum id venenatis. Scelerisque in dictum non consectetur a erat nam at. Felis imperdiet proin fermentum leo vel orci porta non.
+
+----
+
+Meta-description:
+
+----
+
+Meta-image:
+
+----
+
+Og-image:
+
+----
+
+Og-type: article
+
+----
+
+Twitter-image:
+
+----
+
+Twitter-card-type: summary_large_image
+
+----
+
+Robots-noindex: default
+
+----
+
+Robots-nofollow: default
+
+----
+
+Robots-noarchive: default
+
+----
+
+Robots-noimageindex: default
+
+----
+
+Robots-nosnippet: default

content/3_galerie-3/gallery-image-exemple-01.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 1

content/3_galerie-3/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2

content/3_galerie-3/gallery-image-exemple-03.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 4

content/3_galerie-3/gallery-image-exemple-04.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 5

content/3_galerie-3/gallery-image-exemple-05.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 6

content/3_galerie-3/gallery-video-exemple-01.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 3

content/3_galerie-3/gallery-video-exemple-02.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 7

content/3_galerie-3/gallery.txt

@@ -0,0 +1,49 @@
+Title: Galerie 3
+
+----
+
+Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nulla facilisi etiam dignissim. Felis donec et odio pellentesque. Et malesuada fames ac turpis egestas. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Lorem donec massa sapien faucibus et molestie ac feugiat. Mauris augue neque gravida in fermentum et sollicitudin. At urna condimentum mattis pellentesque. Dignissim convallis aenean et tortor at. Sit amet massa vitae tortor condimentum lacinia. Sollicitudin tempor id eu nisl nunc mi ipsum. Nibh nisl condimentum id venenatis. Scelerisque in dictum non consectetur a erat nam at. Felis imperdiet proin fermentum leo vel orci porta non.
+
+----
+
+Meta-description:
+
+----
+
+Meta-image:
+
+----
+
+Og-image:
+
+----
+
+Og-type: article
+
+----
+
+Twitter-image:
+
+----
+
+Twitter-card-type: summary_large_image
+
+----
+
+Robots-noindex: default
+
+----
+
+Robots-nofollow: default
+
+----
+
+Robots-noarchive: default
+
+----
+
+Robots-noimageindex: default
+
+----
+
+Robots-nosnippet: default

content/4_galerie-4/gallery-image-exemple-01.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 1

content/4_galerie-4/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2

content/4_galerie-4/gallery-image-exemple-03.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 4

content/4_galerie-4/gallery-image-exemple-04.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 5

content/4_galerie-4/gallery-image-exemple-05.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 6

content/4_galerie-4/gallery-video-exemple-01.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 3

content/4_galerie-4/gallery-video-exemple-02.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 7

content/5_galerie-5/gallery-image-exemple-01.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 1

content/5_galerie-5/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2

content/5_galerie-5/gallery-image-exemple-03.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 4

content/5_galerie-5/gallery-image-exemple-04.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 5

content/5_galerie-5/gallery-image-exemple-05.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 6

content/5_galerie-5/gallery-video-exemple-01.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 3

content/5_galerie-5/gallery-video-exemple-02.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 7

content/6_galerie-6/gallery-image-exemple-01.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 1

content/6_galerie-6/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2

content/6_galerie-6/gallery-image-exemple-03.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 4

content/6_galerie-6/gallery-image-exemple-04.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 5

content/6_galerie-6/gallery-image-exemple-05.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 6

content/6_galerie-6/gallery-video-exemple-01.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 3

content/6_galerie-6/gallery-video-exemple-02.mp4.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: video
+
+----
+
+Template: artwork
+
+----
+
+Sort: 7

content/6_galerie-6/gallery.txt

@@ -1,4 +1,4 @@
-Title: Galerie 2
+Title: Galerie 6
 
 ----
 

content/7_galerie-7/gallery-image-exemple-01.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 1

content/7_galerie-7/gallery-image-exemple-02.png.txt

@@ -0,0 +1,17 @@
+Alt-text: 
+
+----
+
+Caption: 
+
+----
+
+File-type: image
+
+----
+
+Template: artwork
+
+----
+
+Sort: 2