add theme for amiens-metropole (#20659)
This commit is contained in:
Elias Showk
parent
79da17cca4
commit
3de45d8c6a
1
Makefile
1
Makefile
|
|
@ -13,6 +13,7 @@ css: export LC_ALL=C.UTF-8
|
|||
css: data_uris
|
||||
cd static/alfortville/ && sass style.scss:style.css
|
||||
cd static/amiens/ && sass style.scss:style.css
|
||||
cd static/amiens-metropole/ && sass style.scss:style.css
|
||||
cd static/blois/ && sass style.scss:style.css
|
||||
cd static/bron/ && sass style.scss:style.css
|
||||
cd static/chateauroux/ && sass style.scss:style.css
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
// Hide things the client asked
|
||||
|
||||
a#publik-portal-agent,
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Custom and homepage styles excluding layout
|
||||
|
||||
#main-content-wrapper {
|
||||
background-color: $content-background-color;
|
||||
}
|
||||
|
||||
.topbanner-wrapper {
|
||||
background: url("img/a-la-une-400px.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
background-color: white;
|
||||
height: $top-banner-height;
|
||||
|
||||
.inside-content {
|
||||
height: $top-banner-height;
|
||||
}
|
||||
}
|
||||
|
||||
#content .inside-content .a-la-une {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
height: 11em;
|
||||
line-height: 1em;
|
||||
overflow: hidden;
|
||||
padding: 0.5em;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 200px;
|
||||
width: 400px;
|
||||
|
||||
h1 {
|
||||
@include title-style;
|
||||
font-size: 18px;
|
||||
margin: $a-la-une-text-margin;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 6em;
|
||||
margin: $a-la-une-text-margin;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content .wide-container .inside-content {
|
||||
background-color: transparent;
|
||||
|
||||
.cell {
|
||||
border: none;
|
||||
margin: $content-cell-margin;
|
||||
}
|
||||
|
||||
.trackingcodeinputcell .wcs-tracking-code-input {
|
||||
@extend %wcs-form;
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: $form-margin;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: $content-background-color;
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.three-columns .column .cell.wcsformsofcategorycell {
|
||||
background-color: transparent;
|
||||
padding: 10px 0;
|
||||
// Declare the right class name within the following list
|
||||
// and get little icons for your div>h2
|
||||
@each $category in (enfance, etatcivil, deces, association, signalement, emploi, paiement, economie, solidarite, habitation, nouveau) {
|
||||
&.#{$category} div h2 {
|
||||
background-image: url("img/#{$category}.png");
|
||||
background-position: left;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: $content-background-color;
|
||||
|
||||
div h2 {
|
||||
background-color: $content-background-color;
|
||||
border: 2px solid white;
|
||||
|
||||
&:first-child {
|
||||
color: black;
|
||||
font-family: $font-family;
|
||||
height: auto;
|
||||
padding: 10px 10px 10px 70px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: $arrow-down-icon;
|
||||
font-family: FontAwesome;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: white;
|
||||
|
||||
&::after {
|
||||
content: $arrow-up-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.on {
|
||||
background-color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
padding-left: 30px;
|
||||
|
||||
&::before {
|
||||
color: $title-color;
|
||||
content: $arrow-right-icon;
|
||||
font-family: FontAwesome;
|
||||
font-size: 6px;
|
||||
font-weight: bold;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
#main-content-wrapper #main-content #content .wide-container {
|
||||
&.topbanner-wrapper {
|
||||
height: 350px;
|
||||
|
||||
.inside-content {
|
||||
height: 350px;
|
||||
.cell {
|
||||
h2 {
|
||||
padding-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
footer {
|
||||
@include flex(0);
|
||||
height: 210px;
|
||||
width: 100%;
|
||||
|
||||
#footer-wrapper {
|
||||
background-color: $footer-background;
|
||||
color: $footer-color;
|
||||
height: 100%;
|
||||
|
||||
#footer {
|
||||
height: 100%;
|
||||
max-width: $column-width;
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
@include title-style;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell div {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 600px;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
|
||||
&.footer-button {
|
||||
padding-top: 15px;
|
||||
|
||||
a.button-link {
|
||||
border: 2px solid white;
|
||||
border-radius: 50px;
|
||||
color: $footer-color;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 15px 35px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
// WCS Form pages style
|
||||
$input-form-margin: 0.5em 0;
|
||||
$form-margin: 3em;
|
||||
|
||||
@mixin input-style {
|
||||
margin: $input-form-margin;
|
||||
border-radius: $input-border-radius;
|
||||
max-width: 90%;
|
||||
padding: 8px 10px;
|
||||
vertical-align: sub;
|
||||
border: 1px solid $title-color;
|
||||
box-sizing: border-box;
|
||||
outline: medium none;
|
||||
}
|
||||
// Generic WCS form placeholder
|
||||
%wcs-form {
|
||||
h1, h2, h3, h4 {
|
||||
background-color: white;
|
||||
color: $title-color;
|
||||
font-size: 1.8em;
|
||||
left: auto;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
top: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
|
||||
// default class for WCS pages
|
||||
&.quixote {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input {
|
||||
@include input-style;
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $title-color;
|
||||
border-radius: $input-border-radius;
|
||||
color: white;
|
||||
margin-right: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
&[name=submit] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
background-color: $content-background-color;
|
||||
color: $title-color;
|
||||
}
|
||||
|
||||
&.previous {
|
||||
background-color: $content-background-color;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: $width;
|
||||
|
||||
|
||||
|
||||
#columns {
|
||||
@include flexbox();
|
||||
@include justify-content(space-between);
|
||||
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: $column-width;
|
||||
|
||||
// inside the div resides the form and its title
|
||||
#gauche, #rub_service {
|
||||
@extend %wcs-form;
|
||||
|
||||
&.has-sidebox {
|
||||
@include flex(2);
|
||||
@include order(0);
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
#gauche + #rub_service {
|
||||
@extend %two-thirds;
|
||||
margin: 0;
|
||||
padding: 3em;
|
||||
|
||||
background-color: $content-background-color;
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: black;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
#gauche {
|
||||
@include flex(1);
|
||||
@include order(1);
|
||||
@extend %one-third;
|
||||
|
||||
margin: 0;
|
||||
float: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#tracking-code {
|
||||
padding: 3em;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
@include input-style;
|
||||
text-align: center;
|
||||
color: $title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#steps {
|
||||
padding: 0 3em;
|
||||
|
||||
ol li {
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
|
||||
position: relative;
|
||||
margin: 25px 0;
|
||||
border: 0;
|
||||
|
||||
|
||||
&.current {
|
||||
background: white;
|
||||
font-weight: bold;
|
||||
|
||||
.label {
|
||||
color: $title-color;
|
||||
}
|
||||
|
||||
.marker {
|
||||
// background: $title-color;
|
||||
// border: 2px solid $title-color;
|
||||
border: none;
|
||||
color: $title-color;
|
||||
|
||||
// &::after {
|
||||
// background: $title-color;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
span.label {
|
||||
color: $content-background-color;
|
||||
margin: 0 auto;
|
||||
font-size: 1.2em;
|
||||
padding-left: 10px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.marker {
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
font-size: 1.8em;
|
||||
color: $content-background-color;
|
||||
// border: 2px solid $content-background-color;
|
||||
border: none;
|
||||
border-radius: $input-border-radius;
|
||||
// width: 50px;
|
||||
// height: 50px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
// &::after {
|
||||
// content: ' ';
|
||||
// width: 50px;
|
||||
// height: 50px;
|
||||
// background: white;
|
||||
// border-radius: $input-border-radius;
|
||||
// position: absolute;
|
||||
// top: -5px;
|
||||
// left: 15px;
|
||||
// z-index: -1;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $mobile-limit+1px) {
|
||||
#page #main-content-wrapper #main-content #content #columns {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
#page #main-content-wrapper #main-content #content #columns {
|
||||
@include flex-direction(column);
|
||||
|
||||
#gauche {
|
||||
@include order(0);
|
||||
width: 100%;
|
||||
|
||||
#tracking-code {
|
||||
@include order(0);
|
||||
padding: 1em;
|
||||
a {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
#steps {
|
||||
@include order(1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#steps ol {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include justify-content(center);
|
||||
|
||||
li span.marker {
|
||||
color: $content-background-color;
|
||||
border-radius: $input-border-radius;
|
||||
// border: 2px solid $content-background-color;
|
||||
border: none;
|
||||
background: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.current span.marker {
|
||||
background: white;
|
||||
color: $title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-sidebox {
|
||||
@include order(1);
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
/* Header */
|
||||
$header-content-margin: 5px;
|
||||
|
||||
#page header {
|
||||
@include flex(0);
|
||||
|
||||
background: $primary-color;
|
||||
|
||||
#header {
|
||||
padding: 0;
|
||||
|
||||
#top {
|
||||
@include flexbox();
|
||||
@include vendor-prefix(flex-wrap, nowrap);
|
||||
@include justify-content(space-between);
|
||||
|
||||
margin: auto; // allow #top to be horizontally center within the header bar
|
||||
max-width: $column-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sep::before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 2px;
|
||||
background: white;
|
||||
height: 30px;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
@include vendor-prefix(align-self, flex-start);
|
||||
@include order(2);
|
||||
@include flexbox();
|
||||
@include vendor-prefix(flex-wrap, nowrap);
|
||||
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
#site-title {
|
||||
@include flex(1);
|
||||
@include vendor-prefix(align-self, center);
|
||||
|
||||
margin: $header-content-margin;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: white;
|
||||
padding-left: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: $header-content-margin;
|
||||
background: url('img/logo.png') no-repeat 0 center;
|
||||
background-size: contain;
|
||||
padding-right: 25px;
|
||||
width: $top-logo-width;
|
||||
|
||||
a {
|
||||
height: $header-height;
|
||||
width: $top-logo-width;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
@include vendor-prefix(align-self, flex-end);
|
||||
@include order(2);
|
||||
position: relative;
|
||||
right: unset;
|
||||
left: unset;
|
||||
top: unset;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: $button-background;
|
||||
padding: 0;
|
||||
box-shadow: unset;
|
||||
|
||||
.logged-in,
|
||||
.login {
|
||||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
@include vendor-prefix(align-items, center);
|
||||
|
||||
text-align: center;
|
||||
|
||||
.sep {
|
||||
color: $button-background;
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include flex(1);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: $header-height;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
font-family: 'FontAwesome';
|
||||
font-size: 2.5em;
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login a {
|
||||
/* Default target for connexion */
|
||||
&::before {
|
||||
content: '\f090'; // login icon
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
&.registration {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
background: url('img/pencil.png') no-repeat;
|
||||
background-size: 2em;
|
||||
background-position: center 15px;
|
||||
padding-top: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.logged-in a {
|
||||
/* Default for parent of connected-user */
|
||||
background: url('img/user.png') no-repeat;
|
||||
background-size: 2em;
|
||||
background-position: center 20px;
|
||||
|
||||
.connected-user {
|
||||
display: block;
|
||||
padding-top: 40px;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
|
||||
&::before {
|
||||
content: '\f08b'; // logout icon
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $mobile-limit+1px) {
|
||||
header {
|
||||
height: $header-height;
|
||||
|
||||
#header #top {
|
||||
@include flex-direction(row);
|
||||
|
||||
#toplinks {
|
||||
width: (100 / 3 + 0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
header {
|
||||
height: $header-height * 2;
|
||||
|
||||
#header #top {
|
||||
@include flex-direction(column);
|
||||
@include justify-content(space-around);
|
||||
|
||||
#toplinks,
|
||||
.top-left {
|
||||
@include vendor-prefix(align-self, stretch);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
.sep::before {
|
||||
display: none;
|
||||
}
|
||||
#logo {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks .sep {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
// Default grid ratios
|
||||
%two-thirds {
|
||||
margin: 0;
|
||||
width: (200 / 3 + 0%);
|
||||
}
|
||||
|
||||
%one-third {
|
||||
margin: 0;
|
||||
width: (100 / 3 + 0%);
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
@extend %two-thirds;
|
||||
}
|
||||
|
||||
.one-third {
|
||||
@extend %one-third;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
@include flex(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.wide-container {
|
||||
max-width: $width;
|
||||
|
||||
.inside-content {
|
||||
@include flexbox();
|
||||
@include justify-content(space-between);
|
||||
max-width: $column-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&.three-columns {
|
||||
margin-top: 2em;
|
||||
@include flex-direction(row);
|
||||
|
||||
.column {
|
||||
@include flex(auto);
|
||||
max-width: (100 / 3 + 0%);
|
||||
box-sizing: border-box;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-content-wrapper {
|
||||
@include flex(1);
|
||||
|
||||
#main-content {
|
||||
width: 100%;
|
||||
|
||||
#content {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
#content .wide-container .three-columns.inside-content {
|
||||
@include flex-direction(column);
|
||||
.column {
|
||||
max-width: unset;
|
||||
|
||||
.cell {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
$primary-color: #077ACA;
|
||||
$content-background-color: #EEE;
|
||||
$width: 1900px;
|
||||
$column-width: 1250px;
|
||||
$top-logo-width: 200px;
|
||||
$top-banner-height: 400px;
|
||||
$font-color: #666;
|
||||
$font-family: 'Open Sans', Arial, Helvetica, sans-serif;
|
||||
$font-size: 15px;
|
||||
$nav-background: white;
|
||||
$nav-submenu-background: #EEE;
|
||||
$nav-submenu-color: #333;
|
||||
$nav-color: $font-color;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-item-selected-color: white;
|
||||
$nav-item-hover-color: white;
|
||||
$button-background: darken($primary-color, 10%);
|
||||
$title-font-family: 'AbrilFatface-Regular', Arial, Helvetica, sans-serif;
|
||||
$title-background: $primary-color;
|
||||
$title-weight: regular;
|
||||
$title-color: #CF0D8A;
|
||||
$footer-background: #077ACA;
|
||||
$footer-color: white;
|
||||
$border-radius: 0;
|
||||
$header-height: 90px;
|
||||
$a-la-une-text-margin: 1em 0.5em;
|
||||
$content-cell-margin: 0;
|
||||
$arrow-down-icon: '\f107';
|
||||
$arrow-up-icon: '\f106';
|
||||
$arrow-right-icon: '\f105';
|
||||
$input-border-radius: 50px;
|
||||
// Generic title style
|
||||
@mixin title-style {
|
||||
color: $title-color;
|
||||
font-family: $title-font-family;
|
||||
font-weight: $title-weight;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
$(function() {
|
||||
$('#main-content-wrapper').delegate('div.wcsformsofcategorycell > div > div > h2', 'click', function() {
|
||||
|
||||
$(this).parent().children().each(function(index, elt) {
|
||||
var $elt = $(elt);
|
||||
if (! $elt.hasClass('on')) {
|
||||
$elt.removeClass('on');
|
||||
}
|
||||
$elt.toggleClass('on');
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import '../includes/font-abrilfatface-regular';
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import '../includes/categories';
|
||||
@import '../includes/dashboard';
|
||||
@import '../includes/flexbox_mixins';
|
||||
@import 'forms';
|
||||
@import 'footer';
|
||||
@import 'header';
|
||||
@import 'layout';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// --------------------------------------------------
|
||||
// Flexbox SASS mixins
|
||||
// The spec: http://www.w3.org/TR/css3-flexbox
|
||||
// --------------------------------------------------
|
||||
// Flexbox display
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
// The 'flex' shorthand
|
||||
// - applies to: flex items
|
||||
// <positive-number>, initial, auto, or none
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
// Flex Flow Direction
|
||||
// - applies to: flex containers
|
||||
// row | row-reverse | column | column-reverse
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
// Display Order
|
||||
// - applies to: flex items
|
||||
// <integer>
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
// Axis Alignment
|
||||
// - applies to: flex containers
|
||||
// flex-start | flex-end | center | space-between | space-around
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
@mixin justify-content($justify) {
|
||||
-ms-flex-pack: $justify;
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
$font-path: '../xstatic/fonts' !default;
|
||||
|
||||
@font-face {
|
||||
font-family: 'AbrilFatface-Regular';
|
||||
src: url('#{$font-path}/Regular/abrilfatface-regular.woff') format('woff'),
|
||||
url('#{$font-path}/Regular/abrilfatface-regular.ttf') format('truetype'),
|
||||
url('#{$font-path}/Regular/abrilfatface-regular.otf') format('otf');
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load i18n combo %}
|
||||
|
||||
{% block combo-content %}
|
||||
<div class="topbanner-wrapper wide-container">
|
||||
<div class="inside-content">
|
||||
{% trans "Top Banner" as name %}
|
||||
{% placeholder "topbanner" name=name %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-wrapper wide-container">
|
||||
<div class="inside-content three-columns">
|
||||
<div class="column">
|
||||
{% trans "Left column" as name %}
|
||||
{% placeholder "content" name=name %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% trans "Middle column" as name %}
|
||||
{% placeholder "middle" name=name %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% trans "Right column" as name %}
|
||||
{% placeholder "right" name=name %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{% extends '../../theme.html' %}
|
||||
{% load static i18n combo gadjo %}
|
||||
|
||||
{% block extra_top_head %}
|
||||
<link rel="preload" href="{{site_base}}/static/xstatic/fonts/Regular/abrilfatface-regular.woff" as="font" type="font/woff2" crossorigin>
|
||||
{% endblock %}
|
||||
|
||||
{% block header-title %}
|
||||
<div class="top-left">
|
||||
<div id="logo">
|
||||
<a id="logo-img" accesskey="1" href="{{ logo_link_url|default:'/' }}"></a>
|
||||
</div>
|
||||
<div id="site-title" class="sep">
|
||||
<a accesskey="1" href="{{ logo_link_url|default:'/' }}">
|
||||
Vos démarches en ligne en 1 clic
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -13,6 +13,13 @@
|
|||
"theme_color": "#4A95DB"
|
||||
}
|
||||
},
|
||||
{"id": "amiens-metropole",
|
||||
"label": "Amiens Métropole",
|
||||
"variables": {
|
||||
"css_variant": "amiens-metropole",
|
||||
"theme_color": "#077aca"
|
||||
}
|
||||
},
|
||||
{"id": "blois",
|
||||
"label": "Blois",
|
||||
"variables": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue