reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'.

This commit is contained in:
ADRN 2021-11-30 13:11:47 +01:00
parent 189bf17ee2
commit ca108192fc
22 changed files with 59 additions and 26 deletions

3
.gitmodules vendored
View file

@ -1,3 +0,0 @@
[submodule "charpente"]
path = charpente
url = git@git.deuxfleurs.fr:Deuxfleurs/charpente.git

View file

@ -1,4 +1,4 @@
Images named or under folders called "ronce" or "illustration-ronce" are not free of rights. Images which name contain "ronce" or under folders called "ronce" are not free of rights.
Otherwise: Otherwise:

View file

@ -1,14 +1,49 @@
# Laboratoire du futur site web de Deuxfleurs # Laboratoire du futur site web de Deuxfleurs
Les tests graphiques sont dans `/lab`, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre ! ## Mise en route
## Objectifs techniques Ce dépôt contient un sous-module, [Charpente](https://git.deuxfleurs.fr/Deuxfleurs/charpente). Pour l'initialiser, il faut le cloner en plus du dépôt courant ! :
```bash
git clone git@git.deuxfleurs.fr:Deuxfleurs/design.git
cd design/
git submodule init
git submodule update
```
Vous voilà prêt.
## Organisation du dépôt
Ce dépôt nous suit depuis un bout, et c'est donc un petit merdier plein de trésors inespérés (hum).
* `maquette/` contient des exports de notre maquette, créée sur [Penpot](https://design.penpot.app) (demandez-nous les accès si vous voulez).
* `ronce/` contient tout ce qui concerne Ronce, la graphiste qui nous a dessiné l'image dans les arbres.
Toutes les versions de `illustration-ronce` sont sous licence, ne l'utilisez pas sans autorisation. Nous avons l'autorisation de l'utiliser pour le site de Deuxfleurs.
`feuilles_brush.abr` est une *brush* de l'illustration, qu'elle nous a filé au cas où on veut du bitmap assorti sur le site.
* `lab/` contient des mini-projets sous forme de pages web, qui sont des idées graphiques qu'on pourrait inclure au site final.
`top-nav.html` contient une bonne partie du HTML qu'on attendrait dans la version finale. Hésitez pas à copier-coller.
* `assets/` contient les assets (css, fonts & images) qui sont utilisés dans `lab/`.
* `notes/` contient des notes au format texte. N'hésitez pas à y ajouter vos recherches.
* `inspirations/` contient des assets graphiques qui nous ont inspiré pendant nos recherches graphiques.
## Notes
### Objectifs techniques
* Responsive mobile-first design. * 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. * [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.) * 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 ### Idées graphiques
* **Branches et canopée** : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu. * **Branches et canopée** : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
@ -34,7 +69,7 @@ Les tests graphiques sont dans `/lab`, une page HTML par idée à développer. N
[Guide pour le faire avec CSS](https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa). [Guide pour le faire avec CSS](https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa).
## Inspirations & Ressources ### Inspirations & Ressources
* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips) * [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips)

View file

@ -3,6 +3,20 @@
@import url("../fonts/spacemono.css"); @import url("../fonts/spacemono.css");
@import url("../fonts/firasans-regular.css"); @import url("../fonts/firasans-regular.css");
body, html {
margin: 0;
padding: 0;
}
* {
scrollbar-width: thin;
}
*, ::before, ::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html, body { html, body {
background-color: white; background-color: white;
font-family: "Space Mono", Monaco, monospace !important; font-family: "Space Mono", Monaco, monospace !important;
@ -102,7 +116,7 @@ nav ul {
header { header {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
background-image: url("../images/ronce/illustration-ronce_1200x765px.png"); background-image: url("../images/ronce/illustration-ronce-v3_2400x1531px.png");
/* Create the parallax scrolling effect */ /* Create the parallax scrolling effect */
/*background-attachment: fixed;*/ /*background-attachment: fixed;*/
background-position: center; background-position: center;

1
assets/images/ronce Symbolic link
View file

@ -0,0 +1 @@
../../ronce/illustration

View file

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

View file

@ -1 +0,0 @@
../charpente/charpente.css

@ -1 +0,0 @@
Subproject commit 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69a

View file

@ -29,7 +29,7 @@
</div> </div>
</nav> </nav>
<img src="assets/images/ronce/illustration-ronce_1200x765px.png"> <img src="assets/images/ronce/illustration-ronce-v3_2400x1531px.png">
</header> </header>
<main> <main>

View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="assets/css/chota.min.css"> <link rel="stylesheet" href="assets/css/chota.min.css">
<style type="text/css"> <style type="text/css">
header { header {
background-image: url("assets/images/ronce/illustration-ronce_2400x1531px.png"); background-image: url("assets/images/ronce/illustration-ronce-v3_2400x1531px.png");
position: fixed; position: fixed;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;

View file

@ -9,9 +9,8 @@
<title>Deuxfleurs</title> <title>Deuxfleurs</title>
<link rel="stylesheet" href="assets/css/normalize.css"> <link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="charpente.css">
<!-- <link rel="stylesheet" href="assets/css/chota.css"> --> <!-- <link rel="stylesheet" href="assets/css/chota.css"> -->
<link rel="stylesheet" href="assets/css/blueprint.css"> <link rel="stylesheet" href="assets/css/top-nav.css">
</head> </head>
<body> <body>

Binary file not shown.

View file

@ -1 +0,0 @@
illustration-ronce is not free of rights.

View file

@ -1,9 +0,0 @@
# Illustration de Ronce
**These images are not free of rights.
Ces images ne sont pas libres de droit.**
Janvier 2021
La dernière version est celle qu'il faut utiliser.

View file

Before

Width:  |  Height:  |  Size: 557 KiB

After

Width:  |  Height:  |  Size: 557 KiB

View file

Before

Width:  |  Height:  |  Size: 550 KiB

After

Width:  |  Height:  |  Size: 550 KiB

View file

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

View file

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

View file

Before

Width:  |  Height:  |  Size: 4.3 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

View file

Before

Width:  |  Height:  |  Size: 646 KiB

After

Width:  |  Height:  |  Size: 646 KiB