resolve conflict - remove resize characters script
All checks were successful
Deploy / Deploy to Production (push) Successful in 7s
All checks were successful
Deploy / Deploy to Production (push) Successful in 7s
This commit is contained in:
parent
f7aa642876
commit
3effa55017
9 changed files with 215 additions and 142 deletions
BIN
._content
Normal file
BIN
._content
Normal file
Binary file not shown.
|
|
@ -1,4 +1,4 @@
|
|||
.strip {
|
||||
.header-menu {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
.bottom-tab--invert {
|
||||
background-color: var(--color-beige);
|
||||
color: #000;
|
||||
border: 3px solid #000;
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.bottom-tab:not(.bottom-tab--invert) {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
.main-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: var(--color-green);
|
||||
text-align: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
z-index: 4;
|
||||
|
||||
font-size: var(--menu-font-size);
|
||||
font-family: var(--menu-font);
|
||||
font-weight: 600;
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
padding: 0 var(--space-body);
|
||||
button {
|
||||
display: none;
|
||||
font-family: "Bartok", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 2rem;
|
||||
|
|
@ -20,22 +30,22 @@
|
|||
}
|
||||
|
||||
.characters {
|
||||
margin-top: var(--offset);
|
||||
scale: var(--scale);
|
||||
margin-top: 1em;
|
||||
svg {
|
||||
overflow: visible;
|
||||
margin-top: -2.5rem;
|
||||
height: 5em;
|
||||
#left-character-background,
|
||||
#right-character-background path,
|
||||
[id*="pupil"] circle {
|
||||
fill: var(--color-green) !important;
|
||||
fill: var(--color-beige) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: calc(100% - (2 * var(--space-body)));
|
||||
display: block;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -47,17 +57,15 @@
|
|||
transform: translateY(var(--logo-offset));
|
||||
}
|
||||
|
||||
&.small:not(.big) {
|
||||
.logo {
|
||||
transform: translateY(-200%);
|
||||
}
|
||||
.characters {
|
||||
margin-top: 0;
|
||||
svg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background-color: var(--color-beige);
|
||||
|
||||
position: relative;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
|
||||
border-bottom: var(--border);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
&.menu-transitioning {
|
||||
|
|
@ -67,20 +75,9 @@
|
|||
.characters {
|
||||
transition: margin-top 0.5s var(--curve);
|
||||
svg {
|
||||
transition: width 0.5s var(--curve), height 0.5s var(--curve);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
.logo {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.characters {
|
||||
margin-top: 9.5rem;
|
||||
svg {
|
||||
width: 304px;
|
||||
height: 304px;
|
||||
transition:
|
||||
width 0.5s var(--curve),
|
||||
height 0.5s var(--curve);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -91,11 +88,12 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.7rem;
|
||||
bottom: calc(-8.5rem);
|
||||
bottom: calc(-2.5rem);
|
||||
|
||||
button {
|
||||
transform: translateY(0rem);
|
||||
transition: background-color 0.2s var(--curve),
|
||||
transition:
|
||||
background-color 0.2s var(--curve),
|
||||
transform 0.3s var(--curve);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -110,4 +108,95 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
not * {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
font-size: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
li:not(:last-child) {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
hr {
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.main-header {
|
||||
nav {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.open {
|
||||
height: 100%;
|
||||
transition-duration: 1s;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
.logo,
|
||||
.characters {
|
||||
padding-top: 5vh;
|
||||
margin-top: inherit;
|
||||
display: block;
|
||||
}
|
||||
.characters {
|
||||
svg {
|
||||
height: auto;
|
||||
margin-top: 3.5em;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.open nav {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition-duration: 0.1s;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
top: 50vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
button.toggle-nav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,12 @@
|
|||
|
||||
--radius: 1.1rem;
|
||||
--border: 2px solid #000;
|
||||
--border-radius: 10px;
|
||||
|
||||
--space-body: 1rem;
|
||||
|
||||
--curve: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
--menu-font: "Bartok", sans-serif;
|
||||
--menu-font-size: 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
[data-template="event"] {
|
||||
header {
|
||||
.strip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main {
|
||||
margin-top: 9.8rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@import "src/global";
|
||||
@import "src/generic";
|
||||
@import "src/header";
|
||||
@import "src/strip";
|
||||
@import "src/pages/home";
|
||||
@import "src/pages/events";
|
||||
@import "src/pages/event";
|
||||
|
|
|
|||
|
|
@ -5,85 +5,77 @@ import { CreditsSlideshow } from "./slideshow.js";
|
|||
import { initFlipCarousel } from "./characters/roll.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// const header = document.querySelector(".main-header");
|
||||
// const charactersWrapper = document.querySelector(".characters");
|
||||
// const logo = document.querySelector(".logo");
|
||||
// const svg = charactersWrapper.querySelector("svg");
|
||||
// const CHAR_SPEED = 0.6;
|
||||
// const LOGO_SPEED = 1.2;
|
||||
// const CHAR_WIDTH_MAX = 304;
|
||||
// const CHAR_WIDTH_MIN = 150;
|
||||
// // Valeurs initiales lues depuis l'attribut style HTML
|
||||
// const charMax = parseFloat(
|
||||
// charactersWrapper.style.getPropertyValue("--offset")
|
||||
// );
|
||||
// const logoMax = logo.offsetHeight + 100;
|
||||
// let menuOpen = false;
|
||||
// let menuTransitioning = false;
|
||||
// function onScroll() {
|
||||
// if (menuOpen || menuTransitioning || header.classList.contains("small"))
|
||||
// return;
|
||||
// const scrollY = window.scrollY;
|
||||
// moveCharacters(scrollY);
|
||||
// scaleCharacters(scrollY);
|
||||
// moveLogo(scrollY);
|
||||
// }
|
||||
// function moveCharacters(scrollY) {
|
||||
// const charOffset = Math.max(0, charMax - (scrollY / 16) * CHAR_SPEED);
|
||||
// charactersWrapper.style.setProperty("--offset", charOffset + "rem");
|
||||
// }
|
||||
// function scaleCharacters(scrollY) {
|
||||
// const charOffset = Math.max(0, charMax - (scrollY / 16) * CHAR_SPEED);
|
||||
// const charWidth =
|
||||
// CHAR_WIDTH_MIN +
|
||||
// (charOffset / charMax) * (CHAR_WIDTH_MAX - CHAR_WIDTH_MIN);
|
||||
// svg.setAttribute("width", charWidth + "px");
|
||||
// svg.setAttribute("height", charWidth + "px");
|
||||
// }
|
||||
// function moveLogo(scrollY) {
|
||||
// const logoOffset = Math.min(scrollY * LOGO_SPEED, logoMax);
|
||||
// logo.style.setProperty("--logo-offset", `-${logoOffset}px`);
|
||||
// }
|
||||
// window.addEventListener("scroll", onScroll);
|
||||
// {
|
||||
// const nav = {
|
||||
// toggleBtn: document.querySelector(".toggle-nav"),
|
||||
// strip: document.querySelector(".strip"),
|
||||
// };
|
||||
// function openMenu() {
|
||||
// menuOpen = true;
|
||||
// header.classList.add("menu-transitioning", "big");
|
||||
// nav.strip.classList.add("open");
|
||||
// nav.toggleBtn.textContent = "fermer";
|
||||
// document.body.style.overflow = "hidden";
|
||||
// }
|
||||
// function closeMenu() {
|
||||
// menuOpen = false;
|
||||
// menuTransitioning = true;
|
||||
// header.classList.remove("big");
|
||||
// nav.strip.classList.remove("open");
|
||||
// nav.toggleBtn.textContent = "menu";
|
||||
// document.body.style.overflow = "";
|
||||
// setTimeout(() => {
|
||||
// header.classList.remove("menu-transitioning");
|
||||
// menuTransitioning = false;
|
||||
// }, 500);
|
||||
// }
|
||||
// nav.toggleBtn.addEventListener("click", () => {
|
||||
// nav.strip.classList.contains("open") ? closeMenu() : openMenu();
|
||||
// });
|
||||
// document.addEventListener("keydown", (event) => {
|
||||
// if (event.key === "Escape" && menuOpen) closeMenu();
|
||||
// });
|
||||
// document.addEventListener("click", (event) => {
|
||||
// if (!menuOpen) return;
|
||||
// if (event.target.closest(".toggle-nav")) return;
|
||||
// if (!event.target.closest(".strip")) closeMenu();
|
||||
// });
|
||||
// }
|
||||
// initCharacterJump();
|
||||
// initPupilTracking(svg);
|
||||
// initEventFilters();
|
||||
// const gallery = new CreditsSlideshow(".gallery");
|
||||
initFlipCarousel();
|
||||
const header = document.querySelector(".main-header");
|
||||
const charactersWrapper = document.querySelector(".characters");
|
||||
const logo = document.querySelector(".logo");
|
||||
const svg = charactersWrapper.querySelector("svg");
|
||||
|
||||
const CHAR_SPEED = 0.6;
|
||||
const LOGO_SPEED = 1.2;
|
||||
const CHAR_WIDTH_MAX = 304;
|
||||
const CHAR_WIDTH_MIN = 150;
|
||||
|
||||
// Valeurs initiales lues depuis l'attribut style HTML
|
||||
const charMax = parseFloat(
|
||||
charactersWrapper.style.getPropertyValue("--offset"),
|
||||
);
|
||||
const logoMax = logo.offsetHeight + 100;
|
||||
|
||||
let menuOpen = false;
|
||||
let menuTransitioning = false;
|
||||
|
||||
function onScroll() {
|
||||
if (menuOpen || menuTransitioning || header.classList.contains("small"))
|
||||
return;
|
||||
const scrollY = window.scrollY;
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", onScroll);
|
||||
|
||||
{
|
||||
const nav = {
|
||||
toggleBtn: document.querySelector(".toggle-nav"),
|
||||
mainHeader: document.querySelector(".main-header"),
|
||||
};
|
||||
|
||||
function openMenu() {
|
||||
menuOpen = true;
|
||||
header.classList.add("menu-transitioning", "big");
|
||||
nav.mainHeader.classList.add("open");
|
||||
nav.toggleBtn.textContent = "fermer";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuOpen = false;
|
||||
menuTransitioning = true;
|
||||
header.classList.remove("big");
|
||||
nav.mainHeader.classList.remove("open");
|
||||
nav.toggleBtn.textContent = "menu";
|
||||
document.body.style.overflow = "";
|
||||
setTimeout(() => {
|
||||
header.classList.remove("menu-transitioning");
|
||||
menuTransitioning = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
nav.toggleBtn.addEventListener("click", () => {
|
||||
nav.mainHeader.classList.contains("open") ? closeMenu() : openMenu();
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape" && menuOpen) closeMenu();
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!menuOpen) return;
|
||||
if (event.target.closest(".toggle-nav")) return;
|
||||
if (!event.target.closest(".main-header")) closeMenu();
|
||||
});
|
||||
}
|
||||
|
||||
initCharacterJump();
|
||||
initPupilTracking(svg);
|
||||
initEventFilters();
|
||||
const gallery = new CreditsSlideshow(".gallery");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,30 +1,24 @@
|
|||
<body data-template="<?= $page->intendedTemplate() ?>">
|
||||
<header class="main-header <?= $page->intendedTemplate() == 'event' ? 'small' : '' ?>">
|
||||
<div class="top">
|
||||
<div class="lang-switcher">
|
||||
<button>FR</button>
|
||||
/
|
||||
<button>EN</button>
|
||||
<div class="card">
|
||||
<div class="top">
|
||||
<button class="toggle-nav">menu</button>
|
||||
</div>
|
||||
<button class="toggle-nav">menu</button>
|
||||
</div>
|
||||
<a href="<?= $site->url() ?>" title="accueil">
|
||||
<h1 class="logo" style="--logo-offset: 0px">
|
||||
Lesort<br>
|
||||
Hecq
|
||||
</h1>
|
||||
</a>
|
||||
<div class="characters" style="--offset: 9.5rem; --scale: 1">
|
||||
<a href="<?= $site->url() ?>" title="accueil">
|
||||
<?= svg('assets/images/characters/characters.svg') ?>
|
||||
<h1 class="logo" style="--logo-offset: 0px">
|
||||
Lesort<br>
|
||||
Hecq
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="strip">
|
||||
<h1><?= e($page->isHomePage(), 'Compagnie de théâtre', $page->title()) ?></h1>
|
||||
<div class="characters" style="--offset: 9.5rem; --scale: 1">
|
||||
<a href="<?= $site->url() ?>" title="accueil">
|
||||
<?= svg('assets/images/characters/characters.svg') ?>
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<?php foreach ($site->children()->listed()->without($page) as $navItem): ?>
|
||||
<li><a href="<?= $navItem->url() ?>"><?= $navItem->title() ?></a><hr></li>
|
||||
<li><a href="<?= $navItem->url() ?>"><?= $navItem->title() ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue