From e6162eabe3e6b9781614db1999b05b44f087310c Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Wed, 22 Jul 2020 07:37:21 +0200
Subject: [PATCH] Colorize roadmap using Bootstrap alerts
---
_layouts/roadmap.html | 11 +++--
_sass/_bootstrap_variables.scss | 20 ++++++---
_sass/roadmap/_roadmap.scss | 79 ++++++++++++++++-----------------
roadmap/index.md | 1 +
4 files changed, 59 insertions(+), 52 deletions(-)
diff --git a/_layouts/roadmap.html b/_layouts/roadmap.html
index dbf3e3bb2..7cf50bc31 100644
--- a/_layouts/roadmap.html
+++ b/_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 %}
diff --git a/_sass/_bootstrap_variables.scss b/_sass/_bootstrap_variables.scss
index 9ed0aecfb..daa1ddb3c 100644
--- a/_sass/_bootstrap_variables.scss
+++ b/_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%)
);
diff --git a/_sass/roadmap/_roadmap.scss b/_sass/roadmap/_roadmap.scss
index 8c9ca8fe1..f0fff5284 100644
--- a/_sass/roadmap/_roadmap.scss
+++ b/_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;
- }
}
diff --git a/roadmap/index.md b/roadmap/index.md
index c39347990..14c088901 100644
--- a/roadmap/index.md
+++ b/roadmap/index.md
@@ -1,5 +1,6 @@
---
title: Roadmap
+title_image: default
layout: roadmap
excerpt:
"The is the roadmap of the HIFIS platform.
--
GitLab