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();
});

View file

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

View file

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

View file

@ -6,15 +6,15 @@ Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te
----
Meta-description:
Meta-description:
----
Meta-image:
Meta-image:
----
Og-image:
Og-image:
----
@ -22,7 +22,7 @@ Og-type: article
----
Twitter-image:
Twitter-image:
----
@ -46,4 +46,4 @@ Robots-noimageindex: default
----
Robots-nosnippet: default
Robots-nosnippet: default

View file

@ -10,15 +10,15 @@ Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Egestas fringil
----
Meta-description:
Meta-description:
----
Meta-image:
Meta-image:
----
Og-image:
Og-image:
----
@ -26,7 +26,7 @@ Og-type: profile
----
Twitter-image:
Twitter-image:
----
@ -50,4 +50,4 @@ Robots-noimageindex: default
----
Robots-nosnippet: default
Robots-nosnippet: default

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

16
site/templates/about.twig Normal file
View 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 %}

View file

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

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

View file

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