avant nettoyage

lab/README.md

@@ -0,0 +1,32 @@
+# Laboratoire du futur site web de Deuxfleurs 
+
+## Objectifs techniques
+
+* Responsive mobile-first design.
+* [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : Des images envoyées adaptées à la taille des viewports.
+* Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.)
+
+## Idées graphiques
+
+* Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
+* Un header avec des onglets sur PC et un « menu-sandwich » sur le côté sur téléphone.
+* Exploiter l'illustration au maximum. En la laissant fixée en fond de page tandis que les éléments graphiques défilent ?
+
+
+## Inspirations
+
+* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips)
+
+	On peut faire tout ce qu'il faut avec CSS3 !
+
+	Néanmoins, *rendre un site accessible sans outils a l'air compliqué*.
+
+* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
+
+	Utiliser des bannières qui donnent du sens au contenu.
+
+* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
+
+	Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. 
+
+

lab/assets/css/deuxfleurs-chato-fullwidth.css

@@ -0,0 +1,132 @@
+@import 'normalize.css';
+@import 'chota.min.css';
+
+/* font-size:
+ * HTML font size is 16px on most browsers, sometimes 14px.
+ * Chota sets `font-size: 62.5%;`, that is 10px on most browsers.
+ */
+
+:root {
+  /* Blanc cassé (offset autour de #main-page) */
+  --bg-color: #f4f4f4;
+  /* Bleu turquoise du ciel au lion */
+  --bg-secondary-color: #cafaef;
+  /* Gris violet du sol */
+  --bg-ternary-color: #c7c9e2;
+  --bg-canopee-color: #151a05;
+  --color-canopee: #a0c43c;
+  --bg-branche-color: #381e02;
+  --color-primary: #14854F;
+  --color-text-light: #fafafa;
+  --color-lightGrey: #d2d6dd;
+  --color-grey: #747681;
+  --color-darkGrey: #3f4144;
+  --color-error: #d43939;
+  --color-success: #28bd14;
+  /*--grid-maxWidth: 120rem;*/
+  --grid-maxWidth: 100%;
+  --grid-gutter: 0rem;
+  --font-size: 1.6rem;
+  --font-color: #333333;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
+}
+
+body {
+  background-color: var(--bg-color);
+}
+
+#main-page {
+  background-color: var(--bg-secondary-color);
+  padding: 0;
+}
+
+header {
+  margin-bottom: 4rem;
+  height: 100%;
+}
+
+#logo {
+  font-size: 3.2rem;
+  color: var(--color-text-light);
+}
+
+header>nav {
+  background-color: var(--bg-canopee-color);
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+#illustration {
+  background-image: url("../images/illustration-ronce_800x510px.png");
+  height: 100%;
+  /* Create the parallax scrolling effect */
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media screen and (min-width: 800px) {
+  #illustration {
+    background-image: url("../images/illustration-ronce_1200x765px.png");
+  }
+}
+@media screen and (min-width: 1200px) {
+  #illustration {
+    background-image: url("../images/illustration-ronce_2400x1531px.png");
+
+  }
+}
+
+
+section div {
+  padding-left: 4rem;
+  padding-right: 4rem;
+  margin-top: 2rem;
+}
+
+section p {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  font-size: 2rem;
+}
+
+section .canopee {
+  background-color: var(--bg-canopee-color);
+  color: var(--color-canopee);
+  margin-bottom: 4rem;
+}
+section .canopee.left {
+  margin-left: 0;
+  padding-left: 6rem;
+  border-top-right-radius: 3rem;
+  border-bottom-right-radius: 3rem;
+}
+section .canopee.right {
+  margin-right: 0;
+  border-top-left-radius: 3rem;
+  border-bottom-left-radius: 3rem;
+}
+
+section .canopee p {
+  font-size: 1.6rem;
+}
+
+section .branche {
+  background-color: var(--bg-branche-color);
+  color: var(--color-text-light);
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+section .branche p {
+  font-size: 2.6rem;
+  margin: 0;
+}
+
+footer {
+  padding: 4rem;
+  border-top: 1px solid var(--bg-color);
+}

lab/index-fullwidth.html

@@ -9,7 +9,7 @@
   <title>Deuxfleurs</title>
 
   <!--<link rel="stylesheet" href="assets/css/chota.min.css">-->
-  <link rel="stylesheet" href="assets/css/deuxfleurs-chato.css">
+  <link rel="stylesheet" href="assets/css/deuxfleurs-chato-fullwidth.css">
   <!--<link rel="stylesheet" href="assets/css/mini-default.min.css">-->
 </head>
 
@@ -31,7 +31,8 @@
         </div>
       </nav>
 
-      <img src="assets/images/illustration-ronce_1200x765px.png">
+      <div id="illustration"></div>
+      <!--<img src="assets/images/illustration-ronce_1200x765px.png">-->
     </header>
 
     <section class="row">

lab/index.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Deuxfleurs</title>
+
+  <!--<link rel="stylesheet" href="assets/css/chota.min.css">-->
+  <link rel="stylesheet" href="assets/css/deuxfleurs-chato.css">
+  <!--<link rel="stylesheet" href="assets/css/mini-default.min.css">-->
+</head>
+
+<body>
+  <div id="main-page" class="container">
+
+    <header>
+      <nav class="nav">
+        <div class="nav-left">
+          <a id="logo" href="#">Deuxfleurs</a>
+        </div>
+        <div class="nav-right">
+          <div class="tabs">
+            <a>Services</a>
+            <a class="active">Infrastructure</a>
+            <a>Logiciels</a>
+            <a>Vision</a>
+          </div>
+        </div>
+      </nav>
+
+      <img src="assets/images/illustration-ronce_1200x765px.png">
+    </header>
+
+    <main>
+      <section class="row">
+        <div class="col-12">
+          <h1>Bienvenue chez Deuxfleurs !</h1>
+        </div>
+
+        <div class="col-6">
+          <p>
+            Nous sommes une association pour<br>
+            une informatique <b>écologique</b> et <b>humaine</b>,<br>
+            et nous sommes en <b>colère</b>.<br>
+            <small>Nous avons donc pris le maquis.</small>
+          </p>
+        </div>
+      </section>
+
+      <section class="row">
+        <div class="col-12-sm col-6-md">
+          <h2>Nous hébergeons</h2>
+          <p>
+            Celles et ceux qui ont besoin d'<b>outils libres</b><br>
+            pour discuter, collaborer, s'organiser, se divertir...
+          </p>
+        </div>
+
+        <div class="col-2-md"></div> <!-- vertical space -->
+
+        <div class="canopee right col-12-sm col-4-md">
+          <h2><small>Sans parasite !</small></h2>
+          <p>
+            Toutes nos constructions loufoques<br>
+            sont garanties <b>sans ver espion</b>.<br>
+            <small>Nous préférons le bon goût d'un logiciel bien fait.</small>
+          </p>
+        </div>
+      </section>
+
+      <section class="row">
+        <div class="canopee left col-12-sm col-4-md">
+          <h2><small>Infrastructure raisonnée</small></h2>
+          <p>
+            On essaye d'héberger nos ordinateurs <b>à la maison</b>.<br>
+            <small>Et c'est pas si facile !</small>
+          </p>
+        </div>
+
+        <div class="col-2-md"></div> <!-- vertical space -->
+
+        <div class="col-12-sm col-6-md">
+          <h2>Nous créons</h2>
+          <p>
+            Des logiciels pour améliorer<br>
+            et <b>interconnecter nos cabanes</b>.
+          </p>
+        </div>
+      </section>
+
+      <section class="row">
+        <div class="col-2-md"></div> <!-- vertical space -->
+        <div class="col-12-sm col-10-md">
+          <h2>Nous recrutons</h2>
+
+          <p>
+            Des bâtisseuses de cabanes ou <b>des évadés</b>...
+          </p>
+        </div>
+      </section>
+
+      <section>
+        <div class="branche row">
+          <div class="col-3-md"></div> <!-- vertical space -->
+          <div class="col-12-sm col-6-md">
+            <p>... des mondes d'en bas.</p>
+          </div>
+          <div class="col-3-md"></div> <!-- vertical space -->
+        </div> <!-- .branche -->
+      </section>
+    </main>
+
+    <footer class="is-right">
+      <small>Tous droits réservés à notre pangolin alcoolique.</small>
+    </footer>
+
+  </div> <!-- #main-page -->
+</body>
+
+</html>

lab/notes/framework_html.md

@@ -1,16 +1,7 @@
-# Brouillon du futur site web de Deuxfleurs 
-
-> Par Adrien pour commencer. Si ça vous plaît, hésitez pas à contribuer ! Sinon, faites des contre-propositions dans un autre dossier :) 
-
-## Features
-
-* Responsive mobile-first design.
-* Un header avec des onglets sur PC et un « menu-sandwich » sur téléphone.
-* Des images envoyées adaptées à la taille des viewports.
-* Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
-
 ## Framework HTML
 
+__OUTDATED__
+
 ### Pourquoi ?
 
 Un framework HTML, c'est un include CSS, et parfois du JS. Ca va de Bootstrap/Foundation, qui sont des framworks immenses (avec fonction « carrousel d'images » et une foule de trucs dont on se cogne) à Skeleton/Mini, qui essayent d'être le plus simple possible tout en apportant les fonctionnalités *vitales* à un site web moderne : 
@@ -49,18 +40,4 @@ Sources : une recherche web "small html responsive framework" et [Awesome CSS](h
 
 On part sur [mini.css](https://minicss.org/), parce qu'il les features que j'aime, est pas verbeux, bien minifié, et est supporté par des navigateurs assez anciens.
 
-* Le menu-sandwich s'appelle .
-
-
-## Réflexions sur le style du code
-
-### Semantic HTML
-
-Utiliser des bannières qui donnent du sens au contenu. Cf [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp).
-
-### Semantic CSS 
-
-Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. 
-
-https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
 

lab/sandbox/assets

@@ -0,0 +1 @@
+../assets

lab/sandbox/parallax.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CSS Scrolling Parallax</title>
+
+  <link rel="stylesheet" href="assets/css/chota.min.css">
+  <style type="text/css">
+  header {
+    background-image: url("assets/images/illustration-ronce_2400x1531px.png");
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    /* Create the parallax scrolling effect */
+    /* background-attachment: fixed; */
+    background-position: center;
+    /* background-repeat: no-repeat; */
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  header h1 {
+    text-align: center;
+    color: #fafafa;
+    margin-top: 35vh;
+  }
+
+
+  main {
+    max-width: 100%;
+    position: relative;
+    top: 95vh;
+    padding: 50px;
+    font-size: 20px;
+  }
+
+  section {
+    padding: 2rem;
+    margin-bottom: 4rem;
+    background-color: #fff;
+  }
+  </style>
+</head>
+
+<body>
+  <header>
+    <h1>Coucou</h1>
+  </header>
+  <main>
+    <section>
+      <h1>Cute Kitten</h1>
+      <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>
+
+      <p>Flank spare ribs capicola, strip steak biltong pancetta bresaola tri-tip cow landjaeger. Short ribs sirloin beef ribs, flank capicola ribeye turducken. Sirloin boudin andouille tail. Ham flank tail sausage t-bone, jerky landjaeger kevin porchetta ground round pork belly.</p>
+    </section>
+    <section>
+      <h1>Boring</h1>
+      <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>
+    </section>
+    <section>
+      <h1>Fluffy Kitten</h1>
+      <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>
+      <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>
+    </section>
+  </main>
+</body>
+
+</html>