tighter menu spacing on mobile to aligne logo and menu button

This commit is contained in:
Antoine M 2023-11-14 15:37:41 +01:00
parent 760612db3b
commit a425a640b9
2 changed files with 616 additions and 607 deletions

View File

@ -1,5 +1,10 @@
<?php get_header('demo-components'); ?> <?php get_header('demo-components'); ?>
<div class="page-demo-component">
<!-- HOME -->
<section class="demo-components-home"> <section class="demo-components-home">
<h1>Content system & Design system | Documentation</h1> <h1>Content system & Design system | Documentation</h1>
<h2>Bienvenue dans la documentation Homegrade</h2> <h2>Bienvenue dans la documentation Homegrade</h2>
@ -676,6 +681,7 @@
</section> </section>
</div>
<?php <?php
get_footer('demo-components'); get_footer('demo-components');

View File

@ -7,12 +7,15 @@
shadow-md shadow-md
flex flex
flex-wrap flex-wrap
items-center
justify-between; justify-between;
.website_logo { .website_logo {
@apply order-1 @apply order-1
mr-12 mr-2
w-[190px] md:mr-12
w-[140px]
md:w-[190px]
xl:w-[222px]; xl:w-[222px];
a:focus img { a:focus img {
@ -151,10 +154,10 @@
} }
&__interaction_toggles { &__interaction_toggles {
@apply order-2 lg:order-3 flex items-center justify-start gap-4; @apply order-2 lg:order-3 flex items-center justify-start gap-2 md:gap-4;
} }
&__mobile-menu-toggle { &__mobile-menu-toggle {
@apply lg:hidden flex items-center gap-4; @apply lg:hidden flex items-center gap-4 px-4 md:px-8;
.toggle-icon { .toggle-icon {
/* transform: translate(0, 7px); */ /* transform: translate(0, 7px); */
@apply w-6 h-4 relative opacity-80; @apply w-6 h-4 relative opacity-80;