docs: add template for timeline doc

docs/css/timeline.css

@@ -0,0 +1,39 @@
+.timeline-container {
+  border-left: 4px solid gray;
+  border-radius: 0 4px 4px 0;
+  background: rgba(200, 200, 200, 0.15);
+  margin: 2rem auto;
+  padding: 1rem 2rem;
+  position: relative;
+  text-align: center;
+  margin-left: 7rem;
+}
+
+.timeline-entry {
+  text-align: left;
+  position: relative;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+
+.timeline-date {
+  position: absolute;
+  left: -10rem;
+  text-align: right;
+  font-size: 0.9rem;
+  font-weight: 700;
+  opacity: 0.7;
+  min-width: 6rem;
+  top: 2px;
+}
+
+.timeline-dot {
+  position: absolute;
+  box-shadow: 0 0 0 4px gray;
+  left: -2.5rem;
+  background: #444;
+  border-radius: 50%;
+  height: 11px;
+  width: 11px;
+  top: 5px;
+}

docs/timeline.md

@@ -0,0 +1,33 @@
+# Timeline
+
+In reverse chronological order, with most recent events first.
+
+<!-- markdownlint-disable -->
+
+<!-- NOTE the styling for this timeline is bundled in mkdocs as timeline.css -->
+<!-- Additional emojis: community 🧑‍🧑‍🧒‍🧒 -->
+
+> <div class="timeline-container">
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-xx</div>
+>         <h3>Manufacture of Community Mapping Drone</h3>
+>         🛠️ ...
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-xx</div>
+>         <h3>Grant Awarded For Development</h3>
+>         📝 World Bank project for HOTOSM & NAXA collaboration.
+>         <div class="timeline-dot"></div>
+>     </div>
+>     <div class="timeline-entry">
+>         <div class="timeline-date">2024-xx</div>
+>         <h3>Initial Research & Concept</h3>
+>         🔬 [Concept Note][1] written for a 'Drone Tasking Manager'.
+>         <div class="timeline-dot"></div>
+>     </div>
+> </div>
+
+<!-- markdownlint-restore -->
+
+[1]: https://link.here.com

mkdocs.yml

@@ -28,6 +28,7 @@ theme:
 
 extra_css:
   - css/extra.css
+  - css/timeline.css
 
 markdown_extensions:
   - tables
@@ -73,3 +74,4 @@ nav:
       - Code of Conduct: https://docs.hotosm.org/code-of-conduct
       - FAQ: about/faq.md
       - The Team: about/team.md
+  - Timeline: timeline.md