Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tighter menu spacing on mobile to aligne logo and menu button

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demo-components.php
View File

@ -1,6 +1,11 @@
<?php get_header('demo-components'); ?>
<section class="demo-components-home">
<div class="page-demo-component">
<!-- HOME -->
<section class="demo-components-home">
<h1>Content system & Design system | Documentation</h1>
<h2>Bienvenue dans la documentation Homegrade</h2>
@ -10,11 +15,11 @@
<a class="cta cta--white cta--button cta--shadowed" href="#blocks-components">Blocks de contenu</a>
<a class="cta cta--white cta--button cta--shadowed" href="#css-components">Composants css</a>
</div>
</section>
</section>
<!-- BLOCKS COMPONENTS -->
<section id="blocks-components" class="demo-components">
<!-- BLOCKS COMPONENTS -->
<section id="blocks-components" class="demo-components">
<div class="demo-components__section-title">
<h2 class="">Block components</h2>
<h3>Blocks de contenu</h3>
@ -592,11 +597,11 @@
</section>
</section>
<!-- CSS COMPONENTS -->
<!-- CSS COMPONENTS -->
<section id="css-components" class="demo-components">
<section id="css-components" class="demo-components">
<div class="demo-components__section-title">
<h2>CSS components</h2>
<h3>Composants CSS</h3>
@ -673,9 +678,10 @@
</section>
</section>
</div>
<?php
get_footer('demo-components');

11
resources/css/layout/menu-renovateur.css
View File

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