footer : scroll to reveal + CSS compilé
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d70bcb7e4c
commit
42fcba1324
7 changed files with 123 additions and 13 deletions
40
assets/css/src/_footer.scss
Normal file
40
assets/css/src/_footer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
* {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
dl,
|
||||
|
|
@ -53,3 +49,8 @@ a {
|
|||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -10,3 +10,4 @@
|
|||
@import "src/pages/event";
|
||||
@import "src/pages/agenda";
|
||||
@import "src/slideshow";
|
||||
@import "src/footer";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue