scss, css and bootstrap init settings

This commit is contained in:
marco_carollo 2024-11-06 14:47:34 +01:00
parent f5857c3e66
commit 905b144ed8
9 changed files with 740 additions and 866 deletions

13
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,13 @@
{
"liveSassCompile.settings.formats": [
// This is Default.
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/ckanext-d4science_theme/ckanext/d4science_theme/assets/css"
}
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [],
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/d4science_theme.scss","../scss/_variables.scss"],"names":[],"mappings":"AAEA,0BACC,KACC,UAED,GACC,WAGF,kBACC,KACC,UAED,GACC,WAIF,kBACC,sBAIG,iDACC,iBCJgB,QDUjB,mCACC,MChCK,qBDiCL,yCACC,MCjCI,qBDwCV,UACC,uDACA,0BACA,gBACA,+BACA,6BAIG,sCACC,MCjDK,QDkDL,4CACC,MClDI,KDuDN,6CACC,iBCrCgB,QD2CnB,iCACC,wDACA,gDAKF,WACC,kBAGF,KACC,gBACA,sBAED,MACC,gDACA,WACC,2BAID,yBAWC,YAVA,yCACC,MCrFO,KDsFP,iBCnEkB,KDqEnB,+BACC,iBCrEkB,QDuEnB,4BACC,MC1FO,KD8FT,sBACC,6BACA,eAMG,2BACC,0BAON,gBACC,eACA,iBACA,MClHS,QDmHT,mBAED,YACC,0CACA,0BAED,MACC,0CACA,0BAED,qBACC,iBC5GoB,KD6GpB,kBACA,WACA,qBACA,gBACA,kBACA,mBACA,kBACA,kBACA,YAED,wBACC,eACA,aACA,gBACA,aAED,qBACC,+BACA,6BACA,8BACA,4BACA,6BACA,eACA,oBACA,6BACC,WACA,cACA,cAED,4BACC,WAID,mBACC,WACA,cACA,cAGF,mBACC,kBACA,gCACA,2BACA,wBACA,mBACA,iBCzJoB,QD0JpB,gCAED,aACC,sBAED,cACC,yCACA,YACA,kBACA,sBACA,WACA,iBCrKoB,QDsKpB,gCACA,gBACA,gCAED,aACC,iBC1KoB,KD2KpB,YCpLe,mDDqLf,eACA,MCvMS,qBDwMT,mBACC,MCzMQ,qBD2MT,mBACC,MC5MQ,qBD8MT,eACC,MC/MQ,qBDkNV,KACC,iBCzLoB,KD0LpB,YCnMe,mDDoMf,eAED,sBACC,gBACA,cACA,eACA,kBACA,wBACC,qBAGF,eACC,iBCtMoB,cDuMpB,cACA,MC5NS,cD6NT,aACA,iBAED,uBACC,wEACA,YACA,eACA,mBACA,WAED,sBACC,gFACA,YACA,eACA,mBACA,WAED,uBACC,eACA,MC/OS,QDgPT,kBACA,YACA,gBACA,iBC/NoB,QDgOpB,yBACC,iBACA,qBACA,MC5PQ,KDgQT,oBACC,MC3PS,QD4PT,YCnPc,4CDoPd,eACA,iBACA,gBACA,cACA,kCACA,qBACA,oBACA,gBACA,6BAED,WACC,MCvQS,KDwQT,YChQc,4CDiQd,eACA,gBACA,mBACA,qBAED,eACC,eACA,aACA,gBACA,qBACA,iBAED,kBACC,MCrRS,QDsRT,YC/Qc,4CDgRd,eACA,iBACA,cACA,gBACA,mBACA,kCAID,qBACC,0BAID,cACC,oCACA,yBACA,kBACA,2BACA,mBACA,gBAGF,cACC,eACA,gBACA,gBACA,kBAGA,kCACC,oCACA,yBACA,kBACA,2BACA,yBAGF,SACC,yBACA,qCACA,kBAED,cACC,iBAED,eACC,gBAED,iBACC,0BACA,uBACA,kBACA,MC7UU,KD8UV,qBAED,oBACC,kBACA,iBC9TqB,KD+TrB,sBACA,oBACA,iBAED,UACC,eAED,gBACC,iBCtUqB,QDwUtB,aACC,iBCxUqB,QD0UtB,SACC,iBACA,YACA,qBAED,oBACC,MC7WS,KD8WT,qBACA,YACA,iBACA,iBACA,kBAED,eACC,MC5WU,KD6WV,gBACA,eACA,MACA,QACA,YC1We,yBD4WhB,WACC,aACA,eACA,cACA,OACA,MACA,WACA,YACA,cACA,iBCvWqB,KDwWrB,iBCvWqB,eDyWtB,mBACC,iBCzWqB,QD0WrB,aACA,sBACA,0BACA,uBACA,kBACA,kBACA,SACA,mBACA,YAED,WACC,MC3YU,KD4YV,YACA,eACA,iBACA,kBACA,iBACC,MChZS,KDiZT,qBACA,eAED,iBACC,MCrZS,KDsZT,qBACA,eAGF,mBACC,eAED,iBACC,kBACA,eACA,yBACA,sBACA,qBACA,iBACA,4BACC,kBACA,YACA,iBCjZoB,KDkZpB,MCvaS,KDwaT,kBACA,kBACA,YACA,kBACA,UACA,YACA,SACA,mBAED,uBACC,mBACA,4BACA,oBAGF,UACC,kBACA,eACA,yBACA,sBACA,qBACA,iBACA,qBACC,kBACA,YACA,iBC5aoB,KD6apB,MClcS,KDmcT,kBACA,kBACA,YACA,kBACA,UACA,YACA,SACA,mBACA,4BACC,WACA,kBACA,SACA,SACA,iBACA,iBACA,mBACA,aC3bc,+CD8bhB,gBACC,mBACA,4BACA,oBAGF,uBACC,kBACA,2BACA,iBACA,mBACA,gBACA,yBACC,eAED,2BACC,0BACA,YAED,sCACC,eAGF,UACC,qBAED,iBACC,kBACA,iBACA,YAIC,wBACC,iBClemB,QDsetB,wBACC,iBCteqB,QDwetB,yBACC,iBCzeqB,QD2etB,eACC,qBAEC,qBACC,cACA,iCACC,sBAKJ,mBACC,aACA,eACA,QACA,SACA,kBACA,mBACA,YACA,aACA,eACA,yCACA,4BACA,2BAGA,qCACC,6BACA,mBAED,+CACC,aAED,wCACC,aAGF,sBACC,iBAED,eACC,WACA,kBACC,UACA,yBACA,8BACC,kBACA,wBAED,6BACC,YACA,kBACA,uBAGF,mBACC,gBACA,YAGF,2BACC,qBAEC,iCACC,cACA,6CACC,iBACA,MCpkBO,QDykBX,cACC,oBACA,WACA,+BACC,mBAGF,iBACC,aAIG,2DACC,UACA,kBACA,iBACA,WAED,gDACC,WAID,mDACC,oBAOF,2CACC,oBAKJ,kBACC,UACA,aACA,YACA,qBAED,mBACC,eACA,qBACA,eACA,MCtoBS,QDuoBT,eACA,cACA,sBACA,oBACA,mBACA,0BACC,WAGF,gBACC,kBACA,uBACC","file":"d4science_theme.css"}

View File

@ -0,0 +1,40 @@
$color_1: rgba(255, 255, 255, 0.6);
$color_2: rgba(255, 255, 255, 0.7);
$color_3: #187794;
$color_4: white;
$color_5: rgb(68, 68, 68);
$color_6: #202020;
$color_7: #444;
$color_8: transparent;
$color_9: #f5f5f5;
$color_10: inherit;
$color_11: #444444;
$color_12: #9F9F9F;
$color_13: #808080;
$color_14: #aaaaaa;
$color_15: #000;
$color_16: #fff;
$color_17: #5a5a5a;
$font-family_1: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
$font-family_2: "Helvetica Neue",Helvetica,Arial,sans-serif;
$font-family_3: sans-serif, times, georgia;
$background-color_1: #ccc;
$background-color_2: #9fa0a2;
$background-color_3: #d2d2d5;
$background-color_4: white;
$background-color_5: #fcfcfc;
$background-color_6: #4679b2;
$background-color_7: #bbb;
$background-color_8: transparent;
$background-color_9: #7F7F7F;
$background-color_10: #fdfdfd;
$background-color_11: #eee;
$background-color_12: #55a1ce;
$background-color_13: #e0051e;
$background-color_14: rgb(0,0,0);
$background-color_15: rgba(0,0,0,0.4);
$background-color_16: #fefefe;
$background-color_17: #555;
$background-color_18: #187794;
$background-color_19: #e6b800;
$border-color_1: #555 transparent transparent transparent;

View File

@ -0,0 +1,664 @@
@import 'variables';
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.account-masthead {
background-color: $background-color_1;
.account {
.notifications {
a {
span {
background-color: $background-color_2;
}
}
}
ul {
li {
a {
color: $color_1;
&:hover {
color: $color_2;
}
}
}
}
}
}
.masthead {
background: #eee url("/bg-noise.png") repeat scroll 0 0;
border-top: 1px solid #555;
padding-top: 5px;
padding-bottom: 15px !important;
border-bottom: 1px solid #999;
.navigation {
.nav-pills {
li {
a {
color: $color_3;
&:hover {
color: $color_4;
}
}
}
li.active {
a {
background-color: $background-color_3;
}
}
}
}
input[type="text"] {
&:focus {
-webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}
}
}
a.logo {
>img {
margin-bottom: 5px;
}
}
.box {
box-shadow: none;
border: 0px !important;
}
.hero {
background: #FEFEFE repeat scroll 0 0 !important;
.box {
margin-top: 10px !important;
}
}
.homepage {
.module-search {
.module-content {
color: $color_5;
background-color: $background-color_4;
}
.tags {
background-color: $background-color_5;
}
h3 {
color: $color_7;
}
padding: 0px;
}
[role="main"] {
border-bottom: 1px solid #bbb;
padding: 10px 0;
}
.stats {
ul {
li {
a {
b {
font-size: 30px !important;
}
}
}
}
}
}
.homepage-title {
font-size: 20px;
font-weight: bold;
color: $color_6;
margin-bottom: 20px;
}
[role="main"] {
background: #fdfdfd none repeat scroll 0 0;
min-height: 0px !important;
}
.main {
background: #fdfdfd none repeat scroll 0 0;
min-height: 0px !important;
}
.media-item-homepage {
background-color: $background-color_4;
border-radius: 3px;
float: left;
margin: 15px 0 0 15px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: relative;
text-align: center;
width: 150px;
}
.media-heading-homepage {
font-size: 16px;
hyphens: auto;
line-height: 1.3;
margin: 5px 0;
}
.media-grid-homepage {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
list-style: outside none none;
margin: 0 -10px;
padding-bottom: 15px;
&::before {
content: "";
display: table;
line-height: 0;
}
&::after {
clear: both;
}
}
.media-grid {
&::after {
content: "";
display: table;
line-height: 0;
}
}
.background-circle {
padding: 10px 10px;
display: inline-block !important;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
background-color: $background-color_6;
text-decoration: none !important;
}
.color-white {
color: $color_4 !important;
}
.badge-circle {
border-radius: 50% 50% 50% 50% !important;
height: 60px;
text-align: center;
vertical-align: middle;
width: 65px;
background-color: $background-color_6;
display: inline-block !important;
padding-top: 5px;
text-decoration: none !important;
}
.site-footer {
background-color: $background-color_7;
font-family: $font-family_1;
font-size: 16px;
color: $color_1;
label {
color: $color_1;
}
small {
color: $color_1;
}
a {
color: $color_1;
}
}
body {
background-color: $background-color_7;
font-family: $font-family_1;
font-size: 16px;
}
.site-footer-internal {
min-height: 10px;
padding: 2px 0;
font-size: 12px;
text-align: center;
a {
display: inline-block;
}
}
.d4s-hide-text {
background-color: $background-color_8;
border: 0 none;
color: $color_8;
font: 0px/0 a;
text-shadow: none;
}
.d4science-footer-logo {
background: url("/gCube_70.png") no-repeat scroll left top rgba(0, 0, 0, 0);
height: 32px;
margin-top: 2px;
text-indent: -900em;
width: 75px;
}
.d4s-ckan-footer-logo {
background: rgba(0, 0, 0, 0) url("/ckan-logo-footer.png") no-repeat scroll left top;
height: 21px;
margin-top: 2px;
text-indent: -900em;
width: 69px;
}
.site-footer-d4science {
font-size: 14px;
color: $color_9;
text-align: center;
height: 25px;
padding-top: 5px;
background-color: $background-color_9;
a {
font-weight: bold;
text-decoration: none;
color: $color_4;
}
}
div {
.principaltitle {
color: $color_10;
font-family: $font-family_2;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
margin: 15px 0;
text-rendering: optimizelegibility;
word-break: break-all;
padding-bottom: 10px;
padding-top: 5px;
border-bottom: 1px solid #eee;
}
.notes {
color: $color_11;
font-family: $font-family_2;
font-size: 14px;
line-height: 1.3;
text-align: justify;
word-break: break-all;
}
.infotitle {
font-size: 15px;
hyphens: auto;
line-height: 1.3;
word-break: break-all;
font-weight: bold;
}
.sectiontitle {
color: $color_12;
font-family: $font-family_2;
font-size: 17px;
font-weight: bold;
margin: 20px 0;
margin-top: 20px;
margin-bottom: 10px;
text-rendering: optimizelegibility;
}
}
.toolbar {
.breadcrumb {
font-size: 16px !important;
}
}
section {
.well {
background-color: $background-color_10 !important;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: none !important;
margin-bottom: 20px;
min-height: 20px;
}
}
.page-heading {
font-size: 18px;
line-height: 1.2;
margin-top: 20px;
margin-bottom: 0px;
}
#dataset-resources {
.resource-list {
background-color: $background-color_10 !important;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: none !important;
margin: -1px 0 !important;
}
}
.wrapper {
border: 1px solid #d0d0d0;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.home-popular {
padding-top: 25px;
}
.logo-homepage {
max-height: 60px;
}
.statistics-show {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: $color_11;
text-decoration: none;
}
.d4s-center-cropped {
text-align: center;
background-color: $background-color_11;
border: 1px solid #ddd;
padding-bottom: 10px;
padding-top: 10px;
}
.tag-list {
font-size: 14px;
}
.label-acquired {
background-color: $background-color_12;
}
.label-owner {
background-color: $background-color_13;
}
.divider {
margin-left: 10px;
height: auto;
display: inline-block;
}
.show_meatadatatype {
color: $color_4;
display: inline-block;
float: right;
margin-right: 2px;
margin-top: -20px;
position: relative;
}
.button__badge {
color: $color_13;
padding: 0px 2px;
font-size: 10px;
top: 0;
right: 0;
font-family: $font-family_3;
}
.d4s_modal {
display: none;
position: fixed;
z-index: 10001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: $background-color_14;
background-color: $background-color_15;
}
.d4s_modal-content {
background-color: $background-color_16;
padding: 20px;
border: 1px solid #888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
left: 50%;
margin-left: -225px;
width: 450px;
}
.d4s_close {
color: $color_14;
float: right;
font-size: 28px;
font-weight: bold;
padding-left: 20px;
&:hover {
color: $color_15;
text-decoration: none;
cursor: pointer;
}
&:focus {
color: $color_15;
text-decoration: none;
cursor: pointer;
}
}
.d4s_div_clickable {
cursor: pointer;
}
.popupD4SNoArrow {
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.popuptext {
visibility: hidden;
width: 300px;
background-color: $background-color_17;
color: $color_16;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -150px;
}
.show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
}
.popupD4S {
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.popuptext {
visibility: hidden;
width: 300px;
background-color: $background-color_17;
color: $color_16;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -150px;
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: $border-color_1;
}
}
.show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
}
.graphic-preview-style {
text-align: center;
border-top: 1px dotted #DDD;
padding-top: 10px;
padding-bottom: 0px;
margin-top: 15px;
a {
font-size: 13px;
}
img {
max-width: 100% !important;
height: auto;
}
#graphic-title {
font-size: 13px;
}
}
.nav-item {
word-wrap: break-word;
}
.required-access {
font-style: italic;
font-weight: bold;
padding: 5px;
}
.dataset-resources {
li {
a {
background-color: $background-color_18;
}
}
}
.label[data-format="csw"] {
background-color: $background-color_19;
}
.label[data-format*="csw"] {
background-color: $background-color_19;
}
.my-grsf-table {
word-break: break-all;
tr {
td {
width: inherit;
&:first-child {
width: 82px !important;
}
}
}
}
#ckan-page-loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -130px;
width: 260px;
height: 260px;
z-index: 100000;
background-image: url("/pageloading.gif");
background-repeat: no-repeat;
background-position: center;
}
div#search-for-location {
#dataset-map {
position: relative !important;
top: +0px !important;
}
#dataset-map-container {
height: 300px;
}
.module-heading {
display: none;
}
}
div#search-for-extent {
padding-top: 10px;
}
.qr-code-table {
width: 100%;
td {
width: 85%;
border: 1px solid #e3e3e3;
&:first-child {
padding-left: 10px;
border-right-style: none;
}
&:last-child {
width: 105px;
text-align: center;
border-left-style: none;
}
}
img {
max-width: 100px;
height: auto;
}
}
.json-to-html-table-column {
word-break: break-all;
tr {
td {
width: inherit;
&:first-child {
font-weight: bold;
color: $color_17;
}
}
}
}
.disabled-div {
pointer-events: none;
opacity: 0.5;
input[type="text"] {
background: #f1f1f1;
}
}
.read-more-state {
display: none;
&:checked {
~ {
.read-more-wrap {
.read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
content: "";
}
&::after {
content: "";
}
}
.read-more-trigger {
&:before {
content: 'Show less';
}
}
}
}
~ {
.read-more-trigger {
&:before {
content: 'Show more';
}
}
}
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: $color_3;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
font-weight: normal;
&::after {
content: "";
}
}
.read-more-wrap {
margin-bottom: 2px;
&::after {
content: " ...";
}
}

View File

@ -496,7 +496,7 @@ def get_list_of_groups(limit=10, sort='package_count'):
ordered_groups = [] ordered_groups = []
ordered_groups = logic.get_action('group_list')({}, data) ordered_groups = logic.get_action('group_list')({}, data)
log.debug("group_list: " + ", ".join(ordered_groups)) """ log.debug("group_list: " + ", ".join(ordered_groups)) """
for group in ordered_groups: for group in ordered_groups:
# print "\n\ngroup %s" %group # print "\n\ngroup %s" %group

View File

@ -64,6 +64,7 @@
Example: Example:
{% block styles %} {% block styles %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
{{ super() }} {{ super() }}
<link rel="stylesheet" href="/base/css/custom.css" /> <link rel="stylesheet" href="/base/css/custom.css" />
{% endblock %} {% endblock %}
@ -115,6 +116,8 @@
circumstances circumstances
#} #}
{%- block scripts %} {%- block scripts %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
{% endblock -%} {% endblock -%}
{% block body_extras -%} {% block body_extras -%}

View File

@ -7,6 +7,14 @@
{% block toolbar %}{% endblock %} {% block toolbar %}{% endblock %}
{% block content %} {% block content %}
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-4">Il mio nuovo template con Bootstrap</h1>
<p class="lead">Questa è una sezione di esempio</p>
</div>
</div>
</div>
<div class="homepage layout-{{ homepage_style }}"> <div class="homepage layout-{{ homepage_style }}">
<div id="content" class="container"> <div id="content" class="container">
{{ self.flash() }} {{ self.flash() }}

View File

@ -1,27 +1,15 @@
{% set intro = g.site_intro_text %} {% set intro = g.site_intro_text %}
<div class="module-content box"> <div class="module-content box">
<header> <header>
{% if intro %}
{{ h.render_markdown(intro) }}
{% else %}
{% block home_image %}
<section class='featured media-overlay hidden-phone'>
{% block home_image_content %}
<a class="media-image" href="#" style="text-align:center;">
<img src="gcubedatacataloguelogo.png" alt="Placeholder" width="409" height="54" />
</a>
{% endblock %}
</section>
{% endblock %}
<div class="page-heading"> <div class="page-heading">
<h3>Welcome to the {{g.site_title}}!</h3> <h3>Welcome to the {{g.site_title}}!</h3>
<p style='font-size:14px !important; text-align: justify;'> <p style="font-size: 14px !important; text-align: justify">
Here you will find data and other resources hosted by the D4Science.org infrastructure.</p> Here you will find data and other resources hosted by the D4Science.org
<p style='text-align: justify;'>The catalogue contains a wealth of resources resulting from several activities, projects and communities including BlueBRIDGE (<a href="http://www.bluebridge-vres.eu" title="BlueBRIDGE" target="_blank">www.bluebridge-vres.eu</a>), i-Marine (<a href="http://www.i-marine.eu" title="i-Marine" target="_blank">www.i-marine.eu</a>), SoBigData.eu (<a href="http://www.sobigdata.eu" title="SoBigData.eu" target="_blank">www.sobigdata.eu</a>), and (FAO <a href="http://www.fao.org" title="FAO" target="_blank">www.fao.org</a>). infrastructure.
</p> </p>
<p style='text-align: justify;'>All the products are accompanied with rich descriptions capturing general attributes, e.g. title and creator(s), as well as usage policies and licences.</p>
</div> </div>
{% endif %}
</header> </header>
</div> </div>