hautes-alpes-2018: add new theme (#23250)
This commit is contained in:
Elias Showk
parent
d195cf4c47
commit
a80fcfe846
1
Makefile
1
Makefile
|
|
@ -33,6 +33,7 @@ css: data_uris
|
|||
cd static/grosboule-les-bains/ && sass style.scss:style.css
|
||||
cd static/haute-goulaine/ && sass style.scss:style.css
|
||||
cd static/hautes-alpes/ && sass style.scss:style.css
|
||||
cd static/hautes-alpes-2018/ && sass style.scss:style.css
|
||||
cd static/jobourg/ && sass style.scss:style.css
|
||||
cd static/la-hague/ && sass style.scss:style.css
|
||||
cd static/la-reunion/ && sass style.scss:style.css
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
div#steps {
|
||||
|
||||
padding: 0 1em;
|
||||
|
||||
ol li {
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
|
||||
margin: 25px 0;
|
||||
padding: 0.5ex;
|
||||
position: relative;
|
||||
border: 0;
|
||||
|
||||
span.marker {
|
||||
@include justify-content(center);
|
||||
display: inline-flex;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
color: gray;
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
font-size: calc(12px + 1.2vw);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
max-width: 60px;
|
||||
max-height: 60px;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: ' ';
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
background: $button-background;
|
||||
z-index: -1;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
span.label {
|
||||
display: table-cell;
|
||||
margin: 0 -1em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
|
||||
span.label {
|
||||
color: $title-color;
|
||||
}
|
||||
|
||||
span.marker {
|
||||
color: white;
|
||||
border-color: $primary-color;
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
div#gauche div#steps {
|
||||
|
||||
@include order(2);
|
||||
padding: 0;
|
||||
|
||||
ol {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include vendor-prefix(flex-flow, nowrap);
|
||||
@include justify-content(center);
|
||||
@include vendor-prefix(align-items, center);
|
||||
|
||||
li {
|
||||
padding: 0 0.6em 1ex 0;
|
||||
|
||||
span.marker {
|
||||
border-radius: 50%;
|
||||
padding: 0.3em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
#document #corps {
|
||||
background: none;
|
||||
z-index: 0;
|
||||
|
||||
> nav {
|
||||
@include flexbox();
|
||||
@include vendor-prefix(align-items, center);
|
||||
@include justify-content(center);
|
||||
background-color: $cell-background;
|
||||
font-size: 1.5rem;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
div#nav {
|
||||
@include order(0);
|
||||
@include vendor-prefix(flex-basis, $width/3);
|
||||
background-color: transparent;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
font-weight: 700;
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-nav {
|
||||
@include vendor-prefix(flex-basis, $width/3);
|
||||
@include order(1);
|
||||
@include vendor-prefix(align-self, flex-end);
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include vendor-prefix(flex-basis, $nav-height);
|
||||
}
|
||||
|
||||
span {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include vendor-prefix(align-items, center);
|
||||
@include justify-content(center);
|
||||
padding: 0.5em;
|
||||
}
|
||||
height: $nav-height;
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#content {
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
|
||||
#gauche,
|
||||
div#rub_service,
|
||||
div#services > ul > li,
|
||||
div.a2-block,
|
||||
div.block,
|
||||
div.cell {
|
||||
box-sizing: border-box;
|
||||
padding: $block-padding;
|
||||
background-color: $cell-background;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: $form-margin;
|
||||
padding: $title-padding;
|
||||
background-color: $form-background;
|
||||
border: 0;
|
||||
|
||||
> div {
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.title label {
|
||||
display: block;
|
||||
margin-bottom: 0.3em;
|
||||
font-weight: 400;
|
||||
color: #b73720;
|
||||
}
|
||||
|
||||
input#tracking-code,
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="date"],
|
||||
input[type="file"],
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
@include vendor-prefix(appearance, none);
|
||||
width: 100%;
|
||||
max-width: 70rem;
|
||||
background-color: #FFFFFF;
|
||||
font-family: 'Asap', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.8em 1em;
|
||||
line-height: normal;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
|
||||
&:focus {
|
||||
border-color: #AAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@extend %title-style;
|
||||
}
|
||||
|
||||
div.buttons.submit {
|
||||
display: flex;
|
||||
@include justify-content(flex-start);
|
||||
@include flex-direction(row-reverse);
|
||||
@include vendor-prefix(flex-wrap, wrap);
|
||||
|
||||
.cancel,
|
||||
[name="previous"] {
|
||||
background: $cell-background;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button-style;
|
||||
}
|
||||
|
||||
#tracking-code {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
padding: 0 5px;
|
||||
font-size: 2rem;
|
||||
margin: 0.3em 0;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.ui-dialog {
|
||||
|
||||
div.ui-dialog-titlebar span.ui-dialog-title {
|
||||
@extend %title-style;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button-style;
|
||||
|
||||
&.ui-button {
|
||||
height: 5.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
div#content {
|
||||
padding: $mobile-block-padding;
|
||||
|
||||
div#columns {
|
||||
@include flex-direction(column);
|
||||
padding: $mobile-block-padding;
|
||||
|
||||
> div {
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
|
||||
$primary-color: #B73720; /* red/bordeau */
|
||||
$width: 1170px;
|
||||
$mobile-limit: 768px;
|
||||
$tablet-limit: 1024px;
|
||||
$font-color: #202020;
|
||||
$font-family: Asap-Regular, sans-serif;
|
||||
$font-size: 62.5%;
|
||||
$footer-color: #FFFFFF;
|
||||
$footer-background: #2B2B2B;
|
||||
$top-logo-width: 21,428571428571%;
|
||||
$border-radius: 0px;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-color: $font-color;
|
||||
$title-font-family: Asap-Regular, sans-serif;
|
||||
$title-font-size: 4.5rem;
|
||||
$title-padding: 1ex 0.5rem;
|
||||
|
||||
$nav-color: $font-color;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-height: 51px;
|
||||
$nav-item-hover-color: $nav-active-color;
|
||||
$nav-mobile-menu-background: white;
|
||||
$nav-item-selected-mode: border-bottom;
|
||||
$nav-item-hover-mode: $nav-item-selected-mode;
|
||||
|
||||
$nav-button-background: #1C515E;
|
||||
$nav-button-color: white;
|
||||
$nav-menu-side: 90px;
|
||||
|
||||
$form-style: light;
|
||||
$form-background: #F1F1F1;
|
||||
$form-margin: 0 0 3rem;
|
||||
$button-background: #ECB500;
|
||||
$button-hover-background: #FFCB20;
|
||||
$button-color: $font-color;
|
||||
$button-border: none;
|
||||
$button-border-radius: 8px;
|
||||
|
||||
$cell-background: #EFEFEF;
|
||||
$cell-entry-hover-background: #FFCB20;
|
||||
$cell-border: none;
|
||||
$cell-entry-color: #202020;
|
||||
$block-padding: 1em;
|
||||
$mobile-block-padding: 0 0.1em;
|
||||
|
||||
%button-style {
|
||||
margin: 2ex 0 0 2ex;
|
||||
transition: all 0.2s;
|
||||
font-size: 1.5rem;
|
||||
display: inline-block;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
%title-style {
|
||||
margin: 0.68em 0;
|
||||
font-family: Asap-Medium;
|
||||
font-weight: 500;
|
||||
font-size: $title-font-size;
|
||||
line-height: 1.2;
|
||||
padding: $title-padding;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import '../includes/font-asap';
|
||||
@import '../includes/flexbox_mixins';
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
@import 'circle-steps';
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
#! /usr/bin/env python
|
||||
|
||||
import os
|
||||
import subprocess
|
||||
import re
|
||||
import sys
|
||||
from lxml import etree
|
||||
from lxml.html import html_parser
|
||||
|
||||
|
||||
FILENAME = os.path.join('tmp.html')
|
||||
|
||||
if os.path.exists(FILENAME):
|
||||
os.unlink(FILENAME)
|
||||
|
||||
URL = 'https://www.hautes-alpes.fr/5448-services-en-ligne.htm'
|
||||
subprocess.call(['wget', '--quiet', '-O', FILENAME, '--convert-links', URL])
|
||||
content = open(FILENAME).read().strip()
|
||||
if len(content) < 500:
|
||||
sys.exit(0)
|
||||
|
||||
root = etree.fromstring(content, parser=html_parser)
|
||||
|
||||
for script in root.xpath('//script'):
|
||||
# remove all google related tags
|
||||
if script.text and 'google' in script.text or 'google' in script.attrib.get('src', ''):
|
||||
parent = script.getparent()
|
||||
parent.remove(script)
|
||||
|
||||
# remove title and breadcrumb
|
||||
for element in ('title', 'nav[@id="ariane"]', 'div[@id="cookie_cnil"]'):
|
||||
for useless in root.xpath('//%s' % element):
|
||||
parent = useless.getparent()
|
||||
parent.remove(useless)
|
||||
|
||||
# clear "corps" container to put content into it
|
||||
for main in root.xpath('//main[@id="corps"]'):
|
||||
main.clear()
|
||||
main.attrib['id'] = 'corps'
|
||||
|
||||
content = etree.tostring(root, method='html', pretty_print=True)
|
||||
|
||||
# remove all references to downloaded temporary file
|
||||
content = content.replace(FILENAME, '')
|
||||
|
||||
# remove copy of jquery
|
||||
content = re.sub('<script( type=.*)? src=.*jquery.min.js.*', '', content)
|
||||
|
||||
content = content.replace('<body',
|
||||
r'<body {% block bodyargs %}{% endblock %} ')
|
||||
|
||||
content = content.replace('</head>', '<title>{% block global_title %}{% endblock %}</title>\n</head>')
|
||||
|
||||
content = content.replace('<head>', '<head>{% block head %}{% endblock %}')
|
||||
|
||||
content = content.replace('<main id="corps">', '''<main id="corps">
|
||||
{% block nav %}{% endblock %}
|
||||
{% block messages %}{% endblock %}
|
||||
{% block local-content-wrapper %}
|
||||
{% endblock %}''')
|
||||
|
||||
content = content.replace("SERVER_ROOT = '/'", 'SERVER_ROOT="//www.hautes-alpes.fr/"')
|
||||
|
||||
content = content.replace('<div id="toolbarTraduction">',
|
||||
'<div id="toolbarTraduction">{% block user-info %}{% endblock %}')
|
||||
|
||||
open(os.path.join('.', 'base-theme.html'), 'w').write(content)
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
{% extends 'base-theme.html' %}
|
||||
{% load i18n static combo %}
|
||||
|
||||
{% block global_title %}
|
||||
{% firstof global_title "Hautes-Alpes le département" %} {% block title %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{% if meta_robots %}
|
||||
<meta name="robots" content="{{ meta_robots }}" />
|
||||
{% elif environment_label %}
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, notranslate, noimageindex" />
|
||||
{% endif %}
|
||||
{% block extra_top_head %}
|
||||
{% endblock %}
|
||||
{{ media }}
|
||||
<link rel="stylesheet" type="text/css" href="{{site_base}}{% static 'hautes-alpes-2018/style.css' %}?{{statics_hash}}">
|
||||
{% block extra_css %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyargs %}class="touch-ok {% block bodyclasses %}{% endblock %}" {% block bodyattrs %}{% endblock %}{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<nav>
|
||||
<div id="nav">
|
||||
{% block menu %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="user-nav">
|
||||
{% block user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
<span class="logged-in">
|
||||
{% if idp_account_url %}<a href="{{idp_account_url}}">{% endif %}
|
||||
<span class="connected-user">{{user.first_name}} {{user.last_name}}</span>{% if idp_account_url %}</a>{% endif %}
|
||||
<a accesskey="o" class="logout" href="{% url 'auth_logout' %}">Déconnexion</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 %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block messages %}
|
||||
{% if messages %}
|
||||
<div id="messages">
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block local-content-wrapper %}
|
||||
<div id="main-content-wrapper">
|
||||
<div id="main-content">
|
||||
<div id="content">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -180,6 +180,14 @@
|
|||
"theme_color": "#D1351C"
|
||||
}
|
||||
},
|
||||
{"id": "hautes-alpes-2018",
|
||||
"label": "Hautes-Alpes 2018",
|
||||
"variables": {
|
||||
"css_variant": "hautes-alpes-2018",
|
||||
"no_extra_js": true,
|
||||
"theme_color": "#B73720"
|
||||
}
|
||||
},
|
||||
{"id": "jobourg",
|
||||
"label": "Jobourg",
|
||||
"variables": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue