host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add gallery, about and error pages

Browse source
This commit is contained in:
Paul Nicoué 2022-04-15 16:45:38 +02:00
parent fab69b64a1
commit d272a8752b
48 changed files with 1424 additions and 1138 deletions
Download patch file Download diff file Expand all files Collapse all files

53
assets/css/_animations.scss Normal file
View file

@ -0,0 +1,53 @@
// main: style.scss
// ===========================================================================
// ANIMATIONS
// ===========================================================================
@-webkit-keyframes wave-up {
0% {
top: 0;
}
60% {
top: -0.5rem;
}
100% {
top: 0;
}
}
@keyframes wave-up {
0% {
top: 0;
}
60% {
top: -0.5rem;
}
100% {
top: 0;
}
}
@-webkit-keyframes wave-down {
0% {
bottom: 0;
}
60% {
bottom: -0.5rem;
}
100% {
bottom: 0;
}
}
@keyframes wave-down {
0% {
bottom: 0;
}
60% {
bottom: -0.5rem;
}
100% {
bottom: 0;
}
}

72
assets/css/_fonts.scss Normal file
View file

@ -0,0 +1,72 @@
// main: style.scss
// ===========================================================================
// FONTS
// ===========================================================================
// Nunito
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-Italic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}
// Gloria Hallelujah
@font-face {
font-family: 'Gloria Hallelujah';
src: url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}

80
assets/css/_minireset.css Normal file
View file

@ -0,0 +1,80 @@
/* main: style.scss */
/* ===========================================================================
MINIRESET V0.0.6
=========================================================================== */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

83
assets/css/_variables.scss Normal file
View file

@ -0,0 +1,83 @@
// main: style.scss
// ===========================================================================
// VARIABLES
// ===========================================================================
:root {
// Fonts
--text-font-family: 'Nunito', Verdana, sans-serif;
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 1rem;
--caption-font-size: 0.9rem;
--footnote-font-size: 0.8rem;
--text-line-height: 1.6rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.4rem;
--h4-font-size: 1.2rem;
// Dimensions
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));
--footer-bar-vertical-padding: 1rem;
--footer-bar-horizontal-padding: 2rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
--generic-section-vertical-padding: 3rem;
--generic-section-horizontal-padding: 2rem;
--home-section-vertical-padding: 2rem;
--home-section-horizontal-padding: 2rem;
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
--home-nav-gap: 1rem;
--home-nav-item-size: 2rem;
--home-nav-item-translation: 0;
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
// Colors
--black: #000;
--jet: #333333;
--white: #fff;
}
// Media queries
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Fonts
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
--h1-font-size: 2rem;
--h2-font-size: 1.6rem;
--h3-font-size: 1.6rem;
--h4-font-size: 1.4rem;
// Dimensions
--icon-size: 3rem;
--header-bar-horizontal-padding: 4rem;
--footer-bar-vertical-padding: 2rem;
--footer-bar-horizontal-padding: 4rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
--generic-section-horizontal-padding: 4rem;
--home-section-horizontal-padding: 4rem;
}
}

1
assets/css/minireset.min.css vendored
View file

@ -1 +0,0 @@
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

2
assets/css/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

350
assets/css/style.scss
View file

@ -1,201 +1,4 @@
// =========================================================================== @import 'minireset', 'fonts', 'variables', 'animations';
// 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;
}
}
// =========================================================================== // ===========================================================================
// GENERALITIES // GENERALITIES
@ -219,16 +22,16 @@ h4 {
} }
h1 { h1 {
font-family: var(--title-font-family); font-family: var(--logo-font-family);
font-size: var(--h1-font-size); font-size: var(--h1-font-size);
line-height: var(--h1-font-size); line-height: var(--h1-font-size);
} }
h2 { h2 {
font-family: var(--title-font-family); font-family: var(-text-font-family);
font-size: var(--h2-font-size); font-size: var(--h2-font-size);
line-height: var(--h2-font-size); line-height: var(--h2-font-size);
margin: 2rem 0 0 0; margin: 0 0 4rem 0;
} }
h3 { h3 {
@ -247,6 +50,15 @@ h4 {
p { 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 // Link style
@ -323,7 +135,7 @@ footer {
max-width: var(--content-max-width); max-width: var(--content-max-width);
min-height: var(--home-section-min-height); min-height: var(--home-section-min-height);
margin: auto; 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: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -354,6 +166,7 @@ footer {
img { img {
min-width: 12rem; min-width: 12rem;
max-width: Min(100%, 2500px);
min-height: 12rem; min-height: 12rem;
max-height: var(--home-nav-image-max-height); max-height: var(--home-nav-image-max-height);
} }
@ -715,15 +528,15 @@ footer {
color: var(--black); color: var(--black);
text-decoration: none; text-decoration: none;
opacity: 0; opacity: 0;
-webkit-transition: opacity 1s ease-in-out; -webkit-transition: opacity 600ms ease-in-out;
-o-transition: opacity 1s ease-in-out; -o-transition: opacity 600ms ease-in-out;
transition: opacity 1s ease-in-out; transition: opacity 600ms ease-in-out;
div { div {
opacity: 0; opacity: 0;
-webkit-transition: opacity 1s ease-in-out; -webkit-transition: opacity 600ms ease-in-out;
-o-transition: opacity 1s ease-in-out; -o-transition: opacity 600ms ease-in-out;
transition: opacity 1s ease-in-out; transition: opacity 600ms ease-in-out;
} }
} }
@ -745,6 +558,117 @@ footer {
animation: wave-down 600ms ease-in-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
// =========================================================================== // ===========================================================================
@ -789,6 +713,10 @@ footer {
width: var(--icon-size); width: var(--icon-size);
height: var(--icon-size); height: var(--icon-size);
+ a {
margin: 0 0 0 1rem;
}
svg { svg {
fill: var(--jet); fill: var(--jet);
width: 100%; width: 100%;
@ -807,14 +735,10 @@ footer {
} }
} }
} }
a + a {
margin: 0 0 0 1rem;
}
} }
.footer-bar__copyright { .footer-bar__copyright {
font-size: var(--small-text-font-size); font-size: var(--footnote-font-size);
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
} }

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

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

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

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

6
content/accueil/home.txt
View file

@ -8,13 +8,13 @@ Meta-description: Site internet de l'artiste Xiao Wang.
Meta-image: Meta-image:
- background-image-exemple-3000x1333px.png - xiao-wang-accueil.png
---- ----
Og-image: Og-image:
- background-image-exemple-3000x1333px.png - xiao-wang-accueil.png
---- ----
@ -24,7 +24,7 @@ Og-type: website
Twitter-image: Twitter-image:
- background-image-exemple-3000x1333px.png - xiao-wang-accueil.png
---- ----

4
content/site.txt
View file

@ -22,11 +22,11 @@ Meta-author: Xiao Wang
---- ----
Og-image: Og-image: - background-image-exemple-3000x1333px.png
---- ----
Twitter-image: Twitter-image: - background-image-exemple-3000x1333px.png
---- ----

9
site/blueprints/sections/gallery_content_introduction.yml
View file

@ -6,3 +6,12 @@ fields:
fr: Texte d'introduction fr: Texte d'introduction
type: textarea type: textarea
size: medium size: medium
buttons:
- bold
- italic
- '|'
- link
- email
- '|'
- ul
- '|'

1
site/blueprints/sections/generic_seo_metadata.yml
View file

@ -19,6 +19,7 @@ fields:
layout: cardlets layout: cardlets
image: image:
cover: true cover: true
back: white
multiple: false multiple: false
# required: true # required: true
help: help:

2
site/blueprints/users/admin.yml
View file

@ -1,11 +1,9 @@
title: title:
en: Administrator en: Administrator
fr: Administrateur·ice fr: Administrateur·ice
description: description:
en: The Administrator has all rights en: The Administrator has all rights
fr: L'Administrateur·ice dispose de tous les droits fr: L'Administrateur·ice dispose de tous les droits
sections: sections:
info: info:
headline: headline:

2
site/blueprints/users/editor.yml
View file

@ -1,11 +1,9 @@
title: title:
en: Editor en: Editor
fr: Éditeur·ice fr: Éditeur·ice
description: description:
en: The Editor can create and edit pages en: The Editor can create and edit pages
fr: L'éditeur·ice peut créer et modifier des pages fr: L'éditeur·ice peut créer et modifier des pages
permissions: permissions:
access: access:
settings: false settings: false

2
site/config/config.php
View file

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

16
site/templates/about.twig Normal file
View file

@ -0,0 +1,16 @@
{% extends "base.twig" %}
{% block main %}
<main>
<section class="about-section">
<article class="about">
<h2 class="about__title">{{ page.title }}</h2>
<div class="about__presentation">{{ page.text.kirbytext|raw }}</div>
</article>
</section>
</main>
{% endblock %}

5
site/templates/base.twig
View file

@ -11,7 +11,7 @@
<link rel="icon" type="image/png" href="{{ site.favicon }}" /> <link rel="icon" type="image/png" href="{{ site.favicon }}" />
{% block stylesheets %} {% 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') }}"/> <link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}"/>
{% endblock %} {% endblock %}
@ -25,7 +25,7 @@
<div class="header-bar"> <div class="header-bar">
<div class="header-bar__logo" aria-hidden="true"> <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> <h1 class="header-bar__logo-title">{{ site.title }}</h1>
</a> </a>
</div> </div>
@ -73,6 +73,7 @@
{% block javascripts %} {% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script> <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> <script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %} {% endblock %}

21
site/templates/error.twig Normal file
View file

@ -0,0 +1,21 @@
{% extends "base.twig" %}
{% block main %}
<main>
<section class="error-section">
<article class="error">
<h2 class="error__title">Erreur {{ kirby.response.code }}</h2>
{% if kirby.response.code == 404 %}
<p class="error__message">La page que vous demandez n'existe pas...</p>
{% else %}
<p class="error__message">Une erreur est survenue...</p>
{% endif %}
<div class="error__button">
<a href="{{ site.homePage.url }}" target="_self">Retourner à la page d'accueil</a>
</div>
</article>
</section>
</main>
{% endblock %}

29
site/templates/gallery.twig Normal file
View file

@ -0,0 +1,29 @@
{% extends "base.twig" %}
{% block main %}
<main>
<section class="gallery-section">
<article class="gallery">
<h2 class="gallery__title">{{ page.title }}</h2>
{% if page.text.isNotEmpty %}
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
{% endif %}
<div class="gallery__artworks">
{% for file in page.files %}
{% if file.type == 'image' %}
<figure class="gallery__image">
<img src="{{ file.url }}" srcset="{{ file.srcset() }}" alt="{{ file.alt_text }}">
<figcaption>{{ file.caption }}</figcaption>
</figure>
{% elseif file.type == 'video' %}
{% endif %}
{% endfor %}
</div>
</article>
</section>
</main>
{% endblock %}

2
site/templates/home.twig
View file

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