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 {
height: fit-content;
background-color: var(--_translucent);
}
footer div {
max-width: var(--_wide-screen);
width: 100%;
padding: var(--_gap);
display: flex;
gap: var(--_gap);
justify-content: space-around;
background-color: var(--_translucent);
margin: auto;
}
.footer__badges {

164
components/Footer.tsx
View file

@ -1,87 +1,89 @@
export function Footer() {
return (
<footer>
<section>
<h3>Contact</h3>
<p>
<a href='tel:+33556847961'>
<i class='ri-phone-line'></i> 05 56 84 79 61
</a>
</p>
<p>
<a href='mailto:fablab@iut.u-bordeaux.fr'>
<i class='ri-mail-line'></i> fablab@iut.u-bordeaux.fr
</a>
</p>
</section>
<section>
<h3>Nous rencontrer</h3>
<p>
<a
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
</a>
</p>
<p>
<i class='ri-time-line'></i> Mardi - Vendredi (10h - 18h)
</p>
</section>
<section>
<h3>Réseaux</h3>
<div class='footer__badges'>
<a
class='footer__badges__item'
href='https://tube.aquilenet.fr/c/cohabit_fablab/videos'
target='_blank'
title='Peertube'
>
<i class='ri-play-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.facebook.com/people/Fablab-Cohabit/100069798301175/'
target='_blank'
title='Facebook'
>
<i class='ri-facebook-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.instagram.com/fablabcohabit/'
target='_blank'
title='Instagram'
>
<i class='ri-instagram-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.linkedin.com/company/fablab-cohabit/about/'
target='_blank'
title='LinkedIn'
>
<i class='ri-linkedin-line'></i>
</a>
<a
class='footer__badges__item'
href='https://toot.aquilenet.fr/@cohabitfablab'
target='_blank'
title='Mastodon'
>
<i class='ri-mastodon-line'></i>
</a>
<a
class='footer__badges__item'
href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
target='_blank'
title='Matrix'
>
[m]
</a>
</div>
</section>
<div>
<section>
<h3>Contact</h3>
<p>
<a href='tel:+33556847961'>
<i class='ri-phone-line'></i> 05 56 84 79 61
</a>
</p>
<p>
<a href='mailto:fablab@iut.u-bordeaux.fr'>
<i class='ri-mail-line'></i> fablab@iut.u-bordeaux.fr
</a>
</p>
</section>
<section>
<h3>Nous rencontrer</h3>
<p>
<a
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
</a>
</p>
<p>
<i class='ri-time-line'></i> Mardi - Vendredi (10h - 18h)
</p>
</section>
<section>
<h3>Réseaux</h3>
<div class='footer__badges'>
<a
class='footer__badges__item'
href='https://tube.aquilenet.fr/c/cohabit_fablab/videos'
target='_blank'
title='Peertube'
>
<i class='ri-play-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.facebook.com/people/Fablab-Cohabit/100069798301175/'
target='_blank'
title='Facebook'
>
<i class='ri-facebook-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.instagram.com/fablabcohabit/'
target='_blank'
title='Instagram'
>
<i class='ri-instagram-line'></i>
</a>
<a
class='footer__badges__item'
href='https://www.linkedin.com/company/fablab-cohabit/about/'
target='_blank'
title='LinkedIn'
>
<i class='ri-linkedin-line'></i>
</a>
<a
class='footer__badges__item'
href='https://toot.aquilenet.fr/@cohabitfablab'
target='_blank'
title='Mastodon'
>
<i class='ri-mastodon-line'></i>
</a>
<a
class='footer__badges__item'
href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
target='_blank'
title='Matrix'
>
[m]
</a>
</div>
</section>
</div>
</footer>
)
}

12
components/Header.css
View file

@ -1,14 +1,20 @@
header {
width: 100%;
padding: var(--_gap);
display: flex;
gap: var(--_gap);
padding: 0;
margin: 0;
background-color: var(--_translucent);
color: var(--_font-color);
user-select: none;
}
header div {
max-width: var(--_wide-screen);
margin: auto;
padding: var(--_gap);
display: flex;
gap: var(--_gap);
}
header span {
text-wrap: nowrap;
padding: var(--_gap);

64
components/Header.tsx
View file

@ -3,37 +3,39 @@ import { asset } from '$fresh/runtime.ts'
export function Header() {
return (
<header>
<span>
<a href='/'>
Coh<img
src={asset('/assets/bulb.svg')}
alt='a'
/>bit POC
</a>
</span>
<nav>
<li>
<a href='/machines'>Machines</a>
</li>
<li>
<a href='/projets'>Projets</a>
</li>
<li>
<a href='/blog'>Blog</a>
</li>
<li>
<details>
<summary>Fablab</summary>
<ul>
<li>Équipes</li>
<li>Redmine</li>
<li>Git</li>
<li>Matrix</li>
</ul>
</details>
</li>
</nav>
<input type='search' name='' id='' placeholder='Rechercher' />
<div>
<span>
<a href='/'>
Coh<img
src={asset('/assets/bulb.svg')}
alt='a'
/>bit POC
</a>
</span>
<nav>
<li>
<a href='/machines'>Machines</a>
</li>
<li>
<a href='/projets'>Projets</a>
</li>
<li>
<a href='/blog'>Blog</a>
</li>
<li>
<details>
<summary>Fablab</summary>
<ul>
<li>Équipes</li>
<li>Redmine</li>
<li>Git</li>
<li>Matrix</li>
</ul>
</details>
</li>
</nav>
<input type='search' name='' id='' placeholder='Rechercher' />
</div>
</header>
)
}

1
src/stylesheets/base.css
View file

@ -12,6 +12,7 @@
/* size */
--_gap: var(--size-3);
--_gap-half: calc(var(--_gap) / 2);
--_wide-screen: 1400px;
/* color */
--_accent-color: var(--lime-6);