reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'.
3
.gitmodules
vendored
|
@ -1,3 +0,0 @@
|
|||
[submodule "charpente"]
|
||||
path = charpente
|
||||
url = git@git.deuxfleurs.fr:Deuxfleurs/charpente.git
|
|
@ -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:
|
||||
|
||||
|
|
43
README.md
|
@ -1,14 +1,49 @@
|
|||
# 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.
|
||||
* [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
|
||||
### 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.
|
||||
|
||||
|
@ -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).
|
||||
|
||||
## 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)
|
||||
|
||||
|
|
|
@ -3,6 +3,20 @@
|
|||
@import url("../fonts/spacemono.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 {
|
||||
background-color: white;
|
||||
font-family: "Space Mono", Monaco, monospace !important;
|
||||
|
@ -102,7 +116,7 @@ nav ul {
|
|||
header {
|
||||
height: 100vh;
|
||||
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 */
|
||||
/*background-attachment: fixed;*/
|
||||
background-position: center;
|
1
assets/images/ronce
Symbolic link
|
@ -0,0 +1 @@
|
|||
../../ronce/illustration
|
|
@ -1 +0,0 @@
|
|||
../assets
|
|
@ -1 +0,0 @@
|
|||
../charpente/charpente.css
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69a
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<img src="assets/images/ronce/illustration-ronce_1200x765px.png">
|
||||
<img src="assets/images/ronce/illustration-ronce-v3_2400x1531px.png">
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="assets/css/chota.min.css">
|
||||
<style type="text/css">
|
||||
header {
|
||||
background-image: url("assets/images/ronce/illustration-ronce_2400x1531px.png");
|
||||
background-image: url("assets/images/ronce/illustration-ronce-v3_2400x1531px.png");
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
|
|
@ -9,9 +9,8 @@
|
|||
<title>Deuxfleurs</title>
|
||||
|
||||
<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/blueprint.css">
|
||||
<link rel="stylesheet" href="assets/css/top-nav.css">
|
||||
</head>
|
||||
|
||||
<body>
|
BIN
maquette/export_2021-11-30.pdf
Normal file
|
@ -1 +0,0 @@
|
|||
illustration-ronce is not free of rights.
|
|
@ -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.
|
Before Width: | Height: | Size: 557 KiB After Width: | Height: | Size: 557 KiB |
Before Width: | Height: | Size: 550 KiB After Width: | Height: | Size: 550 KiB |
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 3.4 MiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 4.3 MiB After Width: | Height: | Size: 4.3 MiB |
Before Width: | Height: | Size: 646 KiB After Width: | Height: | Size: 646 KiB |