From e3998703a6f8687191b91d4256854d5b27b48314 Mon Sep 17 00:00:00 2001
From: Maarten Coonen <m.coonen@maastrichtuniversity.nl>
Date: Mon, 12 Aug 2024 14:47:26 +0200
Subject: [PATCH] Added "Our authors" page with corresponding CSS elements

---
 _includes/author-box.html |  2 +-
 _includes/header.html     | 10 +++++++
 _pages/about.html         |  2 +-
 assets/css/main.css       | 56 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/_includes/author-box.html b/_includes/author-box.html
index 9cd9980..02108fe 100644
--- a/_includes/author-box.html
+++ b/_includes/author-box.html
@@ -22,7 +22,7 @@ <h3>{{site.author}}</h3>
       <li class="twitter"><a class="twitter" href="https://x.com/{{site.twitter}}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
       {% endif %}
       {% if site.youtube %}
-      <li class="twitter"><a class="youtube" href="https://www.youtube.com/channel/{{site.youtube}}" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>
+      <li class="youtube"><a class="youtube" href="https://www.youtube.com/channel/{{site.youtube}}" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>
       {% endif %}
       {% if site.github %}
       <li class="github"><a class="github" href="https://github.com/{{site.github}}" target="_blank"><i class="fa-brands fa-github"></i></a></li>
diff --git a/_includes/header.html b/_includes/header.html
index 698852f..2ebd83c 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -23,6 +23,16 @@
               </div>
             </a>
           </li>
+          <li>
+            <a href="{{ relativebase }}authors.html">
+              <div class="left">
+                Our authors
+              </div>
+              <div class="right">
+                <i class="fa fa-people-group" aria-hidden="true"></i>
+              </div>
+            </a>
+          </li>
           <li>
             <a href="{{ relativebase }}archive.html">
               <div class="left">
diff --git a/_pages/about.html b/_pages/about.html
index caa0b61..f1c1242 100644
--- a/_pages/about.html
+++ b/_pages/about.html
@@ -30,7 +30,7 @@ <h3>{{site.author}}</h3>
         <li class="twitter"><a class="twitter" href="https://x.com/{{site.twitter}}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
       {% endif %}
       {% if site.twitter %}
-        <li class="twitter"><a class="youtube" href="https://www.youtube.com/channel/{{site.youtube}}" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>
+        <li class="youtube"><a class="youtube" href="https://www.youtube.com/channel/{{site.youtube}}" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>
       {% endif %}
       {% if site.github %}
         <li class="github"><a class="github" href="https://github.com/{{site.github}}" target="_blank"><i class="fa-brands fa-github"></i></a></li>
diff --git a/assets/css/main.css b/assets/css/main.css
index 93858f7..9e745b2 100755
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1804,6 +1804,62 @@ img + small, img + br + small {
   margin: 0;
 }
 
+/* Two column container for the "Our authors" page */
+.authors-container {
+  position: relative;
+  display: flex;
+  justify-content: space-between; /* Ensures both columns take available space */
+  align-items: flex-start; /* Aligns the items at the start of the container */
+  gap: 30px; /* Adds space between the columns */
+}
+
+/* Draws a horizontal line after the element */
+.authors-container:after {
+  content: "";
+  position: absolute;
+  text-align: center;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: block;
+  height: 1px;
+  width: 100%;
+  background-color: var(--accent-dark);
+}
+
+.authors-header {
+  position: relative;
+  text-align: center;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  flex: 1; /* Controls the column width. Here: value 1 */
+}
+
+.authors-header .author-image-container {
+  width: 100px;
+  height: 100px;
+  border-radius: 100%;
+  overflow: hidden;
+  margin: 0 auto 30px;
+}
+
+.authors-header .subtitle {
+  font-weight: var(--font1-light);
+  margin: 0;
+}
+
+.authors-body {
+  flex: 3; /* Three times as much space as the authors-header column */
+}
+
+.authors-body .contact-list li {
+  margin-left: 5px;
+}
+
+.authors-body .contact-list li a {
+  font-size: 24px;
+}
+
 .contact-list {
   margin: 0;
   padding: 0;