Split job description into multiple containers

src/site/position/index.njk

@@ -48,19 +48,16 @@ embl_content_meta_properties:
     "field_jobs_your_role": "The primary responsibilities include:\n<ul><li>Lead, design and development of production software to generate large databases by using big data processing technologies like Apache Spark</li>\n<li>Work with the team in the testing of new technologies and their integration into software pipelines</li>\n<li>Development of computational annotation pipelines for a large number of proteins in the UniProt database</li>\n<li>Maintenance and optimization of existing software production pipelines</li>\n<li>Lead and development of Quality Assurance methodologies and Java code standards for the team</li>\n<li>Design, development and maintenance of new modules, enhancements and scripts for the database release cycle</li>\n<li>Coordination between all UniProt Consortium members involved in the database release cycle.</li>\n</ul>\n "
   }, #}
 
-<section class="vf-intro | embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0">
-
-<div>
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0">
+  <div>
     <!-- empty -->
-</div>
-<div class="vf-content">
-
+  </div>
+  <div class="vf-content">
     <h1>{{pagination.items[0].title | safe }}</h1>
 
     <br/>
 
     <section class="vf-content vf-box vf-box-theme--quinary vf-box--normal">
-
       <h3 class="vf-box__heading">Key information</h3>
       <div class="vf-box__text">
         <ul class="vf-list vf-list--unordered">
@@ -110,50 +107,103 @@ embl_content_meta_properties:
 
     <hr class="vf-divider" />
 
-  <br/>
+  </div>
+</section>
 
-  <section itemprop="description">
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
     {% markdown %}
     {% if pagination.items[0].field_jobs_description | length > 0 %}
     ## About this position
     {{ pagination.items[0].field_jobs_description | safe }}
     {% endif %}
 
+    {# {% if pagination.items[0].category = software dev && pay is 4-6 %}
+    youtubevideo
+    {endif} #}
+    {% endmarkdown %}
+  </div>
+</section>
+
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
+    {% markdown %}
     {% if pagination.items[0].field_jobs_your_role | length > 0 %}
     ## Your role
 
     {{ pagination.items[0].field_jobs_your_role | safe }}
     {% endif %}
+    {% endmarkdown %}
+  </div>
+</section>
 
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
+    {% markdown %}
     {% if pagination.items[0].field_jobs_you_have | length > 0 %}
     ## You have
 
     {{ pagination.items[0].field_jobs_you_have | safe }}
     {% endif %}
+    {% endmarkdown %}
+  </div>
+</section>
 
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
+    {% markdown %}
     {% if pagination.items[0].field_jobs_you_also_have | length > 0 %}
     ## You might also have
 
     {{ pagination.items[0].field_jobs_you_also_have | safe }}
     {% endif %}
+    {% endmarkdown %}
+  </div>
+</section>
 
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
+    {% markdown %}
     {% if pagination.items[0].field_jobs_why_join | length > 0 %}
     ## Why join us
 
     {{ pagination.items[0].field_jobs_why_join | safe }}
     {% endif %}
+    {% endmarkdown %}
+  </div>
+</section>
 
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" itemprop="description">
+  <div>
+    <!-- empty -->
+  </div>
+  <div class="vf-content">
+    {% markdown %}
     {% if pagination.items[0].field_jobs_what_else_to_know | length > 0 %}
     ## What else you need to know
 
     {{ pagination.items[0].field_jobs_what_else_to_know | safe }}
     {% endif %}
     {% endmarkdown %}
-  </section>
-</div>
+  </div>
 </section>
 
-<section class="vf-intro | embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" data-vf-google-analytics-region="job-advert-main">
+<section class="embl-grid embl-grid--has-centered-content vf-u-margin__bottom--0" data-vf-google-analytics-region="job-advert-main">
   <div class="vf-section-header">
     {# <h2 class="vf-section-header__heading">xxxx</h2> #}
   </div>
@@ -176,10 +226,10 @@ embl_content_meta_properties:
 </section>
 
 <section class="vf-intro | embl-grid embl-grid--has-centered-content" data-vf-google-analytics-region="job-advert-bottom">
-<div class="vf-section-header">
+  <div class="vf-section-header">
     {# <h2 class="vf-section-header__heading">xxxx</h2> #}
-</div>
-<div class="vf-content">
+  </div>
+  <div class="vf-content">
     {% markdown %}
 
     ---
@@ -191,9 +241,5 @@ embl_content_meta_properties:
     - <a href="/jobs/partners/" class="vf-link">View openings from partners</a>
     - <a class="vf-link" href="mailto:?subject=EMBL Position: {{pagination.items[0].title}}&body=I thought that the position of {{pagination.items[0].title}} - {{pagination.items[0].field_jobs_reference_number}} at EMBL might be of interest to you. %0D%0A %0D%0AYou can find out more about this vacancy at: https://www.embl.org/jobs/position/{{pagination.items[0].field_jobs_reference_number}}">Share this job</a>
     {% endmarkdown %}
-
-</div>
-</section>
-
-</div>
+  </div>
 </section>