From 04e5617b0454b2a93a1b83837b6030eeaf6eff81 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Fri, 23 Oct 2020 18:32:15 +0000
Subject: [PATCH] [Graph | Trunk]: Change first section to gradient.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-graph-portal/trunk@59685 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/app.component.html       | 38 ++++++++++++++++++--------------
 src/app/home/home.component.html |  4 ++--
 src/styles.css                   | 25 ++++++++++-----------
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c503025..ecd948d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1,25 @@
-<navbar *ngIf= "showMenu && header" [header]="header" portal="graph" [onlyTop]="false" [userMenu]="false"
-        [user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
-<div class="custom-main-content">
+<div class="graphApp">
+  <navbar *ngIf="showMenu && header" [header]="header" portal="graph" [onlyTop]="false" [userMenu]="false"
+          [user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
+  <div class="custom-main-content">
     <main>
-        <router-outlet></router-outlet>
+      <router-outlet></router-outlet>
     </main>
-</div>
-<bottom class="footer uk-visible@m"
-        [showSocialButtons]="true" [showMenuItems]="true" [showOpenaire]="true"
-        [darkBackground]="false" [centered]="true"></bottom>
-<bottom class="footer uk-hidden@m"
-        [showSocialButtons]="true" [showMenuItems]="true" [showOpenaire]="true"
-        [darkBackground]="false" [centered]="true"></bottom>
-<cookie-law position="bottom">
+  </div>
+  <bottom class="footer uk-visible@m"
+          [showSocialButtons]="true" [showMenuItems]="true" [showOpenaire]="true"
+          [darkBackground]="false" [centered]="true"></bottom>
+  <bottom class="footer uk-hidden@m"
+          [showSocialButtons]="true" [showMenuItems]="true" [showOpenaire]="true"
+          [darkBackground]="false" [centered]="true"></bottom>
+  <cookie-law position="bottom">
     OpenAIRE uses cookies in order to function properly.<br>
-    Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
-    By using the OpenAIRE portal you accept our use of cookies. <a href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
-    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
+    Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
+    experience possible.
+    By using the OpenAIRE portal you accept our use of cookies. <a
+      href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
+    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline
+        fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
     </span></a>
-</cookie-law>
-
+  </cookie-law>
+</div>
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index aa2a68e..5dd5588 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="image-front-topbar" style="background: linear-gradient(180deg, #F4F4F4 0%, #F5F5F5 83%, #FAFAFA 100%)">
   <div class="uk-container uk-container-large uk-section">
     <div class="uk-padding-small">
       <h1>Open. Transparent. Interconnected.</h1>
@@ -27,7 +27,7 @@
         <div class="uk-grid uk-child-width-1-2@m" uk-grid>
           <div
               class="uk-padding-large uk-padding-remove-vertical uk-flex-last@m uk-margin-large-bottom uk-margin-medium-top">
-            <h3 class="uk-text-bold uk-margin-large-left uk-text-capitalize">360° view on linked open science<span
+            <h3 class="uk-text-bold uk-margin-large-left">360° View on linked open science<span
                 class="portal-color">.</span></h3>
           </div>
           <div>
diff --git a/src/styles.css b/src/styles.css
index 383f34a..38aac12 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -9,18 +9,22 @@
   --portal-dark-color: #E63946;
 }
 
-main {
+.graphApp {
   background-color: #FAFAFA;
   color: #1A1A1A;
-  min-height: calc(100vh - 100px);
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 30px;
-  letter-spacing: 0.16px;
 }
 
-navbar > * {
-  background-color: #FAFAFA;
+.image-front-topbar {
+  margin-top: -100px;
+  padding-top: 100px;
+}
+
+main {
+  min-height: calc(100vh - 100px);
+  line-height: 30px;
+  letter-spacing: 0.16px;
+  font-size: 16px;
+  font-family: "Open Sans", sans-serif;
 }
 
 .uk-text-large {
@@ -62,11 +66,6 @@ ul.uk-text-small.portal-circle li:before {
   top: 6px;
 }
 
-contact .uk-text-danger {
-  color: #B50000 !important;
-  font-size: 12px;
-}
-
 .footer,
 .footer .uk-section-primary {
   background-color: #ffffff;