feat(ui): ♿ limit page global content width
This commit is contained in:
parent
27125d3176
commit
47982d9ef3
|
@ -1,11 +1,16 @@
|
||||||
footer {
|
footer {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
background-color: var(--_translucent);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div {
|
||||||
|
max-width: var(--_wide-screen);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--_gap);
|
padding: var(--_gap);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--_gap);
|
gap: var(--_gap);
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
background-color: var(--_translucent);
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__badges {
|
.footer__badges {
|
||||||
|
|
|
@ -1,87 +1,89 @@
|
||||||
export function Footer() {
|
export function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer>
|
<footer>
|
||||||
<section>
|
<div>
|
||||||
<h3>Contact</h3>
|
<section>
|
||||||
<p>
|
<h3>Contact</h3>
|
||||||
<a href='tel:+33556847961'>
|
<p>
|
||||||
<i class='ri-phone-line'></i> 05 56 84 79 61
|
<a href='tel:+33556847961'>
|
||||||
</a>
|
<i class='ri-phone-line'></i> 05 56 84 79 61
|
||||||
</p>
|
</a>
|
||||||
<p>
|
</p>
|
||||||
<a href='mailto:fablab@iut.u-bordeaux.fr'>
|
<p>
|
||||||
<i class='ri-mail-line'></i> fablab@iut.u-bordeaux.fr
|
<a href='mailto:fablab@iut.u-bordeaux.fr'>
|
||||||
</a>
|
<i class='ri-mail-line'></i> fablab@iut.u-bordeaux.fr
|
||||||
</p>
|
</a>
|
||||||
</section>
|
</p>
|
||||||
<section>
|
</section>
|
||||||
<h3>Nous rencontrer</h3>
|
<section>
|
||||||
<p>
|
<h3>Nous rencontrer</h3>
|
||||||
<a
|
<p>
|
||||||
href='https://www.openstreetmap.org/search?whereami=1&query=44.79115%2C-0.60810#map=19/44.79115/-0.60810'
|
<a
|
||||||
target='_blank'
|
href='https://www.openstreetmap.org/search?whereami=1&query=44.79115%2C-0.60810#map=19/44.79115/-0.60810'
|
||||||
>
|
target='_blank'
|
||||||
<i class='ri-road-map-line'></i>{' '}
|
>
|
||||||
IUT de Bordeaux, Bâtiment 10A, 15 rue Naudet, 33170 GRADIGNAN
|
<i class='ri-road-map-line'></i>{' '}
|
||||||
</a>
|
IUT de Bordeaux, Bâtiment 10A, 15 rue Naudet, 33170 GRADIGNAN
|
||||||
</p>
|
</a>
|
||||||
<p>
|
</p>
|
||||||
<i class='ri-time-line'></i> Mardi - Vendredi (10h - 18h)
|
<p>
|
||||||
</p>
|
<i class='ri-time-line'></i> Mardi - Vendredi (10h - 18h)
|
||||||
</section>
|
</p>
|
||||||
<section>
|
</section>
|
||||||
<h3>Réseaux</h3>
|
<section>
|
||||||
<div class='footer__badges'>
|
<h3>Réseaux</h3>
|
||||||
<a
|
<div class='footer__badges'>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://tube.aquilenet.fr/c/cohabit_fablab/videos'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://tube.aquilenet.fr/c/cohabit_fablab/videos'
|
||||||
title='Peertube'
|
target='_blank'
|
||||||
>
|
title='Peertube'
|
||||||
<i class='ri-play-line'></i>
|
>
|
||||||
</a>
|
<i class='ri-play-line'></i>
|
||||||
<a
|
</a>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://www.facebook.com/people/Fablab-Cohabit/100069798301175/'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://www.facebook.com/people/Fablab-Cohabit/100069798301175/'
|
||||||
title='Facebook'
|
target='_blank'
|
||||||
>
|
title='Facebook'
|
||||||
<i class='ri-facebook-line'></i>
|
>
|
||||||
</a>
|
<i class='ri-facebook-line'></i>
|
||||||
<a
|
</a>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://www.instagram.com/fablabcohabit/'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://www.instagram.com/fablabcohabit/'
|
||||||
title='Instagram'
|
target='_blank'
|
||||||
>
|
title='Instagram'
|
||||||
<i class='ri-instagram-line'></i>
|
>
|
||||||
</a>
|
<i class='ri-instagram-line'></i>
|
||||||
<a
|
</a>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://www.linkedin.com/company/fablab-cohabit/about/'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://www.linkedin.com/company/fablab-cohabit/about/'
|
||||||
title='LinkedIn'
|
target='_blank'
|
||||||
>
|
title='LinkedIn'
|
||||||
<i class='ri-linkedin-line'></i>
|
>
|
||||||
</a>
|
<i class='ri-linkedin-line'></i>
|
||||||
<a
|
</a>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://toot.aquilenet.fr/@cohabitfablab'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://toot.aquilenet.fr/@cohabitfablab'
|
||||||
title='Mastodon'
|
target='_blank'
|
||||||
>
|
title='Mastodon'
|
||||||
<i class='ri-mastodon-line'></i>
|
>
|
||||||
</a>
|
<i class='ri-mastodon-line'></i>
|
||||||
<a
|
</a>
|
||||||
class='footer__badges__item'
|
<a
|
||||||
href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
|
class='footer__badges__item'
|
||||||
target='_blank'
|
href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
|
||||||
title='Matrix'
|
target='_blank'
|
||||||
>
|
title='Matrix'
|
||||||
[m]
|
>
|
||||||
</a>
|
[m]
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,20 @@
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--_gap);
|
padding: 0;
|
||||||
display: flex;
|
|
||||||
gap: var(--_gap);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent);
|
||||||
color: var(--_font-color);
|
color: var(--_font-color);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header div {
|
||||||
|
max-width: var(--_wide-screen);
|
||||||
|
margin: auto;
|
||||||
|
padding: var(--_gap);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--_gap);
|
||||||
|
}
|
||||||
|
|
||||||
header span {
|
header span {
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
padding: var(--_gap);
|
padding: var(--_gap);
|
||||||
|
|
|
@ -3,37 +3,39 @@ import { asset } from '$fresh/runtime.ts'
|
||||||
export function Header() {
|
export function Header() {
|
||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<span>
|
<div>
|
||||||
<a href='/'>
|
<span>
|
||||||
Coh<img
|
<a href='/'>
|
||||||
src={asset('/assets/bulb.svg')}
|
Coh<img
|
||||||
alt='a'
|
src={asset('/assets/bulb.svg')}
|
||||||
/>bit POC
|
alt='a'
|
||||||
</a>
|
/>bit POC
|
||||||
</span>
|
</a>
|
||||||
<nav>
|
</span>
|
||||||
<li>
|
<nav>
|
||||||
<a href='/machines'>Machines</a>
|
<li>
|
||||||
</li>
|
<a href='/machines'>Machines</a>
|
||||||
<li>
|
</li>
|
||||||
<a href='/projets'>Projets</a>
|
<li>
|
||||||
</li>
|
<a href='/projets'>Projets</a>
|
||||||
<li>
|
</li>
|
||||||
<a href='/blog'>Blog</a>
|
<li>
|
||||||
</li>
|
<a href='/blog'>Blog</a>
|
||||||
<li>
|
</li>
|
||||||
<details>
|
<li>
|
||||||
<summary>Fablab</summary>
|
<details>
|
||||||
<ul>
|
<summary>Fablab</summary>
|
||||||
<li>Équipes</li>
|
<ul>
|
||||||
<li>Redmine</li>
|
<li>Équipes</li>
|
||||||
<li>Git</li>
|
<li>Redmine</li>
|
||||||
<li>Matrix</li>
|
<li>Git</li>
|
||||||
</ul>
|
<li>Matrix</li>
|
||||||
</details>
|
</ul>
|
||||||
</li>
|
</details>
|
||||||
</nav>
|
</li>
|
||||||
<input type='search' name='' id='' placeholder='Rechercher' />
|
</nav>
|
||||||
|
<input type='search' name='' id='' placeholder='Rechercher' />
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
/* size */
|
/* size */
|
||||||
--_gap: var(--size-3);
|
--_gap: var(--size-3);
|
||||||
--_gap-half: calc(var(--_gap) / 2);
|
--_gap-half: calc(var(--_gap) / 2);
|
||||||
|
--_wide-screen: 1400px;
|
||||||
|
|
||||||
/* color */
|
/* color */
|
||||||
--_accent-color: var(--lime-6);
|
--_accent-color: var(--lime-6);
|
||||||
|
|
Loading…
Reference in a new issue