feat(ui): ♿ add small screen support for header
This commit is contained in:
parent
35c2b4e422
commit
4e3b4f94e3
|
|
@ -15,7 +15,7 @@ header div {
|
|||
gap: var(--_gap);
|
||||
}
|
||||
|
||||
header span {
|
||||
.components__header__brand {
|
||||
text-wrap: nowrap;
|
||||
padding: var(--_gap);
|
||||
font-size: large;
|
||||
|
|
@ -23,6 +23,17 @@ header span {
|
|||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
.components__header__brand__text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& img {
|
||||
min-width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,16 +49,6 @@ header nav {
|
|||
list-style: none;
|
||||
transition: border var(--_transition-delay) ease;
|
||||
border: var(--_border-size) solid transparent;
|
||||
|
||||
& > a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: var(--_gap-half) var(--_gap);
|
||||
}
|
||||
}
|
||||
|
||||
& > li:hover,
|
||||
|
|
@ -56,10 +57,17 @@ header nav {
|
|||
& > li:has(details[open]) {
|
||||
border: var(--_border-size) solid currentColor;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
& {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header details {
|
||||
cursor: pointer;
|
||||
padding: var(--_gap-half);
|
||||
|
||||
& summary {
|
||||
display: flex;
|
||||
|
|
@ -67,11 +75,35 @@ header details {
|
|||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
& i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: '▽';
|
||||
transition: all var(--_transition-delay) ease;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
& {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
font-size: x-small;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
& i {
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[open] summary::after {
|
||||
|
|
@ -92,6 +124,13 @@ header details {
|
|||
calc(-1 * var(--_gap) - 2px),
|
||||
calc(var(--_gap-half) + 2px)
|
||||
);
|
||||
|
||||
@media (width < 800px) {
|
||||
& {
|
||||
border: var(--_border-size) solid currentColor;
|
||||
transform: translate(-33%, var(--_gap));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
|
|
@ -112,9 +151,52 @@ header details {
|
|||
}
|
||||
}
|
||||
|
||||
header input {
|
||||
.components__header__search {
|
||||
padding: var(--_gap-half) var(--_gap);
|
||||
align-self: center;
|
||||
border: none;
|
||||
border: var(--_border-size) solid transparent;
|
||||
background-color: var(--_translucent);
|
||||
min-width: fit-content;
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
border: var(--_border-size) solid currentColor;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
& {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components__header__nav_button {
|
||||
color: var(--_font-color);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
padding: var(--_gap-half) var(--_gap);
|
||||
|
||||
& i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
& {
|
||||
display: grid;
|
||||
font-size: x-small;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
& i {
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,27 +5,38 @@ export function Header() {
|
|||
return (
|
||||
<header>
|
||||
<div>
|
||||
<span>
|
||||
<span class='components__header__brand'>
|
||||
<a href='/'>
|
||||
Coh<img
|
||||
src={asset('/assets/bulb.svg')}
|
||||
alt='a'
|
||||
/>bit POC
|
||||
<span class='components__header__brand__text'>Coh</span>
|
||||
<img src={asset('/assets/bulb.svg')} alt='a' />
|
||||
<span class='components__header__brand__text'>bit</span>
|
||||
</a>
|
||||
</span>
|
||||
<nav>
|
||||
<li>
|
||||
<a href='/machines'>Machines</a>
|
||||
<a href='/machines' class='components__header__nav_button'>
|
||||
<i class='ri-hammer-line'></i>
|
||||
<span>Machines</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/projets'>Projets</a>
|
||||
<a href='/projets' class='components__header__nav_button'>
|
||||
<i class='ri-organization-chart'></i>
|
||||
<span>Projets</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/blog'>Blog</a>
|
||||
<a href='/blog' class='components__header__nav_button'>
|
||||
<i class='ri-question-answer-line'></i>
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>Fablab</summary>
|
||||
<summary>
|
||||
<i class='ri-function-line'></i>
|
||||
<span>Fablab</span>
|
||||
</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='/membres'>Membres</a>
|
||||
|
|
@ -50,7 +61,10 @@ export function Header() {
|
|||
</details>
|
||||
</li>
|
||||
</nav>
|
||||
<input type='search' name='' id='' placeholder='Rechercher' />
|
||||
<button class='components__header__search'>
|
||||
<i class='ri-search-line'></i>
|
||||
<span> Rechercher</span>
|
||||
</button>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -26,4 +26,10 @@
|
|||
font-weight: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@media (width < 800px) {
|
||||
& select {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
--_gap: var(--size-3);
|
||||
--_gap-half: calc(var(--_gap) / 2);
|
||||
--_wide-screen: 1400px;
|
||||
--_small-screen: 800px;
|
||||
|
||||
/* color */
|
||||
--_accent-color: var(--lime-6);
|
||||
|
|
|
|||
Loading…
Reference in a new issue