diff --git a/Makefile b/Makefile index 036be06..b99c4c3 100644 --- a/Makefile +++ b/Makefile @@ -16,7 +16,7 @@ themes.json: $(wildcard static/*/config.json) publik-base-theme/static/includes/_data_uris.scss: $(wildcard publik-base-theme/static/includes/img/*) cd publik-base-theme; python make_data_uris.py static/includes/ -css: publik-base-theme/static/includes/_data_uris.scss publik-base-theme/static/includes/_publik.scss static/coprec/style.css +css: publik-base-theme/static/includes/_data_uris.scss publik-base-theme/static/includes/_publik.scss static/coprec/style.css static/avray/style.css rm -rf static/*/.sass-cache/ clean: diff --git a/README b/README index 2508c64..cd4c8de 100644 --- a/README +++ b/README @@ -1,6 +1,10 @@ Base theme for atReal ===================== +Available themes: + +- Coprec +- Ville d'Avray License diff --git a/debian/changelog b/debian/changelog index 8a3b75d..03e447f 100644 --- a/debian/changelog +++ b/debian/changelog @@ -1,5 +1,6 @@ atreal-publik-themes (0.1-1) unstable; urgency=low + * Ajout thème pour la Ville d'Avray * Initial packaging. - -- Michael Bideau Tue, 8 Jan 2019 11:50:48 +0100 + -- Michael Bideau Thu, 17 Jan 2019 16:55:48 +0100 diff --git a/static/avray/_custom.scss b/static/avray/_custom.scss new file mode 100644 index 0000000..13dddb6 --- /dev/null +++ b/static/avray/_custom.scss @@ -0,0 +1,457 @@ +@import '../../publik-base-theme/static/includes/font-din'; + +header { + background-color: white; + + #header { + padding: 0 1ex 1ex; + + #top { + #logo a { + background: url(img/logo.jpg) bottom left no-repeat; + background-size: 700px; + height: 221px; + line-height: 240px; + text-indent: -10000px; + font-weight: normal; + display: block; + color: white; + padding-bottom: 20px; + position: relative; + left: -1rem; + padding-left: 730px; + + @media screen and (max-width: $mobile-limit) { + padding-left: 0; + max-width: 90%; + background-size: contain; + left: 0; + margin-right: 140px; + } + } + } + + #toplinks { + border: none; + box-shadow: none; + + .login { + font-size: 0; + } + + a { + color: #aeaeae; + font-family: Arial, sans-serif !important; + font-size: 14px; + font-weight: bold; + text-decoration: none; + margin: 2px 0; + white-space: nowrap; + vertical-align: baseline; + line-height: 30px; + border-left: 1px solid #aeaeae; + padding: 0 5px 0; + } + a:hover { + text-decoration: none; + } + a:first-child { + border-left: none; + padding-left: 0; + } + a:last-child { + padding-right: 0; + } + + span.sep { + display: none; + } + } + + #social-networks { + z-index: 900; + position: relative; + float: right; + margin: -71px -1px 0 0; + + ul, ul > li, ul > li > a { + margin: 0; + padding: 0; + } + ul > li { + list-style-type: none; + display: inline-block; + } + ul > li:first-child { + margin-right: 11px; + } + ul > li > a { + display: block; + height: 51px; + width: 51px; + text-decoration: none; + font-size: 0px; + background-repeat: no-repeat; + background-color: transparent; + cursor: pointer; + } + ul > li.twitter > a { + background-image: url('img/twitter_network.png') + } + ul > li.facebook > a { + background-image: url('img/facebook_network.png') + } + } + } +} + +nav { + background-color: #dbdbdb; + border-bottom: 25px solid white; + + #nav-wrapper { + #nav { + ul { + margin: 0; + } + + ul > li { + padding: 7px 0 0; + margin: 0 3px; + } + ul > li:first-child { + margin-left: 0; + } + ul > li:last-child { + margin-right: 0; + } + + ul > li > a { + padding-left: 15px; + padding-right: 15px; + line-height: 50px; + font-weight: 500; + text-align: center; + text-transform: uppercase; + font-size: 19px; + transition: none; + border-bottom: 4px solid transparent; + } + ul > li.menu-la-ville > a { + border-bottom: 4px solid $color-rubrique-la-ville; + } + ul > li.menu-cadre-vie > a { + border-bottom: 4px solid $color-rubrique-cadre-vie; + } + ul > li.menu-economie-commerces > a { + border-bottom: 4px solid $color-rubrique-economie-commerces; + } + ul > li.menu-enfance-jeunesse > a { + border-bottom: 4px solid $color-rubrique-enfance-jeunesse; + } + ul > li.menu-sports-culture > a { + border-bottom: 4px solid $color-rubrique-sports-culture; + } + ul > li.menu-social-aines > a { + border-bottom: 4px solid $color-rubrique-social-aines; + } + + ul > li > ul > li > a { + color: white !important; + font-size: 12px; + font-weight: 500; + line-height: 20px; + } + ul > li:hover, ul > li:hover a { + color: white !important; + } + ul > li.menu-la-ville:hover, ul > li.menu-la-ville:hover > ul { + background-color: $color-rubrique-la-ville; + } + ul > li.menu-cadre-vie:hover, ul > li.menu-cadre-vie:hover > ul { + background-color: $color-rubrique-cadre-vie; + } + ul > li.menu-economie-commerces:hover, ul > li.menu-economie-commerces:hover > ul { + background-color: $color-rubrique-economie-commerces; + } + ul > li.menu-enfance-jeunesse:hover, ul > li.menu-enfance-jeunesse:hover > ul { + background-color: $color-rubrique-enfance-jeunesse; + } + ul > li.menu-sports-culture:hover, ul > li.menu-sports-culture:hover > ul { + background-color: $color-rubrique-sports-culture; + } + ul > li.menu-social-aines:hover, ul > li.menu-social-aines:hover > ul { + background-color: $color-rubrique-social-aines; + } + + @media screen and (max-width: $mobile-limit) { + ul > li > ul > li > a { + color: black !important; + } + } + } + } +} + +#page { + background-color: #00a4e2; + + #main-content-wrapper { + background: white; + padding: 0 1rem 1rem; + box-sizing: border-box; + + #content { + div.textcell h3, + div.textcell h4, + div.textcell h5, + div.textcell p, + div.textcell table { + margin: 1ex 0; + } + + a { + color: #1287b5; + } + + p { + font-family: Arial; + font-size: medium; + font-weight: normal; + } + + h1, h2, h3, h4, h5, h6 { + text-rendering: optimizeLegibility; + } + h1, h2, h3, h4, h5, h6, span.h1, span.h2, span.h3, span.h4, span.h5, span.h6 { + margin: 1em 0 .5em 0; + line-height: 1.2; + font-weight: bold; + font-style: normal; + } + h1 { + font-weight: 600; + font-size: 23px; + padding-bottom: 6px; + padding-top: 13px; + text-transform: uppercase; + } + h2 { + font-family: Arial; + text-decoration: none; + font-size: large; + font-weight: bold; + } + + #sidebar { + .cell { + margin-right: 0; + } + .cell.titre-menu { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 12px; + + a { + font-size: 23px; + font-weight: 600; + padding: 4px 0; + text-transform: uppercase; + border-bottom: none; + } + } + .cell.titre-menu::after { + display: block; + height: 3px; + width: 65px; + border-bottom: 3px solid transparent; + } + .cell.titre-menu a:hover { + background-color: transparent; + } + + .cell.menucell { + background-color: #f3f3f3; + + div ul > li > a { + padding: 1px 0 1px 15px; + line-height: 35px; + border-bottom: 1px solid #cccdca; + font-size: 11px; + font-size: 16px; + color: black; + } + div ul > li > a:hover { + color: white !important; + } + + div > ul > li > a { + padding: 6px 0 4px 7px; + border-bottom: 2px solid #5c5e51; + font-size: 17px; + overflow: hidden; + text-overflow: ellipsis; + color: white; + } + } + } + } + } +} + +#la-ville, .page-la-ville, .section-la-ville, .content-la-ville { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-la-ville !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-la-ville !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-la-ville !important; + } + } +} +#cadre-vie, .page-cadre-vie, .section-cadre-vie, .content-cadre-vie { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-cadre-vie !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-cadre-vie !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-cadre-vie !important; + } + } +} +#economie-commerces, .page-economie-commerces, .section-economie-commerces, .content-economie-commerces { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-economie-commerces !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-economie-commerces !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-economie-commerces !important; + } + } +} +#enfance-jeunesse, .page-enfance-jeunesse, .section-enfance-jeunesse, .content-enfance-jeunesse { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-enfance-jeunesse !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-enfance-jeunesse !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-enfance-jeunesse !important; + } + } +} +#sports-culture, .page-sports-culture, .section-sports-culture, .content-sports-culture { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-sports-culture !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-sports-culture !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-sports-culture !important; + } + } +} +#social-aines, .page-social-aines, .section-social-aines, .content-social-aines { + h1, h2, h3, h4, h5, h6, #content a:hover, #sidebar .cell.titre-menu a { + color: $color-rubrique-social-aines !important; + } + #sidebar { + .cell.titre-menu::after { + border-bottom: 3px solid $color-rubrique-social-aines !important; + } + .cell.menucell > div > ul > li > a, .cell.menucell div ul > li > a:hover { + background-color: $color-rubrique-social-aines !important; + } + } +} + +@media screen and (max-width: $mobile-limit) { + #header #top #logo a { + display: block; + height: 75px; + } + .gru-nav-wrapper { + margin-top: -48px; + } + #nav-wrapper div.gru-nav > ul { + padding-top: 0; + margin-top: 0; + } + #nav-wrapper div.gru-nav > ul > li:first-child a { + padding-left: 20px; + } +} + +footer { + #footer-top-wrapper { + background-color: white; + + #footer-top { + clear: both; + max-width: calc(#{$width} - 30px); + margin: 0 auto; + padding: 25px 15px 0; + height: 25px; + text-align: right; + + .cell.linkcell, .cell.linkcell ul, .cell.linkcell ul li { + display: inline-block; + } + .cell.linkcell a { + text-decoration: none; + color: black; + font-family: Arial; + font-size: 12px; + line-height: 15px; + border: none; + padding: 0 7px 0 0; + } + .cell.linkcell a::after { + content: " / "; + margin-left: 10px; + } + .cell.linkcell.dernier a::after { + content: ""; + margin-left: 0; + } + } + } + + #footer-wrapper { + #footer { + min-height: 130px; + + #footer-logo-text { + float: left; + width: 300px; + min-height: 75px; + margin: 10px; + padding: 65px 0 0 65px; + + background-color: transparent; + background-repeat: no-repeat; + background-image: url('img/logobaspage.png'); + background-position: left 0 top 0; + + color: $color-rubrique-sports-culture; + font-size: 15px; + line-height: 15px; + font-weight: 700; + } + } + } +} + diff --git a/static/avray/_vars.scss b/static/avray/_vars.scss new file mode 100644 index 0000000..4928566 --- /dev/null +++ b/static/avray/_vars.scss @@ -0,0 +1,51 @@ +$primary-color: #004171; + +$width: 1200px; + +$font-color: black; +$font-family: Raleway, Arial, sans-serif; +$font-size: 16px; + +$page-background-color: #00A4E2; + +$color-rubrique-la-ville: #B4C61C; +$color-rubrique-cadre-vie: #E85113; +$color-rubrique-economie-commerces: #1E69B3; +$color-rubrique-enfance-jeunesse: #AE03E6; +$color-rubrique-sports-culture: #004170; +$color-rubrique-social-aines: #D00101; + +$nav-background: transparent; +$nav-submenu-background: #eee; +$nav-submenu-color: #333; +$nav-color: $font-color; +$nav-active-color: $primary-color; + +$nav-item-selected-background: transparent; +$nav-item-selected-color: $primary-color; +$nav-item-selected-mode: bottom-border; +$nav-item-selected-border: 4px solid transparent; +$nav-item-hover-background: transparent; +$nav-item-hover-color: $nav-item-selected-color; +$nav-item-hover-border: 4px solid $primary-color; + +$footer-background: #e0e0e0; +$footer-color: black; +$cell-border: 1px solid transparent; + +$border-radius: 0px; +$widget-border-radius: 3px; + +$title-background: $primary-color; +$title-color: #004171; + +$link-color: #96B313; + +$button-background: $primary-color; +$button-color: white; +$button-border-radius: 5px; +$button-border: 2px solid $link-color; +$button-background: $link-color; +$button-hover-background: white; +$button-hover-color: $link-color; + diff --git a/static/avray/config.json b/static/avray/config.json new file mode 100644 index 0000000..3606c47 --- /dev/null +++ b/static/avray/config.json @@ -0,0 +1,10 @@ +{ + "label": "Ville d'Avray", + "module": "publik-base", + "overlay": "atreal", + "variables": { + "favicon": "avray/img/favicon-32x32.png", + "theme_color": "#004171", + "no_extra_js": true + } +} diff --git a/static/avray/img/Logo demarche.jpg b/static/avray/img/Logo demarche.jpg new file mode 100644 index 0000000..bac3400 Binary files /dev/null and b/static/avray/img/Logo demarche.jpg differ diff --git a/static/avray/img/Logo_demarche-700px.jpg b/static/avray/img/Logo_demarche-700px.jpg new file mode 100644 index 0000000..d2db6e2 Binary files /dev/null and b/static/avray/img/Logo_demarche-700px.jpg differ diff --git a/static/avray/img/facebook_network.png b/static/avray/img/facebook_network.png new file mode 100644 index 0000000..f2c97e1 Binary files /dev/null and b/static/avray/img/facebook_network.png differ diff --git a/static/avray/img/logo.jpg b/static/avray/img/logo.jpg new file mode 120000 index 0000000..561ec8a --- /dev/null +++ b/static/avray/img/logo.jpg @@ -0,0 +1 @@ +Logo_demarche-700px.jpg \ No newline at end of file diff --git a/static/avray/img/logobaspage.png b/static/avray/img/logobaspage.png new file mode 100644 index 0000000..c10bdda Binary files /dev/null and b/static/avray/img/logobaspage.png differ diff --git a/static/avray/img/twitter_network.png b/static/avray/img/twitter_network.png new file mode 100644 index 0000000..a0ca8b6 Binary files /dev/null and b/static/avray/img/twitter_network.png differ diff --git a/static/avray/style.scss b/static/avray/style.scss new file mode 100644 index 0000000..0ab7c01 --- /dev/null +++ b/static/avray/style.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +@import 'vars'; +/*@import '../includes/publik';*/ +@import '../../publik-base-theme/static/includes/publik'; +@import 'custom'; diff --git a/templates/variants/avray/combo/page_template.html b/templates/variants/avray/combo/page_template.html new file mode 100644 index 0000000..0890ecc --- /dev/null +++ b/templates/variants/avray/combo/page_template.html @@ -0,0 +1,32 @@ +{% extends "combo/page_template.html" %} +{% load static i18n combo gadjo pwa %} + +{% block header-bottom %} +
+ +
+{% endblock %} + +{% block footer-top %} + +{% endblock %} + +{% block footer %} + {% block footer-logo-text %} +
+ {% trans "Pied de page - logo et texte" as name %} + {% placeholder "footer-logo-text" acquired=True name=name %} +
+ {% endblock %} + {% trans "Footer" as name %} + {% placeholder "footer" acquired=True name=name %} +{% endblock %} + diff --git a/templates/variants/avray/combo/page_template_sidebar.html b/templates/variants/avray/combo/page_template_sidebar.html new file mode 100644 index 0000000..eb0358b --- /dev/null +++ b/templates/variants/avray/combo/page_template_sidebar.html @@ -0,0 +1,13 @@ +{% extends "combo/page_template_sidebar.html" %} +{% load combo i18n %} + +{% block combo-content %} +
+{% trans "Content" as name %} +{% placeholder "content" name=name %} +
+ +{% endblock %}