Generic header added

This commit is contained in:
ahmadbilalkhalid 2020-01-20 15:09:35 +05:00
parent a6715099d5
commit 2b469a920e
6 changed files with 89 additions and 2 deletions

View file

@ -0,0 +1,23 @@
.blue-bg {
background-color: #40a9e3;
}
.black-bg {
background-color: black;
}
.red-bg {
background-color: #d1240c;
}
.green-bg {
background-color: #5cab06;
}
h1.generic-header {
line-height: 6rem;
text-transform: uppercase;
font-size: 7rem;
}

View file

@ -21,6 +21,7 @@ feature3_title: Go fully conscious
feature3_text: Our services are mission-coherent: slim down everything as much as possible for reducing computer power and energy consumption. feature3_text: Our services are mission-coherent: slim down everything as much as possible for reducing computer power and energy consumption.
--- ---
content1_text: content1_text:
## What is Zero Carbon Cloud? ## What is Zero Carbon Cloud?
In the era of rapid climate change and sea level rise, we're here to provide an alternative system that does not use environmentally harmful energy sources. It is a safe and clean alternative to your dropbox or google cloud: our cloud storage service is built with sustainability to its core: it is fully renewable and fully recycled. In the era of rapid climate change and sea level rise, we're here to provide an alternative system that does not use environmentally harmful energy sources. It is a safe and clean alternative to your dropbox or google cloud: our cloud storage service is built with sustainability to its core: it is fully renewable and fully recycled.
@ -80,6 +81,7 @@ content2_image: /u/image/zerocarbon-no.jpg
offer1_title: 100 GB @ 23CHF/month offer1_title: 100 GB @ 23CHF/month
--- ---
offer1_text: offer1_text:
* **One free IPv6 VPN** included for increased security * **One free IPv6 VPN** included for increased security
* Datacenter location: Glarus, Switzerland * Datacenter location: Glarus, Switzerland
* Enhanced security by limiting access to only your devices * Enhanced security by limiting access to only your devices
@ -92,6 +94,7 @@ offer1_link: https://ungleich.ch
offer2_title: 1 TB @ 36.5CHF/month offer2_title: 1 TB @ 36.5CHF/month
--- ---
offer2_text: offer2_text:
* **Two free IPv6 VPNs** included for increased security * **Two free IPv6 VPNs** included for increased security
* Datacenter location: Glarus, Switzerland * Datacenter location: Glarus, Switzerland
* Enhanced security by limiting access * Enhanced security by limiting access
@ -105,6 +108,7 @@ offer2_link: https://ungleich.ch
offer3_title: 50 TB @ 540 CHF/month offer3_title: 50 TB @ 540 CHF/month
--- ---
offer3_text: offer3_text:
* **Ten free IPv6 VPNs** included for increased security * **Ten free IPv6 VPNs** included for increased security
* Datacenter location: Glarus, Switzerland * Datacenter location: Glarus, Switzerland
* Enhanced security by limiting access to only your devices * Enhanced security by limiting access to only your devices
@ -115,3 +119,15 @@ Recommended for medium to large organisations
--- ---
offer3_link: https://ungleich.ch offer3_link: https://ungleich.ch
--- ---
header:
#### generic-header ####
headers:
carbon free
zero carbon
cloud solution
----
primary_color: blue
----
header_color: text-light

View file

@ -0,0 +1,22 @@
[block]
name = generic-header
[fields.headers]
label = headers
type = strings
[fields.primary_color]
name = Landing Page Primary Color
label = primary_color
type = select
choices = blue, black, red, green
choice_labels = Blue, Black, Red, Green
default = blue
[fields.header_color]
name = Header Color
label = header_color
type = select
choices = text-light, text-dark
choice_labels = light, dark
default = text-light

View file

@ -12,6 +12,10 @@ size = large
label = Subtitle label = Subtitle
type = string type = string
[fields.header]
type = flow
flow_blocks = generic-header
[fields.description1] [fields.description1]
label = Description 1 label = Description 1
type = markdown type = markdown

View file

@ -0,0 +1,7 @@
<div class="jumbotron jumbotron-fluid {{this.primary_color}}-bg">
<div class="container-fluid">
{% for h in this.headers %}
<h1 class="display-1 generic-header {{this.header_color}}" style="font-weight: bolder;">{{h}}</h1>
{% endfor %}
</div>
</div>

View file

@ -11,6 +11,7 @@
href="/u/static/bootstrap-4.4.1-dist/css/bootstrap.min.css"> href="/u/static/bootstrap-4.4.1-dist/css/bootstrap.min.css">
<link rel="shortcut icon" href="/u/static/images/favicon.ico"/> <link rel="shortcut icon" href="/u/static/images/favicon.ico"/>
<link rel="stylesheet" href="/u/static/generic-header.css"/>
<!-- Google analytics --> <!-- Google analytics -->
<script> <script>
@ -26,7 +27,18 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> {% if this.header %}
{% set nav_classes = this.header.blocks[0].primary_color + '-bg' %}
{% if this.header.blocks[0].primary_color != 'Black' %}
{% set nav_classes = nav_classes + ' navbar-dark' %}
{% else %}
{% set nav_classes = nav_classes + ' navbar-light' %}
{% endif %}
{% else %}
{% set nav_classes = 'navbar-light bg-light' %}
{% endif %}
<nav class="navbar navbar-expand-lg {{ nav_classes }}">
<a class="navbar-brand" href="https://ungleich.ch">ungleich</a> <a class="navbar-brand" href="https://ungleich.ch">ungleich</a>
<button class="navbar-toggler" type="button" <button class="navbar-toggler" type="button"
data-toggle="collapse" data-toggle="collapse"
@ -72,7 +84,9 @@
</form> </form>
</div> </div>
</nav> </nav>
{% if this.header %}
{{ this.header.blocks[0] }}
{% else %}
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5"> <div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">{{ self.title() }} <h1 class="display-4 font-weight-normal">{{ self.title() }}
@ -83,6 +97,7 @@
<div class="product-device shadow-sm d-none d-md-block"></div> <div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div> <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div> </div>
{% endif %}
{% block content %}{% endblock %} {% block content %}{% endblock %}