diff options
author | LUXEY Adrien <adrien.luxey@inria.fr> | 2021-02-02 22:13:59 +0100 |
---|---|---|
committer | LUXEY Adrien <adrien.luxey@inria.fr> | 2021-02-02 22:13:59 +0100 |
commit | 2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7 (patch) | |
tree | d72932923a7681bef747c60f0eda461937974891 | |
parent | 6a0630e50ddc5e0c138c9d13c75217329ec9f60b (diff) | |
download | design-2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7.tar.gz design-2c98b6ebeb3cfa3d812a72f75cbbdf1f403699a7.zip |
avant nettoyage
-rw-r--r-- | lab/README.md | 32 | ||||
-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.css | 132 | ||||
-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) | bin | 1336157 -> 1336157 bytes | |||
-rw-r--r-- | lab/assets/images/illustration-ronce_2400x1531px.png (renamed from draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png) | bin | 4478464 -> 4478464 bytes | |||
-rw-r--r-- | lab/assets/images/illustration-ronce_800x510px.png (renamed from draft_site_adrien/assets/images/illustration-ronce_800x510px.png) | bin | 661755 -> 661755 bytes | |||
-rw-r--r-- | lab/gimp/idee_adrien.png (renamed from draft_site_adrien/gimp/idee_adrien.png) | bin | 3980572 -> 3980572 bytes | |||
-rw-r--r-- | lab/gimp/idee_adrien.xcf (renamed from draft_site_adrien/gimp/idee_adrien.xcf) | bin | 14167250 -> 14167250 bytes | |||
-rw-r--r-- | lab/gimp/idee_adrien_commentaire_ronce.png (renamed from draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png) | bin | 1041783 -> 1041783 bytes | |||
-rw-r--r-- | lab/index-fullwidth.html (renamed from draft_site_adrien/index.html) | 5 | ||||
-rw-r--r-- | lab/index.html | 123 | ||||
-rw-r--r-- | lab/notes/framework_html.md (renamed from draft_site_adrien/README.md) | 27 | ||||
l--------- | lab/sandbox/assets | 1 | ||||
-rw-r--r-- | lab/sandbox/parallax.html | 70 |
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 <p> 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 Binary files differindex b59dad2..b59dad2 100644 --- a/draft_site_adrien/assets/images/illustration-ronce_1200x765px.png +++ b/lab/assets/images/illustration-ronce_1200x765px.png diff --git a/draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png b/lab/assets/images/illustration-ronce_2400x1531px.png Binary files differindex aa87398..aa87398 100644 --- a/draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png +++ b/lab/assets/images/illustration-ronce_2400x1531px.png diff --git a/draft_site_adrien/assets/images/illustration-ronce_800x510px.png b/lab/assets/images/illustration-ronce_800x510px.png Binary files differindex fe642ca..fe642ca 100644 --- a/draft_site_adrien/assets/images/illustration-ronce_800x510px.png +++ b/lab/assets/images/illustration-ronce_800x510px.png diff --git a/draft_site_adrien/gimp/idee_adrien.png b/lab/gimp/idee_adrien.png Binary files differindex 145afc8..145afc8 100644 --- a/draft_site_adrien/gimp/idee_adrien.png +++ b/lab/gimp/idee_adrien.png diff --git a/draft_site_adrien/gimp/idee_adrien.xcf b/lab/gimp/idee_adrien.xcf Binary files differindex b25850f..b25850f 100644 --- a/draft_site_adrien/gimp/idee_adrien.xcf +++ b/lab/gimp/idee_adrien.xcf diff --git a/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png b/lab/gimp/idee_adrien_commentaire_ronce.png Binary files differindex da0e896..da0e896 100644 --- a/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png +++ b/lab/gimp/idee_adrien_commentaire_ronce.png 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 <p> 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 |