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:
parent
466a3455c8
commit
a5c4ad4a60
5 changed files with 41 additions and 15 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue