Add gallery, about and error pages

assets/css/_animations.scss

@@ -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;
+	}
+}

assets/css/_fonts.scss

@@ -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;
+}

assets/css/_minireset.css

@@ -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;
+}

assets/css/_variables.scss

@@ -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;
+    }
+}

assets/css/minireset.min.css

@@ -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}

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'));
+    let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
-  return rem * fontSize;
+    return rem * fontSize;
 }
 
 // HOME NAVIGATION DISPLAY //
 
 // Calculate navigation grid inner width
 function calculateNavGridInnerWidth() {
-  if (root) {
+    if (root) {
-    let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
+        let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
-    let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
+        let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
-    return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
+        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 && circleTypes) {
-    if (navLinks.length < 7) {
+        if (navLinks.length < 7) {
-      for (let i = 0; i < (navLinks.length - 1); i++) {
+            for (let i = 0; i < (navLinks.length - 1); i++) {
-        circleTypes[i] = new CircleType(navLinks[i]);
+                circleTypes[i] = new CircleType(navLinks[i]);
-        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
-      }
+            }
-      for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
+            for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
-        circleTypes[i] = new CircleType(navLinks[i]);
+                circleTypes[i] = new CircleType(navLinks[i]);
-        circleTypes[i].dir(-1);
+                circleTypes[i].dir(-1);
-        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
-      }
+            }
-    } else {
+        } else {
-      for (let i = 0; i < (navLinks.length - 3); i++) {
+            for (let i = 0; i < (navLinks.length - 3); i++) {
-        circleTypes[i] = new CircleType(navLinks[i]);
+                circleTypes[i] = new CircleType(navLinks[i]);
-        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
-      }
+            }
-      for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
+            for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
-        circleTypes[i] = new CircleType(navLinks[i]);
+                circleTypes[i] = new CircleType(navLinks[i]);
-        circleTypes[i].dir(-1);
+                circleTypes[i].dir(-1);
-        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
-      }
+            }
+        }
     }
-  }
 }
 
 // Set --home-nav-item-translation CSS property
 function setNavItemTranslationProperty() {
-  let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
+    let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
-  if (root) {
+    if (root) {
-    root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
+        root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
-  }
+    }
 }
 
 // Set navigation grid display depending on number of links
 function setNavGridDisplay() {
-  if (navEl && navLinks) {
+    if (navEl && navLinks) {
-    if (navLinks.length === 2) {
+        if (navLinks.length === 2) {
-      navEl.classList.add('home__nav--2-items');
+            navEl.classList.add('home__nav--2-items');
-    } else if (navLinks.length === 3) {
+        } else if (navLinks.length === 3) {
-      navEl.classList.add('home__nav--3-items');
+            navEl.classList.add('home__nav--3-items');
-    } else if (navLinks.length === 4) {
+        } else if (navLinks.length === 4) {
-      navEl.classList.add('home__nav--4-items');
+            navEl.classList.add('home__nav--4-items');
-    } else if (navLinks.length === 5) {
+        } else if (navLinks.length === 5) {
-      navEl.classList.add('home__nav--5-items');
+            navEl.classList.add('home__nav--5-items');
-    } else if (navLinks.length === 6) {
+        } else if (navLinks.length === 6) {
-      navEl.classList.add('home__nav--6-items');
+            navEl.classList.add('home__nav--6-items');
-    } else if (navLinks.length === 7) {
+        } else if (navLinks.length === 7) {
-      navEl.classList.add('home__nav--7-items');
+            navEl.classList.add('home__nav--7-items');
-    } else if (navLinks.length === 8) {
+        } else if (navLinks.length === 8) {
-      navEl.classList.add('home__nav--8-items');
+            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) {
+    window.addEventListener('resize', function(e) {
-    if (navLinks && circleTypes) {
+        if (navLinks && circleTypes) {
-      for (let i = 0; i < navLinks.length; i++) {
+            for (let i = 0; i < navLinks.length; i++) {
-        circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
-      }
+            }
-    }
+        }
-    setNavItemTranslationProperty();
+        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.classList.add('home__nav-letter--wave-up');
-  navLetter.addEventListener('animationend', function(e) {
+    navLetter.addEventListener('animationend', function(e) {
-    navLetter.classList.remove('home__nav-letter--wave-up');
+        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.classList.add('home__nav-letter--wave-down');
-  navLetter.addEventListener('animationend', function(e) {
+    navLetter.addEventListener('animationend', function(e) {
-    navLetter.classList.remove('home__nav-letter--wave-down');
+        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 navLinkLetters = navLink.querySelectorAll('span');
-  let animationDelay = 0;
+    let animationDelay = 0;
-  for (let i = 0; i < navLinkLetters.length; i++) {
+    for (let i = 0; i < navLinkLetters.length; i++) {
-    setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
+        setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
-    animationDelay += 50;
+        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 navLinkLetters = navLink.querySelectorAll('span');
-  let animationDelay = 0;
+    let animationDelay = 0;
-  for (let i = 0; i < navLinkLetters.length; i++) {
+    for (let i = 0; i < navLinkLetters.length; i++) {
-    setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
+        setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
-    animationDelay += 50;
+        animationDelay += 50;
-  }
+    }
 }
 
 // Add wave (up or down) animation to every letters of each link on mouseover event
 function waveNavLinksOnHover() {
-  if (navLinks) {
+    if (navLinks) {
-    if (navLinks.length < 7) {
+        if (navLinks.length < 7) {
-      for (let i = 0; i < (navLinks.length - 1); i++) {
+            for (let i = 0; i < (navLinks.length - 1); i++) {
-        navLinks[i].addEventListener('mouseover', function(e) {
+                navLinks[i].addEventListener('mouseover', function(e) {
-          waveNavLinkUp(navLinks[i]);
+                    waveNavLinkUp(navLinks[i]);
-        });
+                });
-      }
+            }
-      for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
+            for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
-        navLinks[i].addEventListener('mouseover', function(e) {
+                navLinks[i].addEventListener('mouseover', function(e) {
-          waveNavLinkDown(navLinks[i]);
+                    waveNavLinkDown(navLinks[i]);
-        });
+                });
-      }
+            }
-    } else {
+        } else {
-      for (let i = 0; i < (navLinks.length - 3); i++) {
+            for (let i = 0; i < (navLinks.length - 3); i++) {
-        navLinks[i].addEventListener('mouseover', function(e) {
+                navLinks[i].addEventListener('mouseover', function(e) {
-          waveNavLinkUp(navLinks[i]);
+                    waveNavLinkUp(navLinks[i]);
-        });
+                });
-      }
+            }
-      for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
+            for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
-        navLinks[i].addEventListener('mouseover', function(e) {
+                navLinks[i].addEventListener('mouseover', function(e) {
-          waveNavLinkDown(navLinks[i]);
+                    waveNavLinkDown(navLinks[i]);
-        });
+                });
-      }
+            }
+        }
     }
-  }
 }
 
 function handleNavDisplay() {
-  curveNavLinks();
+    curveNavLinks();
-  setNavItemTranslationProperty();
+    setNavItemTranslationProperty();
-  setNavGridDisplay();
+    setNavGridDisplay();
-  editNavLinksOnResize();
+    editNavLinksOnResize();
-  waveNavLinksOnHover();
+    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();
 
 });

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

@@ -2,7 +2,7 @@ Alt-text:
 
 ----
 
-Caption: 
+Caption: Voici la légende de la premère image.
 
 ----
 

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

@@ -2,7 +2,7 @@ Alt-text:
 
 ----
 
-Caption: 
+Caption: Voilà la légende de la deuxième image.
 
 ----
 

content/accueil/home.txt

@@ -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
 
 ----
 

content/site.txt

@@ -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
 
 ----
 

site/blueprints/files/artwork.yml

@@ -1,16 +1,16 @@
 title: Artwork
 accept:
-  mime: image/jpeg, image/png, video/mp4
+    mime: image/jpeg, image/png, video/mp4
 fields:
-  alt_text:
+    alt_text:
-    when:
+        when:
-      file_type: image
+            file_type: image
-    label:
+        label:
-      en: Alternative text
+            en: Alternative text
-      fr: Texte alternatif
+            fr: Texte alternatif
-    type: text
+        type: text
-  caption:
+    caption:
-    label:
+        label:
-      en: Caption
+            en: Caption
-      fr: Légende
+            fr: Légende
-    type: text
+        type: text

site/blueprints/files/favicon.yml

@@ -1,3 +1,3 @@
 title: Favicon
 accept:
-  mime: image/png
+    mime: image/png

site/blueprints/files/image.yml

@@ -1,14 +1,14 @@
 title: Image
 accept:
-  mime: image/jpeg, image/png
+    mime: image/jpeg, image/png
 fields:
-  alt_text:
+    alt_text:
-    label:
+        label:
-      en: Alternative text
+            en: Alternative text
-      fr: Texte alternatif
+            fr: Texte alternatif
-    type: text
+        type: text
-  caption:
+    caption:
-    label:
+        label:
-      en: Caption
+            en: Caption
-      fr: Légende
+            fr: Légende
-    type: text
+        type: text

site/blueprints/pages/about.yml

@@ -1,17 +1,17 @@
 title:
-  en: About
+    en: About
-  fr: À propos
+    fr: À propos
 icon: text
 status:
-  draft: true
+    draft: true
-  unlisted: true
+    unlisted: true
 options:
-  changeSlug: false
+    changeSlug: false
-  changeStatus: false
+    changeStatus: false
-  changeTemplate: false
+    changeTemplate: false
-  changeTitle: false
+    changeTitle: false
-  delete: false
+    delete: false
-  duplicate: false
+    duplicate: false
 tabs:
-  content: tabs/about_content
+    content: tabs/about_content
-  seo: tabs/about_seo
+    seo: tabs/about_seo

site/blueprints/pages/error.yml

@@ -1,5 +1,5 @@
 title:
-  en: Error
+    en: Error
-  fr: Erreur
+    fr: Erreur
 options:
-  read: false
+    read: false

site/blueprints/pages/gallery.yml

@@ -1,10 +1,10 @@
 title:
-  en: Gallery
+    en: Gallery
-  fr: Galerie
+    fr: Galerie
 icon: file-image
 status:
-  draft: true
+    draft: true
-  listed: true
+    listed: true
 tabs:
-  content: tabs/gallery_content
+    content: tabs/gallery_content
-  seo: tabs/gallery_seo
+    seo: tabs/gallery_seo

site/blueprints/pages/home.yml

@@ -1,17 +1,17 @@
 title:
-  en: Home
+    en: Home
-  fr: Accueil
+    fr: Accueil
 icon: home
 status:
-  draft: true
+    draft: true
-  unlisted: true
+    unlisted: true
 options:
-  changeSlug: false
+    changeSlug: false
-  changeStatus: false
+    changeStatus: false
-  changeTemplate: false
+    changeTemplate: false
-  changeTitle: false
+    changeTitle: false
-  delete: false
+    delete: false
-  duplicate: false
+    duplicate: false
 tabs:
-  content: tabs/home_content
+    content: tabs/home_content
-  seo: tabs/home_seo
+    seo: tabs/home_seo

site/blueprints/sections/about_content_presentation.yml

@@ -1,9 +1,9 @@
 type: fields
 fields:
-  text:
+    text:
-    label:
+        label:
-      en: Presentation text
+            en: Presentation text
-      fr: Texte de présentation
+            fr: Texte de présentation
-    type: textarea
+        type: textarea
-    size: large
+        size: large
-    required: true
+        required: true

site/blueprints/sections/gallery_content_artworks.yml

@@ -1,11 +1,11 @@
 headline:
-  en: Artworks
+    en: Artworks
-  fr: Œuvres
+    fr: Œuvres
 type: files
 template: artwork
 min: 1
 layout: cards
 size: small
 image:
-  ratio: 1/1
+    ratio: 1/1
-  back: white
+    back: white

site/blueprints/sections/gallery_content_introduction.yml

@@ -1,8 +1,17 @@
 type: fields
 fields:
-  text:
+    text:
-    label:
+        label:
-      en: Introduction text
+            en: Introduction text
-      fr: Texte d'introduction
+            fr: Texte d'introduction
-    type: textarea
+        type: textarea
-    size: medium
+        size: medium
+        buttons:
+            - bold
+            - italic
+            - '|'
+            - link
+            - email
+            - '|'
+            - ul
+            - '|'

site/blueprints/sections/generic_seo_metadata.yml

@@ -1,55 +1,56 @@
 type: fields
 fields:
-  meta_description:
+    meta_description:
-    label: Description
+        label: Description
-    type: textarea
+        type: textarea
-    size: small
+        size: small
-    buttons: false
+        buttons: false
-    # required: true
+        # required: true
-    help:
+        help:
-      en: "Short description of the page displayed by search engines and social networks (recommended maximum length: 160 characters)."
+            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)."
+            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
+        width: 3/4
-  gap:
+    gap:
-    type: gap
+        type: gap
-    width: 1/4
+        width: 1/4
-  meta_image:
+    meta_image:
-    label: Image
+        label: Image
-    type: files
+        type: files
-    layout: cardlets
+        layout: cardlets
-    image:
+        image:
-      cover: true
+            cover: true
-    multiple: false
+            back: white
-    # required: true
+        multiple: false
-    help:
+        # required: true
-      en: "Image displayed by social networks (format: JPEG or PNG)."
+        help:
-      fr: "Image affichée par les réseaux sociaux (format : JPEG ou PNG)."
+            en: "Image displayed by social networks (format: JPEG or PNG)."
-    width: 1/4
+            fr: "Image affichée par les réseaux sociaux (format : JPEG ou PNG)."
-  # Hidden fields
+        width: 1/4
-  og_image:
+    # Hidden fields
-    type: hidden
+    og_image:
-    default:
+        type: hidden
-  og_type:
+        default:
-    type: hidden
+    og_type:
-    default: article
+        type: hidden
-  twitter_image:
+        default: article
-    type: hidden
+    twitter_image:
-    default:
+        type: hidden
-  twitter_card_type:
+        default:
-    type: hidden
+    twitter_card_type:
-    default: summary_large_image
+        type: hidden
-  robots_noindex:
+        default: summary_large_image
-    type: hidden
+    robots_noindex:
-    default: default
+        type: hidden
-  robots_nofollow:
+        default: default
-    type: hidden
+    robots_nofollow:
-    default: default
+        type: hidden
-  robots_noarchive:
+        default: default
-    type: hidden
+    robots_noarchive:
-    default: default
+        type: hidden
-  robots_noimageindex:
+        default: default
-    type: hidden
+    robots_noimageindex:
-    default: default
+        type: hidden
-  robots_nosnippet:
+        default: default
-    type: hidden
+    robots_nosnippet:
-    default: default
+        type: hidden
+        default: default

site/blueprints/sections/home_content_background_image.yml

@@ -1,6 +1,6 @@
 headline:
-  en: Background image
+    en: Background image
-  fr: Image de fond
+    fr: Image de fond
 type: files
 template: image
 min: 1
@@ -8,5 +8,5 @@ max: 1
 layout: cards
 size: medium
 image:
-  ratio: 1/1
+    ratio: 1/1
-  back: white
+    back: white

site/blueprints/sections/site_content_galleries.yml

@@ -1,6 +1,6 @@
 headline:
-  en: Galleries
+    en: Galleries
-  fr: Galeries
+    fr: Galeries
 type: pages
 template: gallery
 min: 1
@@ -8,6 +8,6 @@ max: 7
 layout: cards
 size: small
 image:
-  ratio: 1/1
+    ratio: 1/1
-  cover: true
+    cover: true
-  back: white
+    back: white

site/blueprints/sections/site_content_pages.yml

@@ -1,12 +1,12 @@
 headline:
-  en: Pages
+    en: Pages
-  fr: Pages
+    fr: Pages
 type: pages
 templates:
-  - home
+    - home
-  - about
+    - about
 create: false
 layout: cardlets
 image:
-  cover: true
+    cover: true
-  back: white
+    back: white

site/blueprints/sections/site_informations_contact.yml

@@ -1,20 +1,20 @@
 type: fields
 fields:
-  email:
+    email:
-    label:
+        label:
-      en: Email
+            en: Email
-      fr: Adresse e-mail
+            fr: Adresse e-mail
-    type: email
+        type: email
-    required: true
+        required: true
-    width: 1/2
+        width: 1/2
-  gap:
+    gap:
-    type: gap
+        type: gap
-    width: 1/2
+        width: 1/2
-  instagram:
+    instagram:
-    type: url
+        type: url
-    label:
+        label:
-      en: Instagram account
+            en: Instagram account
-      fr: Compte Instagram
+            fr: Compte Instagram
-    icon: instagram
+        icon: instagram
-    required: true
+        required: true
-    width: 1/2
+        width: 1/2

site/blueprints/sections/site_informations_favicon.yml

@@ -1,13 +1,13 @@
 type: fields
 fields:
-  favicon:
+    favicon:
-    label: Favicon
+        label: Favicon
-    type: files
+        type: files
-    template: favicon
+        template: favicon
-    layout: cardlets
+        layout: cardlets
-    multiple: false
+        multiple: false
-    required: true
+        required: true
-    help:
+        help:
-      en: "Image displayed on web browser tabs (file format: PNG)."
+            en: "Image displayed on web browser tabs (file format: PNG)."
-      fr: "Image affichée sur les onglets des navigateurs internet (format : PNG)."
+            fr: "Image affichée sur les onglets des navigateurs internet (format : PNG)."
-    width: 1/4
+        width: 1/4

site/blueprints/site.yml

@@ -1,7 +1,7 @@
 title:
-  en: Website
+    en: Website
-  fr: Site web
+    fr: Site web
 tabs:
-  content: tabs/site_content
+    content: tabs/site_content
-  seo: tabs/site_informations
+    seo: tabs/site_informations
-  analytics: tabs/site_analytics
+    analytics: tabs/site_analytics

site/blueprints/tabs/about_content.yml

@@ -1,6 +1,6 @@
 label:
-  en: Content
+    en: Content
-  fr: Contenu
+    fr: Contenu
 icon: text
 sections:
-  presentation: sections/about_content_presentation
+    presentation: sections/about_content_presentation

site/blueprints/tabs/about_seo.yml

@@ -1,6 +1,6 @@
 label:
-  en: SEO
+    en: SEO
-  fr: Référencement
+    fr: Référencement
 icon: search
 sections:
-  seo_basic_meta: sections/generic_seo_metadata
+    seo_basic_meta: sections/generic_seo_metadata

site/blueprints/tabs/gallery_content.yml

@@ -1,7 +1,7 @@
 label:
-  en: Content
+    en: Content
-  fr: Contenu
+    fr: Contenu
 icon: text
 sections:
-  introduction: sections/gallery_content_introduction
+    introduction: sections/gallery_content_introduction
-  artworks: sections/gallery_content_artworks
+    artworks: sections/gallery_content_artworks

site/blueprints/tabs/gallery_seo.yml

@@ -1,6 +1,6 @@
 label:
-  en: SEO
+    en: SEO
-  fr: Référencement
+    fr: Référencement
 icon: search
 sections:
-  seo_basic_meta: sections/generic_seo_metadata
+    seo_basic_meta: sections/generic_seo_metadata

site/blueprints/tabs/home_content.yml

@@ -1,6 +1,6 @@
 label:
-  en: Content
+    en: Content
-  fr: Contenu
+    fr: Contenu
 icon: text
 sections:
-  background_image: sections/home_content_background_image
+    background_image: sections/home_content_background_image

site/blueprints/tabs/home_seo.yml

@@ -1,6 +1,6 @@
 label:
-  en: SEO
+    en: SEO
-  fr: Référencement
+    fr: Référencement
 icon: search
 sections:
-  seo_basic_meta: sections/generic_seo_metadata
+    seo_basic_meta: sections/generic_seo_metadata

site/blueprints/tabs/site_analytics.yml

@@ -1,15 +1,15 @@
 label:
-  en: Analytics
+    en: Analytics
-  fr: Audience
+    fr: Audience
 icon: chart
 columns:
-  - width: 1/4
+    - width: 1/4
-    sticky: true
+        sticky: true
-    sections:
+        sections:
-      sidebar:
+            sidebar:
-        type: matomo-sidebar
+                type: matomo-sidebar
-        link: false
+                link: false
-  - width: 3/4
+    - width: 3/4
-    sections:
+        sections:
-      main:
+            main:
-        type: matomo-main
+                type: matomo-main

site/blueprints/tabs/site_content.yml

@@ -1,12 +1,12 @@
 label:
-  en: Website
+    en: Website
-  fr: Site web
+    fr: Site web
 icon: home
 columns:
-  - width: 1/4
+    - width: 1/4
-    sticky: true
+        sticky: true
-    sections:
+        sections:
-      pages: sections/site_content_pages
+            pages: sections/site_content_pages
-  - width: 3/4
+    - width: 3/4
-    sections:
+        sections:
-      galleries: sections/site_content_galleries
+            galleries: sections/site_content_galleries

site/blueprints/tabs/site_informations.yml

@@ -1,5 +1,5 @@
 label: Informations
 icon: info
 sections:
-  seo_favicon: sections/site_informations_favicon
+    seo_favicon: sections/site_informations_favicon
-  seo_informations: sections/site_informations_contact
+    seo_informations: sections/site_informations_contact

site/blueprints/users/admin.yml

@@ -1,20 +1,18 @@
 title:
-  en: Administrator
+    en: Administrator
-  fr: Administrateur·ice
+    fr: Administrateur·ice
-
 description:
-  en: The Administrator has all rights
+    en: The Administrator has all rights
-  fr: L'Administrateur·ice dispose de tous les droits
+    fr: L'Administrateur·ice dispose de tous les droits
-
 sections:
-  info:
+    info:
-    headline:
+        headline:
-      en: Website
+            en: Website
-      fr: Site internet
+            fr: Site internet
-    theme: none
+        theme: none
-    width: 1/2
+        width: 1/2
-    text:
+        text:
-      en: |
+            en: |
-        (link: https://paulnicoue.com text: paulnicoue.com target: _blank)
+                (link: https://paulnicoue.com text: paulnicoue.com target: _blank)
-      fr: |
+            fr: |
-        (link: https://www.paulnicoue.com text: paulnicoue.com target: _blank)
+                (link: https://www.paulnicoue.com text: paulnicoue.com target: _blank)

site/blueprints/users/editor.yml

@@ -1,31 +1,29 @@
 title:
-  en: Editor
+    en: Editor
-  fr: Éditeur·ice
+    fr: Éditeur·ice
-
 description:
-  en: The Editor can create and edit pages
+    en: The Editor can create and edit pages
-  fr: L'éditeur·ice peut créer et modifier des pages
+    fr: L'éditeur·ice peut créer et modifier des pages
-
 permissions:
-  access:
+    access:
-    settings: false
+        settings: false
-  languages:
+    languages:
-    create: false
+        create: false
-    delete: false
+        delete: false
-  site:
+    site:
-    changeTitle: false
+        changeTitle: false
-  user:
+    user:
-    changeRole: false
+        changeRole: false
-    delete: false
+        delete: false
-  users:
+    users:
-    changeEmail: false
+        changeEmail: false
-    changeLanguage: false
+        changeLanguage: false
-    changeName: false
+        changeName: false
-    changePassword: false
+        changePassword: false
-    changeRole: false
+        changeRole: false
-    create: false
+        create: false
-    delete: false
+        delete: false
-    update: false
+        update: false
 
 sections:
-  info: false
+    info: false

site/config/config.php

@@ -45,7 +45,7 @@ return [
             }
         }
     ],
-    // Thumbs
+    // Thumbnails and srcsets presets
     'thumbs' => [
         'srcsets' => [
             'default' => [500, 1000, 1500]

site/templates/about.twig

@@ -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 %}

site/templates/base.twig

@@ -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 %}
 

site/templates/error.twig

@@ -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 %}

site/templates/gallery.twig

@@ -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 %}

site/templates/home.twig

@@ -2,6 +2,7 @@
 
 {% block main %}
     <main>
+
         <section class="home-section">
 
             <div class="home">
@@ -23,5 +24,6 @@
             </div>
 
         </section>
+        
     </main>
 {% endblock %}