Header Color now accept hex value + Navigation Color Option added + Make font size smaller for mobile devices for landing page

This commit is contained in:
ahmadbilalkhalid 2020-01-22 23:18:05 +05:00
parent 466a3455c8
commit a5c4ad4a60
5 changed files with 41 additions and 15 deletions

View file

@ -1,7 +1,30 @@
:root { :root {
font-size: 16px; font-size: 14px;
} }
h3 {
font-size: 1.5rem;
}
h2 {
font-size: 1.75rem;
}
.mb-5 {
margin-bottom: 1.5rem !important;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
:root {
font-size: 16px;
}
.mb-5 {
margin-bottom: 3rem !important;
}
}
.blue-bg { .blue-bg {
background-color: #40a9e3; background-color: #40a9e3;
} }

View file

@ -126,6 +126,8 @@ don't offset
go zero carbon go zero carbon
zero carbon cloud zero carbon cloud
---- ----
primary_color: blue primary_color: #40a9e3
---- ----
header_color: text-light header_color: text-light
----
nav_link_color: navbar-dark

View file

@ -8,10 +8,7 @@ type = strings
[fields.primary_color] [fields.primary_color]
name = Landing Page Primary Color name = Landing Page Primary Color
label = primary_color label = primary_color
type = select type = string
choices = blue, black, red, green
choice_labels = Blue, Black, Red, Green
default = blue
[fields.header_color] [fields.header_color]
name = Header Color name = Header Color
@ -20,3 +17,10 @@ type = select
choices = text-light, text-dark choices = text-light, text-dark
choice_labels = light, dark choice_labels = light, dark
default = text-light default = text-light
[fields.nav_link_color]
name = Navigation Link Color
type = select
choices = navbar-light, navbar-dark
choice_labels = dark, light
default = dark

View file

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

View file

@ -28,17 +28,14 @@
</head> </head>
<body> <body>
{% if this.header %} {% if this.header %}
{% set nav_classes = this.header.blocks[0].primary_color + '-bg' %} {% set nav_style = 'background-color:' + this.header.blocks[0].primary_color + ';' %}
{% if this.header.blocks[0].primary_color != 'Black' %} {% set nav_classes = this.header.blocks[0].nav_link_color %}
{% set nav_classes = nav_classes + ' navbar-dark' %}
{% else %}
{% set nav_classes = nav_classes + ' navbar-light' %}
{% endif %}
{% else %} {% else %}
{% set nav_classes = 'navbar-light bg-light' %} {% set nav_classes = 'navbar-light bg-light' %}
{% endif %} {% endif %}
<nav class="navbar navbar-expand-lg {{ nav_classes }}">
<nav class="navbar navbar-expand-lg {{ nav_classes }}" style="{{ nav_style }}">
<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"