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

4 years ago · a5c4ad4a60
parent 466a3455c8
commit a5c4ad4a60
5 changed files with 41 additions and 15 deletions
--- a/assets/u/static/generic-header.css
+++ b/assets/u/static/generic-header.css
@ -1,7 +1,30 @@
 :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 {
    background-color: #40a9e3;
 }
--- a/content/u/products/zero-carbon-cloud/contents.lr
+++ b/content/u/products/zero-carbon-cloud/contents.lr
@ -126,6 +126,8 @@ don't offset
 go zero carbon
 zero carbon cloud
 ----
-primary_color: blue
+primary_color: #40a9e3
 ----
 header_color: text-light
+----
+nav_link_color: navbar-dark
--- a/flowblocks/generic-header.ini
+++ b/flowblocks/generic-header.ini
@ -8,10 +8,7 @@ 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
+type = string

 [fields.header_color]
 name = Header Color
@ -19,4 +16,11 @@ label = header_color
 type = select
 choices = text-light, text-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
--- a/templates/blocks/generic-header.html
+++ b/templates/blocks/generic-header.html
@ -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">
      {% for h in this.headers %}
        <h1 class="display-1 generic-header {{this.header_color}}" style="font-weight: bolder;">{{h}}</h1>
--- a/templates/layout-2020.html
+++ b/templates/layout-2020.html
@ -28,17 +28,14 @@
  </head>
  <body>
    {% 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 %}
+      {% set nav_style = 'background-color:' + this.header.blocks[0].primary_color + ';' %}
+      {% set nav_classes = this.header.blocks[0].nav_link_color %}
    {% else %}
      {% set nav_classes = 'navbar-light bg-light' %}
    {% 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>
      <button class="navbar-toggler" type="button"
              data-toggle="collapse"