Commit c45504a7 authored by Andre Henriques's avatar Andre Henriques
Browse files

Merge branch 'feature/header_logo' into 'master'

New header

Closes #212

See merge request !286
parents 26ff971b b027ff34
Pipeline #3228923 passed with stages
in 6 minutes and 56 seconds
......@@ -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>
......
......@@ -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;
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment