add theme for gers (cd32) (#38711)
This commit is contained in:
parent
0d34523a22
commit
9398acbb0c
|
|
@ -0,0 +1,299 @@
|
|||
@import '../includes/font-montserrat';
|
||||
|
||||
@mixin form-icon($content) {
|
||||
content: $content;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
div#header-pre {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
div#bandeau {
|
||||
width: calc(100% - 610px);
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
> img {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div#contenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 550px;
|
||||
max-width: 550px;
|
||||
padding: 60px 0 0 60px;
|
||||
div#logo-ville img {
|
||||
width: 294;
|
||||
height: 83;
|
||||
}
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
width: unset;
|
||||
max-width: unset;
|
||||
padding: 14px 0 0 20px;
|
||||
div#logo-ville {
|
||||
flex-grow: 1;
|
||||
img {
|
||||
width: 200px;
|
||||
height: 56.45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
padding-top: 17px;
|
||||
div#logo-ville img {
|
||||
width: 130px;
|
||||
height: 36.7px;
|
||||
}
|
||||
}
|
||||
div#contenu-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 195px;
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
height: 60px;
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
div#demarches {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
width: auto;
|
||||
padding: 23px 35px 23px 35px;
|
||||
background-color: $primary-color;
|
||||
span.gru-icon::after {
|
||||
@include form-icon("\f046");
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
flex-grow: 2;
|
||||
padding-top: 0.8em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
flex-grow: 0;
|
||||
width: 0px;
|
||||
padding-left: 20px;
|
||||
margin-right: $nav-place-holder-width;
|
||||
span:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#nav-place-holder {
|
||||
display: none;
|
||||
width: $nav-place-holder-width;
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
flex-grow: 1;
|
||||
display: inherit;
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
flex-grow: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logged-in, .login {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 74px;
|
||||
padding-right: 50px;
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
padding: 0.8em 8px 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.connected-user {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
padding: 0 12px 0 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
a.account::after {
|
||||
@include form-icon("\f013");
|
||||
font-size: 19px;
|
||||
color: black;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1px;
|
||||
padding: 0 7px 0 7px;
|
||||
border-color: black
|
||||
}
|
||||
a.logout::after {
|
||||
@include form-icon("\f011");
|
||||
font-size: 19px;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1px;
|
||||
padding: 0 7px 0 7px;
|
||||
border-color: black
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
display: none;
|
||||
}
|
||||
body.has-picture nav::after {
|
||||
display: none;
|
||||
}
|
||||
div#nav-wrapper {
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
right: 15px;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 4rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-left: 50px;
|
||||
color: $tertiary-color;
|
||||
background: white;
|
||||
@media screen and (max-width: $my-tablet-limit) {
|
||||
top: -70px;
|
||||
right: 40px;
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
right: 0;
|
||||
}
|
||||
span.icon-bar {
|
||||
border: 2px solid $nav-button-color;
|
||||
}
|
||||
}
|
||||
button::after {
|
||||
content: "Menu";
|
||||
display: block;
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#nav > ul {
|
||||
border-top: none;
|
||||
position: relative;
|
||||
top: $nav-menu-side;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#header-post {
|
||||
font-weight: 900;
|
||||
font-size: 45px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
background-color: $secondary-color;
|
||||
padding: 64px 0 70px 0;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
div#footer-wrapper {
|
||||
padding: 66px 0 73px;
|
||||
}
|
||||
div#footer {
|
||||
border-color: #fff;
|
||||
max-width: 1320px;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
.ghost {
|
||||
display: none;
|
||||
}
|
||||
.btn:focus, .btn:hover {
|
||||
background-color: #0f183b;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
address.site-infos__listitems {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
p:first-child {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media screen and (max-width: $my-mobile-limit) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
a.contact-social__link {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border: solid 1px;
|
||||
border-radius: 5px;
|
||||
padding: 25px 0px 25px 25px;
|
||||
}
|
||||
a.contact-social__link::before {
|
||||
@include form-icon("\f003");
|
||||
font-weight: 400;
|
||||
padding-right: 10px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.social-networks {
|
||||
display: flex;
|
||||
}
|
||||
.social-networks li a::after {
|
||||
text-align: center;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.social-networks {
|
||||
li:nth-child(1) a::after {
|
||||
@include form-icon("\f09a");
|
||||
}
|
||||
li:nth-child(2) a::after {
|
||||
@include form-icon("\f099");
|
||||
}
|
||||
li:nth-child(3) a::after {
|
||||
@include form-icon("\f16a");
|
||||
}
|
||||
li:nth-child(4) a::after {
|
||||
@include form-icon("\f16d");
|
||||
}
|
||||
}
|
||||
.social-networks__item a {
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
}
|
||||
div.menu-cross__nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
a {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-cross__item::before {
|
||||
@include form-icon("\f105");
|
||||
padding-right: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
$primary-color: #ae2217;
|
||||
$secondary-color: #f4f4f4;
|
||||
$tertiary-color: #0f183b;
|
||||
|
||||
$font-size: 20px;
|
||||
$font-family: Montserrat, sans-serif;
|
||||
$link-color: $primary-color;
|
||||
|
||||
$my-tablet-limit: 1279px;
|
||||
$my-mobile-limit: 796px;
|
||||
$nav-place-holder-width: 80px;
|
||||
|
||||
$nav-mobile-limit: 50000px;
|
||||
$nav-button-color: $tertiary-color;
|
||||
$nav-button-background: $tertiary-color;
|
||||
$nav-mobile-menu-background: $tertiary-color;
|
||||
$nav-item-hover-background: $primary-color;
|
||||
$nav-border-color: transparent;
|
||||
$nav-menu-side: 36px;
|
||||
|
||||
$cell-border: none;
|
||||
$cell-entry-hover-background: transparent;
|
||||
|
||||
$title-transform: uppercase;
|
||||
$title-font-size: 28px;
|
||||
$title-weight: bold;
|
||||
$title-padding: 0.7rem 0rem;
|
||||
|
||||
$form-style: light;
|
||||
$widget-background: $secondary-color;
|
||||
|
||||
$button-border: 1px solid $tertiary-color;
|
||||
$button-border-radius: 5px;
|
||||
$button-color: $tertiary-color;
|
||||
$button-background: $secondary-color;
|
||||
$button-hover-color: white;
|
||||
$button-hover-background: $tertiary-color;
|
||||
|
||||
$footer-background: $primary-color;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"label": "Gers (CD32)",
|
||||
"variables": {
|
||||
"include_top_links": false,
|
||||
"theme_color": "#ae2217"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load combo %}
|
||||
|
||||
{% block user-info %}
|
||||
{% skeleton_extra_placeholder user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
|
||||
<span class="logged-in">
|
||||
Bonjour
|
||||
<span class="connected-user">{{user.first_name}} {{user.last_name}}</span>
|
||||
{% if idp_account_url %}
|
||||
<a class="account" href="{{idp_account_url}}" title="Accéder à mon compte"></a>
|
||||
{% endif %}
|
||||
<a class="logout" href="{% url 'auth_logout' %}" title="Se déconnecter"></a>
|
||||
</span>
|
||||
|
||||
{% else %}
|
||||
|
||||
{% if idp_registration_url %}
|
||||
<span class="login">
|
||||
<a accesskey="2" href="{% url 'auth_login' %}">Connexion</a>
|
||||
<span class="sep">/</span>
|
||||
<a class="registration" href="{{idp_registration_url}}">Inscription</a>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="login"><a accesskey="2" href="{% url 'auth_login' %}">Connexion <span class="sep">/</span> Inscription</a></span>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% end_skeleton_extra_placeholder %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{% extends "theme.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block header-pre %}
|
||||
<div id="header-pre">
|
||||
<div id="contenu">
|
||||
<div id="contenu-top">
|
||||
<div id="logo-ville">
|
||||
<a href="{{website_url}}">
|
||||
<img src="{{ site_base }}{% static 'gers-cd32/img/logo.png' %}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="demarches"><span>Mes Démarches</span><span class="gru-icon"/></div>
|
||||
<div id="nav-place-holder"></div>
|
||||
</div>
|
||||
{% block user-info %}
|
||||
{% endblock %}
|
||||
</div> <!-- contenu -->
|
||||
<div id="bandeau">
|
||||
{% if page.picture %}
|
||||
<img src="{{site_base}}{{page.picture.url}}"/>
|
||||
{% else %}
|
||||
<img src="{{site_base}}{% static 'gers-cd32/img/csm_defaultImage.png' %}"/>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block header-post %}
|
||||
{% if page.title %}
|
||||
<div id="header-post">
|
||||
{{page.title}}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue