Commit b435faa2 authored by Doriane's avatar Doriane 💬
Browse files

added responsive layout for jcdecaux mobilier vertical

parent d6008935
......@@ -18,8 +18,10 @@
image: "todoscaeran-smallcorr.jpg"
orientation:
totem: "up"
vertical: "up"
degrade:
totem: "left"
vertical: "left"
theme: "light"
theme_footer: "dark"
......
......@@ -3,7 +3,7 @@
/* ___ JC Decaux - mobilerVertical ___ */
:root{
--bleed-overprint: -2mm;
--bleed-overprint: -4mm;
--visible-width: 110cm;
--visible-height: 161cm;
}
......
......@@ -188,7 +188,7 @@ a {
========================================================================== */
.affiche {}
.affiche.totem {
.affiche:is(.totem, .vertical) {
/* pour le footer en bas */
display: grid;
grid-template-rows: 1fr auto;
......@@ -221,7 +221,7 @@ a {
}
/* exception if in totem we have shape and footer section in one */
.affiche.totem.up{
.affiche:is(.totem, .vertical).up{
--top-division: 55%;
}
.affiche.metro.down{
......@@ -256,7 +256,7 @@ section.image::after {
background: var(--gradient-V);
}
:is(.totem.left, .totem.right) section.image::after{
.affiche:is(.totem, .vertical):is(.left, .right) section.image::after{
bottom: 0;
}
......@@ -328,13 +328,13 @@ section.image::after {
.affiche.metro.up .pad.forme {
padding-top: 0cm;
}
.affiche.totem .pad {
.affiche:is(.totem, .vertical) .pad {
padding: 3.5cm 5cm 4cm;
}
.affiche.totem.down .pad.forme {
.affiche:is(.totem, .vertical).down .pad.forme {
padding-bottom: 0;
}
.affiche.totem.up .pad.forme {
.affiche:is(.totem, .vertical).up .pad.forme {
padding-top: 0;
}
......@@ -346,19 +346,19 @@ header {}
.metro header {
width: calc(50% - 4cm);
}
.totem header {
.affiche:is(.totem, .vertical) header {
width: 75%;
}
:is(.totem.left, .totem.right) header {
.affiche:is(.totem, .vertical):is(.left, .right) header {
width: 50%;
word-break: break-all;
}
:is(.totem.left, .totem.right) .auteurice {
.affiche:is(.totem, .vertical):is(.left, .right) .auteurice {
width: 100%;
}
.totem.up .titre,
:is(.totem, .vertical).up .titre,
.metro.left .titre,
.metro.up .titre {
/* color white when title above picture */
......@@ -380,7 +380,7 @@ header {}
color: white;
}
.totem.up .auteurice {
:is(.totem, .vertical).up .auteurice {
position: absolute;
bottom: calc(100% - var(--top-division) + 4cm);
z-index: 100;
......@@ -396,11 +396,11 @@ header {}
z-index: 100;
}
:is(.totem.left, .totem.right) .credits{
.affiche:is(.totem, .vertical):is(.left, .right) .credits{
right: calc(50% + 4cm);
}
.totem.down .credits,
:is(.totem, .vertical).down .credits,
.metro.down .credits{
color: white;
}
......@@ -450,7 +450,7 @@ footer .balsa .logo svg {
}
/* editeurice responsable*/
.totem .edit-resp {
:is(.totem, .vertical) .edit-resp {
position: absolute;
left: 0;
bottom: -0.5cm;
......@@ -619,7 +619,7 @@ footer.black .logo svg path{
:is(.totem.down, .totem.up) .picture{
background-size: 100% auto;
}
:is(.totem.left, .totem.right) .picture{
.affiche:is(.totem, .vertical):is(.left, .right) .picture{
background-size: auto 100%;
}
:is(.metro.left, .metro.right) .picture{
......@@ -681,6 +681,10 @@ section.forme>.wrapper {
.affiche.totem .other-shapes svg path{
stroke: url("/totem.html#degrade");
}
.affiche.vertical .shape-wrapper svg path,
.affiche.vertical .other-shapes svg path{
stroke: url("/vertical.html#degrade");
}
.gradient-stroke{
position: absolute; top: 0; left: 0;
width: 0; height: 0;
......@@ -696,7 +700,7 @@ section.forme>.wrapper {
top: calc(100% + 0.5em);
text-align: center;
}
:is(.totem.left, .totem.right) .accroche{
.affiche:is(.totem, .vertical):is(.left, .right) .accroche{
width: 50cm;
}
......@@ -710,12 +714,12 @@ section.forme>.wrapper {
top: 4cm;
width: 150cm;
}
.totem.down .accroche {
:is(.totem, .vertical).down .accroche {
top: auto;
bottom: 4cm;
width: 110cm;
}
.totem.up .accroche {
:is(.totem, .vertical).up .accroche {
top: 3.5cm;
width: 110cm;
}
......@@ -725,33 +729,33 @@ section.forme>.wrapper {
/* totem */
.totem footer{
:is(.totem, .vertical) footer{
top: -2mm;
}
:is(.totem.up, .totem.down) .image > .picture,
:is(.totem.up, .totem.down) .forme > .fond,
.totem footer > .fond{
.affiche:is(.totem, .vertical):is(.up, .down) .image > .picture,
.affiche:is(.totem, .vertical):is(.up, .down) .forme > .fond,
:is(.totem, .vertical) footer > .fond{
left: var(--bleed-overprint);
right: var(--bleed-overprint);
}
.totem.up .image > .picture{
:is(.totem, .vertical).up .image > .picture{
top: var(--bleed-overprint);
}
.totem.down .forme > .fond{
:is(.totem, .vertical).down .forme > .fond{
top: var(--bleed-overprint);
}
.totem footer > .fond{
:is(.totem, .vertical) footer > .fond{
bottom: calc(var(--bleed-overprint) - 2mm);
}
.totem.right .image > .picture,
.totem.left .forme > .fond{
:is(.totem, .vertical).right .image > .picture,
:is(.totem, .vertical).left .forme > .fond{
top: var(--bleed-overprint);
right: var(--bleed-overprint);
}
.totem.left .image > .picture,
.totem.right .forme > .fond{
:is(.totem, .vertical).left .image > .picture,
:is(.totem, .vertical).right .forme > .fond{
top: var(--bleed-overprint);
left: var(--bleed-overprint);
}
......
......@@ -12,6 +12,7 @@ TEMPLATE_PATH = 'template.html'
AFFICHE_METRO = 'metro.html'
AFFICHE_TOTEM = 'totem.html'
AFFICHE_VERTICAL = 'vertical.html'
def titleToId(title):
......@@ -41,6 +42,7 @@ if __name__ == '__main__':
content_metro = []
content_totem = []
content_vertical = []
# parse yaml files
for filename in os.listdir(CONTENT):
......@@ -51,6 +53,8 @@ if __name__ == '__main__':
content_metro.append(yaml_data)
if "totem" in yaml_data["orientation"]:
content_totem.append(yaml_data)
if "vertical" in yaml_data["orientation"]:
content_vertical.append(yaml_data)
# generate metro html
metro_html = template.render(affiches = content_metro, type = 'metro')
......@@ -62,4 +66,9 @@ if __name__ == '__main__':
with open(AFFICHE_TOTEM, 'w') as file:
file.write(totem_html)
# generate vertical html
vertical_html = template.render(affiches = content_vertical, type = 'vertical')
with open(AFFICHE_VERTICAL, 'w') as file:
file.write(vertical_html)
print('Layout generated')
......@@ -57,6 +57,8 @@
<link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-metro.css" />
{% elif type == "totem" %}
<link rel="stylesheet" type="text/css" href="css/formats/clearchannel-totem.css" />
{% elif type == "vertical" %}
<link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-mobilervertical.css" />
{% endif %}
<link rel="stylesheet" type="text/css" href="css/formats/rules.css" />
......@@ -75,12 +77,16 @@
{% set orientation = affiche.orientation.metro %}
{% elif type=='totem'%}
{% set orientation = affiche.orientation.totem %}
{% elif type=='vertical'%}
{% set orientation = affiche.orientation.vertical %}
{% endif %}
{% if type=='metro'%}
{% set degrade = affiche.degrade.metro %}
{% elif type=='totem'%}
{% set degrade = affiche.degrade.totem %}
{% elif type=='vertical'%}
{% set degrade = affiche.degrade.vertical %}
{% endif %}
{% if (affiche.theme_footer == 'inverse')
......
This diff is collapsed.
Supports Markdown
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