From d272a8752b5b016b147037031e9cea67af8a3074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Nicou=C3=A9?= Date: Fri, 15 Apr 2022 16:45:38 +0200 Subject: [PATCH] Add gallery, about and error pages --- assets/css/_animations.scss | 53 + assets/css/_fonts.scss | 72 + assets/css/_minireset.css | 80 + assets/css/_variables.scss | 83 + assets/css/minireset.min.css | 1 - assets/css/style.min.css | 2 +- assets/css/style.scss | 1406 ++++++++--------- assets/js/app.js | 226 +-- .../gallery-image-exemple-01.png.txt | 2 +- .../gallery-image-exemple-02.png.txt | 2 +- content/1_galerie-1/gallery.txt | 10 +- content/a-propos/about.txt | 10 +- content/accueil/home.txt | 6 +- content/site.txt | 4 +- site/blueprints/files/artwork.yml | 26 +- site/blueprints/files/favicon.yml | 2 +- site/blueprints/files/image.yml | 22 +- site/blueprints/pages/about.yml | 24 +- site/blueprints/pages/error.yml | 6 +- site/blueprints/pages/gallery.yml | 12 +- site/blueprints/pages/home.yml | 24 +- .../sections/about_content_presentation.yml | 14 +- .../sections/gallery_content_artworks.yml | 8 +- .../sections/gallery_content_introduction.yml | 21 +- .../sections/generic_seo_metadata.yml | 107 +- .../home_content_background_image.yml | 8 +- .../sections/site_content_galleries.yml | 10 +- .../sections/site_content_pages.yml | 12 +- .../sections/site_informations_contact.yml | 36 +- .../sections/site_informations_favicon.yml | 22 +- site/blueprints/site.yml | 10 +- site/blueprints/tabs/about_content.yml | 6 +- site/blueprints/tabs/about_seo.yml | 6 +- site/blueprints/tabs/gallery_content.yml | 8 +- site/blueprints/tabs/gallery_seo.yml | 6 +- site/blueprints/tabs/home_content.yml | 6 +- site/blueprints/tabs/home_seo.yml | 6 +- site/blueprints/tabs/site_analytics.yml | 24 +- site/blueprints/tabs/site_content.yml | 18 +- site/blueprints/tabs/site_informations.yml | 4 +- site/blueprints/users/admin.yml | 32 +- site/blueprints/users/editor.yml | 50 +- site/config/config.php | 2 +- site/templates/about.twig | 16 + site/templates/base.twig | 5 +- site/templates/error.twig | 21 + site/templates/gallery.twig | 29 + site/templates/home.twig | 2 + 48 files changed, 1424 insertions(+), 1138 deletions(-) create mode 100644 assets/css/_animations.scss create mode 100644 assets/css/_fonts.scss create mode 100644 assets/css/_minireset.css create mode 100644 assets/css/_variables.scss delete mode 100644 assets/css/minireset.min.css create mode 100644 site/templates/about.twig create mode 100644 site/templates/error.twig create mode 100644 site/templates/gallery.twig diff --git a/assets/css/_animations.scss b/assets/css/_animations.scss new file mode 100644 index 0000000..d5d07be --- /dev/null +++ b/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; + } +} diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..d26c0f8 --- /dev/null +++ b/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; +} diff --git a/assets/css/_minireset.css b/assets/css/_minireset.css new file mode 100644 index 0000000..5477222 --- /dev/null +++ b/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; +} diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss new file mode 100644 index 0000000..2401730 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/minireset.min.css b/assets/css/minireset.min.css deleted file mode 100644 index 896003e..0000000 --- a/assets/css/minireset.min.css +++ /dev/null @@ -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} diff --git a/assets/css/style.min.css b/assets/css/style.min.css index cfbc3ce..87ea09c 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -@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}@font-face{font-family:'Gloria Hallelujah';src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: 'Nunito', Verdana, sans-serif;--title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1rem;--small-text-font-size: 0.8rem;--h1-font-size: 1.8rem;--h2-font-size: 1.4rem;--h3-font-size: 1.4rem;--h4-font-size: 1.2rem;--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: 2rem;--generic-section-horizontal-padding: 1rem;--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));--black: #000;--jet: #333333;--white: #fff}@media screen and (min-width: 48rem){:root{--text-font-size: 1.2rem;--small-text-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.6rem;--h4-font-size: 1.4rem;--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: 2rem}}@-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}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3,h4{color:var(--black)}h1{font-family:var(--title-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--title-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:2rem 0 0 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:1rem 0}h4{font-family:var(--text-font-family);font-size:var(--h4-font-size);line-height:var(--h4-font-size);margin:1rem 0}p{text-align:justify}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:'header' auto 'main' 1fr 'footer' auto / 1fr}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}.header-bar{max-width:var(--content-max-width);height:var(--header-bar-height);margin:auto;padding:var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding)}.header-bar__logo{width:max-content}.header-bar__logo-link{text-decoration:none}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--2-items .home__nav-item-2{grid-area:bottom;place-self:start center}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--4-items .home__nav-item-2{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--4-items .home__nav-item-3{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--4-items .home__nav-item-4{grid-area:bottom;place-self:start center}.home__nav--5-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--5-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--5-items .home__nav-item-5{grid-area:bottom;place-self:start center}.home__nav--6-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--6-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--6-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--6-items .home__nav-item-6{grid-area:bottom;place-self:start center}.home__nav--7-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--7-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--7-items .home__nav-item-5{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-6{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-7{grid-area:bottom;place-self:start center}.home__nav--8-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--8-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--8-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--8-items .home__nav-item-6{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-7{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-8{grid-area:bottom;place-self:start center}.home__nav-link{color:var(--black);text-decoration:none;opacity:0;-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}.home__nav-link div{opacity:0;-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}.home__nav-link--visible{opacity:1}.home__nav-link--visible div{opacity:1}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}.footer-bar{max-width:var(--content-max-width);height:var(--footer-bar-height);margin:auto;padding:var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--icon-size);height:var(--icon-size)}.footer-bar__social a svg{fill:var(--jet);width:100%;height:100%;-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover svg,.footer-bar__social a:focus svg,.footer-bar__social a:active svg{fill:var(--black)}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__copyright{font-size:var(--small-text-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}} +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}@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}@font-face{font-family:'Gloria Hallelujah';src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--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;--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));--black: #000;--jet: #333333;--white: #fff}@media screen and (min-width: 48rem){:root{--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;--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}}@-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}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3,h4{color:var(--black)}h1{font-family:var(--logo-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(-text-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:0 0 4rem 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:1rem 0}h4{font-family:var(--text-font-family);font-size:var(--h4-font-size);line-height:var(--h4-font-size);margin:1rem 0}p{text-align:justify;line-height:var(--text-line-height)}strong{font-weight:var(--bold-font-weight)}em{font-style:italic}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:'header' auto 'main' 1fr 'footer' auto / 1fr}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}.header-bar{max-width:var(--content-max-width);height:var(--header-bar-height);margin:auto;padding:var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding)}.header-bar__logo{width:max-content}.header-bar__logo-link{text-decoration:none}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--home-section-vertical-padding) var(--home-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;max-width:Min(100%, 2500px);min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--2-items .home__nav-item-2{grid-area:bottom;place-self:start center}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--4-items .home__nav-item-2{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--4-items .home__nav-item-3{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--4-items .home__nav-item-4{grid-area:bottom;place-self:start center}.home__nav--5-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--5-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--5-items .home__nav-item-5{grid-area:bottom;place-self:start center}.home__nav--6-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--6-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--6-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--6-items .home__nav-item-6{grid-area:bottom;place-self:start center}.home__nav--7-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--7-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--7-items .home__nav-item-5{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-6{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-7{grid-area:bottom;place-self:start center}.home__nav--8-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--8-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--8-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--8-items .home__nav-item-6{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-7{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-8{grid-area:bottom;place-self:start center}.home__nav-link{color:var(--black);text-decoration:none;opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link div{opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link--visible{opacity:1}.home__nav-link--visible div{opacity:1}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}.gallery-section,.about-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.gallery__title,.about__title{text-align:center}.gallery__introduction,.about__presentation,.error__message{max-width:var(--text-max-width);margin:auto}.gallery__introduction p+p,.gallery__introduction p+ul,.about__presentation p+p,.about__presentation p+ul,.error__message p+p,.error__message p+ul{margin:1rem 0 0 0}.gallery__introduction ul,.about__presentation ul,.error__message ul{list-style:disc inside}.gallery__introduction ul+ul,.gallery__introduction ul+p,.about__presentation ul+ul,.about__presentation ul+p,.error__message ul+ul,.error__message ul+p{margin:1rem 0 0 0}.gallery__introduction ul li+li,.about__presentation ul li+li,.error__message ul li+li{margin:0.5rem 0 0 0}.gallery__artworks{margin:4rem 0 0 0}.gallery__image{display:table;margin:auto}.gallery__image+.gallery__image{margin:3rem auto 0 auto}.gallery__image img{display:block;max-width:Min(100%, 1500px);max-height:80vh}.gallery__image figcaption{display:table-caption;caption-side:bottom;margin:1rem auto 0 auto;font-size:var(--caption-font-size);font-style:italic}.error-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.error__title{text-align:center}.error__message{max-width:var(--text-max-width);margin:auto;text-align:center}.error__button{margin:1rem 0 0 0;text-align:center}.error__button a{display:inline-block;padding:1rem;border-radius:10px;color:var(--white);background-color:var(--jet);text-decoration:none;font-weight:var(--semi-bold-font-weight);-webkit-transition:background-color 200ms ease-in-out;-o-transition:background-color 200ms ease-in-out;transition:background-color 200ms ease-in-out}.error__button a:hover,.error__button a:focus,.error__button a:active{background-color:var(--black)}.footer-bar{max-width:var(--content-max-width);height:var(--footer-bar-height);margin:auto;padding:var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--icon-size);height:var(--icon-size)}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__social a svg{fill:var(--jet);width:100%;height:100%;-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover svg,.footer-bar__social a:focus svg,.footer-bar__social a:active svg{fill:var(--black)}.footer-bar__copyright{font-size:var(--footnote-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}} diff --git a/assets/css/style.scss b/assets/css/style.scss index f68f907..98f11d7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,201 +1,4 @@ -// =========================================================================== -// FONT-FACE -// =========================================================================== - -// Nunito - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-Regular.ttf) format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-Italic.ttf) format('truetype'); - font-weight: 400; - font-style: italic; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-Medium.ttf) format('truetype'); - font-weight: 500; - font-style: normal; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype'); - font-weight: 500; - font-style: italic; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-SemiBold.ttf) format('truetype'); - font-weight: 600; - font-style: normal; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype'); - font-weight: 600; - font-style: italic; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-Bold.ttf) format('truetype'); - font-weight: 700; - font-style: normal; -} - -@font-face { - font-family: 'Nunito'; - src: url(../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype'); - font-weight: 700; - font-style: italic; -} - -// Gloria Hallelujah - -@font-face { - font-family: 'Gloria Hallelujah'; - src: url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype'); - font-weight: 400; - font-style: normal; -} - -// =========================================================================== -// VARIABLES -// =========================================================================== - -:root { - - // Fonts - - --text-font-family: 'Nunito', Verdana, sans-serif; - --title-font-family: 'Gloria Hallelujah', Verdana, sans-serif; - --regular-font-weight: 400; - --medium-font-weight: 500; - --semi-bold-font-weight: 600; - --bold-font-weight: 700; - --text-font-size: 1rem; - --small-text-font-size: 0.8rem; - --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: 2rem; - --generic-section-horizontal-padding: 1rem; - --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; - --small-text-font-size: 1rem; - --h1-font-size: 2rem; - --h2-font-size: 1.6rem; - --h3-font-size: 1.6rem; - --h4-font-size: 1.4rem; - - // Dimensions - - --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: 2rem; - } -} - -// =========================================================================== -// 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; - } -} +@import 'minireset', 'fonts', 'variables', 'animations'; // =========================================================================== // GENERALITIES @@ -215,81 +18,90 @@ h1, h2, h3, h4 { - color: var(--black); + color: var(--black); } h1 { - font-family: var(--title-font-family); - font-size: var(--h1-font-size); - line-height: var(--h1-font-size); + font-family: var(--logo-font-family); + font-size: var(--h1-font-size); + line-height: var(--h1-font-size); } h2 { - font-family: var(--title-font-family); - font-size: var(--h2-font-size); - line-height: var(--h2-font-size); - margin: 2rem 0 0 0; + font-family: var(-text-font-family); + font-size: var(--h2-font-size); + line-height: var(--h2-font-size); + margin: 0 0 4rem 0; } h3 { - font-family: var(--text-font-family); - font-size: var(--h3-font-size); - line-height: var(--h3-font-size); - margin: 1rem 0; + font-family: var(--text-font-family); + font-size: var(--h3-font-size); + line-height: var(--h3-font-size); + margin: 1rem 0; } h4 { - font-family: var(--text-font-family); - font-size: var(--h4-font-size); - line-height: var(--h4-font-size); - margin: 1rem 0; + font-family: var(--text-font-family); + font-size: var(--h4-font-size); + line-height: var(--h4-font-size); + margin: 1rem 0; } p { - text-align: justify; + text-align: justify; + line-height: var(--text-line-height); +} + +strong { + font-weight: var(--bold-font-weight); +} + +em { + font-style: italic; } // Link style a { - color: var(--jet); - text-decoration: underline; - -webkit-transition: color 200ms ease-in-out; - -o-transition: color 200ms ease-in-out; - transition: color 200ms ease-in-out; + color: var(--jet); + text-decoration: underline; + -webkit-transition: color 200ms ease-in-out; + -o-transition: color 200ms ease-in-out; + transition: color 200ms ease-in-out; - &:hover, - &:focus, - &:active { - color: var(--black); - } + &:hover, + &:focus, + &:active { + color: var(--black); + } } // General grid layout body { - min-height: 100vh; - overflow-x: hidden; - display: -ms-grid; - display: grid; - grid: - 'header' auto - 'main' 1fr - 'footer' auto - / 1fr; + min-height: 100vh; + overflow-x: hidden; + display: -ms-grid; + display: grid; + grid: + 'header' auto + 'main' 1fr + 'footer' auto + / 1fr; } header { - grid-area: header; + grid-area: header; } main { - grid-area: main; + grid-area: main; } footer { - grid-area: footer; + grid-area: footer; } // =========================================================================== @@ -299,18 +111,18 @@ footer { // Header bar .header-bar { - max-width: var(--content-max-width); - height: var(--header-bar-height); - margin: auto; - padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding); + max-width: var(--content-max-width); + height: var(--header-bar-height); + margin: auto; + padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding); } .header-bar__logo { - width: max-content; + width: max-content; } .header-bar__logo-link { - text-decoration: none; + text-decoration: none; } // =========================================================================== @@ -320,463 +132,10 @@ footer { // Home section .home-section { - max-width: var(--content-max-width); - min-height: var(--home-section-min-height); - margin: auto; - padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.home__nav { - height: 100%; - display: -ms-grid; - display: grid; - grid: - 'top-left top top-right' var(--home-nav-item-size) - 'left center right' auto - 'bottom-left bottom bottom-right' var(--home-nav-item-size) - / var(--home-nav-item-size) auto var(--home-nav-item-size); - place-content: center center; - gap: var(--home-nav-gap); - line-height: 0; -} - -.home__nav-image { - grid-area: center; - - img { - min-width: 12rem; - min-height: 12rem; - max-height: var(--home-nav-image-max-height); - } -} - -.home__nav--2-items { - - .home__nav-item-1 { - grid-area: top; - place-self: end center; - } - - .home__nav-item-2 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--3-items { - - .home__nav-item-1 { - grid-area: top-left; - place-self: end end; - -webkit-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-2 { - grid-area: top-right; - place-self: end start; - -webkit-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-3 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--4-items { - - .home__nav-item-1 { - grid-area: top; - place-self: end center; - } - - .home__nav-item-2 { - grid-area: left; - place-self: center end; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } - - .home__nav-item-3 { - grid-area: right; - place-self: center start; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - } - - .home__nav-item-4 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--5-items { - - .home__nav-item-1 { - grid-area: top-left; - place-self: end end; - -webkit-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-2 { - grid-area: top-right; - place-self: end start; - -webkit-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-3 { - grid-area: left; - place-self: center end; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } - - .home__nav-item-4 { - grid-area: right; - place-self: center start; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - } - - .home__nav-item-5 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--6-items { - - .home__nav-item-1 { - grid-area: top; - place-self: end center; - } - - .home__nav-item-2 { - grid-area: top-left; - place-self: end end; - -webkit-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-3 { - grid-area: top-right; - place-self: end start; - -webkit-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-4 { - grid-area: left; - place-self: center end; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } - - .home__nav-item-5 { - grid-area: right; - place-self: center start; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - } - - .home__nav-item-6 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--7-items { - - .home__nav-item-1 { - grid-area: top-left; - place-self: end end; - -webkit-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-2 { - grid-area: top-right; - place-self: end start; - -webkit-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-3 { - grid-area: left; - place-self: center end; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } - - .home__nav-item-4 { - grid-area: right; - place-self: center start; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - } - - .home__nav-item-5 { - grid-area: bottom-left; - place-self: start end; - -webkit-transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - -ms-transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - } - - .home__nav-item-6 { - grid-area: bottom-right; - place-self: start start; - -webkit-transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - -ms-transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - } - - .home__nav-item-7 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav--8-items { - - .home__nav-item-1 { - grid-area: top; - place-self: end center; - } - - .home__nav-item-2 { - grid-area: top-left; - place-self: end end; - -webkit-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(-45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-3 { - grid-area: top-right; - place-self: end start; - -webkit-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - -ms-transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - transform: - rotate(45deg) - translateY(var(--home-nav-item-translation)); - } - - .home__nav-item-4 { - grid-area: left; - place-self: center end; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } - - .home__nav-item-5 { - grid-area: right; - place-self: center start; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - } - - .home__nav-item-6 { - grid-area: bottom-left; - place-self: start end; - -webkit-transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - -ms-transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - transform: - rotate(45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - } - - .home__nav-item-7 { - grid-area: bottom-right; - place-self: start start; - -webkit-transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - -ms-transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - transform: - rotate(-45deg) - translateY(calc(var(--home-nav-item-translation) * -1)); - } - - .home__nav-item-8 { - grid-area: bottom; - place-self: start center; - } -} - -.home__nav-link { - color: var(--black); - text-decoration: none; - opacity: 0; - -webkit-transition: opacity 1s ease-in-out; - -o-transition: opacity 1s ease-in-out; - transition: opacity 1s ease-in-out; - - div { - opacity: 0; - -webkit-transition: opacity 1s ease-in-out; - -o-transition: opacity 1s ease-in-out; - transition: opacity 1s ease-in-out; - } -} - -.home__nav-link--visible { - opacity: 1; - - div { - opacity: 1; - } -} - -.home__nav-letter--wave-up { - -webkit-animation: wave-up 600ms ease-out; - animation: wave-up 600ms ease-in-out; -} - -.home__nav-letter--wave-down { - -webkit-animation: wave-down 600ms ease-out; - animation: wave-down 600ms ease-in-out; -} - -// =========================================================================== -// FOOTER -// =========================================================================== - -// Footer bar - -.footer-bar { - max-width: var(--content-max-width); - height: var(--footer-bar-height); - margin: auto; - padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.footer-bar__social { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - a { + max-width: var(--content-max-width); + min-height: var(--home-section-min-height); + margin: auto; + padding: var(--home-section-vertical-padding) var(--home-section-horizontal-padding); display: -webkit-box; display: -ms-flexbox; display: flex; @@ -786,59 +145,624 @@ footer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: var(--icon-size); - height: var(--icon-size); +} - svg { - fill: var(--jet); - width: 100%; - height: 100%; - -webkit-transition: fill 200ms ease-in-out; - -o-transition: fill 200ms ease-in-out; - transition: fill 200ms ease-in-out; +.home__nav { + height: 100%; + display: -ms-grid; + display: grid; + grid: + 'top-left top top-right' var(--home-nav-item-size) + 'left center right' auto + 'bottom-left bottom bottom-right' var(--home-nav-item-size) + / var(--home-nav-item-size) auto var(--home-nav-item-size); + place-content: center center; + gap: var(--home-nav-gap); + line-height: 0; +} + +.home__nav-image { + grid-area: center; + + img { + min-width: 12rem; + max-width: Min(100%, 2500px); + min-height: 12rem; + max-height: var(--home-nav-image-max-height); + } +} + +.home__nav--2-items { + + .home__nav-item-1 { + grid-area: top; + place-self: end center; } - &:hover, - &:focus, - &:active { - - svg { - fill: var(--black); - } + .home__nav-item-2 { + grid-area: bottom; + place-self: start center; } - } +} - a + a { - margin: 0 0 0 1rem; - } +.home__nav--3-items { + + .home__nav-item-1 { + grid-area: top-left; + place-self: end end; + -webkit-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-2 { + grid-area: top-right; + place-self: end start; + -webkit-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-3 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav--4-items { + + .home__nav-item-1 { + grid-area: top; + place-self: end center; + } + + .home__nav-item-2 { + grid-area: left; + place-self: center end; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + + .home__nav-item-3 { + grid-area: right; + place-self: center start; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + .home__nav-item-4 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav--5-items { + + .home__nav-item-1 { + grid-area: top-left; + place-self: end end; + -webkit-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-2 { + grid-area: top-right; + place-self: end start; + -webkit-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-3 { + grid-area: left; + place-self: center end; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + + .home__nav-item-4 { + grid-area: right; + place-self: center start; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + .home__nav-item-5 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav--6-items { + + .home__nav-item-1 { + grid-area: top; + place-self: end center; + } + + .home__nav-item-2 { + grid-area: top-left; + place-self: end end; + -webkit-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-3 { + grid-area: top-right; + place-self: end start; + -webkit-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-4 { + grid-area: left; + place-self: center end; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + + .home__nav-item-5 { + grid-area: right; + place-self: center start; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + .home__nav-item-6 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav--7-items { + + .home__nav-item-1 { + grid-area: top-left; + place-self: end end; + -webkit-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-2 { + grid-area: top-right; + place-self: end start; + -webkit-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-3 { + grid-area: left; + place-self: center end; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + + .home__nav-item-4 { + grid-area: right; + place-self: center start; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + .home__nav-item-5 { + grid-area: bottom-left; + place-self: start end; + -webkit-transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + -ms-transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + } + + .home__nav-item-6 { + grid-area: bottom-right; + place-self: start start; + -webkit-transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + -ms-transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + } + + .home__nav-item-7 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav--8-items { + + .home__nav-item-1 { + grid-area: top; + place-self: end center; + } + + .home__nav-item-2 { + grid-area: top-left; + place-self: end end; + -webkit-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(-45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-3 { + grid-area: top-right; + place-self: end start; + -webkit-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + -ms-transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + transform: + rotate(45deg) + translateY(var(--home-nav-item-translation)); + } + + .home__nav-item-4 { + grid-area: left; + place-self: center end; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + + .home__nav-item-5 { + grid-area: right; + place-self: center start; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + .home__nav-item-6 { + grid-area: bottom-left; + place-self: start end; + -webkit-transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + -ms-transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + transform: + rotate(45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + } + + .home__nav-item-7 { + grid-area: bottom-right; + place-self: start start; + -webkit-transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + -ms-transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + transform: + rotate(-45deg) + translateY(calc(var(--home-nav-item-translation) * -1)); + } + + .home__nav-item-8 { + grid-area: bottom; + place-self: start center; + } +} + +.home__nav-link { + color: var(--black); + text-decoration: none; + opacity: 0; + -webkit-transition: opacity 600ms ease-in-out; + -o-transition: opacity 600ms ease-in-out; + transition: opacity 600ms ease-in-out; + + div { + opacity: 0; + -webkit-transition: opacity 600ms ease-in-out; + -o-transition: opacity 600ms ease-in-out; + transition: opacity 600ms ease-in-out; + } +} + +.home__nav-link--visible { + opacity: 1; + + div { + opacity: 1; + } +} + +.home__nav-letter--wave-up { + -webkit-animation: wave-up 600ms ease-out; + animation: wave-up 600ms ease-in-out; +} + +.home__nav-letter--wave-down { + -webkit-animation: wave-down 600ms ease-out; + animation: wave-down 600ms ease-in-out; +} + +// Gallery & about sections + +.gallery-section, +.about-section { + max-width: var(--content-max-width); + margin: auto; + padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding); +} + +.gallery__title, +.about__title { + text-align: center; +} + +.gallery__introduction, +.about__presentation, +.error__message { + max-width: var(--text-max-width); + margin: auto; + + p { + + + p, + + ul { + margin: 1rem 0 0 0; + } + } + + ul { + list-style: disc inside; + + + ul, + + p { + margin: 1rem 0 0 0; + } + + li + li { + margin: 0.5rem 0 0 0; + } + } +} + +.gallery__artworks { + margin: 4rem 0 0 0; +} + +.gallery__image { + display: table; + margin: auto; + + + .gallery__image { + margin: 3rem auto 0 auto; + } + + img { + display: block; + max-width: Min(100%, 1500px); + max-height: 80vh; + } + + figcaption { + display: table-caption; + caption-side: bottom; + margin: 1rem auto 0 auto; + font-size: var(--caption-font-size); + font-style: italic; + } +} + +// Error section + +.error-section { + max-width: var(--content-max-width); + margin: auto; + padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding); +} + +.error__title { + text-align: center; +} + +.error__message { + max-width: var(--text-max-width); + margin: auto; + text-align: center; +} + +.error__button { + margin: 1rem 0 0 0; + text-align: center; + + a { + display: inline-block; + padding: 1rem; + border-radius: 10px; + color: var(--white); + background-color: var(--jet); + text-decoration: none; + font-weight: var(--semi-bold-font-weight); + -webkit-transition: background-color 200ms ease-in-out; + -o-transition: background-color 200ms ease-in-out; + transition: background-color 200ms ease-in-out; + + &:hover, + &:focus, + &:active { + background-color: var(--black); + } + } +} + +// =========================================================================== +// FOOTER +// =========================================================================== + +// Footer bar + +.footer-bar { + max-width: var(--content-max-width); + height: var(--footer-bar-height); + margin: auto; + padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.footer-bar__social { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + + a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: var(--icon-size); + height: var(--icon-size); + + + a { + margin: 0 0 0 1rem; + } + + svg { + fill: var(--jet); + width: 100%; + height: 100%; + -webkit-transition: fill 200ms ease-in-out; + -o-transition: fill 200ms ease-in-out; + transition: fill 200ms ease-in-out; + } + + &:hover, + &:focus, + &:active { + + svg { + fill: var(--black); + } + } + } } .footer-bar__copyright { - font-size: var(--small-text-font-size); - margin: 1rem 0 0 0; + font-size: var(--footnote-font-size); + margin: 1rem 0 0 0; } @media screen and (min-width: $tablet-media-query) { - .footer-bar { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - } + .footer-bar { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } - .footer-bar__social { - order: 2; - } + .footer-bar__social { + order: 2; + } - .footer-bar__copyright { - order: 1; - margin: 0; - } + .footer-bar__copyright { + order: 1; + margin: 0; + } } diff --git a/assets/js/app.js b/assets/js/app.js index a91d74e..361ff8a 100644 --- a/assets/js/app.js +++ b/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(); }); diff --git a/content/1_galerie-1/gallery-image-exemple-01.png.txt b/content/1_galerie-1/gallery-image-exemple-01.png.txt index c4cc510..8665183 100644 --- a/content/1_galerie-1/gallery-image-exemple-01.png.txt +++ b/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. ---- diff --git a/content/1_galerie-1/gallery-image-exemple-02.png.txt b/content/1_galerie-1/gallery-image-exemple-02.png.txt index 1fc5b15..90a7927 100644 --- a/content/1_galerie-1/gallery-image-exemple-02.png.txt +++ b/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. ---- diff --git a/content/1_galerie-1/gallery.txt b/content/1_galerie-1/gallery.txt index 4cde5f0..d400cc4 100644 --- a/content/1_galerie-1/gallery.txt +++ b/content/1_galerie-1/gallery.txt @@ -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 \ No newline at end of file diff --git a/content/a-propos/about.txt b/content/a-propos/about.txt index 4322679..bf88996 100644 --- a/content/a-propos/about.txt +++ b/content/a-propos/about.txt @@ -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 \ No newline at end of file diff --git a/content/accueil/home.txt b/content/accueil/home.txt index 735e542..5712b05 100644 --- a/content/accueil/home.txt +++ b/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 ---- diff --git a/content/site.txt b/content/site.txt index 5b78cc3..7817a40 100644 --- a/content/site.txt +++ b/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 ---- diff --git a/site/blueprints/files/artwork.yml b/site/blueprints/files/artwork.yml index da48074..21471af 100644 --- a/site/blueprints/files/artwork.yml +++ b/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: - 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 diff --git a/site/blueprints/files/favicon.yml b/site/blueprints/files/favicon.yml index fd942e7..a5fe0a5 100644 --- a/site/blueprints/files/favicon.yml +++ b/site/blueprints/files/favicon.yml @@ -1,3 +1,3 @@ title: Favicon accept: - mime: image/png + mime: image/png diff --git a/site/blueprints/files/image.yml b/site/blueprints/files/image.yml index 5cd9efa..d6e5d12 100644 --- a/site/blueprints/files/image.yml +++ b/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: - 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 diff --git a/site/blueprints/pages/about.yml b/site/blueprints/pages/about.yml index 41948d8..fea9d8a 100644 --- a/site/blueprints/pages/about.yml +++ b/site/blueprints/pages/about.yml @@ -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 diff --git a/site/blueprints/pages/error.yml b/site/blueprints/pages/error.yml index e1fa0db..f3c8a00 100644 --- a/site/blueprints/pages/error.yml +++ b/site/blueprints/pages/error.yml @@ -1,5 +1,5 @@ title: - en: Error - fr: Erreur + en: Error + fr: Erreur options: - read: false + read: false diff --git a/site/blueprints/pages/gallery.yml b/site/blueprints/pages/gallery.yml index be45434..535d410 100644 --- a/site/blueprints/pages/gallery.yml +++ b/site/blueprints/pages/gallery.yml @@ -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 diff --git a/site/blueprints/pages/home.yml b/site/blueprints/pages/home.yml index 4a8b454..0ce84aa 100644 --- a/site/blueprints/pages/home.yml +++ b/site/blueprints/pages/home.yml @@ -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 diff --git a/site/blueprints/sections/about_content_presentation.yml b/site/blueprints/sections/about_content_presentation.yml index bdf711a..98ac885 100644 --- a/site/blueprints/sections/about_content_presentation.yml +++ b/site/blueprints/sections/about_content_presentation.yml @@ -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 diff --git a/site/blueprints/sections/gallery_content_artworks.yml b/site/blueprints/sections/gallery_content_artworks.yml index 4d10707..baaab02 100644 --- a/site/blueprints/sections/gallery_content_artworks.yml +++ b/site/blueprints/sections/gallery_content_artworks.yml @@ -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 diff --git a/site/blueprints/sections/gallery_content_introduction.yml b/site/blueprints/sections/gallery_content_introduction.yml index 4c2353e..cd84330 100644 --- a/site/blueprints/sections/gallery_content_introduction.yml +++ b/site/blueprints/sections/gallery_content_introduction.yml @@ -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 + - '|' diff --git a/site/blueprints/sections/generic_seo_metadata.yml b/site/blueprints/sections/generic_seo_metadata.yml index 20fa2be..9f04eaf 100644 --- a/site/blueprints/sections/generic_seo_metadata.yml +++ b/site/blueprints/sections/generic_seo_metadata.yml @@ -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 diff --git a/site/blueprints/sections/home_content_background_image.yml b/site/blueprints/sections/home_content_background_image.yml index 035d3af..fce5978 100644 --- a/site/blueprints/sections/home_content_background_image.yml +++ b/site/blueprints/sections/home_content_background_image.yml @@ -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 diff --git a/site/blueprints/sections/site_content_galleries.yml b/site/blueprints/sections/site_content_galleries.yml index 8753916..8815370 100644 --- a/site/blueprints/sections/site_content_galleries.yml +++ b/site/blueprints/sections/site_content_galleries.yml @@ -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 diff --git a/site/blueprints/sections/site_content_pages.yml b/site/blueprints/sections/site_content_pages.yml index 44851e8..632b5dc 100644 --- a/site/blueprints/sections/site_content_pages.yml +++ b/site/blueprints/sections/site_content_pages.yml @@ -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 diff --git a/site/blueprints/sections/site_informations_contact.yml b/site/blueprints/sections/site_informations_contact.yml index 6ec801f..414232b 100644 --- a/site/blueprints/sections/site_informations_contact.yml +++ b/site/blueprints/sections/site_informations_contact.yml @@ -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 diff --git a/site/blueprints/sections/site_informations_favicon.yml b/site/blueprints/sections/site_informations_favicon.yml index b715b2e..341374e 100644 --- a/site/blueprints/sections/site_informations_favicon.yml +++ b/site/blueprints/sections/site_informations_favicon.yml @@ -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 diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml index 7812bc9..c2fa932 100644 --- a/site/blueprints/site.yml +++ b/site/blueprints/site.yml @@ -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 diff --git a/site/blueprints/tabs/about_content.yml b/site/blueprints/tabs/about_content.yml index cb6fcee..0c5928d 100644 --- a/site/blueprints/tabs/about_content.yml +++ b/site/blueprints/tabs/about_content.yml @@ -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 diff --git a/site/blueprints/tabs/about_seo.yml b/site/blueprints/tabs/about_seo.yml index 9b1301b..4c5afb9 100644 --- a/site/blueprints/tabs/about_seo.yml +++ b/site/blueprints/tabs/about_seo.yml @@ -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 diff --git a/site/blueprints/tabs/gallery_content.yml b/site/blueprints/tabs/gallery_content.yml index 56d8370..0dd4d7a 100644 --- a/site/blueprints/tabs/gallery_content.yml +++ b/site/blueprints/tabs/gallery_content.yml @@ -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 diff --git a/site/blueprints/tabs/gallery_seo.yml b/site/blueprints/tabs/gallery_seo.yml index 9b1301b..4c5afb9 100644 --- a/site/blueprints/tabs/gallery_seo.yml +++ b/site/blueprints/tabs/gallery_seo.yml @@ -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 diff --git a/site/blueprints/tabs/home_content.yml b/site/blueprints/tabs/home_content.yml index c4cc63d..3cf917c 100644 --- a/site/blueprints/tabs/home_content.yml +++ b/site/blueprints/tabs/home_content.yml @@ -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 diff --git a/site/blueprints/tabs/home_seo.yml b/site/blueprints/tabs/home_seo.yml index 9b1301b..4c5afb9 100644 --- a/site/blueprints/tabs/home_seo.yml +++ b/site/blueprints/tabs/home_seo.yml @@ -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 diff --git a/site/blueprints/tabs/site_analytics.yml b/site/blueprints/tabs/site_analytics.yml index c7fbf17..9c6d80c 100644 --- a/site/blueprints/tabs/site_analytics.yml +++ b/site/blueprints/tabs/site_analytics.yml @@ -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 diff --git a/site/blueprints/tabs/site_content.yml b/site/blueprints/tabs/site_content.yml index 796b3bc..88d36f8 100644 --- a/site/blueprints/tabs/site_content.yml +++ b/site/blueprints/tabs/site_content.yml @@ -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 diff --git a/site/blueprints/tabs/site_informations.yml b/site/blueprints/tabs/site_informations.yml index 1e16198..5d8d8a0 100644 --- a/site/blueprints/tabs/site_informations.yml +++ b/site/blueprints/tabs/site_informations.yml @@ -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 diff --git a/site/blueprints/users/admin.yml b/site/blueprints/users/admin.yml index 67f4b9f..729e227 100644 --- a/site/blueprints/users/admin.yml +++ b/site/blueprints/users/admin.yml @@ -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) diff --git a/site/blueprints/users/editor.yml b/site/blueprints/users/editor.yml index 91802cc..867b658 100644 --- a/site/blueprints/users/editor.yml +++ b/site/blueprints/users/editor.yml @@ -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 diff --git a/site/config/config.php b/site/config/config.php index 42862f4..8e005df 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -45,7 +45,7 @@ return [ } } ], - // Thumbs + // Thumbnails and srcsets presets 'thumbs' => [ 'srcsets' => [ 'default' => [500, 1000, 1500] diff --git a/site/templates/about.twig b/site/templates/about.twig new file mode 100644 index 0000000..6d2ced9 --- /dev/null +++ b/site/templates/about.twig @@ -0,0 +1,16 @@ +{% extends "base.twig" %} + +{% block main %} +
+ +
+ +
+

{{ page.title }}

+
{{ page.text.kirbytext|raw }}
+
+ +
+ +
+{% endblock %} diff --git a/site/templates/base.twig b/site/templates/base.twig index 6f882d7..082cfcc 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -11,7 +11,7 @@ {% block stylesheets %} - + {% endblock %} @@ -25,7 +25,7 @@
@@ -73,6 +73,7 @@ {% block javascripts %} + {% endblock %} diff --git a/site/templates/error.twig b/site/templates/error.twig new file mode 100644 index 0000000..8c24e3f --- /dev/null +++ b/site/templates/error.twig @@ -0,0 +1,21 @@ +{% extends "base.twig" %} + +{% block main %} +
+ +
+
+

Erreur {{ kirby.response.code }}

+ {% if kirby.response.code == 404 %} +

La page que vous demandez n'existe pas...

+ {% else %} +

Une erreur est survenue...

+ {% endif %} +
+ Retourner à la page d'accueil +
+
+
+ +
+{% endblock %} diff --git a/site/templates/gallery.twig b/site/templates/gallery.twig new file mode 100644 index 0000000..2ab0d43 --- /dev/null +++ b/site/templates/gallery.twig @@ -0,0 +1,29 @@ +{% extends "base.twig" %} + +{% block main %} +
+ +
+ +
+

{{ page.title }}

+ {% if page.text.isNotEmpty %} +
{{ page.text.kirbytext|raw }}
+ {% endif %} +
+ {% for file in page.files %} + {% if file.type == 'image' %} +
+ {{ file.alt_text }} +
{{ file.caption }}
+
+ {% elseif file.type == 'video' %} + {% endif %} + {% endfor %} +
+
+ +
+ +
+{% endblock %} diff --git a/site/templates/home.twig b/site/templates/home.twig index 93e6251..8415d50 100644 --- a/site/templates/home.twig +++ b/site/templates/home.twig @@ -2,6 +2,7 @@ {% block main %}
+
@@ -23,5 +24,6 @@
+
{% endblock %}