Commit b0b6ba01 authored by Dorian's avatar Dorian
Browse files

layout coulisse du web en classes permanentes

parent 27170c67
......@@ -21,20 +21,31 @@ La classe de l'élément ```art``` va appliquer un style CSS à l'entièreté de
Liste des dossiers de layout et leur classes:
* enquete, ```class="enquete"```
* rub, ```class="rubric"``` (Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu)
* rub-web (Coulisses du Web)
* rub-jouer (Médor à Jouer)
* petite-enquete et grande-enquete, ```class="enquete"```. La petite a une page d'intro custom, tandis que la grande a une double page.
* rub, ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Deux layouts un peu particuliers:
* rub-web ```class="rubric"```. Coulisses du Web ont leur propre layout.
* rub-jouer ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* entretien, ```class="interview"```
* recit, ```class="recit"```
* moment-flamand, ```class="flamand"```
* portrait, ```class="portrait"```
* photo, ```class="photo"```
* nombril, ```class="nombril"```
* edito, ```class="edito"```
* sommaire
Pour ajouter un sous-titre à côté de la têtière, notamment pour préciser les différentes rubriques, on utilise le champ ```rubric-subtitle```.
### Subtitle
Pour ajouter un sous-titre à côté de la têtière, notamment pour préciser les différentes rubriques, on utilise le champ ```rubric-subtitle``` de l'élément ```art```.
Les différents sous-titres des rubriques se trouvent en commentaire dans le layout rub.
```HTML
<div id="stories">
......@@ -42,6 +53,8 @@ Les différents sous-titres des rubriques se trouvent en commentaire dans le lay
</div>
```
### Paramètres URL
[a completer] Les paramètre draft, image, preview à la fin de l'url ```?draft=true&image```
## Positionner des éléments sur la grille
......@@ -127,7 +140,7 @@ Si notre image est coupée par son container, on peut la passer en ```object-fit
Ces deux modes sont pratiques quand on ne doit pas repositionner/recouper l'image, quand les classes de positionnement sur la grille suffisent.
L'image est positionnée absolument par rapport à son container ```figure```. Si elle est coupé par le container et qu'on veut la déplacer pour la voir apparaître en entier, on utilise ```top, left, right, bottom```.
Par contre les deux modes précédent ne donnent pas un bon contrôle en terme de repositionnement de l'image par rapport à son container.
Par contre les deux modes précédents ne donnent pas un bon contrôle en terme de repositionnement de l'image par rapport à son container.
Si elle est en mode ```object-fit: cover``` (par défaut), le résultat déplacé sera coupé la ou les bords du bloc coupait déjà l'image...
Le mode ```object-fit: contain``` ne donne pas un bon contrôle sur le resize car les espaces autour de l'image seront considérés comme faisant partie de sa taille et positon.
......
......@@ -20,6 +20,10 @@
* nombril de medor VERIF
* soutenir medor
* couv
NEW IN MEDOR 0:
* web
*/
......@@ -1688,3 +1692,42 @@ aside.sidebar span, aside.sidebar strong {
.sheet:nth-of-type(1) .main:before {
display: none;
}
/**
* #WEB
*/
/* Note:
1. comme les boites rounded/squared sont en dehors de l'élém stories, on ne peut
pas utiliser la classe de l'élém article comme selecteur et les classes
rounded/squared sont donc accessible sur tout les layouts
2. les padding verticaux de rounded/squared doivent etre calculer pour caler le texte sur la grille
3. customisez le reste différement des rubric ?
*/
/*___ Rounded/Squared corners colored boxes ___*/
.web-rounded,
.web-squared{
// pour que les deux boites se touchent au milieu
box-sizing: border-box !important;
width: 50%;
z-index: 2;
// default padding
padding: 24pt 24pt;
background: rgba(0,0,0,0.1);
}
.web-rounded{
border-radius: 120pt !important;
// top/bot padding for rounded
padding-top: 60pt;
padding-bottom: 60pt;
}
.web-rounded.shadow,
.web-squared.shadow{
z-index: 1;
margin-top: 12pt;
margin-bottom: -12pt;
margin-right: -12pt;
}
......@@ -26,20 +26,17 @@
<div class="bloc x0 t2 w5 h1 flow-lead" style="margin-top: 24pt;"></div>
<!-- textbox -->
<!-- use padding instead of margin for inline styling of text -->
<div class="bloc l0 y4 walf b0 fond1 flow-main rounded-corners"></div>
<div class="bloc r0 y4 walf b0 fond3 flow-main squared-corners" style="padding-bottom: 48pt;"></div>
<div class="bloc r0 y4 walf b0 fond2 squared-corners shadow"></div>
<!-- use height or margin (multiple of 12) to make a bloc the desired heigh-->
<!-- negative margin disaligned the text, don't use that -->
<!-- use padding (multiple of 12) to push the text and make place for images -->
<div class="bloc l0 y4 b0 web-rounded fond1 flow-main"></div>
<div class="bloc r0 y1 b12 web-rounded fond1 flow-main" style="height: 240pt;"></div>
<div class="bloc r0 y6 b0 web-squared fond3 flow-main" style="margin-top: 12pt; padding-bottom: 48pt;"></div>
<!-- illus -->
<div class="bloc x1 y3 w2 h1 flow-fig2" style="width: 123pt;
height: 120pt;
transform: rotate(-5deg);
margin: -26pt -22pt 10pt 22pt"></div>
<div class="bloc x5 y11 w1 h1 flow-fig5" style="width: 120pt;
height: 82pt;
transform: rotate(8deg);
margin: 2pt 0 0 0"></div>
<div class="bloc x1 y3 w2 h1 flow-fig2"></div>
<div class="bloc x5 y11 w1 h1 flow-fig5"></div>
</div>
</div>
</div>
......@@ -52,24 +49,18 @@
<div class="bloc t-1 r-1 b-1 l-1 page-background"></div>
<!-- textbox -->
<div class="bloc l0 y1 walf b5 fond5 flow-main rounded-corners"></div>
<div class="bloc r0 y2 walf b0 fond4 flow-main rounded-corners" style="padding-top: 66pt;"></div>
<div class="bloc l0 y0 web-rounded b7 fond5 flow-main" style="margin-bottom: 12pt;"></div>
<div class="bloc r0 y1 web-rounded b2 fond4 flow-main" style="padding-top: 60pt;"></div>
<div class="bloc l0 y8 web-squared b0 fond1 flow-main" style="height: 216pt;"></div>
<!-- illus -->
<div class="bloc x0 y9 w1 h1 flow-fig4" style="width: 120pt;
height: 90pt;
transform: rotate(-15deg);
margin: -29pt 0 0 57pt"></div>
<div class="bloc x5 y1 w1 h1 flow-fig3" style="width: 138pt;
height: 86pt;
transform: rotate(-5deg);
margin: 17pt 0 0 12pt"></div>
<div class="bloc x5 y0 w1 h1 flow-fig3"></div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="rubric" folio="0" src="https://medor.coop/api/v2/pages/783/?draft=true&image_"></art>
<art id="flow-main" class="rubric web" folio="1" src="https://medor.coop/api/v2/pages/783/?draft=true&image_"></art>
</div>
<!-- JAVASCRIPT -->
......
......@@ -28,38 +28,20 @@
// ___ COULISSES DU WEB ___
//___ rounded corners & boxes ___
// ---> Add to permanent style ???
.rounded-corners,
.squared-corners{
//pour que les deux boites se touchent au milieu
box-sizing: border-box;
width: 420pt/2;
z-index: 2;
//___ background page ___
.page-background{
background-color: #056dea;
z-index: 0;
}
.rounded-corners{
border-radius: 400px;
padding-top: 54pt;
padding-bottom: 60pt;
padding-left: 24pt;
padding-right: 24pt;
// title
header{
color: white;
}
.squared-corners{
padding-top: 18pt;
padding-bottom: 18pt;
padding-left: 24pt;
padding-right: 24pt;
}
.shadow{
z-index: 1;
margin-top: 12pt;
margin-bottom: -12pt;
margin-right: -12pt;
}
// no page num
.no-footer(1);
.no-footer(2);
//___ colors ___
......@@ -79,25 +61,28 @@
background-color: #FF69B4;
}
// back
.page-background{
background-color: #056dea;
z-index: 0;
}
// title
header{
color: white;
}
// images
//___ illus ___
figure img {
object-fit: contain !important;
object-fit: fill !important;
height: auto;
}
figure figcaption {
display: none;
}
// no page num
.no-footer(1);
.no-footer(2);
figure:nth-of-type(2){
.trans(-6deg,0,center,center);
width: 85pt;
top: -18pt;
left: 48pt;
}
figure:nth-of-type(5){
.trans(8deg,0,center,center);
width: 120pt;
top: 0;
left: 24pt;
}
figure:nth-of-type(3){
.trans(-5deg,0,center,center);
width: 138pt;
top: 20pt;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment