feat: Mise à jour du design

This commit is contained in:
Simon 2021-10-22 16:43:20 +02:00
parent 337571376a
commit e13339fec0
6 changed files with 137 additions and 61 deletions

12
assets/styles/font.sass Normal file
View File

@ -0,0 +1,12 @@
html
font-size: 1.25rem
line-height: 1.15
body
font-size: 1.125rem
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
@media screen and (max-width: $size-small)
font-size: .9rem
p
line-height: 1.4

View File

@ -1,23 +1,34 @@
$size-small: 400px $size-small: 500px
@import "font"
body body
color: #2d3824 --color-background: #fff8eb
background: #fff8eb --color-paragraph: #2d3824
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" --color-highlight: #c14508
--border-style: dashed
--border-size: 4px
--link-style: dotted
--tile: 2rem
color: var(--color-paragraph)
background: var(--color-background)
margin: 0 auto margin: 0 auto
padding: 0 1rem padding: 0 var(--tile)
max-width: 800px max-width: 800px
font-size: 1.125rem
// background-image: repeating-conic-gradient(#fff 0 9deg, rgba(0, 0, 0, .1) 9deg 18deg)
// background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMSIgZmlsbD0iI2NjYyI+PC9yZWN0Pgo8L3N2Zz4=")
@media screen and (max-width: $size-small) @media screen and (max-width: $size-small)
font-size: 1rem --border-size: 2px
--tile: 1rem
hr hr
background: repeating-linear-gradient(90deg, transparent, transparent 9px, black 10px)
height: 12px
margin: 2em auto
position: relative
border: 0 border: 0
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
margin: var(--tile) auto
@media screen and (max-width: $size-small)
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
ul.no-style ul.no-style
margin: 0 margin: 0
@ -25,41 +36,90 @@ ul.no-style
list-style-type: none list-style-type: none
a, h1, h2, h3 a, h1, h2, h3
color: #c14508 color: var(--color-highlight)
h1 a
text-decoration: underline var(--link-style)
&:hover
text-decoration: underline
h1, h2, h3
text-align: center text-align: center
h2
margin: calc(var(--tile)*1.5) auto
h3
border: var(--border-size) var(--border-style) var(--color-highlight)
// display: inline-block
margin: calc(var(--tile)*1.5) auto var(--tile)
padding: var(--tile)
.footer .footer
font-size: 0.8rem font-size: 0.8rem
.services @media screen and (max-width: $size-small)
margin: 0 .cell, .cell.-right
text-align: center
flex: 0 0 100%
.flex
--margin-tile: calc(var(--tile)/2)
margin: calc(var(--margin-tile) * -1)
padding: 0 padding: 0
list-style-type: none list-style-type: none
$tile: 1rem width: calc(100% + 2 * var(--margin-tile))
width: calc(100% + 2*$tile)
margin-left: -$tile
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
li li
text-align: center text-align: center
padding: $tile padding: var(--margin-tile)
flex: 0 0 calc(100% * 6 / 12) flex: 0 0 50%
box-sizing: border-box box-sizing: border-box
img img
max-width: 100% max-width: 100%
width: 40% width: 40%
.contacts @media screen and (max-width: $size-small)
width: 100% margin: 0
width: 100%
li
flex: 0 0 100%
.quote
border: var(--border-size) var(--border-style) var(--color-highlight)
padding: var(--tile)
margin: calc(1.5 * var(--tile)) 0
position: relative
text-align: center
h2
color: var(--color-paragraph)
margin: 0
strong
color: var(--color-highlight)
font-size: 130%
// &::before
// content: ""
// position: absolute
// width: 100%
// height: 100%
// right: -1rem
// bottom: -1rem
// background-color: var(--color-highlight)
// mask: url(/icons/quote.svg) no-repeat 100px 100px
// mask-size: 80px
// opacity: .2
// transform: rotate(180deg)
// Grid // Grid
.grid { display: flex; flex-wrap: wrap; } .grid { display: flex; flex-wrap: wrap; }
.grid.\-middle { align-items: center; } .grid.\-middle { align-items: center; }
.grid.\-bottom { align-items: end; }
.cell { flex: 1; box-sizing: border-box; } .cell { flex: 1; box-sizing: border-box; }
.cell.\-left { text-align: left ;} .cell.\-left { text-align: left ;}
.cell.\-right { text-align: right; } .cell.\-right { text-align: right; }

View File

@ -3,19 +3,20 @@ title: RésiLien, Hébergeur de services numériques Open Source
description: RésiLien est un hébergeur de services numériques localisé en France dont l'infrastructure est décentralisée. description: RésiLien est un hébergeur de services numériques localisé en France dont l'infrastructure est décentralisée.
--- ---
## [RésiLien](/) accompagner les organisations qui ont une conscience sociétale vers la réappropriation de leurs outils numériques. > ## **Accompagner** <br>les organisations <br>qui ont une **conscience sociétale** <br>vers la réappropriation de<br>leurs **outils numériques**.
{.quote}
RésiLien est un hébergeur de services numériques localisé en France dont l'infrastructure est décentralisée. Nous respectons la charte des [C.H.A.T.O.N.S](https://chatons.org/) et avons déposé notre candidature afin de rejoindre leur collectif. **RésiLien** est un hébergeur de services numériques localisé en France 🇫🇷 dont l'infrastructure est décentralisée. Nous respectons [la charte](https://www.chatons.org/charte) du [Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires](https://chatons.org/) et avons déposé notre candidature afin de rejoindre leur collectif.
Reprenez le contrôle sur vos données en utilisant exclusivement des logiciels libres et en les stockant sur du matériel de confiance. Reprenez le contrôle sur vos données en utilisant exclusivement des **logiciels libres** et en les stockant sur du matériel de confiance.
Engagez vous dans la transition écologique en optant pour une sobriété numérique. Engagez vous dans la transition écologique 🍃 en optant pour une **sobriété numérique**.
Si vous avez une connexion Internet suffisante, hébergez dans votre local votre serveur contenant vos propres données. L'équipe de RésiLien en fera la maintenance à distance. Si vous avez une connexion Internet suffisante, hébergez dans votre local votre serveur contenant vos propres données. L'équipe de RésiLien en fera la maintenance à distance.
RésiLien est géré par un collectif d'entreprises de l'Économie Sociale et Solidaire. Aujourd'hui, ce collectif est composé de [Weko](https://weko.io) et de [Libenume](https://libenume.fr). RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale et Solidaire**. Aujourd'hui, ce collectif est composé de **[Weko](https://weko.io)** et de **[Libenume](https://libenume.fr)**.
### Quels services propose RésiLien ? ### Quels services propose RésiLien ?
- ![Collaboration sur un document](/icons/writting.svg) - ![Collaboration sur un document](/icons/writting.svg)
#### Prise de notes collaborative #### Prise de notes collaborative
@ -29,16 +30,19 @@ RésiLien est géré par un collectif d'entreprises de l'Économie Sociale et So
- ![Éco-conception de site internet](/icons/website.svg) - ![Éco-conception de site internet](/icons/website.svg)
#### Site web statique #### Site web statique
Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure. Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure.
{ .services } { .flex .services }
### Comment bénéficier des services de RésiLien ? ### Comment bénéficier des services de RésiLien ?
Pour tous les services hébergés par RésiLien, ce sera l'entreprise Weko (département de la Loire) ou Libenume (département des Côtes d'Armor) votre interlocutrice principale selon votre proximité géographique. Pour tous les services hébergés par RésiLien, ce sera l'entreprise Weko (département de la Loire) ou Libenume (département des Côtes d'Armor) votre interlocutrice principale selon votre proximité géographique.
[Weko](https://weko.io) | [Libenume](https://libenume.fr/) - #### [Weko](https://weko.io)
:--: | :--:
[simon@weko.io](mailto:simon@weko.io) | [contact@libenume.fr](mailto:contact@libenume.fr)
[07 57 18 01 68](tel:0757180168) | [07 64 70 62 94](tel:0764706294)
{ .contacts }
Ayant à cœur d'avoir une relation de proximité, nous vous conseillons de contacter l'entreprise la plus proche. Celle-ci vous enverra une proposition commerciale en fonction de vos besoins. Chaque prestation inclut une période d'accompagnement pour l'utilisation des services. [simon@weko.io](mailto:simon@weko.io)
[07 57 18 01 68](tel:0757180168)
- #### [Libenume](https://libenume.fr/)
[contact@libenume.fr](mailto:contact@libenume.fr)
[07 64 70 62 94](tel:0764706294)
{ .flex }
Ayant à cœur d'avoir une **relation de proximité**, nous vous conseillons de contacter l'entreprise la plus proche. Celle-ci vous enverra une proposition commerciale en fonction de vos besoins. Chaque prestation inclut une **période d'accompagnement pour l'utilisation des services**.

View File

@ -3,32 +3,33 @@ title: RésiLien, Mentions légales
description: description:
--- ---
# Mentions légales ## Mentions légales
### Édition du site web
## Édition du site web
Co-édité par Libenume et Weko Co-édité par Libenume et Weko
Libenume #### Libenume
Killian Kemps - Libenume Killian Kemps - Libenume
Entrepreneur titulaire dun contrat CAPE au sein de la Coopérative dActivités et dEmploi Avant-Premières. Entrepreneur titulaire dun contrat CAPE au sein de la Coopérative dActivités et dEmploi Avant-Premières.
Siège social : Bâtiment Penthièvre - Novapôle - 2 rue de la Croix Lormel, 22190 Plérin Siège social : Bâtiment Penthièvre - Novapôle - 2 rue de la Croix Lormel, 22190 Plérin
Site Web : libenume.fr Site Web : libenume.fr
SIRET : 482 395 464 00035 SIRET : 482 395 464 00035
Code APE : 7022Z Code APE : 7022Z
TVA Intracommunautaire : FR45 482 395 464 TVA Intracommunautaire : FR45 482 395 464
Weko #### Weko
Simon Constans - Weko Simon Constans - Weko
Entrepreneur titulaire dun contrat CAPE au sein de la Coopérative dActivités et dEmploi Talents Croisés. Entrepreneur titulaire dun contrat CAPE au sein de la Coopérative dActivités et dEmploi Talents Croisés.
Siège social : XXX Siège social : XXX
Site Web : XXX Site Web : XXX
SIRET : XXX SIRET : XXX
Code APE : XXX Code APE : XXX
TVA Intracommunautaire : TVA Intracommunautaire :
## Hébergement ### Hébergement
Services et données actives hébergés sur micro-ordinateurs dans les locaux de Weko à Crémeaux (42). Services et données actives hébergés sur micro-ordinateurs dans les locaux de Weko à Crémeaux (42).
Siège social : XXX Siège social : XXX

View File

@ -1,15 +1,15 @@
<hr> <hr>
<footer class="footer grid"> <footer class="footer grid -bottom">
<div class="cell"> <div class="cell">
<p>Alimenté par <a href="https://www.enercoop.fr/">Enercoop</a></p> <p>Alimenté par <a href="https://www.enercoop.fr/">Enercoop</a></p>
<p>Ce site est réalisé de façon éco-responsable,<br>il émet seulement 0.45g de CO<sub>2</sub> à chaque visite.</p> <p>Ce site est réalisé de façon éco-responsable,<br>il émet seulement 0.45g de CO<sub>2</sub> à chaque visite.</p>
</div> </div>
<div class="cell -center"> <div class="cell -right">
<p> <p>
<ul class="no-style"> <ul class="no-style">
<li><a href="/mentions-legales/">Mentions légales</a></li> <li><a href="/politique/">Politique de protection des données</a></li>
<li><a href="/mentions-legales/">Infrastructure</a></li> <li><a href="/mentions-legales/">Mentions légales</a> - <a href="/cgv/">CGV</a> - <a href="/cgu/">CGU</a></li>
<li><a href="/mentions-legales/">CGV</a></li> <li><a href="/infrastructure/">Infrastructure</a> - <a href="/sous-traitance">Sous-traitance</a></li>
</ul> </ul>
</p> </p>
</div> </div>

View File

@ -3,8 +3,7 @@
<nav class="menu cell -right"> <nav class="menu cell -right">
<ul class="no-style"> <ul class="no-style">
<li><a href="#comment-bénéficier-des-services-de-résilien-">Contact</a></li> <li><a href="#comment-bénéficier-des-services-de-résilien-">Contact</a></li>
<li><a href="#quels-services-propose-résilien-">Services</a></li> <li><a href="#quels-services-propose-résilien">Services</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<hr>