studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add and animate info banner

Browse source
This commit is contained in:
isUnknown 2024-09-03 14:18:49 +02:00
parent 2aceb888d2
commit 99b1c2b5f5
6 changed files with 85 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,6 @@
display: grid;
grid-template-columns: 0.5fr 1fr 1fr 1fr;
column-gap: calc(var(--space-m));
border-top: var(--border);
}
.main-footer p {

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

@ -1,3 +1,30 @@
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(0px - ((100% / 3) - var(--space-m) / 1.6)));
}
}
.info-banner {
overflow: hidden;
white-space: nowrap;
}
.info-banner ul {
box-sizing: border-box;
padding: 1rem var(--space-m);
background-color: var(--color-salmon);
display: inline-block;
animation: scroll-left 12s linear infinite;
}
.info-banner li {
display: inline-block;
padding-right: 6vw;
}
.main-header {
position: sticky;
top: 0;

14
site/blueprints/site.yml
View file

@ -9,8 +9,20 @@ tabs:
fields:
infoBanner:
label: Bannière d'info
type: writer
type: structure
help: Affichée en haut de la page d'accueil.
fields:
message:
label: Message
type: text
width: 1/2
link:
label: Lien
type: link
width: 1/2
options:
- url
- page
separator1:
type: line
- width: 1/1

0
site/snippets/header-banner.php
View file

4
site/snippets/header.php
View file

@ -33,9 +33,9 @@
</style>
<?php endif ?>
</head>
<body>
<body data-template="<?= $page->template() ?>">
<?php if ($page->isHomePage()): ?>
<?php snippet('header-banner') ?>
<?php snippet('info-banner') ?>
<?php endif ?>
<?php snippet('nav') ?>
<main>

43
site/snippets/info-banner.php Normal file
View file

@ -0,0 +1,43 @@
<div class="info-banner">
<ul>
<?php foreach($site->infoBanner()->toStructure() as $info): ?>
<li>
<?php if ($info->link()->isNotEmpty()): ?>
<a href="<?= $info->link()->toUrl() ?>">
<?= $info->message() ?>
</a>
<?php else: ?>
<p>
<?= $info->message() ?>
</p>
<?php endif ?>
</li>
<?php endforeach ?>
<?php foreach($site->infoBanner()->toStructure() as $info): ?>
<li>
<?php if ($info->link()->isNotEmpty()): ?>
<a href="<?= $info->link()->toUrl() ?>">
<?= $info->message() ?>
</a>
<?php else: ?>
<p>
<?= $info->message() ?>
</p>
<?php endif ?>
</li>
<?php endforeach ?>
<?php foreach($site->infoBanner()->toStructure() as $info): ?>
<li>
<?php if ($info->link()->isNotEmpty()): ?>
<a href="<?= $info->link()->toUrl() ?>">
<?= $info->message() ?>
</a>
<?php else: ?>
<p>
<?= $info->message() ?>
</p>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
</div>