Add gallery, about and error pages

This commit is contained in:
Paul Nicoué 2022-04-15 16:45:38 +02:00
parent fab69b64a1
commit d272a8752b
48 changed files with 1424 additions and 1138 deletions

View file

@ -0,0 +1,53 @@
// main: style.scss
// ===========================================================================
// ANIMATIONS
// ===========================================================================
@-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;
}
}

72
assets/css/_fonts.scss Normal file
View file

@ -0,0 +1,72 @@
// main: style.scss
// ===========================================================================
// 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;
}

80
assets/css/_minireset.css Normal file
View file

@ -0,0 +1,80 @@
/* main: style.scss */
/* ===========================================================================
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;
}

View file

@ -0,0 +1,83 @@
// main: style.scss
// ===========================================================================
// 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.6rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.4rem;
--h4-font-size: 1.2rem;
// Dimensions
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-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;
--jet: #333333;
--white: #fff;
}
// 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.6rem;
--h4-font-size: 1.4rem;
// Dimensions
--icon-size: 3rem;
--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;
}
}

View file

@ -1 +0,0 @@
/*! 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}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

View file

@ -25,168 +25,168 @@ const circleTypes = [];
// 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;
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);
}
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);
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);
}
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');
}
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) {
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');
if (navEl && 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');
}
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('home__nav-link--visible');
}
}
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 && circleTypes) {
for (let i = 0; i < navLinks.length; i++) {
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
setNavItemTranslationProperty();
});
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');
});
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');
});
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;
}
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;
}
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]);
});
}
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();
curveNavLinks();
setNavItemTranslationProperty();
setNavGridDisplay();
editNavLinksOnResize();
waveNavLinksOnHover();
}
// ----------------------------------------------------------------------------
@ -195,10 +195,10 @@ function handleNavDisplay() {
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener("touchstart", function() {},false); // Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function() {},false); // Enable CSS :active pseudo-class in Safari Mobile
// HOME NAVIGATION DISPLAY //
// HOME NAVIGATION DISPLAY //
handleNavDisplay();
handleNavDisplay();
});