aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLUXEY Adrien <adrien.luxey@inria.fr>2021-02-02 22:13:59 +0100
committerLUXEY Adrien <adrien.luxey@inria.fr>2021-02-02 22:13:59 +0100
commit2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7 (patch)
treed72932923a7681bef747c60f0eda461937974891
parent6a0630e50ddc5e0c138c9d13c75217329ec9f60b (diff)
downloaddesign-2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7.tar.gz
design-2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7.zip
avant nettoyage
-rw-r--r--lab/README.md32
-rw-r--r--lab/assets/css/chota.css (renamed from draft_site_adrien/assets/css/chota.css)0
-rw-r--r--lab/assets/css/chota.min.css (renamed from draft_site_adrien/assets/css/chota.min.css)0
-rw-r--r--lab/assets/css/deuxfleurs-chato-fullwidth.css132
-rw-r--r--lab/assets/css/deuxfleurs-chato.css (renamed from draft_site_adrien/assets/css/deuxfleurs-chato.css)0
-rw-r--r--lab/assets/css/mini-default.min.css (renamed from draft_site_adrien/assets/css/mini-default.min.css)0
-rw-r--r--lab/assets/css/normalize.css (renamed from draft_site_adrien/assets/css/normalize.css)0
-rw-r--r--lab/assets/images/illustration-ronce_1200x765px.png (renamed from draft_site_adrien/assets/images/illustration-ronce_1200x765px.png)bin1336157 -> 1336157 bytes
-rw-r--r--lab/assets/images/illustration-ronce_2400x1531px.png (renamed from draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png)bin4478464 -> 4478464 bytes
-rw-r--r--lab/assets/images/illustration-ronce_800x510px.png (renamed from draft_site_adrien/assets/images/illustration-ronce_800x510px.png)bin661755 -> 661755 bytes
-rw-r--r--lab/gimp/idee_adrien.png (renamed from draft_site_adrien/gimp/idee_adrien.png)bin3980572 -> 3980572 bytes
-rw-r--r--lab/gimp/idee_adrien.xcf (renamed from draft_site_adrien/gimp/idee_adrien.xcf)bin14167250 -> 14167250 bytes
-rw-r--r--lab/gimp/idee_adrien_commentaire_ronce.png (renamed from draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png)bin1041783 -> 1041783 bytes
-rw-r--r--lab/index-fullwidth.html (renamed from draft_site_adrien/index.html)5
-rw-r--r--lab/index.html123
-rw-r--r--lab/notes/framework_html.md (renamed from draft_site_adrien/README.md)27
l---------lab/sandbox/assets1
-rw-r--r--lab/sandbox/parallax.html70
18 files changed, 363 insertions, 27 deletions
diff --git a/lab/README.md b/lab/README.md
new file mode 100644
index 0000000..7ee5c11
--- /dev/null
+++ b/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 &lt;p&gt; est considéré une mauvaise pratique.
+
+
diff --git a/draft_site_adrien/assets/css/chota.css b/lab/assets/css/chota.css
index ca1b640..ca1b640 100644
--- a/draft_site_adrien/assets/css/chota.css
+++ b/lab/assets/css/chota.css
diff --git a/draft_site_adrien/assets/css/chota.min.css b/lab/assets/css/chota.min.css
index 7acf70a..7acf70a 100644
--- a/draft_site_adrien/assets/css/chota.min.css
+++ b/lab/assets/css/chota.min.css
diff --git a/lab/assets/css/deuxfleurs-chato-fullwidth.css b/lab/assets/css/deuxfleurs-chato-fullwidth.css
new file mode 100644
index 0000000..dbec9b6
--- /dev/null
+++ b/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);
+} \ No newline at end of file
diff --git a/draft_site_adrien/assets/css/deuxfleurs-chato.css b/lab/assets/css/deuxfleurs-chato.css
index 1e34f0c..1e34f0c 100644
--- a/draft_site_adrien/assets/css/deuxfleurs-chato.css
+++ b/lab/assets/css/deuxfleurs-chato.css
diff --git a/draft_site_adrien/assets/css/mini-default.min.css b/lab/assets/css/mini-default.min.css
index 33dfdf7..33dfdf7 100644
--- a/draft_site_adrien/assets/css/mini-default.min.css
+++ b/lab/assets/css/mini-default.min.css
diff --git a/draft_site_adrien/assets/css/normalize.css b/lab/assets/css/normalize.css
index 192eb9c..192eb9c 100644
--- a/draft_site_adrien/assets/css/normalize.css
+++ b/lab/assets/css/normalize.css
diff --git a/draft_site_adrien/assets/images/illustration-ronce_1200x765px.png b/lab/assets/images/illustration-ronce_1200x765px.png
index b59dad2..b59dad2 100644
--- a/draft_site_adrien/assets/images/illustration-ronce_1200x765px.png
+++ b/lab/assets/images/illustration-ronce_1200x765px.png
Binary files differ
diff --git a/draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png b/lab/assets/images/illustration-ronce_2400x1531px.png
index aa87398..aa87398 100644
--- a/draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png
+++ b/lab/assets/images/illustration-ronce_2400x1531px.png
Binary files differ
diff --git a/draft_site_adrien/assets/images/illustration-ronce_800x510px.png b/lab/assets/images/illustration-ronce_800x510px.png
index fe642ca..fe642ca 100644
--- a/draft_site_adrien/assets/images/illustration-ronce_800x510px.png
+++ b/lab/assets/images/illustration-ronce_800x510px.png
Binary files differ
diff --git a/draft_site_adrien/gimp/idee_adrien.png b/lab/gimp/idee_adrien.png
index 145afc8..145afc8 100644
--- a/draft_site_adrien/gimp/idee_adrien.png
+++ b/lab/gimp/idee_adrien.png
Binary files differ
diff --git a/draft_site_adrien/gimp/idee_adrien.xcf b/lab/gimp/idee_adrien.xcf
index b25850f..b25850f 100644
--- a/draft_site_adrien/gimp/idee_adrien.xcf
+++ b/lab/gimp/idee_adrien.xcf
Binary files differ
diff --git a/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png b/lab/gimp/idee_adrien_commentaire_ronce.png
index da0e896..da0e896 100644
--- a/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png
+++ b/lab/gimp/idee_adrien_commentaire_ronce.png
Binary files differ
diff --git a/draft_site_adrien/index.html b/lab/index-fullwidth.html
index 22f5c9a..4eb3282 100644
--- a/draft_site_adrien/index.html
+++ b/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">
diff --git a/lab/index.html b/lab/index.html
new file mode 100644
index 0000000..1eb7ecf
--- /dev/null
+++ b/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> \ No newline at end of file
diff --git a/draft_site_adrien/README.md b/lab/notes/framework_html.md
index 0099767..00bdc9a 100644
--- a/draft_site_adrien/README.md
+++ b/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 &lt;p&gt; est considéré une mauvaise pratique.
-
-https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
diff --git a/lab/sandbox/assets b/lab/sandbox/assets
new file mode 120000
index 0000000..ec2e4be
--- /dev/null
+++ b/lab/sandbox/assets
@@ -0,0 +1 @@
+../assets \ No newline at end of file
diff --git a/lab/sandbox/parallax.html b/lab/sandbox/parallax.html
new file mode 100644
index 0000000..f3ab3da
--- /dev/null
+++ b/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> \ No newline at end of file