Colorize roadmap using Bootstrap alerts

_layouts/roadmap.html

@@ -12,7 +12,6 @@
         {% assign unique_dates = sorted_roadmap | map: "date" | uniq | sort %}
 
         {% assign year = "1999" %}
-        {% assign did_first_section = false %}
 
         <section>
         <div class="timeline">
@@ -22,25 +21,25 @@
 
             {% if newyear != year %}
                 {% assign year = newyear %}
-                <div class="roadmap-year">{{ newyear }}</div>
+                <h1>{{ newyear }}</h1>
             {% endif %}
 
             <div class="roadmap-month">
                 <div class="timeline-bubble"></div>
-                <div class="month-text">{{ date_item | date: "%B %Y" }}</div>
+                <h2>{{ date_item | date: "%B %Y" }}</h2>
             </div>
             <div class="roadmap-item">
 
 
                         {% for roadmap_item in sorted_roadmap_by_date %}
                             {% assign service_short = roadmap_item.service | capitalize %}
-                            <article>
+                            <article class="alert-{{ roadmap_item.service }}-light">
                             {% for service_name in service_names %}
                                 {% if service_name contains service_short %}
-                                    <div class="service_name">{{ service_name }}</div>
+                                    <span class="service_name badge badge-{{ roadmap_item.service }}-light">{{ service_name }}</span>
                                 {% endif %}
                             {% endfor %}
-                            <p>{{ roadmap_item.content | markdownify }}</p>
+                            {{ roadmap_item.content | markdownify }}
                             </article>
                         {% endfor %}
 

_sass/_bootstrap_variables.scss

@@ -3,10 +3,18 @@
 $border-radius:    0.25rem;
 
 $theme-colors: (
-    "danger":       $color-helmholtz-health,
-    "info":         $color-helmholtz-space,
-    "primary":      $color-helmholtz-blue,
-    "secondary":    $color-helmoltz-gray,
-    "success":      $color-helmholtz-green,
-    "warning":      $color-helmholtz-energy
+    "danger":           $color-helmholtz-health,
+    "info":             $color-helmholtz-space,
+    "primary":          $color-helmholtz-blue,
+    "secondary":        $color-helmoltz-gray,
+    "success":          $color-helmholtz-green,
+    "warning":          $color-helmholtz-energy,
+    "overall":          $color-helmoltz-gray,
+    "backbone":         $color-helmholtz-matter,
+    "cloud":            $color-helmholtz-space,
+    "software":         $color-helmholtz-green,
+    "overall-light":    lighten($color-helmoltz-gray, 30%),
+    "backbone-light":   lighten($color-helmholtz-matter, 15%),
+    "cloud-light":      lighten($color-helmholtz-space, 15%),
+    "software-light":   lighten($color-helmholtz-green, 15%)
 );

_sass/roadmap/_roadmap.scss

@@ -51,42 +51,40 @@ div.timeline {
         margin-left:    1rem;
         margin-right:   1rem;
         padding:        1rem;
-    }
-
-    /*
-    * Reduce font-sizes and spacings between elements to consume less
-    * space in timeline by each roadmap item of the four services.
-    */
-    h1 {
-        @include font-normal;
-
-        margin-top:     0.25rem;
-        margin-bottom:  0.25rem;
-    }
-    h2 {
-        @include font-small;
 
-        margin-top:     0.25rem;
-        margin-bottom:  0.25rem;
-    }
-    p {
-        @include font-small;
+        /*
+        * Reduce font-sizes and spacings between elements to consume less
+        * space in timeline by each roadmap item of the four services.
+        */
+        h1 {
+            @include font-normal;
+
+            margin-top:     0.25rem;
+            margin-bottom:  0.25rem;
+        }
+        h2 {
+            @include font-small;
 
-        margin-top:     0.25rem;
-        margin-bottom:  0.25rem;
-    }
-    ul {
-        margin:         0.25rem;
-        li {
+            margin-top:     0.25rem;
+            margin-bottom:  0.25rem;
+        }
+        p {
             @include font-small;
+
+            margin-top:     0.25rem;
+            margin-bottom:  0.25rem;
+        }
+        ul {
+            margin:         0.25rem;
+            li {
+                @include font-small;
+            }
         }
     }
-    .service_name {
-        @include font-subscript;
 
-        font-style:     italic;
+    .service_name {
         float:          right;
-        color:          $color-helmholtz-blue;
+        margin-top:     0.25rem;
 
         /*
          * Reserve a whole line for service on phone since there is not enough
@@ -94,18 +92,24 @@ div.timeline {
          */
         @include medium-is-phone {
             float:      none;
-            text-align: right;
         }
     }
 }
 
 
-.roadmap-year {
-    @include font-very-large;
-    @include font-bold;
+section {
+    h1 {
+        @include font-very-large;
+        @include font-bold;
 
-    color:          $color-helmholtz-blue;
-    text-align:     center;
+        color:          $color-helmholtz-blue;
+        text-align:     center;
+    }
+
+    h2 {
+        @include font-large;
+        @include font-bold;
+    }
 }
 
 .roadmap-month {
@@ -128,9 +132,4 @@ div.timeline {
         border-top-right-radius:    0.5*$roadmap_timeline_thickness;
         border-bottom-right-radius: 0.5*$roadmap_timeline_thickness;
     }
-
-    .month-text {
-        @include font-large;
-        @include font-bold;
-    }
 }

roadmap/index.md

 ---
 title: Roadmap
+title_image: default
 layout: roadmap
 excerpt:
   "The is the roadmap of the HIFIS platform.