Coprec: refactoring majeur. Changement image de fond. Masquage de la navigation. Ajout d'un bandeau pour contenir un titre et un sous-titre. Ajout d'une landing page. Ajustement pour les petits écrans (mobiles). Nettoyage du code inutilement repris du thème d'Arpajon.
This commit is contained in:
Michael Bideau
parent
efb6d426d9
commit
a2e4bc8c72
|
|
@ -1,46 +1,37 @@
|
|||
@import '../../publik-base-theme/static/includes/font-din';
|
||||
|
||||
#page {
|
||||
}
|
||||
|
||||
#header #top #logo a {
|
||||
background: url(img/logo.png) bottom left no-repeat;
|
||||
background-size: 200px;
|
||||
height: 105px;
|
||||
line-height: 190px;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
color: white;
|
||||
#max-width: 200px;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
left: -1rem;
|
||||
padding-left: 230px;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
padding-left: 0;
|
||||
max-width: 90%;
|
||||
background-size: contain;
|
||||
left: 0;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
}
|
||||
|
||||
#page {
|
||||
background-image: url(/static/coprec/img/IPC.jpg);
|
||||
background-color: #f3f3f3;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 210px;
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
background: transparent;
|
||||
padding-left: 10px;
|
||||
|
||||
div#header {
|
||||
padding-bottom: 3em;
|
||||
|
||||
#logo {
|
||||
a {
|
||||
background: url(img/logo.png) bottom left no-repeat;
|
||||
background-size: 200px;
|
||||
height: 105px;
|
||||
line-height: 150px;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
color: #3c3b3c;
|
||||
padding-left: 230px;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
display: none;
|
||||
background: transparent;
|
||||
margin-bottom: 0px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
div.gru-nav > ul {
|
||||
padding-top: 2rem;
|
||||
margin-top: 0;
|
||||
|
|
@ -57,6 +48,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
#bandeau {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
background-position: top 30% center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/static/coprec/img/ipc V3.jpg');
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
#bandeau-wrapper {
|
||||
min-height: 180px;
|
||||
max-width: #{$width};
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
h1,h2,h3,h4,h5,h6,p,span {
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
color: #3c3b3c;
|
||||
}
|
||||
h1 {
|
||||
padding-top: 2rem;
|
||||
font-size: 3.5em;
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
body.has_picture #bandeau {
|
||||
background-image: var(--page-picture);
|
||||
}
|
||||
|
||||
div#main-content-wrapper {
|
||||
background: white;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -65,154 +90,178 @@ div#main-content-wrapper {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
#header #top #logo a {
|
||||
display: block;
|
||||
height: 75px;
|
||||
}
|
||||
.gru-nav-wrapper {
|
||||
margin-top: -48px;
|
||||
}
|
||||
#nav-wrapper div.gru-nav > ul {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
#nav-wrapper div.gru-nav > ul > li:first-child a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-picture nav::after {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
div#tracking-code h3,
|
||||
div#rub_service h2,
|
||||
div#rub_service div.category h3,
|
||||
.gru-content div.a2-block h2,
|
||||
.gru-content div.block h2,
|
||||
div.links-list h2,
|
||||
div#services > ul > li > strong > a,
|
||||
.gru-content div.textcell h2,
|
||||
.gru-content div.textcell h2:first-child,
|
||||
.gru-content div.cell h2:first-child {
|
||||
background: transparent;
|
||||
color: $font-color;
|
||||
font-size: 150%;
|
||||
font-weight: bold;
|
||||
padding-left: 0.5rem;
|
||||
text-align: left;
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
background: $primary-color;
|
||||
margin-top: 7px;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
div.title label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#rub_service div.dataview,
|
||||
div#rub_service form.quixote {
|
||||
h3 {
|
||||
font-size: 130%;
|
||||
border-bottom: 0;
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
background: $primary-color;
|
||||
margin-top: 7px;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 130%;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service > h2:first-child,
|
||||
.gru-content div.textcell h1 {
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#left div.a2-block, div#right div.a2-block,
|
||||
.gru-content div.cell,
|
||||
div.block {
|
||||
padding: 0;
|
||||
margin: 0px 10px 10px 10px;
|
||||
|
||||
& h2 + div {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.cell a {
|
||||
border-bottom: 1px dotted $link-color;
|
||||
}
|
||||
|
||||
#footer {
|
||||
#background: url(img/blason.png) top left no-repeat;
|
||||
min-height: 130px;
|
||||
text-align: center;
|
||||
div.cell.partners {
|
||||
#float: right;
|
||||
background: white;
|
||||
padding: 0;
|
||||
#margin: -70px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
div.cell.partners img {
|
||||
margin: 0 30px;
|
||||
}
|
||||
.partners .partner {
|
||||
display: inline-block;
|
||||
margin: 0 30px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
.partners .partner.apave {
|
||||
background: url(/static/coprec/img/logo_Apave2-110px.jpg);
|
||||
}
|
||||
.partners .partner.veritas {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: url(/static/coprec/img/logo_BureauVeritas2-100px.jpg);
|
||||
}
|
||||
.partners .partner.dekra {
|
||||
background: url(/static/coprec/img/logo_Dekra2-110px.jpg);
|
||||
}
|
||||
.partners .partner.qualiconsult {
|
||||
background: url(/static/coprec/img/logo_GroupeQualiconsult-110px.jpg);
|
||||
}
|
||||
.partners .partner.sgs {
|
||||
background: url(/static/coprec/img/logo_SGS2-110px.jpg);
|
||||
}
|
||||
.partners .partner.socotec {
|
||||
background: url(/static/coprec/img/logo_Socotec2-110px.jpg);
|
||||
}
|
||||
}
|
||||
|
||||
.fargo-pick-popup button,
|
||||
button.ui-button,
|
||||
a#a2-continue,
|
||||
div.gru-content button,
|
||||
input[type=submit],
|
||||
div.buttons input {
|
||||
box-shadow: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
.partners .partner {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
.partners .partner.apave {
|
||||
background-image: url(/static/coprec/img/logo_Apave2-110px.jpg);
|
||||
}
|
||||
.partners .partner.veritas {
|
||||
/*width: 100px;
|
||||
height: 100px;*/
|
||||
background-image: url(/static/coprec/img/logo_BureauVeritas2-100px.jpg);
|
||||
}
|
||||
.partners .partner.dekra {
|
||||
background-image: url(/static/coprec/img/logo_Dekra2-110px.jpg);
|
||||
}
|
||||
.partners .partner.qualiconsult {
|
||||
background-image: url(/static/coprec/img/logo_GroupeQualiconsult-110px.jpg);
|
||||
}
|
||||
.partners .partner.sgs {
|
||||
background-image: url(/static/coprec/img/logo_SGS2-110px.jpg);
|
||||
}
|
||||
.partners .partner.socotec {
|
||||
background-image: url(/static/coprec/img/logo_Socotec2-110px.jpg);
|
||||
}
|
||||
|
||||
/* ajustements petits écrans (mobiles) */
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
|
||||
#header-wrapper {
|
||||
|
||||
#logo {
|
||||
padding-left: 0;
|
||||
|
||||
/*
|
||||
a {
|
||||
padding-left: 0;
|
||||
max-width: 90%;
|
||||
background-size: contain;
|
||||
left: 0;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
border-right: 1px solid #00d3cc;
|
||||
right: 1em;
|
||||
max-width: 90%;
|
||||
text-align: right;
|
||||
border-bottom-right-radius: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
margin-top: -48px;
|
||||
|
||||
div.gru-nav > ul {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
|
||||
> li:first-child a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* fin ajustement petits écrans */
|
||||
|
||||
/* surcharges Landing page */
|
||||
body.page-template-landing_page {
|
||||
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/static/coprec/img/ipc V3.jpg');
|
||||
background-size: cover;
|
||||
|
||||
#header-wrapper div#header {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
#bandeau {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
#bandeau-wrapper {
|
||||
min-height: inherit;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page nav::after {
|
||||
background-image: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main-content-wrapper {
|
||||
background: transparent;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
padding-right: 1ex;
|
||||
|
||||
#content {
|
||||
max-width: 600px;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding-bottom: 0.5ex;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: " - ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.partners .partner {
|
||||
margin: 0 15px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
#partners-text {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
maring: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#call-to-action {
|
||||
margin-top: 4em;
|
||||
|
||||
a {
|
||||
background-color: #3f4c60;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: inline;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px;
|
||||
padding: 0.7em 1em;
|
||||
}
|
||||
a:hover {
|
||||
background-color: #3f4c60 !important;
|
||||
color: white !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
body.page-template-landing_page {
|
||||
background-image: var(--page-picture);
|
||||
}
|
||||
/* fin surcharge landing pages */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$primary-color: #00d3cc;
|
||||
|
||||
$width: 1140px;
|
||||
$width: 1540px;
|
||||
$font-color: #484848;
|
||||
$font-family: Din, sans-serif;
|
||||
$font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -6,5 +6,15 @@
|
|||
"favicon": "coprec/img/favicon-32x32.png",
|
||||
"theme_color": "#00d3cc",
|
||||
"no_extra_js": true
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_PUBLIC_TEMPLATES.update": {
|
||||
"landing_page": {
|
||||
"name": "Landing page",
|
||||
"template": "combo/landing_template.html"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 797 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load static i18n combo gadjo %}
|
||||
|
||||
{% block before-main-content %}
|
||||
<div id="bandeau">
|
||||
<div id="bandeau-wrapper">
|
||||
{% trans "Bandeau" as name %}
|
||||
{% placeholder "bandeau" acquired=True name=name %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content-post %}
|
||||
<div id="partners-text">
|
||||
{% trans "Partenaires texte" as name %}
|
||||
{% placeholder "partners-text" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="partners">
|
||||
<div class="partner apave"></div>
|
||||
<div class="partner veritas"></div>
|
||||
<div class="partner dekra"></div>
|
||||
<div class="partner qualiconsult"></div>
|
||||
<div class="partner sgs"></div>
|
||||
<div class="partner socotec"></div>
|
||||
</div>
|
||||
<div id="call-to-action">
|
||||
{% trans "Lien d'action" as name %}
|
||||
{% placeholder "call-to-action" acquired=True name=name %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -1,6 +1,15 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load static i18n combo gadjo %}
|
||||
|
||||
{% block before-main-content %}
|
||||
<div id="bandeau">
|
||||
<div id="bandeau-wrapper">
|
||||
{% trans "Bandeau" as name %}
|
||||
{% placeholder "bandeau" acquired=True name=name %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
{% trans "Footer" as name %}
|
||||
{% placeholder "footer" acquired=True name=name %}
|
||||
|
|
|
|||
Reference in New Issue