Added "Our authors" page with corresponding CSS elements

MaastrichtU-Library · Aug 12, 2024 · e399870 · e399870
1 parent d83fb5e
commit e399870
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;