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 similarity index 100% rename from draft_site_adrien/assets/css/chota.css rename to lab/assets/css/chota.css diff --git a/draft_site_adrien/assets/css/chota.min.css b/lab/assets/css/chota.min.css similarity index 100% rename from draft_site_adrien/assets/css/chota.min.css rename to 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 similarity index 100% rename from draft_site_adrien/assets/css/deuxfleurs-chato.css rename to 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 similarity index 100% rename from draft_site_adrien/assets/css/mini-default.min.css rename to lab/assets/css/mini-default.min.css diff --git a/draft_site_adrien/assets/css/normalize.css b/lab/assets/css/normalize.css similarity index 100% rename from draft_site_adrien/assets/css/normalize.css rename to 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 similarity index 100% rename from draft_site_adrien/assets/images/illustration-ronce_1200x765px.png rename to 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 similarity index 100% rename from draft_site_adrien/assets/images/illustration-ronce_2400x1531px.png rename to 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 similarity index 100% rename from draft_site_adrien/assets/images/illustration-ronce_800x510px.png rename to lab/assets/images/illustration-ronce_800x510px.png diff --git a/draft_site_adrien/gimp/idee_adrien.png b/lab/gimp/idee_adrien.png similarity index 100% rename from draft_site_adrien/gimp/idee_adrien.png rename to lab/gimp/idee_adrien.png diff --git a/draft_site_adrien/gimp/idee_adrien.xcf b/lab/gimp/idee_adrien.xcf similarity index 100% rename from draft_site_adrien/gimp/idee_adrien.xcf rename to 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 similarity index 100% rename from draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png rename to lab/gimp/idee_adrien_commentaire_ronce.png diff --git a/draft_site_adrien/index.html b/lab/index-fullwidth.html similarity index 94% rename from draft_site_adrien/index.html rename to lab/index-fullwidth.html index 22f5c9a..4eb3282 100644 --- a/draft_site_adrien/index.html +++ b/lab/index-fullwidth.html @@ -9,7 +9,7 @@ Deuxfleurs - + @@ -31,7 +31,8 @@ - +
+
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 @@ + + + + + + + + + Deuxfleurs + + + + + + + +
+ +
+ + + +
+ +
+
+
+

Bienvenue chez Deuxfleurs !

+
+ +
+

+ Nous sommes une association pour
+ une informatique écologique et humaine,
+ et nous sommes en colère.
+ Nous avons donc pris le maquis. +

+
+
+ +
+
+

Nous hébergeons

+

+ Celles et ceux qui ont besoin d'outils libres
+ pour discuter, collaborer, s'organiser, se divertir... +

+
+ +
+ +
+

Sans parasite !

+

+ Toutes nos constructions loufoques
+ sont garanties sans ver espion.
+ Nous préférons le bon goût d'un logiciel bien fait. +

+
+
+ +
+
+

Infrastructure raisonnée

+

+ On essaye d'héberger nos ordinateurs à la maison.
+ Et c'est pas si facile ! +

+
+ +
+ +
+

Nous créons

+

+ Des logiciels pour améliorer
+ et interconnecter nos cabanes. +

+
+
+ +
+
+
+

Nous recrutons

+ +

+ Des bâtisseuses de cabanes ou des évadés... +

+
+
+ +
+
+
+
+

... des mondes d'en bas.

+
+
+
+
+
+ +
+ Tous droits réservés à notre pangolin alcoolique. +
+ +
+ + + \ No newline at end of file diff --git a/draft_site_adrien/README.md b/lab/notes/framework_html.md similarity index 76% rename from draft_site_adrien/README.md rename to 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 @@ + + + + + + + CSS Scrolling Parallax + + + + + + +
+

Coucou

+
+
+
+

Cute Kitten

+

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.

+ +

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.

+
+
+

Boring

+

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.

+
+
+

Fluffy Kitten

+

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.

+

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.

+
+
+ + + \ No newline at end of file