Start of a better landing page (#857)

* first try

* updates after feedback

* new landing start

* new search

* colums

* test fix

* search fix

* gray background

* no I needed

* bedder spacing

* padding fix

* bg fix

* padding fix

* container fix

* spacing fix

* more paddign

* landing pages

* hover effect

* typo

* url fix

* search box fix

* search smaller

* some small fixes

* main classes

* main fix

* font fixes

* fixes

* h2 fix

* title change

* some title fixes

* contributor section

* no bold brurb

* news border

* new text

* fix position results

* trigger build

* trigger

* scroll into view

* search-section

* icon examples

* flag colors

* better icon behaviour

* icon changes

* PAGE URL FIX

* example pages

* more menu items

* better landingpages

* tiles improvements

* typo

* white background

* feeback changes

* lighter section tiles

* test with different icons

* update logo's

* size change

* trigger

* cycle update

* more rounded

* preview

* implement feedback

* domain fix

* alt cycle icon

* trigger

* trigger

* trigger

* bugfix

* trigger

* trigger

* spcing fix

* bug fix

* dsw url fix

* size data life cycle wheel

* new bootstrap

* topnav fix

* role back bootstrap update

* alt icon

* font weight

* boolean

* update landing pages

* spacer

* safari fix

* official font awesome icons

* implement feedback

* description update

* little bit bigger

* rounded pill

* line martin

* no point

* use latest theme

* fix h3

* syntax param

_config.yml

@@ -1,10 +1,10 @@
 title: RDMkit
 # this appears in the html browser tab for the site title (seen mostly by search engines, not users)
 
-description: "Find the answers to your Research Data Management questions in Life Sciences."
+description: "Best practices and guidelines you can use for FAIR management of your research data."
 # Metadata description of the website
 
-remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@1.17.0
+remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@1.19.0
 
 sass:
   style: compressed
@@ -17,6 +17,8 @@ dsw_deep_link_prefix: https://converge.ds-wizard.org/knowledge-models/dsw:root:l
 # prefix for DSW deep links to a certain question
 
 theme_variables:
+  topnav:
+    theme: dark
   theme_color: c23669
   fonts:
     - https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap

_data/sidebars/data_management.yml

@@ -2,11 +2,15 @@ title: Data management
 title_url: /index
 subitems:
   - title: Data life cycle
-    description: Start here to get an overview of research data management. Click on a section of the diagram below to get an introduction to that stage of the data management life cycle.
+    description: Start here to get an overview of research data management based on stages in the data life cycle.
+    url: /data_life_cycle
     subitems:
       - RDM: True
+    image_url: /assets/img/section-icons/arrows-spin-light.svg
   - title: Your role
     description: Identify your role in research data management, find data management resources relevant for you, and information to help you progress in your career path.
+    url: /your_role
+    image_url: /assets/img/section-icons/address-card-light.svg
     subitems:
       - title: Researcher
         url: /researcher
@@ -17,7 +21,9 @@ subitems:
       - title: "Data Steward: infrastructure"
         url: /data_steward_infrastructure
   - title: Your domain
-    description: Learn about the data management problems that affect your domain or research community, and the solutions adopted to address them.
+    description: Learn about data management tasks that affect your domain or research community, and the solutions adopted to address them.
+    url: /your_domain
+    image_url: /assets/img/section-icons/dna-light.svg
     subitems:
       - title: Plant sciences
         url: /plant_sciences
@@ -42,7 +48,9 @@ subitems:
       - title: Structural bioinformatics
         url: /structural_bioinformatics
   - title: Your tasks
-    description: Find guidelines and solutions for tackling common data management problems.
+    description: Find guidelines and solutions for tackling common data management tasks.
+    url: /your_tasks
+    image_url: /assets/img/section-icons/list-check-light.svg
     subitems:
       - title: Compliance monitoring
         url: /compliance_monitoring
@@ -77,17 +85,63 @@ subitems:
       - title: Sensitive data
         url: /sensitive_data
   - title: Tool assembly
-    description: Find concrete combinations of tools and resources assembled into a workflow for research data management.
+    description: Find concrete combinations of tools and resources assembled into an ecosystem for research data management.
     url: /tool_assembly
+    subitems:
+      - title: COVID-19 Data Portal 
+        url: /covid19_data_portal
+      - title: CSC
+        url: /csc_assembly
+      - title: IFB
+        url: /ifb_assembly
+      - title: Marine Metagenomics
+        url: /marine_metagenomics_assembly
+      - title: NeLS
+        url: /nels_assembly
+      - title: OMERO
+        url: /omero_assembly
+      - title: Plant Genomics 
+        url: /plant_genomics_assembly
+      - title: TransMed
+        url: /transmed_assembly
+      - title: TSD
+        url: /tsd_assembly
+      - title: XNAT-PIC
+        url: /xnat_pic_assembly
+    image_url: /assets/img/section-icons/arrows-to-dot-light.svg
   - title: National resources
-    description: Browse trough the national resource pages
+    description: Find pointers to country specific information resources and national research data management practices. 
     url: /national_resources
-
+    image_url: /assets/img/section-icons/flag-light.svg
+    subitems:
+      - title: Belgium
+        url: /be_resources
+      - title: Germany
+        url: /de_resources
+      - title: Estonia
+        url: /ee_resources
+      - title: Spain
+        url: /es_resources
+      - title: Finland
+        url: /fi_resources
+      - title: France
+        url: /fr_resources
+      - title: Italy
+        url: /it_resources
+      - title: Norway
+        url: /no_resources
+      - title: Portugal
+        url: /pt_resources
+      - title: Sweden
+        url: /se_resources
+      - title: United Kingdom
+        url: /uk_resources
   - title: All tools and resources
     description: Browse the RDMkit's catalogue of tools and resources for research data management.
     url: /all_tools_and_resources
+    image_url: /assets/img/section-icons/gears-light.svg
     hr: True
   - title: All training resources
-    description: Browse the RDMkit's catalogue of training resources for research data management.
+    description: Browse all training resources mentioned in RDMkit pages.
     url: /all_training_resources
-
+    image_url: /assets/img/section-icons/graduation-cap-light.svg

_sass/_bootstrap_variables.scss

@@ -12,8 +12,6 @@ $component-active-bg: $primary;
 $navbar-dark-color: $white;
 $navbar-dark-hover-color: $primary;
 $navbar-dark-toggler-border-color: transparent;
-$nav-link-color: $white;
-$nav-link-hover-color: $primary;
 $border-radius: 0.3rem;
 $btn-border-radius-sm: $border-radius;
 $card-border-width: 0;

_sass/_custom_classes.scss

@@ -7,6 +7,10 @@
     }
 }
 
+.bg-light-x {
+    background-color: $light-x;
+}
+
 /*-----Sidebar-----*/
 
 //RDM wheel in sidebar
@@ -41,81 +45,97 @@ li ul .sidebar_rdm_sub {
     margin-top: $spacer * 0.5;
 }
 
-/*-----News and events-----*/
+/* -----Homepage----- */
 
-.events,
-.news {
-    h2 {
-        color: $dark;
+.landingpage {
+
+    .h-icon-6 {
+        height: 6em;
+    }
+    .h-icon-5 {
+        height: 5em;
+    }
+    .h-icon-4 {
+        height: 4em;
     }
-}
 
-/* -----Homepage----- */
+    .card {
+        &:hover{
+            box-shadow: $box-shadow;
+        }
 
-// Counters on landing page
+        .card-img-top {
+            width: unset;
+            padding: $card-spacer-x $card-spacer-x 0 $card-spacer-x;
+        }
+    }
 
-.count-number {
-    font-size: 4em;
-    font-weight: 700;
-}
+    h1 {
+        font-size: 2.2rem;
+        font-weight: 200;
+        text-align: center;
+    }
 
-.blurb-title {
-    font-family: "Exo 2", sans-serif;
-    font-size: 1.3em;
-    margin-bottom: 18px;
-    font-weight: 600;
-}
+    h2 {
+        font-weight: 700;
+        font-family:  $font-family-theme;
+    }
 
-// Dropdown boxes
+    h3 {
+        font-weight: 600;
+        font-family:  $font-family-theme;
+    }
 
-h2.card-title {
-    margin: 0 0 0.5rem 0;
 }
 
-//  Arrow in button
-
-.btn.arrow::after {
-    float: right;
-    width: 15px;
-    text-align: center;
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f078";
-    transition: transform 0.2s ease-in-out;
-}
+// Search box
+
+section#search-section {
+    form {
+        max-width: 600px;
+    }
+
+    #search-results {
+        right: unset;
+    }
+    .input-group-text {
+        font-size: 1.5rem;
+    }
 
-.btn.arrow:not(.collapsed)::after {
-    transform: rotate(-180deg);
+
 }
 
-// RDM wheel frontpage
+// Counters on landing page
 
-.ratio.main_rdm {
-    padding-bottom: 100%;
+.count-number {
+    font-size: 4em;
+    font-weight: 700;
 }
 
-@media (min-width: 576px) {
-    .ratio.main_rdm {
-        padding-bottom: 70%;
+
+/*-----Section navigation tiles-----*/
+
+.navigation-tiles {
+    .card:hover {
+        box-shadow: $box-shadow;
     }
-}
 
-@media (min-width: 768px) {
-    .ratio.main_rdm {
-        padding-bottom: 35%;
+    .card-header {
+        a:hover {
+            text-decoration: none;
+        }
+        h3 {
+            font-size: 1.2rem;
+        }
     }
 }
 
+
 /*-----Top navigation-----*/
 
 .navbar-nav .nav-item > a {
     white-space: nowrap;
     &.active {
-        color: $white;
         background-color: $primary;
         border-radius: $border-radius;
     }

_sass/_custom_variables.scss

@@ -11,8 +11,8 @@ $info-card-header-bg: $dark;
 
 /*-----Section navigation tiles-----*/
 $nav-card-bg: $light;
-$nav-card-header-bg: $dark;
-$nav-card-header-color: $white;
+$nav-card-header-bg: $light-x;
+$nav-card-header-color: $dark;
 $nav-card-badge-color: $body-color;
 $nav-card-badge-bg: $white;
 
@@ -22,4 +22,5 @@ $footer-color: $white;
 $footer-link-color: $white;
 $footer-copyright-bg: #00000033;
 
-
+/*-----Events & news-----*/
+$news-border-color: $dark;