Rework theme
This commit is contained in:
parent
663dac9b68
commit
c5d1a4aeca
3 changed files with 138 additions and 132 deletions
|
|
@ -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'
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
|
||||||
178
src/css/main.css
178
src/css/main.css
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue