Add gallery, about and error pages
This commit is contained in:
Paul Nicoué
parent
fab69b64a1
commit
d272a8752b
48 changed files with 1424 additions and 1138 deletions
53
assets/css/_animations.scss
Normal file
53
assets/css/_animations.scss
Normal 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
72
assets/css/_fonts.scss
Normal 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
80
assets/css/_minireset.css
Normal 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;
|
||||
}
|
||||
83
assets/css/_variables.scss
Normal file
83
assets/css/_variables.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
1
assets/css/minireset.min.css
vendored
1
assets/css/minireset.min.css
vendored
|
|
@ -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}
|
||||
2
assets/css/style.min.css
vendored
2
assets/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
226
assets/js/app.js
226
assets/js/app.js
|
|
@ -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();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ Alt-text:
|
|||
|
||||
----
|
||||
|
||||
Caption:
|
||||
Caption: Voici la légende de la premère image.
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ Alt-text:
|
|||
|
||||
----
|
||||
|
||||
Caption:
|
||||
Caption: Voilà la légende de la deuxième image.
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ Meta-description: Site internet de l'artiste Xiao Wang.
|
|||
|
||||
Meta-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
Og-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Og-type: website
|
|||
|
||||
Twitter-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ Meta-author: Xiao Wang
|
|||
|
||||
----
|
||||
|
||||
Og-image:
|
||||
Og-image: - background-image-exemple-3000x1333px.png
|
||||
|
||||
----
|
||||
|
||||
Twitter-image:
|
||||
Twitter-image: - background-image-exemple-3000x1333px.png
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
title: Artwork
|
||||
accept:
|
||||
mime: image/jpeg, image/png, video/mp4
|
||||
mime: image/jpeg, image/png, video/mp4
|
||||
fields:
|
||||
alt_text:
|
||||
when:
|
||||
file_type: image
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: text
|
||||
alt_text:
|
||||
when:
|
||||
file_type: image
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: text
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
title: Favicon
|
||||
accept:
|
||||
mime: image/png
|
||||
mime: image/png
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
title: Image
|
||||
accept:
|
||||
mime: image/jpeg, image/png
|
||||
mime: image/jpeg, image/png
|
||||
fields:
|
||||
alt_text:
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: text
|
||||
alt_text:
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: text
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
title:
|
||||
en: About
|
||||
fr: À propos
|
||||
en: About
|
||||
fr: À propos
|
||||
icon: text
|
||||
status:
|
||||
draft: true
|
||||
unlisted: true
|
||||
draft: true
|
||||
unlisted: true
|
||||
options:
|
||||
changeSlug: false
|
||||
changeStatus: false
|
||||
changeTemplate: false
|
||||
changeTitle: false
|
||||
delete: false
|
||||
duplicate: false
|
||||
changeSlug: false
|
||||
changeStatus: false
|
||||
changeTemplate: false
|
||||
changeTitle: false
|
||||
delete: false
|
||||
duplicate: false
|
||||
tabs:
|
||||
content: tabs/about_content
|
||||
seo: tabs/about_seo
|
||||
content: tabs/about_content
|
||||
seo: tabs/about_seo
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
title:
|
||||
en: Error
|
||||
fr: Erreur
|
||||
en: Error
|
||||
fr: Erreur
|
||||
options:
|
||||
read: false
|
||||
read: false
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
title:
|
||||
en: Gallery
|
||||
fr: Galerie
|
||||
en: Gallery
|
||||
fr: Galerie
|
||||
icon: file-image
|
||||
status:
|
||||
draft: true
|
||||
listed: true
|
||||
draft: true
|
||||
listed: true
|
||||
tabs:
|
||||
content: tabs/gallery_content
|
||||
seo: tabs/gallery_seo
|
||||
content: tabs/gallery_content
|
||||
seo: tabs/gallery_seo
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
title:
|
||||
en: Home
|
||||
fr: Accueil
|
||||
en: Home
|
||||
fr: Accueil
|
||||
icon: home
|
||||
status:
|
||||
draft: true
|
||||
unlisted: true
|
||||
draft: true
|
||||
unlisted: true
|
||||
options:
|
||||
changeSlug: false
|
||||
changeStatus: false
|
||||
changeTemplate: false
|
||||
changeTitle: false
|
||||
delete: false
|
||||
duplicate: false
|
||||
changeSlug: false
|
||||
changeStatus: false
|
||||
changeTemplate: false
|
||||
changeTitle: false
|
||||
delete: false
|
||||
duplicate: false
|
||||
tabs:
|
||||
content: tabs/home_content
|
||||
seo: tabs/home_seo
|
||||
content: tabs/home_content
|
||||
seo: tabs/home_seo
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
type: fields
|
||||
fields:
|
||||
text:
|
||||
label:
|
||||
en: Presentation text
|
||||
fr: Texte de présentation
|
||||
type: textarea
|
||||
size: large
|
||||
required: true
|
||||
text:
|
||||
label:
|
||||
en: Presentation text
|
||||
fr: Texte de présentation
|
||||
type: textarea
|
||||
size: large
|
||||
required: true
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
headline:
|
||||
en: Artworks
|
||||
fr: Œuvres
|
||||
en: Artworks
|
||||
fr: Œuvres
|
||||
type: files
|
||||
template: artwork
|
||||
min: 1
|
||||
layout: cards
|
||||
size: small
|
||||
image:
|
||||
ratio: 1/1
|
||||
back: white
|
||||
ratio: 1/1
|
||||
back: white
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
type: fields
|
||||
fields:
|
||||
text:
|
||||
label:
|
||||
en: Introduction text
|
||||
fr: Texte d'introduction
|
||||
type: textarea
|
||||
size: medium
|
||||
text:
|
||||
label:
|
||||
en: Introduction text
|
||||
fr: Texte d'introduction
|
||||
type: textarea
|
||||
size: medium
|
||||
buttons:
|
||||
- bold
|
||||
- italic
|
||||
- '|'
|
||||
- link
|
||||
- email
|
||||
- '|'
|
||||
- ul
|
||||
- '|'
|
||||
|
|
|
|||
|
|
@ -1,55 +1,56 @@
|
|||
type: fields
|
||||
fields:
|
||||
meta_description:
|
||||
label: Description
|
||||
type: textarea
|
||||
size: small
|
||||
buttons: false
|
||||
# required: true
|
||||
help:
|
||||
en: "Short description of the page displayed by search engines and social networks (recommended maximum length: 160 characters)."
|
||||
fr: "Courte description de la page affichée par les moteurs de recherche et les réseaux sociaux (taille maximale conseillée : 160 caractères)."
|
||||
width: 3/4
|
||||
gap:
|
||||
type: gap
|
||||
width: 1/4
|
||||
meta_image:
|
||||
label: Image
|
||||
type: files
|
||||
layout: cardlets
|
||||
image:
|
||||
cover: true
|
||||
multiple: false
|
||||
# required: true
|
||||
help:
|
||||
en: "Image displayed by social networks (format: JPEG or PNG)."
|
||||
fr: "Image affichée par les réseaux sociaux (format : JPEG ou PNG)."
|
||||
width: 1/4
|
||||
# Hidden fields
|
||||
og_image:
|
||||
type: hidden
|
||||
default:
|
||||
og_type:
|
||||
type: hidden
|
||||
default: article
|
||||
twitter_image:
|
||||
type: hidden
|
||||
default:
|
||||
twitter_card_type:
|
||||
type: hidden
|
||||
default: summary_large_image
|
||||
robots_noindex:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_nofollow:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_noarchive:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_noimageindex:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_nosnippet:
|
||||
type: hidden
|
||||
default: default
|
||||
meta_description:
|
||||
label: Description
|
||||
type: textarea
|
||||
size: small
|
||||
buttons: false
|
||||
# required: true
|
||||
help:
|
||||
en: "Short description of the page displayed by search engines and social networks (recommended maximum length: 160 characters)."
|
||||
fr: "Courte description de la page affichée par les moteurs de recherche et les réseaux sociaux (taille maximale conseillée : 160 caractères)."
|
||||
width: 3/4
|
||||
gap:
|
||||
type: gap
|
||||
width: 1/4
|
||||
meta_image:
|
||||
label: Image
|
||||
type: files
|
||||
layout: cardlets
|
||||
image:
|
||||
cover: true
|
||||
back: white
|
||||
multiple: false
|
||||
# required: true
|
||||
help:
|
||||
en: "Image displayed by social networks (format: JPEG or PNG)."
|
||||
fr: "Image affichée par les réseaux sociaux (format : JPEG ou PNG)."
|
||||
width: 1/4
|
||||
# Hidden fields
|
||||
og_image:
|
||||
type: hidden
|
||||
default:
|
||||
og_type:
|
||||
type: hidden
|
||||
default: article
|
||||
twitter_image:
|
||||
type: hidden
|
||||
default:
|
||||
twitter_card_type:
|
||||
type: hidden
|
||||
default: summary_large_image
|
||||
robots_noindex:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_nofollow:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_noarchive:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_noimageindex:
|
||||
type: hidden
|
||||
default: default
|
||||
robots_nosnippet:
|
||||
type: hidden
|
||||
default: default
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
headline:
|
||||
en: Background image
|
||||
fr: Image de fond
|
||||
en: Background image
|
||||
fr: Image de fond
|
||||
type: files
|
||||
template: image
|
||||
min: 1
|
||||
|
|
@ -8,5 +8,5 @@ max: 1
|
|||
layout: cards
|
||||
size: medium
|
||||
image:
|
||||
ratio: 1/1
|
||||
back: white
|
||||
ratio: 1/1
|
||||
back: white
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
headline:
|
||||
en: Galleries
|
||||
fr: Galeries
|
||||
en: Galleries
|
||||
fr: Galeries
|
||||
type: pages
|
||||
template: gallery
|
||||
min: 1
|
||||
|
|
@ -8,6 +8,6 @@ max: 7
|
|||
layout: cards
|
||||
size: small
|
||||
image:
|
||||
ratio: 1/1
|
||||
cover: true
|
||||
back: white
|
||||
ratio: 1/1
|
||||
cover: true
|
||||
back: white
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
headline:
|
||||
en: Pages
|
||||
fr: Pages
|
||||
en: Pages
|
||||
fr: Pages
|
||||
type: pages
|
||||
templates:
|
||||
- home
|
||||
- about
|
||||
- home
|
||||
- about
|
||||
create: false
|
||||
layout: cardlets
|
||||
image:
|
||||
cover: true
|
||||
back: white
|
||||
cover: true
|
||||
back: white
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
type: fields
|
||||
fields:
|
||||
email:
|
||||
label:
|
||||
en: Email
|
||||
fr: Adresse e-mail
|
||||
type: email
|
||||
required: true
|
||||
width: 1/2
|
||||
gap:
|
||||
type: gap
|
||||
width: 1/2
|
||||
instagram:
|
||||
type: url
|
||||
label:
|
||||
en: Instagram account
|
||||
fr: Compte Instagram
|
||||
icon: instagram
|
||||
required: true
|
||||
width: 1/2
|
||||
email:
|
||||
label:
|
||||
en: Email
|
||||
fr: Adresse e-mail
|
||||
type: email
|
||||
required: true
|
||||
width: 1/2
|
||||
gap:
|
||||
type: gap
|
||||
width: 1/2
|
||||
instagram:
|
||||
type: url
|
||||
label:
|
||||
en: Instagram account
|
||||
fr: Compte Instagram
|
||||
icon: instagram
|
||||
required: true
|
||||
width: 1/2
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
type: fields
|
||||
fields:
|
||||
favicon:
|
||||
label: Favicon
|
||||
type: files
|
||||
template: favicon
|
||||
layout: cardlets
|
||||
multiple: false
|
||||
required: true
|
||||
help:
|
||||
en: "Image displayed on web browser tabs (file format: PNG)."
|
||||
fr: "Image affichée sur les onglets des navigateurs internet (format : PNG)."
|
||||
width: 1/4
|
||||
favicon:
|
||||
label: Favicon
|
||||
type: files
|
||||
template: favicon
|
||||
layout: cardlets
|
||||
multiple: false
|
||||
required: true
|
||||
help:
|
||||
en: "Image displayed on web browser tabs (file format: PNG)."
|
||||
fr: "Image affichée sur les onglets des navigateurs internet (format : PNG)."
|
||||
width: 1/4
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title:
|
||||
en: Website
|
||||
fr: Site web
|
||||
en: Website
|
||||
fr: Site web
|
||||
tabs:
|
||||
content: tabs/site_content
|
||||
seo: tabs/site_informations
|
||||
analytics: tabs/site_analytics
|
||||
content: tabs/site_content
|
||||
seo: tabs/site_informations
|
||||
analytics: tabs/site_analytics
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
label:
|
||||
en: Content
|
||||
fr: Contenu
|
||||
en: Content
|
||||
fr: Contenu
|
||||
icon: text
|
||||
sections:
|
||||
presentation: sections/about_content_presentation
|
||||
presentation: sections/about_content_presentation
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
label:
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
icon: search
|
||||
sections:
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
label:
|
||||
en: Content
|
||||
fr: Contenu
|
||||
en: Content
|
||||
fr: Contenu
|
||||
icon: text
|
||||
sections:
|
||||
introduction: sections/gallery_content_introduction
|
||||
artworks: sections/gallery_content_artworks
|
||||
introduction: sections/gallery_content_introduction
|
||||
artworks: sections/gallery_content_artworks
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
label:
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
icon: search
|
||||
sections:
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
label:
|
||||
en: Content
|
||||
fr: Contenu
|
||||
en: Content
|
||||
fr: Contenu
|
||||
icon: text
|
||||
sections:
|
||||
background_image: sections/home_content_background_image
|
||||
background_image: sections/home_content_background_image
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
label:
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
en: SEO
|
||||
fr: Référencement
|
||||
icon: search
|
||||
sections:
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
seo_basic_meta: sections/generic_seo_metadata
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
label:
|
||||
en: Analytics
|
||||
fr: Audience
|
||||
en: Analytics
|
||||
fr: Audience
|
||||
icon: chart
|
||||
columns:
|
||||
- width: 1/4
|
||||
sticky: true
|
||||
sections:
|
||||
sidebar:
|
||||
type: matomo-sidebar
|
||||
link: false
|
||||
- width: 3/4
|
||||
sections:
|
||||
main:
|
||||
type: matomo-main
|
||||
- width: 1/4
|
||||
sticky: true
|
||||
sections:
|
||||
sidebar:
|
||||
type: matomo-sidebar
|
||||
link: false
|
||||
- width: 3/4
|
||||
sections:
|
||||
main:
|
||||
type: matomo-main
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
label:
|
||||
en: Website
|
||||
fr: Site web
|
||||
en: Website
|
||||
fr: Site web
|
||||
icon: home
|
||||
columns:
|
||||
- width: 1/4
|
||||
sticky: true
|
||||
sections:
|
||||
pages: sections/site_content_pages
|
||||
- width: 3/4
|
||||
sections:
|
||||
galleries: sections/site_content_galleries
|
||||
- width: 1/4
|
||||
sticky: true
|
||||
sections:
|
||||
pages: sections/site_content_pages
|
||||
- width: 3/4
|
||||
sections:
|
||||
galleries: sections/site_content_galleries
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
label: Informations
|
||||
icon: info
|
||||
sections:
|
||||
seo_favicon: sections/site_informations_favicon
|
||||
seo_informations: sections/site_informations_contact
|
||||
seo_favicon: sections/site_informations_favicon
|
||||
seo_informations: sections/site_informations_contact
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
title:
|
||||
en: Administrator
|
||||
fr: Administrateur·ice
|
||||
|
||||
en: Administrator
|
||||
fr: Administrateur·ice
|
||||
description:
|
||||
en: The Administrator has all rights
|
||||
fr: L'Administrateur·ice dispose de tous les droits
|
||||
|
||||
en: The Administrator has all rights
|
||||
fr: L'Administrateur·ice dispose de tous les droits
|
||||
sections:
|
||||
info:
|
||||
headline:
|
||||
en: Website
|
||||
fr: Site internet
|
||||
theme: none
|
||||
width: 1/2
|
||||
text:
|
||||
en: |
|
||||
(link: https://paulnicoue.com text: paulnicoue.com target: _blank)
|
||||
fr: |
|
||||
(link: https://www.paulnicoue.com text: paulnicoue.com target: _blank)
|
||||
info:
|
||||
headline:
|
||||
en: Website
|
||||
fr: Site internet
|
||||
theme: none
|
||||
width: 1/2
|
||||
text:
|
||||
en: |
|
||||
(link: https://paulnicoue.com text: paulnicoue.com target: _blank)
|
||||
fr: |
|
||||
(link: https://www.paulnicoue.com text: paulnicoue.com target: _blank)
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
title:
|
||||
en: Editor
|
||||
fr: Éditeur·ice
|
||||
|
||||
en: Editor
|
||||
fr: Éditeur·ice
|
||||
description:
|
||||
en: The Editor can create and edit pages
|
||||
fr: L'éditeur·ice peut créer et modifier des pages
|
||||
|
||||
en: The Editor can create and edit pages
|
||||
fr: L'éditeur·ice peut créer et modifier des pages
|
||||
permissions:
|
||||
access:
|
||||
settings: false
|
||||
languages:
|
||||
create: false
|
||||
delete: false
|
||||
site:
|
||||
changeTitle: false
|
||||
user:
|
||||
changeRole: false
|
||||
delete: false
|
||||
users:
|
||||
changeEmail: false
|
||||
changeLanguage: false
|
||||
changeName: false
|
||||
changePassword: false
|
||||
changeRole: false
|
||||
create: false
|
||||
delete: false
|
||||
update: false
|
||||
access:
|
||||
settings: false
|
||||
languages:
|
||||
create: false
|
||||
delete: false
|
||||
site:
|
||||
changeTitle: false
|
||||
user:
|
||||
changeRole: false
|
||||
delete: false
|
||||
users:
|
||||
changeEmail: false
|
||||
changeLanguage: false
|
||||
changeName: false
|
||||
changePassword: false
|
||||
changeRole: false
|
||||
create: false
|
||||
delete: false
|
||||
update: false
|
||||
|
||||
sections:
|
||||
info: false
|
||||
info: false
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ return [
|
|||
}
|
||||
}
|
||||
],
|
||||
// Thumbs
|
||||
// Thumbnails and srcsets presets
|
||||
'thumbs' => [
|
||||
'srcsets' => [
|
||||
'default' => [500, 1000, 1500]
|
||||
|
|
|
|||
16
site/templates/about.twig
Normal file
16
site/templates/about.twig
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="about-section">
|
||||
|
||||
<article class="about">
|
||||
<h2 class="about__title">{{ page.title }}</h2>
|
||||
<div class="about__presentation">{{ page.text.kirbytext|raw }}</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="icon" type="image/png" href="{{ site.favicon }}" />
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/minireset.min.css') }}"/>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}"/>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div class="header-bar">
|
||||
|
||||
<div class="header-bar__logo" aria-hidden="true">
|
||||
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
|
||||
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}">
|
||||
<h1 class="header-bar__logo-title">{{ site.title }}</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -73,6 +73,7 @@
|
|||
|
||||
{% block javascripts %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
21
site/templates/error.twig
Normal file
21
site/templates/error.twig
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="error-section">
|
||||
<article class="error">
|
||||
<h2 class="error__title">Erreur {{ kirby.response.code }}</h2>
|
||||
{% if kirby.response.code == 404 %}
|
||||
<p class="error__message">La page que vous demandez n'existe pas...</p>
|
||||
{% else %}
|
||||
<p class="error__message">Une erreur est survenue...</p>
|
||||
{% endif %}
|
||||
<div class="error__button">
|
||||
<a href="{{ site.homePage.url }}" target="_self">Retourner à la page d'accueil</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
29
site/templates/gallery.twig
Normal file
29
site/templates/gallery.twig
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="gallery-section">
|
||||
|
||||
<article class="gallery">
|
||||
<h2 class="gallery__title">{{ page.title }}</h2>
|
||||
{% if page.text.isNotEmpty %}
|
||||
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
|
||||
{% endif %}
|
||||
<div class="gallery__artworks">
|
||||
{% for file in page.files %}
|
||||
{% if file.type == 'image' %}
|
||||
<figure class="gallery__image">
|
||||
<img src="{{ file.url }}" srcset="{{ file.srcset() }}" alt="{{ file.alt_text }}">
|
||||
<figcaption>{{ file.caption }}</figcaption>
|
||||
</figure>
|
||||
{% elseif file.type == 'video' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="home-section">
|
||||
|
||||
<div class="home">
|
||||
|
|
@ -23,5 +24,6 @@
|
|||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue