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,6 +1,29 @@
 | 
			
		|||
:root {
 | 
			
		||||
    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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			@ -20,3 +17,10 @@ type = select
 | 
			
		|||
choices = text-light, text-dark
 | 
			
		||||
choice_labels = light, dark
 | 
			
		||||
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">
 | 
			
		||||
      {% for h in this.headers %}
 | 
			
		||||
        <h1 class="display-1 generic-header {{this.header_color}}" style="font-weight: bolder;">{{h}}</h1>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue