Merge branch 'feature/header_logo' into 'master'

New header

Closes #212

See merge request cara/cara!286

cara/apps/calculator/templates/calculator.form.html.j2

@@ -21,9 +21,11 @@
 <span class="cara_version">v{{ calculator_version }}</span>
 <span class="feedback">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
 <header class= "bg-light">
-  <div class="container container--narrow container--padding">
-    <img src="/static/images/cara_logo.200x200.png"  class="logo">
-    <h1 class="text-center h1-text"><b>CARA - </b> COVID Airborne Risk Assessment Calculator</h1>
+  <div class="container container--padding">
+    <div class="d-flex header-height">
+      <h1 class="align-self-center">Calculator</h1>
+      <img src="/static/images/cara_logo.200x200.png" class="logo_form align-self-center ml-3">
+    </div>
   </div>
 </header>
 

cara/apps/static/css/style.css

@@ -23,18 +23,6 @@ body {
 
 /*============= TOP BAR HEADER =============*/
 
-.top-bar{
-  background: rgb(34, 34, 34);
-  height: 2.8rem;
-  padding: 0.5rem 0;
-}
-
-.top-bar a {
-  color: rgb(153, 153, 153);
-  text-decoration: none;
-  font-size: 1.1rem;
-}
-
 .dropwown-navbar-colors {
   background: rgb(42, 52, 66); 
   border-color: rgb(42, 52, 66);
@@ -73,6 +61,7 @@ body {
   color: rgb(45, 138, 241)!important;
 }
 
+
 /*============= SPLIT =============*/
 
 .split {
@@ -87,11 +76,16 @@ body {
 
 /*============= TEXT AND CONTENT =============*/
 
+.header-height {
+  height: 96px;
+}
+
 .logo {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  height: 4em;
+  height: 6em;
+}
+
+.logo_form {
+  height: 3em;
 }
 
 #nat_vent_image {
@@ -233,11 +227,6 @@ footer img {
     width: 25%;
   }
 
-  .logo {
-    float: left;
-    height: 6em;
-  }
-
   #nat_vent_image {
     height: 15em;
   }
@@ -250,6 +239,9 @@ footer img {
     height: 6em;
     margin: 1%;
   }
+  #mobile-app-buttons {
+    display: none!important;
+  }
   .feedback {
     float:right; 
     font-size:1rem; 
@@ -303,6 +295,13 @@ footer img {
   #mobile_link {
     display: inline!important;
   }
+  #desktop_logo {
+    display: none!important;
+  }
+  
+  #mobile_logo {
+    display: block!important;
+  }
   .feedback {
     float:right; 
     font-size:.75rem; 

cara/apps/templates/index.html.j2

@@ -4,13 +4,17 @@
 {% block main %}
     {# <div style="height: 5em; display: block;"></div> #}
 <header class= "bg-light">
-  <div class="container container--narrow container--padding">
-    <img src="/static/images/cara_logo.200x200.png"  class="logo">
-    <h1 class="text-center h1-text"><b>CARA - </b> COVID Airborne Risk Assessment</h1>
+  <div class="container container--padding">
+    <img src="/static/images/cara_full_text.png" class="logo d-block m-auto" id="desktop_logo">
+    <img src="/static/images/cara_full_logo.png" class="logo d-none m-auto" id="mobile_logo">
   </div>
 </header>
    
 <div class="container container--padding">
+  <div class="d-flex flex-row mb-3 justify-content-around" id="mobile-app-buttons">
+    <div><a href="{{ calculator_prefix }}" role="button" class="btn btn-outline-primary"><div class="d-flex d-row"><i class="icon-calculator"></i><span class="pl-1">Calculator</div></a></div>
+    <div><a href="https://cara.web.cern.ch/expert-app" role="button" class="btn btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-1">Expert (beta)</div></a></div>
+  </div>
   <div class="split">
     <div class="col-sm-8 pl-0">
       <h2 class="paragraph-title">Introduction</h2><br>