cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): ♿ limit page global content width

Browse source
This commit is contained in:
Julien Oculi 2024-02-06 18:03:51 +01:00
parent 27125d3176
commit 47982d9ef3
5 changed files with 132 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/Footer.css
View file

@ -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 {

164
components/Footer.tsx
View file

@ -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>
) )
} }

12
components/Header.css
View file

@ -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);

64
components/Header.tsx
View file

@ -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>
) )
} }

1
src/stylesheets/base.css
View file

@ -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);