Customize folder setup

public/.htaccess

@@ -0,0 +1,57 @@
+# Kirby .htaccess
+# revision 2020-06-15
+
+# rewrite rules
+<IfModule mod_rewrite.c>
+
+# enable awesome urls. i.e.:
+# http://yourdomain.com/about-us/team
+RewriteEngine on
+
+# make sure to set the RewriteBase correctly
+# if you are running the site in a subfolder;
+# otherwise links or the entire site will break.
+#
+# If your homepage is http://yourdomain.com/mysite,
+# set the RewriteBase to:
+#
+# RewriteBase /mysite
+
+# In some environments it's necessary to
+# set the RewriteBase to:
+#
+# RewriteBase /
+
+# block files and folders beginning with a dot, such as .git
+# except for the .well-known folder, which is used for Let's Encrypt and security.txt
+RewriteRule (^|/)\.(?!well-known\/) index.php [L]
+
+# block all files in the content folder from being accessed directly
+RewriteRule ^content/(.*) index.php [L]
+
+# block all files in the site folder from being accessed directly
+RewriteRule ^site/(.*) index.php [L]
+
+# block direct access to Kirby and the Panel sources
+RewriteRule ^kirby/(.*) index.php [L]
+
+# make site links work
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*) index.php [L]
+
+</IfModule>
+
+# pass the Authorization header to PHP
+SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
+
+# compress text file responses
+<IfModule mod_deflate.c>
+AddOutputFilterByType DEFLATE text/plain
+AddOutputFilterByType DEFLATE text/html
+AddOutputFilterByType DEFLATE text/css
+AddOutputFilterByType DEFLATE text/javascript
+AddOutputFilterByType DEFLATE application/json
+AddOutputFilterByType DEFLATE application/javascript
+AddOutputFilterByType DEFLATE application/x-javascript
+</IfModule>

public/assets/css/panel.min.css

@@ -0,0 +1 @@
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3){display:none}.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}/*# sourceMappingURL=panel.min.css.map */

public/assets/css/panel.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["panel.scss"],"names":[],"mappings":"AAYG,oIAEC,aAUH,gDACC","file":"panel.min.css"}

public/assets/css/panel.scss

@@ -0,0 +1,28 @@
+// ----------------------------------------------------------------------------
+// KIRBY PANEL CUSTOMIZATION
+// ----------------------------------------------------------------------------
+
+// Textarea headline buttons
+
+.k-textarea-field {
+
+	.k-toolbar {
+
+		.k-dropdown {
+
+			.k-button:nth-of-type(2),
+			.k-button:nth-of-type(3) {
+				display: none;
+			}
+		}
+	}
+}
+
+// Visual image crop field properties
+
+.kirby-imagecrop-field {
+
+	.k-column:nth-of-type(2) {
+		display: none;
+	}
+}

public/assets/css/partials/_animations.scss

@@ -0,0 +1,69 @@
+// ----------------------------------------------------------------------------
+// ANIMATIONS
+// ----------------------------------------------------------------------------
+
+@-webkit-keyframes expand-outline {
+	from {
+		outline-offset: 0;
+	}
+	to {
+		outline-offset: 2px;
+	}
+}
+
+@keyframes expand-outline {
+	from {
+		outline-offset: 0;
+	}
+	to {
+		outline-offset: 2px;
+	}
+}
+
+@-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;
+	}
+}

public/assets/css/partials/_fonts.scss

@@ -0,0 +1,70 @@
+// ----------------------------------------------------------------------------
+// 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;
+}

public/assets/css/partials/_minireset.css

@@ -0,0 +1,78 @@
+/* ----------------------------------------------------------------------------
+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;
+}

public/assets/css/partials/_variables.scss

@@ -0,0 +1,91 @@
+// ----------------------------------------------------------------------------
+// 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.4rem;
+	--h1-font-size: 1.8rem;
+	--h2-font-size: 1.4rem;
+	--h3-font-size: 1.2rem;
+
+	// Dimensions
+
+	--content-max-width: 140rem;
+	--text-max-width: 70rem;
+	--icon-size: 2.5rem;
+	--header-bar-vertical-padding: 1rem;
+	--header-bar-horizontal-padding: 2rem;
+	--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-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;
+	--transparent-black: rgba(0, 0, 0, 0.8);
+	--jet: #333333;
+	--transparent-jet: rgba(51, 51, 51, 0.8);
+	--granite-gray: #666666;
+	--spanish-gray: #999999;
+	--light-gray: #cccccc;
+	--white: #fff;
+	--transparent-white: rgba(255, 255, 255, 0.8);
+
+	// Plyr (audio player)
+
+	--plyr-color-main: var(--transparent-jet);
+	--plyr-tab-focus-color: var(--white);
+}
+
+// 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.4rem;
+
+		// Dimensions
+
+		--icon-size: 3rem;
+		--header-bar-vertical-padding: 2rem;
+		--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;
+	}
+}

public/assets/css/style.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,yGAuBC,SACA,UAGD,kBAMC,eACA,mBAGD,GACC,gBAGD,oBAGC,SAGD,KACC,sBAGD,qBACC,mBAGD,UAEC,YACA,eAGD,OACC,SAGD,MACC,yBACA,iBAGD,MAEC,UCtED,WACC,qBACA,+DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAIC,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,yCACA,wBACA,wBACA,sBACA,cACA,8CAIA,0CACA,qCAQD,qCAEC,MAIC,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCCpFF,kCACC,KACC,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBAIF,2BACC,GACC,MAED,IACC,YAED,KACC,OAIF,mBACC,GACC,MAED,IACC,YAED,KACC,OAIF,6BACC,GACC,SAED,IACC,eAED,KACC,UAIF,qBACC,GACC,SAED,IACC,eAED,KACC,UCvDF,KACC,oCACA,gCACA,kCACA,iBACA,8BAGD,SAGC,mBAGD,GACC,oCACA,8BACA,gCAGD,GACC,oCACA,8BACA,gCACA,kBAGD,GACC,oCACA,8BACA,gCACA,qBAGD,EACC,mBACA,oCAGD,OACC,oCAGD,GACC,kBAKD,EACC,iBACA,0BACA,kBACA,2CACA,sCACA,mCAEA,yBAGC,mBAGD,gBACC,gCACA,mBACA,gDACA,2CAMF,KACC,iBACA,kBACA,iBACA,aACA,KACC,+DAMF,yBACC,kBAGD,OACC,iBAGD,KACC,eAGD,OACC,iBASD,YACC,WACA,gCACA,YACA,iKACA,0CACA,iDACA,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACA,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACC,kBACA,+CACA,0CACA,uCACA,8BACA,0BACA,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACC,qBAGD,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACA,mBACC,sDAED,cACC,sDAED,WACC,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGD,6DAEC,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACA,gCACA,4BAGD,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,6BACC,eACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAEA,iEAEC,wBAGD,+BACC,qBAEA,gHAGC,mBAGD,6CACC,gCAMJ,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACC,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGD,WACC,YACA,iBACA,aACA,KACC,iMAID,4BACA,wBACA,cAGD,iBACC,iBAEA,qBACC,gBACA,2BACA,iBACA,4CAMD,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAOF,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAIF,sCACC,iBACA,wBAMD,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAIF,sCACC,sBACA,qBACA,kBACC,sEAED,cACC,sEAED,UACC,sEAIF,sCACC,uBACA,uBACA,kBACC,uEAED,cACC,uEAED,UACC,uEAKH,gBACC,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACC,UACA,6CACA,wCACA,qCAIF,yBACC,UAEA,6BACC,UAIF,2BACC,yCACA,oCAGD,6BACC,2CACA,sCAKD,oCAEC,mCACA,YACA,0FAGD,kCAEC,kBAGD,gDAEC,gCACA,YAEA,gFACC,kBAKA,kHAEC,kBAIF,sDACC,oCAEA,sHAEC,kBAGD,4DACC,kBACA,mBAGD,kEACC,kBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACC,cACA,2BACA,YAEA,oCACC,wBAGD,oEAEC,cACA,gBAKA,+CACC,mBAIF,6BACC,sBACA,oBACA,wBACA,mCACA,oCAIF,qCAIE,oCACC,yBAOH,eACC,mCACA,YACA,0FAGD,cACC,kBAGD,gBACC,gCACA,YACA,kBAGD,eACC,kBACA,kBAEA,iBACC,qBACA,cACA,mBACA,mBACA,4BACA,qBACA,yCACA,+CACA,0CACA,uCAEA,sEAGC,qBAWH,YACC,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGD,oBACC,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACC,uBACA,wBACA,kBACA,4BACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,+CACA,0CACA,uCAEA,wBACC,kBAGD,0BACC,kBAID,qFAGC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACC,oCACA,kBAGD,qCAEC,YACC,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGD,oBACC,QAGD,uBACC,QACA","file":"style.min.css"}

public/assets/css/style.scss

@@ -0,0 +1,849 @@
+@use 'partials/minireset';
+@use 'partials/fonts';
+@use 'partials/variables' as *;
+@use 'partials/animations';
+
+// ----------------------------------------------------------------------------
+// GENERALITIES
+// ----------------------------------------------------------------------------
+
+// Fonts and colors
+
+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 {
+	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: 2rem 0 1rem 0;
+}
+
+p {
+	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;
+	border-radius: 2px;
+	-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);
+	}
+
+	&:focus-visible {
+		outline: 1px dashed var(--black);
+		outline-offset: 2px;
+		-webkit-animation: expand-outline 200ms ease-out;
+		animation: expand-outline 200ms ease-in-out;
+	}
+}
+
+// General grid layout
+
+body {
+	min-height: 100vh;
+	overflow-x: hidden;
+	display: -ms-grid;
+	display: grid;
+	grid:
+		'header' var(--header-bar-height)
+		'main' 1fr
+		'footer' auto
+		/ 1fr;
+}
+
+.body--hidden-overflow-y {
+	overflow-y: hidden;
+}
+
+header {
+	grid-area: header;
+}
+
+main {
+	grid-area: main;
+}
+
+footer {
+	grid-area: footer;
+}
+
+// ----------------------------------------------------------------------------
+// HEADER
+// ----------------------------------------------------------------------------
+
+// Header bar
+
+.header-bar {
+	width: 100%;
+	height: var(--header-bar-height);
+	margin: auto;
+	padding: var(--header-bar-vertical-padding) Max(var(--header-bar-horizontal-padding), calc((100vw - var(--content-max-width)) / 2 + var(--header-bar-horizontal-padding)));
+	background-color: var(--transparent-white);
+	border-bottom: 1px solid var(--transparent-white);
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	z-index: 1;
+	-webkit-transition:
+		height 400ms ease-in-out,
+		border-bottom 400ms ease-in-out;
+	-o-transition:
+		height 400ms ease-in-out,
+		border-bottom 400ms ease-in-out;
+	transition:
+		height 400ms ease-in-out,
+		border-bottom 400ms ease-in-out;
+
+	&--fixed {
+		position: fixed;
+		--header-bar-vertical-padding: 0.5rem;
+		--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
+		top: calc(-1 * var(--header-bar-height));
+		border-bottom: 1px solid var(--light-gray);
+		-webkit-transition: transform 400ms ease-in-out;
+		-o-transition: transform 400ms ease-in-out;
+		transition: transform 400ms ease-in-out;
+	}
+
+	&--visible {
+		-webkit-transform: translateY(var(--header-bar-height));
+		-ms-transform: translateY(var(--header-bar-height));
+		transform: translateY(var(--header-bar-height));
+	}
+}
+
+.header-bar__logo {
+	width: max-content;
+	-webkit-transition: transform 400ms ease-in-out;
+	-o-transition: transform 400ms ease-in-out;
+	transition: transform 400ms ease-in-out;
+	-webkit-transform-origin: left;
+	-ms-transform-origin: left;
+	transform-origin: left;
+
+	&--small {
+		-webkit-transform: scale(0.8);
+		-ms-transform: scale(0.8);
+		transform: scale(0.8);
+	}
+}
+
+.header-bar__logo-link {
+	text-decoration: none;
+}
+
+.header-bar__nav {
+	position: relative;
+	z-index: 2;
+}
+
+.header-bar__nav-button {
+	position: relative;
+	z-index: 3;
+	width: var(--icon-size);
+	height: var(--icon-size);
+	padding: 0;
+	overflow: hidden;
+	border: none;
+	border-radius: 50%;
+	background-color: var(--jet);
+	cursor: pointer;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-transition:
+		transform 200ms ease-in-out,
+		background-color 400ms ease-in-out;
+	-o-transition:
+		transform 200ms ease-in-out,
+		background-color 400ms ease-in-out;
+	transition:
+		transform 200ms ease-in-out,
+		background-color 400ms ease-in-out;
+
+	svg {
+		width: 100%;
+		height: 100%;
+		padding: 10%;
+		flex-shrink: 0;
+		-webkit-transition:
+			opacity 400ms ease-in-out,
+			transform 400ms ease-in-out;
+		-o-transition:
+			opacity 400ms ease-in-out,
+			transform 400ms ease-in-out;
+		transition:
+			opacity 400ms ease-in-out,
+			transform 400ms ease-in-out;
+	}
+
+	svg:nth-child(1) {
+		fill: var(--white);
+		opacity: 1;
+	}
+
+	svg:nth-child(2) {
+		fill: var(--black);
+		opacity: 0;
+	}
+
+	&:hover,
+	&:active {
+		-webkit-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+
+	&--custom-focus {
+		background-color: var(--white);
+
+		svg {
+			-webkit-transform: translateX(-100%);
+			-ms-transform: translateX(-100%);
+			transform: translateX(-100%);
+		}
+
+		svg:nth-child(1) {
+			opacity: 0;
+		}
+
+		svg:nth-child(2) {
+			opacity: 1;
+		}
+	}
+}
+
+.header-bar__nav-menu {
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	left: 100vw;
+	min-width: 100vw;
+	max-width: 100vw;
+	height: 100vh;
+	padding: calc(var(--header-bar-height) + 4rem) Max(4rem, calc((100vw - var(--content-max-width)) / 2 + 4rem)) 4rem 4rem;
+	background-color: var(--transparent-black);
+	color: var(--white);
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-transition: transform 400ms ease-in-out;
+	-o-transition: transform 400ms ease-in-out;
+	transition: transform 400ms ease-in-out;
+
+	> li {
+
+		+ li {
+			border-top: 1px solid var(--spanish-gray);
+		}
+
+		li {
+			margin: 0 0 0 2rem;
+			border-top: 1px solid var(--granite-gray);
+		}
+
+		div {
+			padding: 1rem 0;
+			-webkit-transform: translateX(100%);
+			-ms-transform: translateX(100%);
+			transform: translateX(100%);
+			-webkit-transition: transform 400ms ease-in-out;
+			-o-transition: transform 400ms ease-in-out;
+			transition: transform 400ms ease-in-out;
+
+			a,
+			span {
+				color: var(--light-gray);
+			}
+
+			a {
+				text-decoration: none;
+
+				&:hover,
+				&:focus,
+				&:active {
+					color: var(--white);
+				}
+
+				&:focus-visible {
+					outline: 1px dashed var(--white);
+				}
+			}
+		}
+	}
+
+	.header-bar__nav-item--active {
+		list-style: disc outside;
+
+		a {
+			color: var(--white);
+		}
+	}
+
+	&--visible {
+		-webkit-transform: translateX(calc(-1 * 100%));
+		-ms-transform: translateX(calc(-1 * 100%));
+		transform: translateX(calc(-1 * 100%));
+
+		@for $i from 1 through 20 {
+			.header-bar__nav-item-#{$i} {
+
+				div {
+					-webkit-transform: translateX(0);
+					-ms-transform: translateX(0);
+					transform: translateX(0);
+					-webkit-transition: transform calc(400ms + $i * 100ms) ease-in-out;
+					-o-transition: transform calc(400ms + $i * 100ms) ease-in-out;
+					transition: transform calc(400ms + $i * 100ms) ease-in-out;
+				}
+			}
+		}
+	}
+}
+
+.header-bar__nav-overlay {
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: var(--black);
+	opacity: 0;
+	pointer-events: none;
+	will-change: opacity;
+	-webkit-transition: opacity 400ms ease-in-out;
+	-o-transition: opacity 400ms ease-in-out;
+	transition: opacity 400ms ease-in-out;
+
+	&--visible {
+		opacity: 0.2;
+		pointer-events: auto;
+		cursor: pointer;
+	}
+}
+
+@media screen and (min-width: $tablet-media-query) {
+
+	.header-bar__nav-menu {
+		min-width: 50vw;
+	}
+}
+
+@media screen and (min-width: $desktop-media-query) {
+
+	.header-bar__nav-menu {
+		min-width: 25vw;
+	}
+}
+
+// ----------------------------------------------------------------------------
+// MAIN
+// ----------------------------------------------------------------------------
+
+// Home section
+
+.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;
+
+	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-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--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-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-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-4 {
+		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-link {
+	color: var(--black);
+	font-size: var(--h3-font-size);
+	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 & biography sections
+
+.gallery-section,
+.biography-section {
+	max-width: var(--content-max-width);
+	margin: auto;
+	padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);
+}
+
+.gallery__title,
+.biography__title {
+	text-align: center;
+}
+
+.gallery__introduction,
+.biography__presentation {
+	max-width: var(--text-max-width);
+	margin: auto;
+
+	h3:nth-child(1) {
+		margin: 0 0 1rem 0;
+	}
+
+	p {
+
+		+ p,
+		+ ul {
+			margin: 1rem 0 0 0;
+		}
+	}
+
+	ul {
+		line-height: var(--text-line-height);
+
+		+ ul,
+		+ p {
+			margin: 1rem 0 0 0;
+		}
+
+		li {
+			position: relative;
+			padding: 0 0 0 1rem;
+		}
+
+		li + li {
+			margin: 1rem 0 0 0;
+		}
+
+		li:before {
+			content: '•';
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+	}
+}
+
+.gallery__artwork {
+	display: table;
+	max-width: Min(1280px, 100%);
+	margin: auto;
+
+	+ .gallery__artwork {
+		margin: 2rem auto 0 auto;
+	}
+
+	.gallery__image,
+	.gallery__video {
+		display: block;
+		max-height: 80vh;
+	}
+
+	.gallery__video {
+
+		&--full-screen {
+			max-height: initial;
+		}
+	}
+
+	figcaption {
+		display: table-caption;
+		caption-side: bottom;
+		margin: 1rem auto 0 auto;
+		font-size: var(--caption-font-size);
+		line-height: var(--text-line-height);
+	}
+}
+
+@media screen and (min-width: $tablet-media-query) {
+
+	.gallery__artwork {
+
+		+ .gallery__artwork {
+			margin: 3rem auto 0 auto;
+		}
+	}
+}
+
+// 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: 0.8rem;
+		border-radius: 10px;
+		color: var(--white);
+		background-color: var(--jet);
+		text-decoration: none;
+		font-weight: var(--semi-bold-font-weight);
+		-webkit-transition: transform 200ms ease-in-out;
+		-o-transition: transform 200ms ease-in-out;
+		transition: transform 200ms ease-in-out;
+
+		&:hover,
+		&:focus,
+		&:active {
+			transform: scale(1.1);
+		}
+	}
+}
+
+// ----------------------------------------------------------------------------
+// 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 {
+		width: var(--icon-size);
+		height: var(--icon-size);
+		border-radius: 50%;
+		background-color: var(--jet);
+		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;
+		-webkit-transition: transform 200ms ease-in-out;
+		-o-transition: transform 200ms ease-in-out;
+		transition: transform 200ms ease-in-out;
+
+		+ a {
+			margin: 0 0 0 1rem;
+		}
+
+		svg {
+			fill: var(--white);
+		}
+
+
+		&:hover,
+		&:focus,
+		&:active {
+			transform: scale(1.1);
+		}
+	}
+
+	a.footer-bar__instagram-button {
+
+		svg {
+			width: 55%;
+			height: 55%;
+		}
+	}
+
+	a.footer-bar__email-button {
+
+		svg {
+			width: 70%;
+			height: 70%;
+		}
+	}
+}
+
+.footer-bar__copyright {
+	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__social {
+		order: 2;
+	}
+
+	.footer-bar__copyright {
+		order: 1;
+		margin: 0;
+	}
+}

public/assets/favicon/xiao-wang.webmanifest

@@ -0,0 +1,16 @@
+{
+	"name": "Xiao Wang",
+	"short_name": "Xiao Wang",
+	"icons": [
+		{
+			"src": "xiao-wang-favicon-192px.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "xiao-wang-favicon-512px.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

public/assets/js/app.js

@@ -0,0 +1,368 @@
+'use strict';
+
+// ----------------------------------------------------------------------------
+// DATA
+// ----------------------------------------------------------------------------
+
+const root = document.documentElement;
+
+// HOME NAVIGATION DISPLAY //
+
+const navEl = document.querySelector('.home__nav');
+const navLinks = document.querySelectorAll('.home__nav-link');
+const navImage = document.querySelector('.home__nav-image');
+const circleTypes = [];
+
+// VIDEO PLAYERS //
+
+const galleryVideos = document.querySelectorAll('.gallery__video');
+let videoPlayers = [];
+
+// HEADER BAR ANIMATION //
+
+const headerBar = document.querySelector('.header-bar');
+const headerLogo = document.querySelector('.header-bar__logo');
+let scrollOffset = 0;
+
+// NAVIGATION MENU ANIMATION //
+
+const headerNavBtn = document.querySelector('.header-bar__nav-button');
+const headerNavMenu = document.querySelector('.header-bar__nav-menu');
+const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
+const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
+const touchPosition = {
+	initialX: null,
+	initialY: null
+};
+
+// ----------------------------------------------------------------------------
+// UTILS
+// ----------------------------------------------------------------------------
+
+// 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;
+}
+
+// ----------------------------------------------------------------------------
+// LOGIC
+// ----------------------------------------------------------------------------
+
+// HOME NAVIGATION DISPLAY //
+
+// Calculate navigation grid inner width
+function calculateNavGridInnerWidth() {
+	if (root && navImage) {
+		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);
+}
+
+// Create new instance of CircleType for each navigation link, set radius and direction
+function curveNavLinks() {
+	if (navLinks.length !== 0 && circleTypes) {
+		for (let i = 0; i < (navLinks.length - 2); i++) {
+			circleTypes[i] = new CircleType(navLinks[i]);
+			circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
+		}
+		for (let i = (navLinks.length - 2); 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');
+	}
+}
+
+// Set navigation grid display depending on number of links
+function setNavGridDisplay() {
+	if (navEl && navLinks.length !== 0) {
+		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');
+		}
+		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.length !== 0 && 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');
+	});
+}
+
+// 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');
+	});
+}
+
+// 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;
+	}
+}
+
+// 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;
+	}
+}
+
+// Add wave (up or down) animation to every letters of each link on mouseover event
+function waveNavLinksOnHover() {
+	if (navLinks.length !== 0) {
+		for (let i = 0; i < (navLinks.length - 2); i++) {
+			navLinks[i].addEventListener('mouseover', function(e) {
+				waveNavLinkUp(navLinks[i]);
+			});
+		}
+		for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
+			navLinks[i].addEventListener('mouseover', function(e) {
+				waveNavLinkDown(navLinks[i]);
+			});
+		}
+	}
+}
+
+// VIDEO PLAYERS //
+
+// Set up Plyr video players
+function setUpVideoPlayers() {
+	if (galleryVideos.length !== 0) {
+		videoPlayers = Plyr.setup(galleryVideos, {
+			controls: [
+				'play-large',
+				'play',
+				'progress',
+				'current-time',
+				'duration',
+				'mute',
+				'volume',
+				'fullscreen'
+			],
+			i18n: {
+				play: 'Lire',
+				pause: 'Mettre sur pause',
+				seek: 'Parcourir la piste audio',
+				currentTime: 'Temps écoulé depuis le début de la piste audio',
+				duration: 'Durée de la piste audio',
+				volume: 'Ajuster le volume',
+				mute: 'Couper le son',
+				unmute: 'Activer le son',
+				enterFullscreen: 'Activer le mode plein écran',
+				exitFullscreen: 'Quitter le mode plein écran'
+			}
+		});
+	}
+}
+
+// Toggle videos full screen mode on Plyr enterfullscreen and exitfullscreen media events
+function toggleVideosFullScreen() {
+	if (videoPlayers.length !== 0) {
+		for (let i = 0; i < videoPlayers.length; i++) {
+			videoPlayers[i].on('enterfullscreen', function(e) {
+				galleryVideos[i].classList.add('gallery__video--full-screen');
+			});
+			videoPlayers[i].on('exitfullscreen', function(e) {
+				galleryVideos[i].classList.remove('gallery__video--full-screen');
+			});
+		}
+	}
+}
+
+// HEADER BAR ANIMATION //
+
+// Toggle header bar depending on scroll offset
+function toggleHeaderBar() {
+	if (headerBar && headerLogo) {
+		let headerBarHeight = headerBar.getBoundingClientRect().height;
+		if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
+			headerBar.classList.add('header-bar--fixed');
+			headerLogo.classList.add('header-bar__logo--small');
+		} else if (window.pageYOffset <= 0) {
+			headerBar.classList.remove('header-bar--fixed');
+			headerLogo.classList.remove('header-bar__logo--small');
+			headerBar.classList.remove('header-bar--visible');
+		}
+		if (headerBar.classList.contains('header-bar--fixed')) {
+			if (scrollOffset < window.pageYOffset) { // Scroll down
+				headerBar.classList.remove('header-bar--visible');
+			} else if (scrollOffset > window.pageYOffset) { // Scroll up
+				headerBar.classList.add('header-bar--visible');
+			}
+			scrollOffset = window.pageYOffset;
+		}
+	}
+}
+
+// NAVIGATION MENU ANIMATION //
+
+// Toggle header navigation
+function toggleHeaderNav() {
+	if (headerNavBtn && headerNavMenu) {
+		headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
+		headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
+		headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
+		document.body.classList.toggle('body--hidden-overflow-y');
+	}
+}
+
+// Open header navigation
+function openHeaderNav() {
+	if (headerNavBtn && headerNavMenu) {
+		headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
+		headerNavMenu.classList.add('header-bar__nav-menu--visible');
+		headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
+		document.body.classList.add('body--hidden-overflow-y');
+	}
+}
+
+// Close header navigation
+function closeHeaderNav() {
+	if (headerNavBtn && headerNavMenu) {
+		headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
+		headerNavMenu.classList.remove('header-bar__nav-menu--visible');
+		headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
+		document.body.classList.remove('body--hidden-overflow-y');
+	}
+}
+
+// Toggle header navigation on button click event
+function toggleHeaderNavOnClick() {
+	headerNavBtn.addEventListener('click', toggleHeaderNav);
+}
+
+// Close header navigation on document click event
+function closeHeaderNavOnClick() {
+	document.addEventListener('click', function(e) {
+		if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
+			closeHeaderNav(e);
+			if (e.cancelable) {
+				e.preventDefault();
+			}
+		}
+	});
+}
+
+// Open header navigation on menu list focusin event
+function openHeaderNavBeforeFocus() {
+	if (headerNavMenuListEls) {
+		for (let i = 0; i < headerNavMenuListEls.length; i++) {
+			headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
+		}
+	}
+}
+
+// Close header navigation on menu list focusout event
+function closeHeaderNavAfterFocus() {
+	if (headerNavMenuListEls) {
+		for (let i = 0; i < headerNavMenuListEls.length; i++) {
+			headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
+		}
+	}
+}
+
+// Close header navigation on touchstart and touchmove events (swipe right)
+function closeHeaderNavOnSwipe() {
+	headerNavMenu.addEventListener('touchstart', function(e) {
+		if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
+			touchPosition.initialX = event.touches[0].clientX;
+			touchPosition.initialY = event.touches[0].clientY;
+		}
+	}, {passive: true});
+	headerNavMenu.addEventListener('touchmove', function(e) {
+		if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
+			touchPosition.currentX = event.touches[0].clientX;
+			touchPosition.currentY = event.touches[0].clientY;
+			touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
+			touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
+			if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
+				if (touchPosition.diffX < 0) {
+					closeHeaderNav(e);
+				}
+			}
+			touchPosition.initialX = null;
+			touchPosition.initialY = null;
+		}
+	}, {passive: true});
+}
+
+// ----------------------------------------------------------------------------
+// PROGRAM
+// ----------------------------------------------------------------------------
+
+// Enable CSS :active pseudo-class in Safari Mobile
+document.addEventListener("touchstart", function() {},false);
+
+// HOME NAVIGATION DISPLAY //
+
+window.addEventListener('load', function() {
+	curveNavLinks();
+	setNavItemTranslationProperty();
+	setNavGridDisplay();
+	editNavLinksOnResize();
+	waveNavLinksOnHover();
+});
+
+// VIDEO PLAYERS //
+
+setUpVideoPlayers();
+toggleVideosFullScreen();
+
+// HEADER BAR ANIMATION //
+
+document.addEventListener('scroll', function() {
+	toggleHeaderBar();
+});
+
+// NAVIGATION MENU ANIMATION //
+
+toggleHeaderNavOnClick();
+closeHeaderNavOnClick();
+openHeaderNavBeforeFocus();
+closeHeaderNavAfterFocus();
+closeHeaderNavOnSwipe();

public/index.php

@@ -0,0 +1,18 @@
+<?php
+
+include __DIR__ . '/../kirby/vendor/autoload.php';
+
+$kirby = new Kirby([
+    'roots' => [
+        'index'    => __DIR__,
+        'base'     => $base    = dirname(__DIR__),
+        'content'  => $base . '/content',
+        'site'     => $base . '/site',
+        'storage'  => $storage = $base . '/storage',
+        'accounts' => $storage . '/accounts',
+        'cache'    => $storage . '/cache',
+        'sessions' => $storage . '/sessions',
+    ]
+]);
+
+echo $kirby->render();

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /panel*
+
+Sitemap: https://xiaowang.fr/sitemap.xml