Thème ville de Concarneau : import initial des soucres
This commit is contained in:
Michael Bideau
parent
f62b9a5bd5
commit
70bdda62c9
|
|
@ -0,0 +1,622 @@
|
|||
@import '../../publik-base-theme/static/includes/font-opensans';
|
||||
|
||||
body {
|
||||
background-color: #ece4e0;
|
||||
|
||||
#page {
|
||||
|
||||
#header-wrapper {
|
||||
|
||||
#header {
|
||||
background-color: white;
|
||||
border-bottom: 20px solid white;
|
||||
padding: 0;
|
||||
|
||||
#top {
|
||||
.col.left {
|
||||
float: left;
|
||||
width: 25%;
|
||||
|
||||
.wrapper {
|
||||
padding: 3.5%;
|
||||
|
||||
.cca-logo {
|
||||
margin: 0 0 7%;
|
||||
width: 100%;
|
||||
padding-top: 30%;
|
||||
background: url('img/CCA-logo.png') top left no-repeat transparent;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
text-transform: uppercase;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
font-size: 1.7em;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.col.right {
|
||||
float: right;
|
||||
width: 75%;
|
||||
padding-top: 24%;
|
||||
background: url('img/Faces.png') bottom right no-repeat transparent;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
clear: both;
|
||||
position: static;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
text-align: right;
|
||||
background: #f39200;
|
||||
padding: 7px 15px 10px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: #333333;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a::after {
|
||||
display: inline-block;
|
||||
content: ' | ';
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:last-child::after {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
height: 3em;
|
||||
background: white;
|
||||
|
||||
> ul {
|
||||
width: 84.5%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
background: $tertiary-color;
|
||||
}
|
||||
|
||||
.cca-link-wrapper {
|
||||
width: 14%;
|
||||
float: right;
|
||||
border-left: 10px solid white;
|
||||
|
||||
.cca-link {
|
||||
background: $primary-color;
|
||||
padding: 8px 0 10px;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
.arrow {
|
||||
background: url('img/iconfinder_aiga_lefnddownarrow.png') center left no-repeat transparent;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#nav::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#main-content-wrapper {
|
||||
|
||||
#main-content {
|
||||
|
||||
#content {
|
||||
background: white;
|
||||
|
||||
button {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
border-right: 1px solid $secondary-color;
|
||||
|
||||
> .cell {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
> .cell.trackingcodeinputcell {
|
||||
margin: 1ex 0 0;
|
||||
background: $primary-color;
|
||||
color: black;
|
||||
|
||||
h2 {
|
||||
background: $primary-color;
|
||||
color: black;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
padding: 1em 0 0 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #fefefe;
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
padding: 8px 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .cell.textcell:first-child {
|
||||
margin-bottom: 0;
|
||||
margin-top: 1ex;
|
||||
|
||||
h2, p strong {
|
||||
color: black;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
> .cell.linkcell {
|
||||
margin: 1.5em;
|
||||
border-top: 1px solid $secondary-color;
|
||||
}
|
||||
> .cell.linkcell:first-child, > .cell.linkcell.mon-profil {
|
||||
border-top: none;
|
||||
}
|
||||
> .cell.linkcell.mon-profil,
|
||||
> .cell.linkcell.mes-demarches,
|
||||
> .cell.linkcell.mes-paiements {
|
||||
margin: 0.2em 1.5em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 1em 0.1ex 0.5em;
|
||||
}
|
||||
a::before {
|
||||
content: '';
|
||||
display: block;
|
||||
float: left;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 10px;
|
||||
}
|
||||
a:hover {
|
||||
background: none;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
> .cell.linkcell.mon-profil a::before {
|
||||
background-image: url('img/PICTO-profil.jpg');
|
||||
}
|
||||
> .cell.linkcell.mes-demarches a::before {
|
||||
background-image: url('img/PICTO-demarches.jpg');
|
||||
}
|
||||
> .cell.linkcell.mes-paiements a::before {
|
||||
background-image: url('img/PICTO-paiements.jpg');
|
||||
}
|
||||
|
||||
.wcscurrentdraftscell {
|
||||
a {
|
||||
padding: 0.7em 1em 0.3em;
|
||||
}
|
||||
> div > div > ul > li {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
> div > div > ul > li:nth-child(even) {
|
||||
background: white;
|
||||
}
|
||||
> div > div > ul > li:nth-child(odd) {
|
||||
background: #F8F8F8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#columns {
|
||||
align-items: stretch;
|
||||
|
||||
#gauche {
|
||||
margin: 0;
|
||||
border-right: 1px solid $secondary-color;
|
||||
height: 100%;
|
||||
|
||||
#tracking-code {
|
||||
margin-bottom: 0;
|
||||
background-color: $primary-color;
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
padding: 1em 1em 0.2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $secondary-color;
|
||||
padding: 0 1rem 0.5em;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
#steps {
|
||||
border-top: 12px solid white;
|
||||
background-color: $tertiary-color;
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0 1em;
|
||||
padding: 1em 0;
|
||||
border-bottom: 2px solid #BABABA;
|
||||
word-wrap: break-word;
|
||||
|
||||
span {
|
||||
float: left;
|
||||
color: #333;
|
||||
}
|
||||
span.marker {
|
||||
width: 20%;
|
||||
margin-right: 10%;
|
||||
line-height: 1em;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
}
|
||||
span.label {
|
||||
max-width: 70%;
|
||||
vertical-align: middle;
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
li::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
li.current {
|
||||
background: $primary-color;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
padding-left: 1em;
|
||||
|
||||
span {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.cell.wcsformsofcategorycell {
|
||||
|
||||
> div > h2 {
|
||||
color: $secondary-color;
|
||||
border-bottom: 2px solid $primary-color;
|
||||
padding: 1em 0 0.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
> div > div {
|
||||
padding: 0.2em 0.5em;
|
||||
|
||||
> ul > li > a {
|
||||
font-size: 0.9em;
|
||||
text-decoration: underline;
|
||||
padding: 3px 0;
|
||||
}
|
||||
> ul > li > a:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell.wcscurrentformscell {
|
||||
h2 {
|
||||
text-align: left;
|
||||
color: $secondary-color;
|
||||
padding: 1em 1em 1ex 0;
|
||||
border-bottom: 2px solid #ccc;
|
||||
margin: 0 1.5em 1em 0;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
}
|
||||
h3, h4, h5 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
> ul > li > a {
|
||||
padding: 0;
|
||||
margin: 0.4em 1.5em 0.4em 1em;
|
||||
}
|
||||
> ul > li:nth-child(even) {
|
||||
background: white;
|
||||
}
|
||||
> ul > li:nth-child(odd) {
|
||||
background: #F8F8F8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service {
|
||||
margin-bottom: 3em;
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
padding: 1em 1em 1ex 0;
|
||||
border-bottom: 2px solid #ccc;
|
||||
margin: 0 1.5em 1em 0;
|
||||
font-family: OpenSans-Bold,Arial,sans-serif;
|
||||
}
|
||||
h3, h4, h5 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.title label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.submit-button {
|
||||
order: 10;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell h1,
|
||||
.cell h2,
|
||||
.cell h3,
|
||||
.cell h4,
|
||||
.cell h5 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.cell h1 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cell h3,
|
||||
.cell h4,
|
||||
.cell h5,
|
||||
.cell p,
|
||||
.cell table {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> br.clear {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
padding: 0;
|
||||
|
||||
#footer {
|
||||
padding: 0;
|
||||
background: $secondary-color;
|
||||
min-height: 160px;
|
||||
|
||||
div.columns {
|
||||
padding-left: 0.5em;
|
||||
|
||||
div.col {
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 0;
|
||||
min-width: 220px;
|
||||
min-height: 80px;
|
||||
|
||||
> .cell.textcell:first-child {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cell.linkcell {
|
||||
a {
|
||||
color: white;
|
||||
padding: 3px 0.5em;
|
||||
text-decoration: underline;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
a:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cca-logo {
|
||||
margin: 28% 1em 1em;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 220px;
|
||||
max-height: 60px;
|
||||
min-height: 60px;
|
||||
background: url('img/marque_CCA-blanc_transparent.png') bottom right no-repeat transparent;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
div.columns::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ajustements petits écrans (mobiles) */
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
|
||||
body #page {
|
||||
background: white;
|
||||
|
||||
#header-wrapper #header #top {
|
||||
.col.left {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1em;
|
||||
|
||||
.cca-logo {
|
||||
order: 2;
|
||||
flex-basis: 30%;
|
||||
margin: 0 20px 10px 0;
|
||||
padding-top: 7%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
order: 1;
|
||||
flex-basis: 70%;
|
||||
margin: 0 20px 10px 10px;
|
||||
padding-left: 0;
|
||||
padding-top: 10px;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header-pictures {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
padding: 16px 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#nav-wrapper {
|
||||
margin-top: -70px;
|
||||
|
||||
#nav {
|
||||
> ul {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
border-bottom: 10px solid white;
|
||||
|
||||
> li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.cca-link-wrapper {
|
||||
width: auto;
|
||||
position: relative;
|
||||
|
||||
.cca-link {
|
||||
padding: 8px 25px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-content-wrapper #main-content #content {
|
||||
|
||||
#sidebar {
|
||||
border:none;
|
||||
}
|
||||
|
||||
#columns #gauche {
|
||||
border:none;
|
||||
height: auto;
|
||||
|
||||
#tracking-code {
|
||||
order: 1;
|
||||
margin-top: 1em;
|
||||
|
||||
h3 {
|
||||
margin-left: 3em;
|
||||
}
|
||||
a {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#steps {
|
||||
order: 2;
|
||||
ol li span.marker,
|
||||
ol li.current span.marker {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
ol li {
|
||||
display: block;
|
||||
|
||||
span.marker {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
ol li.current span.marker {
|
||||
padding-left: 5px;
|
||||
}
|
||||
ol li.current span.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
$primary-color: #f39200;
|
||||
$secondary-color: #575756;
|
||||
$tertiary-color: #e2dad5;
|
||||
|
||||
$width: 1200px;
|
||||
$sidebar-width: 280px;
|
||||
|
||||
$font-color: $secondary-color;
|
||||
$font-family: OpenSans-Regular,Arial,Verdana,Helvetica,sans-serif;
|
||||
$font-size: 16px;
|
||||
|
||||
$nav-background: white;
|
||||
|
||||
$nav-color: $font-color;
|
||||
$nav-item-background: $tertiary-color;
|
||||
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-item-hover-background: $primary-color;
|
||||
$nav-item-hover-color: white;
|
||||
|
||||
$nav-item-selected-background: $primary-color;
|
||||
$nav-item-selected-color: white;
|
||||
|
||||
$nav-submenu-background: $tertiary-color;
|
||||
$nav-submenu-color: $font-color;
|
||||
|
||||
$border-radius: 0px;
|
||||
|
||||
$title-background: white;
|
||||
$title-color: $secondary-color;
|
||||
|
||||
$footer-background: transparent;
|
||||
$footer-color: white;
|
||||
|
||||
$cell-border: 1px solid transparent;
|
||||
|
||||
$cell-entry-color: $font-color;
|
||||
$cell-entry-border-color: transparent;
|
||||
|
||||
$widget-border-radius: 3px;
|
||||
|
||||
$link-color: #e27802;
|
||||
|
||||
$button-background: $primary-color;
|
||||
$button-color: black;
|
||||
$button-border-radius: 0;
|
||||
$button-border: 0;
|
||||
$button-hover-background: $link-color;
|
||||
$button-hover-color: black;
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"label": "Concarneau",
|
||||
"module": "publik-base",
|
||||
"overlay": "atreal",
|
||||
"variables": {
|
||||
"favicon": "concarneau/img/favicon-32x32.png",
|
||||
"theme_color": "#f39200",
|
||||
"no_extra_js": true
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 595 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
/*@import '../../publik-base-theme/static/includes/publik';*/
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load static i18n combo gadjo pwa %}
|
||||
|
||||
{% block header-title %}
|
||||
<div class="col left">
|
||||
<div class="wrapper">
|
||||
<div class="cca-logo"></div>
|
||||
<h1 id="logo"><a accesskey="1" href="{% firstof logo_link_url portal_url '/' %}">{% firstof global_title site_title "Compte Citoyen" %}</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col right" id="header-pictures"></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block nav-bottom %}
|
||||
<div class="cca-link-wrapper">
|
||||
<div class="cca-link">
|
||||
<a href="http://cca.bzh" title="CCA Concarneau Cornouaille"><span class="arrow"></span>cca.bzh</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<div class="columns">
|
||||
<div class="col col-1">
|
||||
{% trans "Pied de page - colonne 1" as name %}
|
||||
{% placeholder "footer-col1" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="col col-2">
|
||||
{% trans "Pied de page - colonne 2" as name %}
|
||||
{% placeholder "footer-col2" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="col col-3">
|
||||
{% trans "Pied de page - colonne 3" as name %}
|
||||
{% placeholder "footer-col3" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="col col-4">
|
||||
<div class="cca-logo"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue