Edit HTML structure
This commit is contained in:
Paul Nicoué
parent
5e4b34ee0d
commit
07bc24cd7b
8 changed files with 4671 additions and 111 deletions
|
|
@ -80,27 +80,28 @@ body {
|
|||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// HEADER
|
||||
// MAIN
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Sidebar
|
||||
// Home section
|
||||
|
||||
.sidebar {
|
||||
.home-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: var(--sidebar-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navigation {
|
||||
max-width: 100%;
|
||||
|
||||
.sidebar__nav-link {
|
||||
&__link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -117,23 +118,23 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__social {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0.8rem 0 0 0;
|
||||
}
|
||||
.social {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0.8rem 0 0 0;
|
||||
|
||||
.sidebar__social-link {
|
||||
&__link {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
+ .sidebar__social-link {
|
||||
+ .social__link {
|
||||
margin: 0 0 0 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -153,34 +154,32 @@ body {
|
|||
|
||||
@media screen and (min-width: $desktop-media-query) {
|
||||
|
||||
.sidebar {
|
||||
.home-section {
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar__social {
|
||||
width: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.social {
|
||||
width: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// MAIN
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Slider section
|
||||
|
||||
.slider-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.splide__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.splide {
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ const body = document.body;
|
|||
|
||||
// SPLIDE SLIDER
|
||||
|
||||
const slider = document.querySelector('.slider-section');
|
||||
let splideSlider;
|
||||
const sliderSection = document.querySelector('.slider-section');
|
||||
let slider;
|
||||
const slides = document.querySelectorAll('.splide__slide');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
|
||||
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
|
||||
const homeSection = document.querySelector('.home-section');
|
||||
const navLinks = document.querySelectorAll('.navigation__link');
|
||||
const socialLinks = document.querySelectorAll('.social__link');
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// LOGIC
|
||||
|
|
@ -38,8 +38,8 @@ function convertRemToPixels(rem) {
|
|||
// SPLIDE SLIDER
|
||||
|
||||
function setUpSlider() {
|
||||
if (slider) {
|
||||
splideSlider = new Splide('.splide', {
|
||||
if (sliderSection) {
|
||||
slider = new Splide('.splide', {
|
||||
type: 'fade',
|
||||
rewind: true,
|
||||
rewindByDrag: true,
|
||||
|
|
@ -55,55 +55,55 @@ function setUpSlider() {
|
|||
}
|
||||
|
||||
function mountSlider() {
|
||||
if (splideSlider) {
|
||||
splideSlider.mount();
|
||||
if (slider) {
|
||||
slider.mount();
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextSlideOnClick() {
|
||||
if (sidebar && splideSlider) {
|
||||
sidebar.addEventListener('click', function(e) {
|
||||
if (homeSection && slider) {
|
||||
homeSection.addEventListener('click', function(e) {
|
||||
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
|
||||
splideSlider.go('>');
|
||||
slider.go('>');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function changeSlideOnSwipe() {
|
||||
if (sidebar && splideSlider) {
|
||||
sidebar.addEventListener('swiped', function(e) {
|
||||
if (homeSection && slider) {
|
||||
homeSection.addEventListener('swiped', function(e) {
|
||||
if (e.detail.dir === 'right') {
|
||||
splideSlider.go('>');
|
||||
slider.go('>');
|
||||
} else if (e.detail.dir === 'left') {
|
||||
splideSlider.go('<');
|
||||
slider.go('<');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function turnSidebarLinksToWhite() {
|
||||
if (sidebarNavLinks) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
|
||||
if (navLinks) {
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.add('navigation__link--white');
|
||||
}
|
||||
}
|
||||
if (sidebarSocialLinks) {
|
||||
for (let i = 0; i < sidebarSocialLinks.length; i++) {
|
||||
sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
|
||||
if (socialLinks) {
|
||||
for (let i = 0; i < socialLinks.length; i++) {
|
||||
socialLinks[i].classList.add('social__link--white');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function turnSidebarLinksToBlack() {
|
||||
if (sidebarNavLinks) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
|
||||
if (navLinks) {
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.remove('navigation__link--white');
|
||||
}
|
||||
}
|
||||
if (sidebarSocialLinks) {
|
||||
for (let i = 0; i < sidebarSocialLinks.length; i++) {
|
||||
sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
|
||||
if (socialLinks) {
|
||||
for (let i = 0; i < socialLinks.length; i++) {
|
||||
socialLinks[i].classList.remove('social__link--white');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -119,16 +119,16 @@ function editNavLinksColor(slide) {
|
|||
}
|
||||
|
||||
function editNavLinksColorOnSliderMounted() {
|
||||
if (splideSlider && slides) {
|
||||
splideSlider.on('mounted', function() {
|
||||
if (slider && slides) {
|
||||
slider.on('mounted', function() {
|
||||
editNavLinksColor(slides[0]);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function editNavLinksColorOnSlideActive() {
|
||||
if (splideSlider) {
|
||||
splideSlider.on('active', function(e) {
|
||||
if (slider) {
|
||||
slider.on('active', function(e) {
|
||||
editNavLinksColor(e.slide);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
4173
public/build/app.js
4173
public/build/app.js
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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=*/
|
||||
|
|
@ -37,9 +37,6 @@
|
|||
|
||||
<body>
|
||||
|
||||
{% block header %}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
{% extends "base.twig" %}
|
||||
|
||||
{% block header %}
|
||||
<header>
|
||||
{% block main %}
|
||||
<main>
|
||||
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar__nav" aria-label="Menu">
|
||||
<section class="home-section">
|
||||
|
||||
<nav class="navigation" aria-label="Menu">
|
||||
{% if exhibitions is not empty %}
|
||||
<ul class="sidebar__nav-menu">
|
||||
<ul class="navigation__menu">
|
||||
{% for exhibition in exhibitions %}
|
||||
<li class="sidebar__nav-item">
|
||||
<a class="sidebar__nav-link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
||||
<li class="navigation__item">
|
||||
<a class="navigation__link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</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">
|
||||
<defs>
|
||||
<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"/>
|
||||
</svg>
|
||||
</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">
|
||||
<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">
|
||||
|
|
@ -68,24 +70,23 @@
|
|||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
{% endblock %}
|
||||
</section>
|
||||
|
||||
{% block main %}
|
||||
<main>
|
||||
<section class="slider-section">
|
||||
|
||||
<section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
{% for image in images %}
|
||||
<li class="splide__slide" data-logo-color="{{ image.logo_color }}">
|
||||
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="splide" aria-label="{{ site.title }}'s artwork gallery">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
{% for image in images %}
|
||||
<li class="splide__slide" data-logo-color="{{ image.logo_color }}">
|
||||
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue