From cf5f4d15202133a8ab687f66769dc6b09f850724 Mon Sep 17 00:00:00 2001
From: Laurens <wisdomchicken@pm.me>
Date: Wed, 1 May 2024 13:12:55 +0200
Subject: [PATCH] header fix

---
 assets/scss/custom.scss   | 11 +++++++++++
 content/english/_index.md |  6 +++---
 hugo_stats.json           |  5 ++---
 layouts/index.html        |  7 ++++++-
 public/css/style.css      | 11 +++++++++++
 public/index.html         | 19 ++++++++++++++++---
 6 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index b41e31f..2d0a57f 100755
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -62,3 +62,14 @@
 
     padding: 20px;
   }
+
+  .header-with-image {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-with-image img {
+    margin-right: 10px;
+    max-width: 100px; /* Adjust as needed */
+    max-height: 100px; /* Adjust as needed */
+  }
\ No newline at end of file
diff --git a/content/english/_index.md b/content/english/_index.md
index 1c8affe..9170498 100755
--- a/content/english/_index.md
+++ b/content/english/_index.md
@@ -84,7 +84,7 @@ features:
       link: "/grants"      
 
 features2:
-  - title: "Fediversity explained - for Individuals"
+  - title: "Individuals"
     image: "/images/user.png"
     content: "2Always be in control with your own data on social networks, whether that's with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible."
     button:
@@ -92,7 +92,7 @@ features2:
       label: "Learn more"
       link: "/individuals"
 
-  - title: "Fediversity explained - for Developers"
+  - title: "Developers"
     image: "/images/code.png"
     content: "2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help."
     button:
@@ -100,7 +100,7 @@ features2:
       label: "Learn more"
       link: "/developers"
 
-  - title: "Fediversity explained - for the EC"
+  - title: "European Commission"
     image: "/images/globe.png"
     content: "2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project."
     button:
diff --git a/hugo_stats.json b/hugo_stats.json
index 61f6bee..52ff998 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -6,6 +6,7 @@
       "base",
       "body",
       "button",
+      "center",
       "div",
       "footer",
       "form",
@@ -34,7 +35,6 @@
       "section",
       "source",
       "span",
-      "style",
       "svg",
       "textarea",
       "time",
@@ -65,8 +65,6 @@
       "btn-sm",
       "capitalize",
       "col-12",
-      "col-md-3",
-      "col-md-4",
       "column",
       "container",
       "content",
@@ -102,6 +100,7 @@
       "h2",
       "h3",
       "header",
+      "header-with-image",
       "hidden",
       "hover:text-primary",
       "hr-list",
diff --git a/layouts/index.html b/layouts/index.html
index 9fcc237..a1b7257 100755
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -84,13 +84,18 @@
 
 
 <!-- features2test-->
+<center><h2> Fediverse Explained</h2></center>
 
 
 <div class="container">
   <div class="grid-container">
     {{ range $i, $e := .Params.features2 }}
     <div class="grid-item">
-      <h2 class="mb-4">{{ .title | markdownify }}</h2>
+      <div class="header-with-image">
+        <img src="{{ .image }}" alt="Image">
+        <h4 class="mb-4">{{ .title | markdownify }}</h4>
+      </div>
+
       <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
       {{ with .button }} {{ if .enable }}
       <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
diff --git a/public/css/style.css b/public/css/style.css
index f53041d..2f42924 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -3069,6 +3069,17 @@ input#nav-toggle:checked ~ #nav-menu {
 .grid-item {
   padding: 20px; }
 
+.header-with-image {
+  display: flex;
+  align-items: center; }
+
+.header-with-image img {
+  margin-right: 10px;
+  max-width: 100px;
+  /* Adjust as needed */
+  max-height: 100px;
+  /* Adjust as needed */ }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {
diff --git a/public/index.html b/public/index.html
index 1bb5f60..7f58e17 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2081,13 +2081,18 @@
 
 
 
+<center><h2> Fediverse Explained</h2></center>
 
 
 <div class="container">
   <div class="grid-container">
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for Individuals</h2>
+      <div class="header-with-image">
+        <img src="/images/user.png" alt="Image">
+        <h4 class="mb-4">Individuals</h4>
+      </div>
+
       <p class="mb-8 text-lg">2Always be in control with your own data on social networks, whether that&rsquo;s with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/individuals">
@@ -2098,7 +2103,11 @@
     </div>
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for Developers</h2>
+      <div class="header-with-image">
+        <img src="/images/code.png" alt="Image">
+        <h4 class="mb-4">Developers</h4>
+      </div>
+
       <p class="mb-8 text-lg">2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/developers">
@@ -2109,7 +2118,11 @@
     </div>
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for the EC</h2>
+      <div class="header-with-image">
+        <img src="/images/globe.png" alt="Image">
+        <h4 class="mb-4">European Commission</h4>
+      </div>
+
       <p class="mb-8 text-lg">2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/ec">