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

finish logo animation

Browse source
This commit is contained in:
isUnknown 2024-08-28 13:44:15 +02:00
parent 81a8e526d8
commit 35a615246e
3 changed files with 19 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,7 @@ body.progress * {
}
.logo > *:not(:first-child) {
margin-left: 2.3ch;
margin-left: 2.27ch;
transition: margin 0.3s ease-in-out;
}

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

@ -110,31 +110,23 @@
}
/* Main nav small */
.main-nav .logo {
line-height: 0.5;
}
.main-nav .logo__detail {
display: inline-block;
overflow: hidden;
max-width: 10rem;
height: 2.2rem;
line-height: 1;
transform: translateY(0.55rem);
margin-left: 0;
transition: max-width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-nav--small .logo__detail {
max-width: 0;
height: 1.5rem;
pointer-events: none;
transform: translateY(0.4rem);
}
.main-nav--small .logo {
font-size: var(--font-size-m);
}
.main-nav .logo > * {
height: 1.8ch;
max-width: 10rem;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-nav--small .logo > *:not(:first-child) {
margin-left: 1.34ch;
margin-left: 1.25ch;
}
.main-nav--small .logo > * {
max-width: 1ch;
}
.main-nav--small .logo > *:nth-child(2) {
max-width: 0.9ch;
}

8
site/snippets/nav.php
View file

@ -4,13 +4,13 @@
<nav class="main-nav">
<h1 class="logo">
<span>
N<span class="logo__detail">ouveau</span>
Nouveau
</span>
<span>
T<span class="logo__detail">héâtre</span>
Théâtre
</span>
<span>
B<span class="logo__detail">esançon</span>
Besançon
</span>
</h1>
</a>
@ -62,7 +62,7 @@
<?php endforeach ?>
<li class="expanded-nav__links">
<div class="expanded-nav__ticketing">
<a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
<a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
</div>
<div class="expanded-nav__socials">
<strong>Suivez-nous</strong>