add timeline css; add roadmap; modify news

4 files changed, 75 insertions, 2 deletions

diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index 5e288a94..983ed5fd 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -36,6 +36,8 @@
   <div class="collapse navbar-collapse bg-near-black" id="navbarMain">
     <ul class="navbar-nav mr-auto nav">
       <li class="nav-link"><a href="{{ url_localized('about.html') }}">{{ _("About") }}</a></li>
+      <li class="nav-link"><a href="{{ url_localized('roadmap.html') }}">{{ _("Roadmap") }}</a></li>
+
       <li class="nav-link"><a href="{{ url_localized('news/index.html') }}">{{ _("News") }}</a></li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
diff --git a/news/index.html.j2 b/news/index.html.j2
index bdb716d5..9d9f9ff0 100644
--- a/news/index.html.j2
+++ b/news/index.html.j2
@@ -16,11 +16,13 @@
           </div>
         </div>
         <div class="row">
+          <ul class="timeline">
           {% for item in newsdata %}
-            <div class="col-lg-4">
+            <li>
               {{ news.newspreview(item) }}
-            </div>
+            </li>
           {% endfor %}
+          </ul>
         </div>
       </article>
     </div>
diff --git a/static/styles.css b/static/styles.css
index 3806ac19..e2d4f8dc 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -277,6 +277,11 @@ header {
   margin-top: 30px;
   margin-bottom: 50px; }
 
+.timeline header {
+  text-align: left;
+  margin-bottom: 5px;
+}
+
 .alert {
   display: flex;
   overflow: hidden;
@@ -319,3 +324,34 @@ a.subnav-anchor {
 
 .item-date {
   font-size: 0.9em; }
+
+ul.timeline {
+    list-style-type: none;
+    position: relative;
+}
+ul.timeline:before {
+    content: ' ';
+    background: #d4d9df;
+    display: inline-block;
+    position: absolute;
+    left: 29px;
+    width: 2px;
+    height: 100%;
+    z-index: 400;
+}
+ul.timeline > li {
+    margin: 20px 0;
+    padding-left: 20px;
+}
+ul.timeline > li:before {
+    content: ' ';
+    background: white;
+    display: inline-block;
+    position: absolute;
+    border-radius: 50%;
+    border: 3px solid #22c0e8;
+    left: 20px;
+    width: 20px;
+    height: 20px;
+    z-index: 400;
+}
diff --git a/template/roadmap.html.j2 b/template/roadmap.html.j2
new file mode 100644
index 00000000..e9e5ca8a
--- /dev/null
+++ b/template/roadmap.html.j2
@@ -0,0 +1,33 @@
+{% extends "common/base.j2" %}
+{% block body_content %}
+<div class="container">
+  <div class="row">
+    <div class="col-lg-6">
+      <div class="container text-center">
+        <h1>{{ _("Roadmap") }}</h1>
+        <section>
+          <p>
+           This is our roadmap.
+          </p>
+        </section>
+      </div>
+
+      <ul class="timeline">
+        <li>
+          <b>0.13.0</b>
+          <i>31.6.2020, 2020</i>
+          <p>This release will include...</p>
+        </li>
+        <li>
+          <b>0.14.0</b>
+          <i>2021</i>
+          <p>This release will include...</p>
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-6">
+    </div>
+  </div>
+</div>
+
+{% endblock body_content %}