Merge branch 'fix-logo-height-in-safari' into 'master'

Fix mac issue of the logo height

See merge request covid-19/frontend!99

src/app/app.component.html

 <div class="container is-fluid">
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item" alt="logo" width="200"/>
+      <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item logo" alt="logo"/>
       <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>

src/app/pages/about-page/about-page.component.scss

@@ -3,7 +3,7 @@ i {
 }
 
 div.scroll{
-
-  height: calc(100vh - 102px);
   overflow: auto;
+  height: calc(100vh - 70px);
 }
+

src/app/pages/home-page/home-page.component.html

+<!--htmlhint inline-style-disabled:false -->
 <div class="content landing scroll">
   <div class="container has-text-centered">
     <div class="column is-6 width100">
 
-      <img src="assets/covex_logo.png">
+      <img src="assets/covex_logo.png" style="height: 200px; width: 600px">
 
       <h1 class="subtitle is-2">
         <i>Explore the </i> <b> virus-host interactome</b>

src/app/pages/home-page/home-page.component.scss

 img {
   width: 600px;
+  height: 200px;
   padding: 30px;
   background-color: rgba(255, 255, 255, 0.7);
   border-radius: 25px;
 }
 
-div.scroll {
-  height: calc(100vh - 82.36px);
+
+div.scroll{
   overflow: auto;
+  height: calc(100vh - 60px);
 }
 
 h1.subtitle.is-2 {

src/styles.scss

@@ -26,12 +26,26 @@ body {
   height: 100%;
 }
 
+nav.navbar {
+  height: 60px;
+}
+
+img.menu-icon.is-hoverable.navbar-item.logo {
+  height: 45px;
+  width: 125px;
+  padding-top: 5px;
+  padding-bottom: 10px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .landing {
   background-color: $primary;
   background-image: url("assets/virus_background.jpg");
   background-size: cover;
   background-repeat: no-repeat;
-  height: calc(100vh - 82.36px);
+  height: calc(100vh - 60px);
+  width: 100vw;
 }
 
 div.navbar-menu {
@@ -112,11 +126,11 @@ div.covex.network {
 
 div.card.network {
   width: 100%;
-  height: calc(100vh - 85px);
+  height: calc(100vh - 75px);
 }
 
 div.network {
-  height: calc(100vh - 210px);
+  height: calc(100vh - 200px);
 }
 
 div.parent {
@@ -141,9 +155,9 @@ div.center {
 
 
 div.covex.explorer {
-  height: calc(100vh - 90px);
-  margin-left: 20px;
-  margin-right: 20px;
+  height: calc(100vh - 70px);
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .analysis-view {