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:
|
Otherwise:
|
||||||
|
|
||||||
|
|
43
README.md
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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
|
@ -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>
|
</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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
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 |