footer : scroll to reveal + CSS compilé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-06-23 18:20:44 +02:00
parent d70bcb7e4c
commit 42fcba1324
7 changed files with 123 additions and 13 deletions

View file

@ -0,0 +1,40 @@
.main-footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
box-sizing: border-box;
background-color: var(--color-green);
padding: 3rem var(--space-body);
padding-top: 10rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
.logo {
font-family: var(--font-sans-serif);
font-size: var(--font-size-L);
font-weight: 600;
text-transform: uppercase;
line-height: 0.85;
text-align: center;
}
nav ul {
display: flex;
gap: 3rem;
font-family: var(--font-sans-serif);
font-size: var(--font-size-S);
text-transform: uppercase;
font-weight: 600;
}
.legal {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
}

View file

@ -19,6 +19,7 @@ html {
body {
font-family: var(--font-serif);
background-color: var(--color-beige);
}
button {
@ -37,3 +38,7 @@ picture {
summary {
cursor: pointer;
}
main {
margin-bottom: 20rem;
}

View file

@ -1,7 +1,3 @@
* {
font-weight: normal;
}
body,
html,
dl,
@ -53,3 +49,8 @@ a {
blockquote {
margin: 0;
}
main {
position: relative;
z-index: 1;
}

View file

@ -1,8 +1,4 @@
@charset "UTF-8";
* {
font-weight: normal;
}
body,
html,
dl,
@ -56,6 +52,11 @@ blockquote {
margin: 0;
}
main {
position: relative;
z-index: 1;
}
@font-face {
font-family: "Bartok";
src: url("../fonts/BartokTrial-Regular.otf") format("opentype");
@ -139,6 +140,7 @@ html::-webkit-scrollbar-thumb {
body {
font-family: var(--font-serif);
background-color: var(--color-beige);
}
button {
@ -158,6 +160,10 @@ summary {
cursor: pointer;
}
main {
margin-bottom: 20rem;
}
.label-tab {
font-size: 1rem;
width: -moz-fit-content;
@ -179,6 +185,10 @@ summary {
color: #fff;
}
.background-grey {
background-color: var(--color-beige);
}
.main-header {
position: sticky;
top: 0;
@ -186,8 +196,9 @@ summary {
text-align: center;
box-sizing: border-box;
z-index: 4;
font-family: var(--font-sans-serif);
font-size: var(--font-size-L);
font-family: var(--font-serif);
font-weight: 800;
}
.main-header .logo-menu {
font-family: var(--font-sans-serif);
@ -496,7 +507,7 @@ summary {
}
[data-template=event] main .gallery {
margin-bottom: 4rem;
background-color: #000;
}
[data-template=event] main h1 {
font-size: var(--font-size-XL);
@ -527,7 +538,8 @@ summary {
box-sizing: border-box;
width: 100%;
width: 60rem;
margin: 4rem auto;
margin: 0 auto;
padding: 4rem 0;
}
[data-template=event] main article p {
font-size: 1.8rem;
@ -544,6 +556,8 @@ summary {
list-style: none;
padding: 0 2rem 1rem 2rem;
text-align: center;
font-family: var(--font-sans-serif);
font-weight: 800;
font-size: var(--font-size-L);
scroll-margin-top: 8rem;
}
@ -738,4 +752,41 @@ summary {
.gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].active, .gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].previous {
left: 50%;
}
}
.main-footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
box-sizing: border-box;
background-color: var(--color-green);
padding: 3rem var(--space-body);
padding-top: 10rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
}
.main-footer .logo {
font-family: var(--font-sans-serif);
font-size: var(--font-size-L);
font-weight: 600;
text-transform: uppercase;
line-height: 0.85;
text-align: center;
}
.main-footer nav ul {
display: flex;
gap: 3rem;
font-family: var(--font-sans-serif);
font-size: var(--font-size-S);
text-transform: uppercase;
font-weight: 600;
}
.main-footer .legal {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}/*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

View file

@ -10,3 +10,4 @@
@import "src/pages/event";
@import "src/pages/agenda";
@import "src/slideshow";
@import "src/footer";

View file

@ -1,3 +1,15 @@
</main>
<footer class="main-footer">
<p class="logo">Lesort<br>Hecq</p>
<nav>
<ul>
<li><a href="<?= page('compagnie')->url() ?>"><?= page('compagnie')->title() ?></a></li>
<li><a href="<?= page('spectacles')->url() ?>"><?= page('spectacles')->title() ?></a></li>
<li><a href="<?= page('agenda')->url() ?>"><?= page('agenda')->title() ?></a></li>
<li><a href="<?= page('contact')->url() ?>"><?= page('contact')->title() ?></a></li>
</ul>
</nav>
<p class="legal">© compagnie Lesort Hecq <a href="#">mentions légales</a></p>
</footer>
</body>
</html>
</html>