[Monitor | Trunk]: Home: change pills on hover, add gradient on contact us. About: Change how section from h5 to h6

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@59722 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/home/home.component.css

@@ -60,6 +60,9 @@
 }
 
 .stakeholder-section .uk-subnav-pill > li:hover > a {
+  border-color: var(--portal-main-color);
+  color: var(--portal-main-color);
+  background-color: var(--portal-main-contrast);
   opacity: 1;
 }
 

src/app/home/home.component.html

@@ -188,7 +188,8 @@
       <!--<li uk-filter-control="[data-type='project']"><a (click)="type = 'project'">Projects</a></li>-->
       <li uk-filter-control="[data-type='organization']"><a (click)="type = 'organization'">Organizations</a></li>
     </ul>
-    <div class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
+    <div
+        class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
         uk-grid="masonry: true" uk-height-match="target: .uk-card; row: false;">
       <div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
         <a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
@@ -211,6 +212,7 @@
     </div>
   </div>
 </div>
+<div style="background: linear-gradient(0deg, #FFFFFF 0%, #EFF3F8 0%, #FAFAFA 100%);">
   <div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
     <div class="uk-padding-small">
       <h3>Contact us to help you.</h3>
@@ -220,6 +222,7 @@
       <a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
     </div>
   </div>
+</div>
 <div class="uk-section-muted"
      uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
   <div class="uk-container uk-container-large">

src/app/learn-how/learn-how.component.html

@@ -91,9 +91,9 @@
         Simplify research tracking & monitoring
       </h6>
     </div>
-    <div class="how uk-margin-large-top">
+    <div class="how uk-margin-large-top uk-h6">
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s first uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s first uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/1.png">
           </div>
@@ -101,12 +101,12 @@
             <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
           </div>
         </div>
-        <div class="uk-width-1-3@s second uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s second uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/2.png">
           </div>
         </div>
-        <div class="uk-width-1-3@s third uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s third uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/3.png">
           </div>
@@ -116,7 +116,7 @@
         </div>
       </div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/4.png">
           </div>
@@ -125,7 +125,7 @@
             <span class="portal-color">Open Science Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s fifth uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s fifth uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/5.png">
           </div>
@@ -134,7 +134,7 @@
             <span class="portal-color">Collaboration Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/6.png">
           </div>
@@ -146,7 +146,7 @@
           </div>
         </div>
       </div>
-      <div class="final uk-text-muted uk-h5 uk-margin-remove-vertical">
+      <div class="final uk-text-muted">
         <div>
           <img src="../../assets/monitor-assets/about/how/7.png">
         </div>