aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorQuentin Dufour <quentin@deuxfleurs.fr>2020-05-10 18:43:05 +0200
committerQuentin Dufour <quentin@deuxfleurs.fr>2020-05-10 18:43:05 +0200
commitc5d1a4aeca1da1c80a0e580ab0b60f8a13ce22d7 (patch)
tree924e9657f65b6140e1b4cf4e05e55c2fb678e613
parent663dac9b68ae091e5afc0c306398b2351311b134 (diff)
downloadsite-c5d1a4aeca1da1c80a0e580ab0b60f8a13ce22d7.tar.gz
site-c5d1a4aeca1da1c80a0e580ab0b60f8a13ce22d7.zip
Rework theme
-rw-r--r--src/_layout.pug43
-rw-r--r--src/css/main.css168
-rw-r--r--src/index.pug49
3 files changed, 133 insertions, 127 deletions
diff --git a/src/_layout.pug b/src/_layout.pug
index 9bd186b..781fefe 100644
--- a/src/_layout.pug
+++ b/src/_layout.pug
@@ -6,22 +6,29 @@ block root
meta(charset='utf-8')
title 💮💮 deuxfleurs - #{title}
link(rel="stylesheet", href="/css/main.css")
- header
- .container
- .menu-item
- a(href='/')
- strong deuxfleurs&nbsp;
- img(src='/img/flower.svg' width='38')
- img(src='/img/flower.svg' width='38')
- .menu-item
- a(href='https://guichet.deuxfleurs.fr') compte
- span &nbsp;|&nbsp;
- h1 #{title}
- block main
+ meta(name="viewport", content="width=device-width, initial-scale=1.0")
+ body
+ header
+ a#menu(href="#").mobile_inline
+ svg(viewBox="0 0 100 80", width="40", height="40")
+ rect(width="100", height="20")
+ rect(y="30" width="100" height="20")
+ rect(y="60" width="100" height="20")
+
+ h1
+ a(href="/") deuxfleurs
+ nav.computer_block
+ +menu(root)
+
main
- .container.spacing
- nav
- strong
- a(href="/") Accueil
- +menu(root)
- block content
+ block content
+ footer
+ script.
+ (_ => {
+ const hamburger = document.getElementById('menu')
+ hamburger.onclick = _ => {
+ const nav = document.querySelector('body > header > nav')
+ console.log(nav.style.display)
+ nav.style.display = nav.style.display != 'block' ? 'block' : 'none'
+ }
+ })()
diff --git a/src/css/main.css b/src/css/main.css
index f2cbe75..372bbc2 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,118 +1,100 @@
+/*
+ * FONTS
+ */
+
@font-face {
font-family: "Heroes";
src: url('../fonts/texgyreheros-regular.otf') format('truetype');
}
+
+/*
+ * RESET CSS
+ */
+
* {
font-family: Heroes;
- font-size: 1em;
+ font-size: 1em; /* We use browser's default */
margin: 0;
padding: 0;
}
-body {
- margin-bottom: 42px;
-}
-
-header {
- background-color: #519c60;
- color: #ffffff;
- padding: 30px 0px 1px 0px;
-}
+html { height: 100% }
-h1 {
- font-size: 5em;
-}
-
-h2 {
- font-size: 3em;
-}
-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;
+body {
+ display: flex;
+ min-height: 100%;
+ flex-direction: row;
}
-li {
- padding-top: 4px;
- padding-bottom: 4px;
-}
+/*
+ * RESPONSIVE
+ */
+.mobile_block, .mobile_inline { display: none }
-nav {
- float: right;
-}
-
-.spacing {
- margin-top: 1em;
-}
-.spacing2 {
- margin-top: 3em;
-}
+@media screen and (max-width: 640px) {
+ body { flex-direction: column }
+ .computer_block { display: none }
+ .mobile_block { display: block }
+ .mobile_inline { display: inline }
+}
-header > .container > h1 {
- margin: 10px 0px -27px 0px;
-}
+/*
+ * CORE TEMPLATE
+ */
-header > .container > .menu-item {
- float: right;
+/* Header + Menu */
+body > header {
+ color: white;
+ background-color: #519c60;
+ padding: 1.5rem;
}
-header > .container > .menu-item > img {
- vertical-align: -9px;
+body > header > a > svg {
+ fill: white;
+ display: inline;
+ vertical-align: sub;
+ margin-right: 1em;
}
-header > .container > .menu-item > a, header > .container > .menu-item > span {
- font-size: 30px;
+body > header > h1 { display: inline }
+body > header a {
color: white;
text-decoration: none;
}
-.container {
- padding: 0px 40px 0px 40px;
+body > main {
+ padding: 1.5rem;
+ max-width: 1200px;
}
-.chapeau {
- font-size: 1.8em;
- font-weight: bold;
- line-height: 1.2;
-}
+/*
+ * TEXT CORE (think markdown)
+ */
-.service-box {
- color: #000;
- 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;
-}
+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 }
-.service-box h3 {
- font-size: 1.15em;
-}
+/*
+ * UTILS
+ */
-.list > br {
- clear: left;
+/* float */
+.left { float: left }
+.right { float: right }
+section::after, p::after {
+ clear: both;
+ display: block;
+ content: "";
}
-.center {
- text-align: center;
-}
+/*
+ * ELEMENTS
+ */
input {
border: 0.1em black solid;
@@ -132,3 +114,21 @@ input {
margin: 0em 0em 0em 1em;
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;
+}
+
diff --git a/src/index.pug b/src/index.pug
index c3f792a..e6910d3 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -4,47 +4,46 @@ prepend root
- title = "deuxfleurs"
block content
- .chapeau ⇨ protège votre vie privée
- .chapeau ⇨ défend vos libertés et vos droits
- .chapeau ⇨ ne vous manipule pas
- .chapeau ⇨ promeut la sobriété numérique
+ section.no_mobile
+ h3 ⇨ protège votre vie privée
+ h3 ⇨ défend vos libertés et vos droits
+ h3 ⇨ ne vous manipule pas
+ h3 ⇨ promeut la sobriété numérique
-
- section.spacing
+ section
h2 nos services éthiques
- .list
- a.service-box.spacing(href='/Guide/Discussion.html')
+ section
+ a.service-box.left(href='/Guide/Discussion.html')
div(style='font-size: 80px; height: 120px') 💬
- h3 discussions
- a.service-box.spacing(href='/Guide/Visioconférence.html')
+ h5 discussions
+ a.service-box.left(href='/Guide/Visioconférence.html')
div(style='font-size: 80px; height: 120px') 📞
- h3 visioconférence
- a.service-box.spacing(href='https://cloud.deuxfleurs.fr')
+ h5 visioconférence
+ a.service-box.left(href='https://cloud.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 🔒
- h3 sauvegarde de documents
- a.service-box.spacing(href='https://sogo.deuxfleurs.fr')
+ h5 sauvegarde de documents
+ a.service-box.left(href='https://sogo.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 📨
- h3 emails
- a.service-box.spacing(href='https://p.adnab.me')
+ h5 emails
+ a.service-box.left(href='https://p.adnab.me')
div(style='font-size: 80px; height: 120px') 📄
- h3 collaboration
- a.service-box.spacing(href='/Technique')
+ h5 collaboration
+ a.service-box.left(href='/Technique')
div(style='font-size: 80px; height: 120px') 🌐
- h3 sites webs
- a.service-box.spacing(href='https://git.deuxfleurs.fr')
+ h5 sites webs
+ a.service-box.left(href='https://git.deuxfleurs.fr')
div(style='font-size: 80px; height: 120px') 💻
- h3 code
- br
+ h5 code
- p.spacing ⚠️ Vous devez être membre pour utiliser ces services.&nbsp;
+ p ⚠️ Vous devez être membre pour utiliser ces services.&nbsp;
a(href="#nous-rejoindre") Nous rejoindre.
- section.spacing
+ section
h2 contre les dérives du numérique
: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).
- section.spacing
+ section
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