gers-cd32: simplify as a native theme (#47562)
This commit is contained in:
parent
2ea9f814b0
commit
1ebdf962b4
|
|
@ -1,211 +1,110 @@
|
|||
@import '../includes/fonts/montserrat';
|
||||
|
||||
$header-height: 400px;
|
||||
$mobile-header-height: 230px;
|
||||
|
||||
$header-border-height: 80px;
|
||||
$mobile-header-border-height: $nav-menu-side;
|
||||
|
||||
body.has-header-background {
|
||||
.site-header {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
background: url(/assets/header:background) center no-repeat;
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
height: $header-height;
|
||||
border-top: $header-border-height solid $primary-color;
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
height: $mobile-header-height;
|
||||
border-top: $mobile-header-border-height solid $primary-color;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
#header #top #logo {
|
||||
position: absolute;
|
||||
line-height: 1em;
|
||||
margin-top: 10px;
|
||||
padding-left: 0;
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
top: -$header-border-height;
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
top: -$mobile-header-border-height;
|
||||
}
|
||||
a {
|
||||
color: $secondary-color;
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
text-indent: 150px;
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
text-indent: -10000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
top: -$header-border-height;
|
||||
background: transparent;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
top: -$header-border-height;
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $header-border-height;
|
||||
z-index: 1;
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
top: -$header-border-height;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div#nav {
|
||||
margin-top: -15px;
|
||||
ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul ul > li a:not(:hover) {
|
||||
color: $tertiary-color;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper ul {
|
||||
border: none;
|
||||
li:last-child {
|
||||
border: none
|
||||
}
|
||||
}
|
||||
|
||||
div.cell.foldable.folded > div > h2:first-child + picture {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
box-shadow: 3px 3px 20px 0px #dedede;
|
||||
margin-right: 2.5em;
|
||||
}
|
||||
|
||||
@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 {
|
||||
box-sizing: content-box;
|
||||
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: 1rem;
|
||||
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: 0.8rem;
|
||||
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: 0.95rem;
|
||||
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: 0.95rem;
|
||||
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: 0.7rem;
|
||||
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: 2.25rem;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,16 @@ $font-size: 1.25em;
|
|||
$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-background: $secondary-color;
|
||||
$nav-color: $tertiary-color;
|
||||
$nav-full-width-background: true;
|
||||
$nav-button-background: $primary-color;
|
||||
$nav-item-selected-background: $primary-color;
|
||||
//$nav-mobile-menu-color: white;
|
||||
$nav-item-hover-background: $primary-color;
|
||||
$nav-border-color: transparent;
|
||||
$nav-menu-side: 36px;
|
||||
$nav-menu-side: 60px;
|
||||
|
||||
$cell-border: none;
|
||||
$cell-entry-hover-background: transparent;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
{
|
||||
"label": "Gers (CD32)",
|
||||
"variables": {
|
||||
"include_top_links": false,
|
||||
"logo_link_url": "/",
|
||||
"theme_color": "#ae2217"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:background": { "label": "Têtière : fond" },
|
||||
"header:logo": { "label": "Têtière : logo" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,31 +0,0 @@
|
|||
{% 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 %}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
{% 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