Rework theme

This commit is contained in:
Quentin 2020-05-10 18:43:05 +02:00
parent 663dac9b68
commit c5d1a4aeca
3 changed files with 138 additions and 132 deletions

View file

@ -6,22 +6,29 @@ block root
meta(charset='utf-8') meta(charset='utf-8')
title 💮💮 deuxfleurs - #{title} title 💮💮 deuxfleurs - #{title}
link(rel="stylesheet", href="/css/main.css") link(rel="stylesheet", href="/css/main.css")
header meta(name="viewport", content="width=device-width, initial-scale=1.0")
.container body
.menu-item header
a(href='/') a#menu(href="#").mobile_inline
strong deuxfleurs  svg(viewBox="0 0 100 80", width="40", height="40")
img(src='/img/flower.svg' width='38') rect(width="100", height="20")
img(src='/img/flower.svg' width='38') rect(y="30" width="100" height="20")
.menu-item rect(y="60" width="100" height="20")
a(href='https://guichet.deuxfleurs.fr') compte
span  |  h1
h1 #{title} a(href="/") deuxfleurs
block main nav.computer_block
+menu(root)
main main
.container.spacing block content
nav footer
strong script.
a(href="/") Accueil (_ => {
+menu(root) const hamburger = document.getElementById('menu')
block content hamburger.onclick = _ => {
const nav = document.querySelector('body > header > nav')
console.log(nav.style.display)
nav.style.display = nav.style.display != 'block' ? 'block' : 'none'
}
})()

View file

@ -1,118 +1,100 @@
/*
* FONTS
*/
@font-face { @font-face {
font-family: "Heroes"; font-family: "Heroes";
src: url('../fonts/texgyreheros-regular.otf') format('truetype'); src: url('../fonts/texgyreheros-regular.otf') format('truetype');
} }
/*
* RESET CSS
*/
* { * {
font-family: Heroes; font-family: Heroes;
font-size: 1em; font-size: 1em; /* We use browser's default */
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html { height: 100% }
body { body {
margin-bottom: 42px; display: flex;
min-height: 100%;
flex-direction: row;
} }
header { /*
* RESPONSIVE
*/
.mobile_block, .mobile_inline { display: none }
@media screen and (max-width: 640px) {
body { flex-direction: column }
.computer_block { display: none }
.mobile_block { display: block }
.mobile_inline { display: inline }
}
/*
* CORE TEMPLATE
*/
/* Header + Menu */
body > header {
color: white;
background-color: #519c60; background-color: #519c60;
color: #ffffff; padding: 1.5rem;
padding: 30px 0px 1px 0px;
} }
h1 { body > header > a > svg {
font-size: 5em; fill: white;
display: inline;
vertical-align: sub;
margin-right: 1em;
} }
h2 { body > header > h1 { display: inline }
font-size: 3em; body > header a {
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.3em;
}
p {
font-size: 1.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ul {
margin-left: 42px;
}
li {
padding-top: 4px;
padding-bottom: 4px;
}
nav {
float: right;
}
.spacing {
margin-top: 1em;
}
.spacing2 {
margin-top: 3em;
}
header > .container > h1 {
margin: 10px 0px -27px 0px;
}
header > .container > .menu-item {
float: right;
}
header > .container > .menu-item > img {
vertical-align: -9px;
}
header > .container > .menu-item > a, header > .container > .menu-item > span {
font-size: 30px;
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
.container { body > main {
padding: 0px 40px 0px 40px; padding: 1.5rem;
max-width: 1200px;
} }
.chapeau { /*
font-size: 1.8em; * TEXT CORE (think markdown)
font-weight: bold; */
line-height: 1.2;
h1 { font-size: 2.5rem }
h2 { font-size: 2.0rem }
h3 { font-size: 1.75rem }
h4 { font-size: 1.50rem }
h5 { font-size: 1.25rem }
h6 { font-size: 1.10rem }
section, p { margin-bottom: 1rem }
/*
* UTILS
*/
/* float */
.left { float: left }
.right { float: right }
section::after, p::after {
clear: both;
display: block;
content: "";
} }
.service-box { /*
color: #000; * ELEMENTS
text-decoration: none; */
border: 0.2em solid #000;
width: 250px;
text-align:center;
margin-right: 1em;
float: left;
}
.service-box:hover {
background-color: #000;
color: #fff;
}
.service-box h3 {
font-size: 1.15em;
}
.list > br {
clear: left;
}
.center {
text-align: center;
}
input { input {
border: 0.1em black solid; border: 0.1em black solid;
@ -132,3 +114,21 @@ input {
margin: 0em 0em 0em 1em; margin: 0em 0em 0em 1em;
text-decoration: none; text-decoration: none;
} }
/* service button */
.service-box {
color: #000;
text-decoration: none;
border: 0.2em solid #000;
width: 250px;
text-align:center;
margin: 1em 1em 0em 0em;
display: block;
}
.service-box:hover {
background-color: #000;
color: #fff;
}

View file

@ -4,47 +4,46 @@ prepend root
- title = "deuxfleurs" - title = "deuxfleurs"
block content block content
.chapeau ⇨ protège votre vie privée section.no_mobile
.chapeau ⇨ défend vos libertés et vos droits h3 ⇨ protège votre vie privée
.chapeau ⇨ ne vous manipule pas h3 ⇨ défend vos libertés et vos droits
.chapeau ⇨ promeut la sobriété numérique h3 ⇨ ne vous manipule pas
h3 ⇨ promeut la sobriété numérique
section
section.spacing
h2 nos services éthiques h2 nos services éthiques
.list section
a.service-box.spacing(href='/Guide/Discussion.html') a.service-box.left(href='/Guide/Discussion.html')
div(style='font-size: 80px; height: 120px') 💬 div(style='font-size: 80px; height: 120px') 💬
h3 discussions h5 discussions
a.service-box.spacing(href='/Guide/Visioconférence.html') a.service-box.left(href='/Guide/Visioconférence.html')
div(style='font-size: 80px; height: 120px') 📞 div(style='font-size: 80px; height: 120px') 📞
h3 visioconférence h5 visioconférence
a.service-box.spacing(href='https://cloud.deuxfleurs.fr') a.service-box.left(href='https://cloud.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 🔒 div(style='font-size: 80px; height: 120px') 🔒
h3 sauvegarde de documents h5 sauvegarde de documents
a.service-box.spacing(href='https://sogo.deuxfleurs.fr') a.service-box.left(href='https://sogo.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 📨 div(style='font-size: 80px; height: 120px') 📨
h3 emails h5 emails
a.service-box.spacing(href='https://p.adnab.me') a.service-box.left(href='https://p.adnab.me')
div(style='font-size: 80px; height: 120px') 📄 div(style='font-size: 80px; height: 120px') 📄
h3 collaboration h5 collaboration
a.service-box.spacing(href='/Technique') a.service-box.left(href='/Technique')
div(style='font-size: 80px; height: 120px') 🌐 div(style='font-size: 80px; height: 120px') 🌐
h3 sites webs h5 sites webs
a.service-box.spacing(href='https://git.deuxfleurs.fr') a.service-box.left(href='https://git.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 💻 div(style='font-size: 80px; height: 120px') 💻
h3 code h5 code
br
p.spacing ⚠️ Vous devez être membre pour utiliser ces services.  p ⚠️ Vous devez être membre pour utiliser ces services. 
a(href="#nous-rejoindre") Nous rejoindre. a(href="#nous-rejoindre") Nous rejoindre.
section.spacing section
h2 contre les dérives du numérique h2 contre les dérives du numérique
:markdown-it(linkify) :markdown-it(linkify)
L'IETF, l'organisme en charge de la standardisation d'internet, reconnait que les choix technologiques ont un impact sur les droits de l'homme [[RFC8280]](https://trac.tools.ietf.org/html/rfc8280). L'IETF, l'organisme en charge de la standardisation d'internet, reconnait que les choix technologiques ont un impact sur les droits de l'homme [[RFC8280]](https://trac.tools.ietf.org/html/rfc8280).
section.spacing section
h2(id="nous-rejoindre") construits ensembles h2(id="nous-rejoindre") construits ensembles
p.spacing Nous fonctionnons actuellement selon un mode de cooptation qui nous permet d'une part de mieux contrôler l'utilisation des ressources et éviter les abus, et d'autre part de créer et garder un contact humain avec nos utilisateurs. p.spacing Nous fonctionnons actuellement selon un mode de cooptation qui nous permet d'une part de mieux contrôler l'utilisation des ressources et éviter les abus, et d'autre part de créer et garder un contact humain avec nos utilisateurs.
p.spacing p.spacing