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

Edit HTML structure

Browse source
This commit is contained in:
Paul Nicoué 2022-11-23 14:55:44 +01:00
parent 5e4b34ee0d
commit 07bc24cd7b
8 changed files with 4671 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

65
assets/css/main.scss
View file

@ -80,27 +80,28 @@ body {
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// HEADER // MAIN
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Sidebar // Home section
.sidebar { .home-section {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
min-height: 100vh;
padding: var(--sidebar-padding); padding: var(--sidebar-padding);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
background-color: transparent; background-color: transparent;
}
.sidebar__nav { .navigation {
max-width: 100%; max-width: 100%;
}
&__link {
.sidebar__nav-link {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
@ -117,23 +118,23 @@ body {
} }
} }
} }
}
.sidebar__social { .social {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0.8rem 0 0 0; margin: 0.8rem 0 0 0;
}
&__link {
.sidebar__social-link {
width: var(--icon-size); width: var(--icon-size);
height: var(--icon-size); height: var(--icon-size);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
+ .sidebar__social-link { + .social__link {
margin: 0 0 0 0.8rem; margin: 0 0 0 0.8rem;
} }
@ -153,34 +154,32 @@ body {
@media screen and (min-width: $desktop-media-query) { @media screen and (min-width: $desktop-media-query) {
.sidebar { .home-section {
position: fixed; position: fixed;
overflow-y: auto; overflow-y: auto;
top: 0; top: 0;
bottom: 0;
left: 0; left: 0;
}
.sidebar__social { .social {
width: auto; width: auto;
justify-content: flex-start; justify-content: flex-start;
}
} }
} }
// ----------------------------------------------------------------------------
// MAIN
// ----------------------------------------------------------------------------
// Slider section // Slider section
.slider-section { .slider-section {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; left: 0;
} }
.splide__image { .splide {
width: 100%;
height: 100%; &__image {
object-fit: cover; width: 100%;
height: 100%;
object-fit: cover;
}
} }

64
assets/js/app.js
View file

@ -11,12 +11,12 @@ const body = document.body;
// SPLIDE SLIDER // SPLIDE SLIDER
const slider = document.querySelector('.slider-section'); const sliderSection = document.querySelector('.slider-section');
let splideSlider; let slider;
const slides = document.querySelectorAll('.splide__slide'); const slides = document.querySelectorAll('.splide__slide');
const sidebar = document.querySelector('.sidebar'); const homeSection = document.querySelector('.home-section');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link'); const navLinks = document.querySelectorAll('.navigation__link');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link'); const socialLinks = document.querySelectorAll('.social__link');
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// LOGIC // LOGIC
@ -38,8 +38,8 @@ function convertRemToPixels(rem) {
// SPLIDE SLIDER // SPLIDE SLIDER
function setUpSlider() { function setUpSlider() {
if (slider) { if (sliderSection) {
splideSlider = new Splide('.splide', { slider = new Splide('.splide', {
type: 'fade', type: 'fade',
rewind: true, rewind: true,
rewindByDrag: true, rewindByDrag: true,
@ -55,55 +55,55 @@ function setUpSlider() {
} }
function mountSlider() { function mountSlider() {
if (splideSlider) { if (slider) {
splideSlider.mount(); slider.mount();
} }
} }
function goToNextSlideOnClick() { function goToNextSlideOnClick() {
if (sidebar && splideSlider) { if (homeSection && slider) {
sidebar.addEventListener('click', function(e) { homeSection.addEventListener('click', function(e) {
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) { if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
splideSlider.go('>'); slider.go('>');
} }
}); });
} }
} }
function changeSlideOnSwipe() { function changeSlideOnSwipe() {
if (sidebar && splideSlider) { if (homeSection && slider) {
sidebar.addEventListener('swiped', function(e) { homeSection.addEventListener('swiped', function(e) {
if (e.detail.dir === 'right') { if (e.detail.dir === 'right') {
splideSlider.go('>'); slider.go('>');
} else if (e.detail.dir === 'left') { } else if (e.detail.dir === 'left') {
splideSlider.go('<'); slider.go('<');
} }
}); });
} }
} }
function turnSidebarLinksToWhite() { function turnSidebarLinksToWhite() {
if (sidebarNavLinks) { if (navLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) { for (let i = 0; i < navLinks.length; i++) {
sidebarNavLinks[i].classList.add('sidebar__nav-link--white'); navLinks[i].classList.add('navigation__link--white');
} }
} }
if (sidebarSocialLinks) { if (socialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) { for (let i = 0; i < socialLinks.length; i++) {
sidebarSocialLinks[i].classList.add('sidebar__social-link--white'); socialLinks[i].classList.add('social__link--white');
} }
} }
} }
function turnSidebarLinksToBlack() { function turnSidebarLinksToBlack() {
if (sidebarNavLinks) { if (navLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) { for (let i = 0; i < navLinks.length; i++) {
sidebarNavLinks[i].classList.remove('sidebar__nav-link--white'); navLinks[i].classList.remove('navigation__link--white');
} }
} }
if (sidebarSocialLinks) { if (socialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) { for (let i = 0; i < socialLinks.length; i++) {
sidebarSocialLinks[i].classList.remove('sidebar__social-link--white'); socialLinks[i].classList.remove('social__link--white');
} }
} }
} }
@ -119,16 +119,16 @@ function editNavLinksColor(slide) {
} }
function editNavLinksColorOnSliderMounted() { function editNavLinksColorOnSliderMounted() {
if (splideSlider && slides) { if (slider && slides) {
splideSlider.on('mounted', function() { slider.on('mounted', function() {
editNavLinksColor(slides[0]); editNavLinksColor(slides[0]);
}) })
} }
} }
function editNavLinksColorOnSlideActive() { function editNavLinksColorOnSlideActive() {
if (splideSlider) { if (slider) {
splideSlider.on('active', function(e) { slider.on('active', function(e) {
editNavLinksColor(e.slide); editNavLinksColor(e.slide);
}); });
} }

4173
public/build/app.js
View file

File diff suppressed because one or more lines are too long

15
public/build/app.js.LICENSE.txt
View file

@ -1,15 +0,0 @@
/*!
* Splide.js
* Version : 4.1.4
* License : MIT
* Copyright: 2022 Naotoshi Fujita
*/
/*!
* swiped-events.js - v@version@
* Pure JavaScript swipe events
* https://github.com/john-doherty/swiped-events
* @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
* @author John Doherty <www.johndoherty.info>
* @license MIT
*/

399
public/build/main.css
View file

File diff suppressed because one or more lines are too long

14
public/build/panel.css
View file

@ -1 +1,13 @@
.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),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none} /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./assets/css/panel.scss ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.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=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlZOztFQUVJO0FDWGhCOztBRHFCSTtFQUNJO0FDbEJSLEMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvY3NzL3BhbmVsLnNjc3MiLCJ3ZWJwYWNrOi8vLy4uLy4uLy4uLy4uL0Rvbm4lQzMlQTllcy9Qcm9ncmFtbWF0aW9uL1Byb2pldHMvanVsaWVubW9ubmVyaWUvYXNzZXRzL2Nzcy9wYW5lbC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIEtJUkJZIFBBTkVMIENVU1RPTUlaQVRJT05cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gVGV4dGFyZWEgaGVhZGxpbmUgYnV0dG9uc1xuXG4uay10ZXh0YXJlYS1maWVsZCB7XG5cbiAgICAuay10b29sYmFyIHtcblxuICAgICAgICAuay1kcm9wZG93biB7XG5cbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgyKSxcbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cblxuLy8gVmlzdWFsIGltYWdlIGNyb3AgZmllbGQgcHJvcGVydGllc1xuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIHtcblxuICAgIC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuIiwiLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG4uay10ZXh0YXJlYS1maWVsZCAuay10b29sYmFyIC5rLWRyb3Bkb3duIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQgLmstY29sdW1uOm50aC1vZi10eXBlKDIpIHtcbiAgZGlzcGxheTogbm9uZTtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/

3
site/templates/base.twig
View file

@ -37,9 +37,6 @@
<body> <body>
{% block header %}
{% endblock %}
{% block main %} {% block main %}
{% endblock %} {% endblock %}

49
site/templates/home.twig
View file

@ -1,22 +1,24 @@
{% extends "base.twig" %} {% extends "base.twig" %}
{% block header %} {% block main %}
<header> <main>
<div class="sidebar"> <section class="home-section">
<nav class="sidebar__nav" aria-label="Menu">
<nav class="navigation" aria-label="Menu">
{% if exhibitions is not empty %} {% if exhibitions is not empty %}
<ul class="sidebar__nav-menu"> <ul class="navigation__menu">
{% for exhibition in exhibitions %} {% for exhibition in exhibitions %}
<li class="sidebar__nav-item"> <li class="navigation__item">
<a class="sidebar__nav-link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a> <a class="navigation__link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</nav> </nav>
<div class="sidebar__social">
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile"> <div class="social">
<a class="social__link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
<svg class="instagram-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <svg class="instagram-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<linearGradient id="instagram-icon__gradient" gradientUnits="userSpaceOnUse" x1="328.27" x2="183.73" y1="508.05" y2="3.95"> <linearGradient id="instagram-icon__gradient" gradientUnits="userSpaceOnUse" x1="328.27" x2="183.73" y1="508.05" y2="3.95">
@ -47,7 +49,7 @@
<circle class="instagram-icon__white-path" cx="346.81" cy="163.23" r="21.07"/> <circle class="instagram-icon__white-path" cx="346.81" cy="163.23" r="21.07"/>
</svg> </svg>
</a> </a>
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}"> <a class="social__link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<svg class="apple-mail-icon" aria-hidden="true" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg class="apple-mail-icon" aria-hidden="true" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<linearGradient id="apple-mail-icon__gradient" gradientTransform="matrix(60 0 0 -60 4071 44901)" gradientUnits="userSpaceOnUse" x1="-67.0167" x2="-67.0167" y1="748.2662" y2="746.7667"> <linearGradient id="apple-mail-icon__gradient" gradientTransform="matrix(60 0 0 -60 4071 44901)" gradientUnits="userSpaceOnUse" x1="-67.0167" x2="-67.0167" y1="748.2662" y2="746.7667">
@ -68,24 +70,23 @@
</svg> </svg>
</a> </a>
</div> </div>
</div>
</header> </section>
{% endblock %}
{% block main %} <section class="slider-section">
<main>
<section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery"> <div class="splide" aria-label="{{ site.title }}'s artwork gallery">
<div class="splide__track"> <div class="splide__track">
<ul class="splide__list"> <ul class="splide__list">
{% for image in images %} {% for image in images %}
<li class="splide__slide" data-logo-color="{{ image.logo_color }}"> <li class="splide__slide" data-logo-color="{{ image.logo_color }}">
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}"> <img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</div> </div>
</section> </section>
</main> </main>