From f49bcf79b8dde7c3a1f8fe4037e4daa031cd7747 Mon Sep 17 00:00:00 2001
From: Laurens <wisdomchicken@pm.me>
Date: Fri, 10 May 2024 14:43:37 +0200
Subject: [PATCH] frontpage event and blog visual update

---
 layouts/index.html | 28 ++++++++++++-------
 public/index.html  | 68 +++++++++++++++++++++++++++++-----------------
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 6cce16b5..c6380558 100755
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -153,19 +153,23 @@
       <ul class="list">
         {{ if gt (len (where .Site.RegularPages "Section" "events")) 0 }}
         <section>
-          <h2>Upcoming Events</h2>
+          <div class="header-with-image">
+            <img src="/images/users.png" alt="Image">
+            <h4 class="mb-4">Events</h4>
+          </div>
           <ul class="list">
             {{ range (first 5 (where .Site.RegularPages "Section" "events").ByDate.Reverse) }}
             <li class="list-item">
               <div class="content">
-                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}</a>
+                <a class="link" href="{{ .RelPermalink }}" style="color: #FF6E00">{{ .Title }}</a>
               </div>
-              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
               <hr class="hr-list">
+              
+              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             {{ end }}
-          </ul>
         </section>
         {{ end }}
       </ul>
@@ -174,19 +178,23 @@
       <ul class="list">
         {{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
         <section>
-          <h2>Latest News</h2>
+          <div class="header-with-image">
+            <img src="/images/users.png" alt="Image">
+            <h4 class="mb-4">Latest Events</h4>
+          </div>
           <ul class="list">
             {{ range (first 5 (where .Site.RegularPages "Section" "blog").ByDate.Reverse) }}
             <li class="list-item">
               <div class="content">
-                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}</a>
+                <a class="link" href="{{ .RelPermalink }}" style="color: #FF6E00">{{ .Title }}</a>
               </div>
-              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
               <hr class="hr-list">
+              
+              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             {{ end }}
-          </ul>
         </section>
         {{ end }}
       </ul>
diff --git a/public/index.html b/public/index.html
index f79dd913..fec88139 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1115,28 +1115,34 @@
       <ul class="list">
         
         <section>
-          <h2>Upcoming Events</h2>
+          <div class="header-with-image">
+            <img src="/images/users.png" alt="Image">
+            <h4 class="mb-4">Events</h4>
+          </div>
           <ul class="list">
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/events/waag-state-internet-2024/">State of the Internet 2024</a>
+                <a class="link" href="/events/waag-state-internet-2024/" style="color: #FF6E00">State of the Internet 2024</a>
               </div>
-              <time class="g time" datetime="2024-04-02">02-04-2024</time>
               <hr class="hr-list">
+              
+              <time class="g time" datetime="2024-04-02">02-04-2024</time>
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/events/waag-state-internet-2024-copy/">State of the Internet 2024</a>
+                <a class="link" href="/events/waag-state-internet-2024-copy/" style="color: #FF6E00">State of the Internet 2024</a>
               </div>
-              <time class="g time" datetime="2024-04-02">02-04-2024</time>
               <hr class="hr-list">
+              
+              <time class="g time" datetime="2024-04-02">02-04-2024</time>
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
-          </ul>
         </section>
         
       </ul>
@@ -1145,55 +1151,67 @@
       <ul class="list">
         
         <section>
-          <h2>Latest News</h2>
+          <div class="header-with-image">
+            <img src="/images/users.png" alt="Image">
+            <h4 class="mb-4">Latest Events</h4>
+          </div>
           <ul class="list">
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/blog/project-launch-copy-2/">futuretest</a>
+                <a class="link" href="/blog/project-launch-copy-2/" style="color: #FF6E00">futuretest</a>
               </div>
+              <hr class="hr-list">
+              
               <time class="g time" datetime="2024-04-05">05-04-2024</time>
-              <hr class="hr-list">
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/blog/project-launch-copy-3/">Fediversity Project publicly announced3</a>
+                <a class="link" href="/blog/project-launch-copy-3/" style="color: #FF6E00">Fediversity Project publicly announced3</a>
               </div>
+              <hr class="hr-list">
+              
               <time class="g time" datetime="2024-01-04">04-01-2024</time>
-              <hr class="hr-list">
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/blog/project-launch-copy-4/">Fediversity Project publicly announced2</a>
+                <a class="link" href="/blog/project-launch-copy-4/" style="color: #FF6E00">Fediversity Project publicly announced2</a>
               </div>
+              <hr class="hr-list">
+              
               <time class="g time" datetime="2024-01-03">03-01-2024</time>
-              <hr class="hr-list">
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/blog/project-launch-copy/">Fediversity Project publicly announced1</a>
+                <a class="link" href="/blog/project-launch-copy/" style="color: #FF6E00">Fediversity Project publicly announced1</a>
               </div>
+              <hr class="hr-list">
+              
               <time class="g time" datetime="2024-01-02">02-01-2024</time>
-              <hr class="hr-list">
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
             <li class="list-item">
               <div class="content">
-                <a class="link" href="/blog/project-launch/">Fediversity Project publicly announced</a>
+                <a class="link" href="/blog/project-launch/" style="color: #FF6E00">Fediversity Project publicly announced</a>
               </div>
-              <time class="g time" datetime="2024-01-01">01-01-2024</time>
               <hr class="hr-list">
+              
+              <time class="g time" datetime="2024-01-01">01-01-2024</time>
+              <hr class="hr-list2">
             </li>
-          
+            <div class="line"></div>
             
-          </ul>
         </section>
         
       </ul>