Add gallery, about and error pages
This commit is contained in:
Paul Nicoué
parent
fab69b64a1
commit
d272a8752b
48 changed files with 1424 additions and 1138 deletions
53
assets/css/_animations.scss
Normal file
53
assets/css/_animations.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
// main: style.scss
|
||||
|
||||
// ===========================================================================
|
||||
// ANIMATIONS
|
||||
// ===========================================================================
|
||||
|
||||
@-webkit-keyframes wave-up {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
60% {
|
||||
top: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-up {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
60% {
|
||||
top: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes wave-down {
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
60% {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-down {
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
60% {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
72
assets/css/_fonts.scss
Normal file
72
assets/css/_fonts.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
// main: style.scss
|
||||
|
||||
// ===========================================================================
|
||||
// FONTS
|
||||
// ===========================================================================
|
||||
|
||||
// Nunito
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-Italic.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-Medium.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-Bold.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Gloria Hallelujah
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gloria Hallelujah';
|
||||
src: url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
80
assets/css/_minireset.css
Normal file
80
assets/css/_minireset.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/* main: style.scss */
|
||||
|
||||
/* ===========================================================================
|
||||
MINIRESET V0.0.6
|
||||
=========================================================================== */
|
||||
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
83
assets/css/_variables.scss
Normal file
83
assets/css/_variables.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
// main: style.scss
|
||||
|
||||
// ===========================================================================
|
||||
// VARIABLES
|
||||
// ===========================================================================
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-family: 'Nunito', Verdana, sans-serif;
|
||||
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--text-font-size: 1rem;
|
||||
--caption-font-size: 0.9rem;
|
||||
--footnote-font-size: 0.8rem;
|
||||
--text-line-height: 1.6rem;
|
||||
--h1-font-size: 1.8rem;
|
||||
--h2-font-size: 1.4rem;
|
||||
--h3-font-size: 1.4rem;
|
||||
--h4-font-size: 1.2rem;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--content-max-width: 140rem;
|
||||
--text-max-width: 70rem;
|
||||
--icon-size: 2.5rem;
|
||||
--header-bar-vertical-padding: 2rem;
|
||||
--header-bar-horizontal-padding: 2rem;
|
||||
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));
|
||||
--footer-bar-vertical-padding: 1rem;
|
||||
--footer-bar-horizontal-padding: 2rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
|
||||
--generic-section-vertical-padding: 3rem;
|
||||
--generic-section-horizontal-padding: 2rem;
|
||||
--home-section-vertical-padding: 2rem;
|
||||
--home-section-horizontal-padding: 2rem;
|
||||
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
|
||||
--home-nav-gap: 1rem;
|
||||
--home-nav-item-size: 2rem;
|
||||
--home-nav-item-translation: 0;
|
||||
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
|
||||
|
||||
// Colors
|
||||
|
||||
--black: #000;
|
||||
--jet: #333333;
|
||||
--white: #fff;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
||||
$tablet-media-query: 48rem;
|
||||
$desktop-media-query: 62rem;
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 1.6rem;
|
||||
--h3-font-size: 1.6rem;
|
||||
--h4-font-size: 1.4rem;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--icon-size: 3rem;
|
||||
--header-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-vertical-padding: 2rem;
|
||||
--footer-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--generic-section-horizontal-padding: 4rem;
|
||||
--home-section-horizontal-padding: 4rem;
|
||||
}
|
||||
}
|
||||
1
assets/css/minireset.min.css
vendored
1
assets/css/minireset.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
|
||||
2
assets/css/style.min.css
vendored
2
assets/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
@ -219,16 +22,16 @@ h4 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--title-font-family);
|
||||
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-family: var(-text-font-family);
|
||||
font-size: var(--h2-font-size);
|
||||
line-height: var(--h2-font-size);
|
||||
margin: 2rem 0 0 0;
|
||||
margin: 0 0 4rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -247,6 +50,15 @@ h4 {
|
|||
|
||||
p {
|
||||
text-align: justify;
|
||||
line-height: var(--text-line-height);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-font-weight);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Link style
|
||||
|
|
@ -323,7 +135,7 @@ footer {
|
|||
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);
|
||||
padding: var(--home-section-vertical-padding) var(--home-section-horizontal-padding);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -354,6 +166,7 @@ footer {
|
|||
|
||||
img {
|
||||
min-width: 12rem;
|
||||
max-width: Min(100%, 2500px);
|
||||
min-height: 12rem;
|
||||
max-height: var(--home-nav-image-max-height);
|
||||
}
|
||||
|
|
@ -715,15 +528,15 @@ footer {
|
|||
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;
|
||||
-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 1s ease-in-out;
|
||||
-o-transition: opacity 1s ease-in-out;
|
||||
transition: opacity 1s ease-in-out;
|
||||
-webkit-transition: opacity 600ms ease-in-out;
|
||||
-o-transition: opacity 600ms ease-in-out;
|
||||
transition: opacity 600ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -745,6 +558,117 @@ footer {
|
|||
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
|
||||
// ===========================================================================
|
||||
|
|
@ -789,6 +713,10 @@ footer {
|
|||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
|
||||
+ a {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--jet);
|
||||
width: 100%;
|
||||
|
|
@ -807,14 +735,10 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
a + a {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar__copyright {
|
||||
font-size: var(--small-text-font-size);
|
||||
font-size: var(--footnote-font-size);
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ Alt-text:
|
|||
|
||||
----
|
||||
|
||||
Caption:
|
||||
Caption: Voici la légende de la premère image.
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ Alt-text:
|
|||
|
||||
----
|
||||
|
||||
Caption:
|
||||
Caption: Voilà la légende de la deuxième image.
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ Meta-description: Site internet de l'artiste Xiao Wang.
|
|||
|
||||
Meta-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
Og-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Og-type: website
|
|||
|
||||
Twitter-image:
|
||||
|
||||
- background-image-exemple-3000x1333px.png
|
||||
- xiao-wang-accueil.png
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ Meta-author: Xiao Wang
|
|||
|
||||
----
|
||||
|
||||
Og-image:
|
||||
Og-image: - background-image-exemple-3000x1333px.png
|
||||
|
||||
----
|
||||
|
||||
Twitter-image:
|
||||
Twitter-image: - background-image-exemple-3000x1333px.png
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
|
@ -6,3 +6,12 @@ fields:
|
|||
fr: Texte d'introduction
|
||||
type: textarea
|
||||
size: medium
|
||||
buttons:
|
||||
- bold
|
||||
- italic
|
||||
- '|'
|
||||
- link
|
||||
- email
|
||||
- '|'
|
||||
- ul
|
||||
- '|'
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ fields:
|
|||
layout: cardlets
|
||||
image:
|
||||
cover: true
|
||||
back: white
|
||||
multiple: false
|
||||
# required: true
|
||||
help:
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
title:
|
||||
en: Administrator
|
||||
fr: Administrateur·ice
|
||||
|
||||
description:
|
||||
en: The Administrator has all rights
|
||||
fr: L'Administrateur·ice dispose de tous les droits
|
||||
|
||||
sections:
|
||||
info:
|
||||
headline:
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
title:
|
||||
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
|
||||
|
||||
permissions:
|
||||
access:
|
||||
settings: false
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ return [
|
|||
}
|
||||
}
|
||||
],
|
||||
// Thumbs
|
||||
// Thumbnails and srcsets presets
|
||||
'thumbs' => [
|
||||
'srcsets' => [
|
||||
'default' => [500, 1000, 1500]
|
||||
|
|
|
|||
16
site/templates/about.twig
Normal file
16
site/templates/about.twig
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="about-section">
|
||||
|
||||
<article class="about">
|
||||
<h2 class="about__title">{{ page.title }}</h2>
|
||||
<div class="about__presentation">{{ page.text.kirbytext|raw }}</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="icon" type="image/png" href="{{ site.favicon }}" />
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/minireset.min.css') }}"/>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}"/>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div class="header-bar">
|
||||
|
||||
<div class="header-bar__logo" aria-hidden="true">
|
||||
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
|
||||
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}">
|
||||
<h1 class="header-bar__logo-title">{{ site.title }}</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -73,6 +73,7 @@
|
|||
|
||||
{% block javascripts %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
21
site/templates/error.twig
Normal file
21
site/templates/error.twig
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="error-section">
|
||||
<article class="error">
|
||||
<h2 class="error__title">Erreur {{ kirby.response.code }}</h2>
|
||||
{% if kirby.response.code == 404 %}
|
||||
<p class="error__message">La page que vous demandez n'existe pas...</p>
|
||||
{% else %}
|
||||
<p class="error__message">Une erreur est survenue...</p>
|
||||
{% endif %}
|
||||
<div class="error__button">
|
||||
<a href="{{ site.homePage.url }}" target="_self">Retourner à la page d'accueil</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
29
site/templates/gallery.twig
Normal file
29
site/templates/gallery.twig
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="gallery-section">
|
||||
|
||||
<article class="gallery">
|
||||
<h2 class="gallery__title">{{ page.title }}</h2>
|
||||
{% if page.text.isNotEmpty %}
|
||||
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
|
||||
{% endif %}
|
||||
<div class="gallery__artworks">
|
||||
{% for file in page.files %}
|
||||
{% if file.type == 'image' %}
|
||||
<figure class="gallery__image">
|
||||
<img src="{{ file.url }}" srcset="{{ file.srcset() }}" alt="{{ file.alt_text }}">
|
||||
<figcaption>{{ file.caption }}</figcaption>
|
||||
</figure>
|
||||
{% elseif file.type == 'video' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="home-section">
|
||||
|
||||
<div class="home">
|
||||
|
|
@ -23,5 +24,6 @@
|
|||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue