diff --git a/assets/css/src/collapsable-section.css b/assets/css/src/collapsable-section.css index 61b694d..f7ca2a9 100644 --- a/assets/css/src/collapsable-section.css +++ b/assets/css/src/collapsable-section.css @@ -4,7 +4,7 @@ padding: 0 !important; } -.collapsable:not(.sessions) > *, +.collapsable > *, .collapsable.sessions > button, .collapsable .session { padding: var(--row-padding); @@ -24,17 +24,21 @@ } .collapsable__content { - max-height: 0; - overflow: hidden; - transition: max-height 0.5s ease-in-out; + background-color: #fff; + font-size: var(--font-size-s); + border-bottom: none; + + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.4s ease-in-out; } -.collapsable__content { - max-height: 100%; + +.collapsable__content > * { overflow: hidden; } -.collapsable__content { - font-size: var(--font-size-s); +.collapsable__content.open { + grid-template-rows: 1fr; } .collapsable__content .session { diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css index a9be888..5ad986b 100644 --- a/assets/css/src/footer.css +++ b/assets/css/src/footer.css @@ -4,6 +4,7 @@ display: grid; grid-template-columns: 0.5fr 1fr 1fr 1fr; column-gap: calc(var(--space-m)); + border-top: var(--border); } .main-footer p { diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index 1d607b7..393c4d3 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -52,7 +52,7 @@ .logo { font-weight: normal; font-size: var(--font-size-h2); - transition: font-size 0.1s cubic-bezier(0.23, 1, 0.32, 1); + transition: font-size 0.1s var(--curve-quick); line-height: 1; } @@ -62,7 +62,7 @@ .logo > *:not(:first-child) { margin-left: 2.27ch; - transition: margin 0.1s cubic-bezier(0.23, 1, 0.32, 1); + transition: margin 0.1s var(--curve-quick); } .social-icons { @@ -105,10 +105,14 @@ transform: rotate(90deg); } -.arrow-down { +.arrow-right { font-size: 2rem; - height: 1.5rem; - transform: translateY(-0.2rem); + transform: rotate(0deg); + transition: transform 0.3s var(--curve-quick); +} + +.arrow-right.open { + transform: rotate(90deg); } .ticket-link { @@ -153,3 +157,7 @@ .strong { font-weight: bolder; } + +.no-padding { + padding: 0 !important; +} diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index e3a096b..6ec8ac8 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -117,7 +117,7 @@ height: 1.8ch; max-width: 10rem; overflow: hidden; - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.5s var(--curve-quick); } .main-nav--small .logo > *:not(:first-child) { @@ -133,7 +133,7 @@ /* Logo hover */ .main-nav .logo { - transition: scale 0.5s cubic-bezier(0.23, 1, 0.32, 1); + transition: scale 0.5s var(--curve-quick); } .main-nav .logo:hover { scale: 1.035; diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css index 01fa43c..77965f2 100644 --- a/assets/css/src/variables.css +++ b/assets/css/src/variables.css @@ -11,6 +11,7 @@ --font-size-h1: 2.8125rem; --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955); + --curve-quick: cubic-bezier(0.23, 1, 0.32, 1); --padding-vertical: 2rem; --space-m: 4vw; diff --git a/site/snippets/collapsable-section.php b/site/snippets/collapsable-section.php index 07cdb0c..cdbf998 100644 --- a/site/snippets/collapsable-section.php +++ b/site/snippets/collapsable-section.php @@ -1,18 +1,11 @@ -
-
+
content() ?>
\ No newline at end of file diff --git a/site/templates/event.php b/site/templates/event.php index 581ea01..80efb5c 100644 --- a/site/templates/event.php +++ b/site/templates/event.php @@ -30,7 +30,7 @@
- 'Prenez vos places !', 'sessions' => true], slots: true) ?> + 'Prenez vos places !', 'padding' => false], slots: true) ?> isMapadoEvent() != 'true'): ?> diff --git a/site/templates/program.php b/site/templates/program.php index 763ad39..13db5de 100644 --- a/site/templates/program.php +++ b/site/templates/program.php @@ -93,7 +93,7 @@
$sessions): ?> 0): ?> - $month, 'sessions' => true], slots: true) ?> + $month, 'padding' => false], slots: true) ?>