New index page drafted

_layouts/index.html

@@ -13,7 +13,44 @@ layout: default
             </h1>
         </header>
 
+        <div class="index-flex">
+          {% if page.introduction %}
+            <div class="index-gray-box">
+              {{ page.introduction }}
+            </div>
+          {% endif %}
+
+          {% if page.introduction_photo %}
+            <div class="index-photo">
+              <img src="{{ page.introduction_photo }}" alt="Elixir Luxembourg" />
+            </div>
+          {% endif %}
+        </div>
+
         {{ content }}
+
+        <div class="index-flex">
+          <div class="index-box">
+            <img src="https://www.elixir-europe.org/sites/default/files/images/events.jpg" alt="Events image" />
+            <div class="index-box-caption">
+              <a href="{{ site.baseurl }}/events/">Events</a>
+            </div>
+          </div>
+
+          <div class="index-box">
+            <img src="https://www.elixir-europe.org/sites/default/files/images/vacancies.jpg" alt="Job vacancies image" />
+            <div class="index-box-caption">
+              <a href="{{ site.baseurl }}/about-node/vacancies">Job vacancies</a>
+            </div>
+          </div>
+
+          <div class="index-box">
+            <img src="https://www.elixir-europe.org/sites/default/files/images/get-involved.jpg" alt="Flyer image" />
+            <div class="index-box-caption">
+              Download flyer
+            </div>
+          </div>
+        </div>
     </div>
 
     <div>

_sass/elixir/_layout.scss

@@ -184,9 +184,63 @@
     div.narrower-article-div {
       @media only screen and (min-width: 1500px) {
         width: 70%;
+
+        .index-flex {
+          display: flex;
+        }
       }
       @media only screen and (max-width: 1500px) {
         width: 90%;
+
+        .index-flex {
+          display: block;
+        }
+      }
+
+      .index-flex {
+        .index-gray-box {
+          padding: 20px;
+          border-radius: 6px;
+          background: #efefef;
+          border: 1px solid #ebebeb;
+          width: 400px;
+          margin-right: 2%;
+          margin-bottom: 15px;
+        }
+
+        .index-photo {
+          border: solid 0px black;
+          flex-grow: 1;
+          margin-right: 2%;
+
+          img {
+            width: -webkit-fill-available;
+          }
+        }
+
+        .index-box {
+          flex-grow: 1;
+          margin-right: 2%;
+          margin-bottom: 2%;
+          border-radius: 0 0 12px 12px;
+          background: #efefef;
+          border: 1px solid #ebebeb;
+
+          img {
+            width: 100%;
+          }
+
+          .index-box-caption {
+            color: #262626;
+            font-size: 1rem;
+            padding: 12px 5px 12px 12px;
+
+            a {
+              text-decoration: none;
+              font-weight: bolder;
+            }
+          }
+        }
       }
     }
 

elixir-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-elixir-theme"
-  spec.version       = "0.4.9"
+  spec.version       = "0.5.1"
   spec.authors       = ["jacek.lebioda"]
   spec.email         = ["jacek.lebioda@uni.lu"]
 

index.md

+---
+layout: index
+title: ELIXIR Luxembourg
+section: ELIXIR Luxembourg
+permalink: /
+introduction: >-
+  <p>ELIXIR-LU, the Luxembourgish node of ELIXIR, the European infrastructure for life science information, focuses on long-term sustainability of tools and data for Translational Medicine.</p>
+  <p>Translational Medicine data integrate clinical information with molecular and cellular data for a better understanding of diseases.</p>
+  <p>ELIXIR-LU aims to facilitate long-term access to those research data and to tools for scientists in both academia and industry. This will allow the reuse of previously generated data to address new research questions and dramatically save time and cost.</p>
+introduction_photo: https://elixir-luxembourg.org/sites/default/files/National%20stakeholders_Pic_1.jpg
+
+---
+
+## Luxembourg, a data hub for Translational Medicine
+
+ELIXIR-LU, the Luxembourgish node of ELIXIR, the European infrastructure for life science information, focuses on long-term sustainability of tools and data for Translational Medicine.
+
+Translational Medicine data integrate clinical information with molecular and cellular data for a better understanding of diseases. They bridge the gap between the molecular level, findings from the laboratory, and the clinical observations and applications.
+
+ELIXIR-LU aims to facilitate long-term access to those research data and to tools for scientists in both academia and industry. This will allow the reuse of previously generated translational data to address new research questions and dramatically save time and cost. To provide solutions ELIXIR-LU is establishing services that align with three ELIXIR platforms as shown below.
+
+**Repository for high quality Translational Medicine data**  Integration of well-curated clinical and molecular data from cohorts and large consortia. Implementation of standardised electronic data capture, data harmonisation and curation.
+
+**High-performance data access and computing services**  Sustainable access management according to well-defined criteria, in order to meet the security and accountability requirements of ELIXIR, of the General European data protection regulation (GDPR), and of the research community.  Platforms and tools to allow efficient data access and analysis.
+
+**Support and user training**  Workshops and courses on data management, curation, analytics and visualisation. Continuous education of software developers, data managers and researchers.
+
+[![Data Catalog]({{site.baseurl}}/assets/buttons/data_catalog.jpg){:width="155px"}]({{site.baseurl}}/services/)
+[![Tools Registry]({{site.baseurl}}/assets/buttons/tools_registry.jpg){:width="155px"}]({{site.baseurl}}/services/)