Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

fix sticky problems

Browse source
This commit is contained in:
isUnknown 2024-04-10 14:55:34 +02:00
parent d9dcd940af
commit ba450cbb1f
15 changed files with 212 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/article.css Normal file
View file

@ -0,0 +1,2 @@
article .content {
}

20
assets/css/src/generic.css
View file

@ -77,3 +77,23 @@ body {
.opacity {
opacity: var(--opacity);
}
/* ================= BUTTONS ================= */
button.toggle.left::after {
margin-left: var(--unit--horizontal);
}
button.toggle.left.close::after {
content: "+";
}
button.toggle.left.open::after {
content: "-";
}
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
button.toggle.right.close::before {
content: "+";
}
button.toggle.right.open::before {
content: "-";
}

49
assets/css/src/header.css
View file

@ -35,13 +35,12 @@
.page-cover {
position: relative;
height: 80svh;
box-sizing: border-box;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: calc(var(--unit--vertical-relative) * 5);
padding-bottom: calc(5 * var(--unit--vertical));
}
.page-cover.open + * {
@ -52,13 +51,47 @@
padding-top: calc(var(--unit--vertical-relative) * 6);
}
#category .page-cover {
height: auto;
padding-bottom: 0;
margin-bottom: calc(2 * var(--unit--vertical));
/* ================= ENTRY BTNS ================= */
#entry-btns {
position: sticky;
top: calc(var(--unit--vertical) * 3);
height: 20svh;
display: flex;
justify-content: space-between;
}
#category .active-tab {
max-height: none;
.entry-btn {
transition: all 0.5s var(--curve-sine);
}
[data-template="home"] .entry-btn {
align-items: start;
}
.entry-btn--left::after,
.entry-btn--right::before {
transition: all 0.5s var(--curve-sine);
content: "+";
}
.entry-btn--left::after {
margin-left: var(--unit--horizontal);
}
.entry-btn--right::before {
margin-right: var(--unit--horizontal);
}
#entry-btns.minimized {
color: var(--color-secondary);
}
#entry-btns.minimized .entry-btn::before,
#entry-btns.minimized .entry-btn::after {
font-weight: bold;
}
#entry-btns.minimized .entry-btn--left {
margin-left: calc(-4px - var(--width));
}
#entry-btns.minimized .entry-btn--right {
margin-right: calc(-4px - var(--width));
}
@media screen and (min-width: 640px) {

4
assets/css/src/html.css
View file

@ -10,10 +10,6 @@ body {
box-sizing: border-box;
background-color: var(--color-background);
color: var(--color-primary);
}
main {
position: relative;
padding: 0 var(--unit--horizontal);
}

5
assets/css/src/linear.css
View file

@ -1,5 +0,0 @@
.article-header .title-wrapper {
--margin-left: 2;
width: calc(100% - (var(--margin-left) * var(--unit--horizontal)));
padding-left: calc(var(--margin-left) * var(--unit--horizontal));
}

93
assets/css/src/nav.css
View file

@ -1,50 +1,3 @@
/* ================= ENTRIES BTNS ================= */
#entry-btns {
position: sticky;
top: calc(var(--unit--vertical) * 10);
display: flex;
justify-content: space-between;
z-index: 2;
}
.entry-btn {
transition: all 0.5s var(--curve-sine);
}
[data-template="home"] #entry-btns {
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 8));
}
[data-template="linear"] #entry-btns {
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
}
.entry-btn--left::after,
.entry-btn--right::before {
transition: all 0.5s var(--curve-sine);
content: "+";
}
.entry-btn--left::after {
margin-left: var(--unit--horizontal);
}
.entry-btn--right::before {
margin-right: var(--unit--horizontal);
}
#entry-btns.minimized {
color: var(--color-secondary);
}
#entry-btns.minimized .entry-btn::before,
#entry-btns.minimized .entry-btn::after {
font-weight: bold;
}
#entry-btns.minimized .entry-btn--left {
margin-left: calc(-4px - var(--width));
}
#entry-btns.minimized .entry-btn--right {
margin-right: calc(-4px - var(--width));
}
/* ================= PANELS ================= */
.panel {
position: fixed;
@ -58,16 +11,31 @@
padding: 0 var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) * 5);
box-sizing: border-box;
overflow: auto;
display: flex;
flex-direction: column;
}
.panel--left {
left: calc(-100vw - 1px);
}
.panel--right {
right: calc(-100vw - 1px);
}
.panel--left.open {
left: 0;
}
.panel--right.open {
right: 0;
}
.search {
position: fixed;
width: calc(100% - 2 * var(--unit--horizontal));
position: relative;
width: 100%;
background-color: #000;
z-index: 1;
top: 0;
padding-top: calc(var(--unit--vertical) * 5);
}
.search__input {
all: unset;
@ -82,7 +50,7 @@
font-weight: var(--font-weight-light);
}
.search__input::placeholder {
font-size: var(--font-size-s);
font-size: var(--font-size-sm);
letter-spacing: 1px;
}
.search__icon {
@ -100,26 +68,13 @@ button.search__icon {
}
.panel__items {
margin-top: calc(var(--unit--vertical) * 2);
margin-bottom: calc(var(--unit--vertical) * 4);
}
.panel--left {
left: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right {
right: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right.open {
right: 0;
}
.panel--left.open {
left: 0;
scroll-behavior: smooth;
height: 100%;
padding-top: var(--unit--vertical);
overflow: auto;
}
.panel-close {
position: fixed;
justify-content: center;
width: calc(100% - 2 * var(--unit--horizontal));
bottom: 0;

3
assets/css/src/reset.css
View file

@ -25,6 +25,9 @@ a {
text-decoration: none;
color: inherit;
}
a:focus-visible {
outline: none;
}
li {
list-style-type: none;

8
assets/css/src/tabs.css
View file

@ -21,10 +21,6 @@ button.toggle.left.close::after {
button.toggle.left.open::after {
content: "-";
}
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
@ -35,6 +31,10 @@ button.toggle.right.open::before {
content: "-";
}
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
#tabs {
width: 100%;
z-index: 1;

1
assets/css/src/variables.css
View file

@ -13,6 +13,7 @@
);
--font-size-s: 0.8rem;
--font-size-sm: calc(var(--font-size-s) * 1);
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);

56
assets/css/style.css
View file

@ -1,11 +1,61 @@
@import url("src/reset.css");
@import url("src/variables.css");
@import url("src/html.css");
@import url("src/generic.css");
@import url("src/texts.css");
@import url("src/header.css");
@import url("src/tabs.css");
@import url("src/nav.css");
@import url("src/article.css");
@import url("src/home.css");
@import url("src/linear.css");
@import url("src/footer.css");
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.2);
--color-secondary--x-light: rgb(119, 177, 157, 0.1);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--unit--vertical-relative: calc(
var(--unit--vertical) * var(--window-height-factor)
);
--font-size-s: 0.8rem;
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
--opacity-light: 0.6;
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media screen and (min-width: 640px) {
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.25);
--color-secondary--x-light: rgb(119, 177, 157, 0.15);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--font-size-s: 0.9rem;
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
}
}

13
assets/js/script.js
View file

@ -58,10 +58,9 @@ function setWindowHeightFactor() {
const delta = windowHeight - min;
const factor = roundToNearestHalf(delta / 300) + 1;
const head = document.querySelector("head");
const style = document.createElement("style");
style.innerText = `:root { --window-height-factor:${factor} }`;
head.appendChild(style);
document
.querySelector(":root")
.style.setProperty("--window-height-factor", factor);
}
function roundToNearestHalf(num) {
@ -123,9 +122,11 @@ function togglePanel(side) {
if (isOpen) {
document.querySelector("html").style.overflowY = "hidden";
document.querySelector("#main-header").classList.remove("minimized");
} else if (scrollY > 10) {
} else {
document.querySelector("html").style.overflowY = "";
document.querySelector("#main-header").classList.add("minimized");
if (scrollY > 10) {
document.querySelector("#main-header").classList.add("minimized");
}
}
}

11
site/snippets/cover.php
View file

@ -8,5 +8,14 @@ $isOpen = isset($isOpen) ? $isOpen : false;
<div class="title-wrapper">
<?= $slots->title() ?>
</div>
<?= $slots->tabs() ?>
</header>
<div id="entry-btns">
<button
class="entry-btn entry-btn--left"
onclick="togglePanel('left')"
>années</button>
<button
class="entry-btn entry-btn--right"
onclick="togglePanel('right')"
>categories</button>
</div>

9
site/snippets/header.php
View file

@ -1,3 +1,6 @@
<?php
$entryTopPos = $entryTopPos ?? 20;
?>
<!DOCTYPE html>
<html lang="en">
<head>
@ -8,6 +11,11 @@
<script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<meta name="robots" content="noindex, nofollow, noarchive">
<style>
:root {
--entry-btns-top: calc(var(--unit--vertical-relative) * <?= $entryTopPos ?>);
}
</style>
</head>
<body class="grid" data-template="<?= $page->template() ?>" >
<header id="main-header">
@ -18,3 +26,4 @@
</a>
</div>
</header>
<?php snippet('panels') ?>

67
site/snippets/nav.php → site/snippets/panels.php
View file

@ -1,15 +1,4 @@
<div id="entry-btns">
<button
class="entry-btn entry-btn--left"
onclick="togglePanel('left')"
>années</button>
<button
class="entry-btn entry-btn--right"
onclick="togglePanel('right')"
>categories</button>
</div>
<nav
class="panel panel--left"
x-data="{search: ''}"
@ -39,22 +28,24 @@
<?php foreach($kirby->collection('years') as $year): ?>
<li
class="panel__item "
x-data='{ year: false }'
x-data='{ isOpen: false }'
>
<button
class="panel__toggle-btn"
:class="year ? '' : 'short'"
@click="year = !year"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="year || search.length > 0 ? '-' : '+'"
></div>
</button>
<a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="year || search.length > 0"
x-show="isOpen || search.length > 0"
x-data='{ edito: false }'
>
<div
@ -144,22 +135,24 @@
foreach($categories as $category): ?>
<li
class="panel__item "
x-data='{ category: false }'
x-data='{ isOpen: false }'
>
<button
class="panel__toggle-btn"
:class="category ? '' : 'short'"
@click="category = !category"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="category || search.length > 0 ? '-' : '+'"
></div>
</button>
<a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="category || search.length > 0"
x-show="isOpen || search.length > 0"
>
<ul class="panel-item-content__texts">
<?php

9
site/templates/linear.php
View file

@ -1,4 +1,6 @@
<?php snippet('header') ?>
<?php snippet('header', array(
'entryTopPos' => 20
)) ?>
<main id="<?= $page->template() ?>">
<article>
<?php snippet('cover', array('isOpen' => true), slots: true) ?>
@ -18,7 +20,8 @@
</p>
<?php endslot() ?>
<?php endsnippet() ?>
<?php snippet('nav') ?>
<?= $page->body() ?>
<div class="content">
<?= $page->body() ?>
</div>
</article>
</main>