added news images and mobile social media icons

assets/css/main.css

@@ -212,6 +212,10 @@ li .dropdown-item-mobile {
     margin-right: auto;
 }
 
+.hero-icons svg {
+    color: var(--color-text);
+}
+
 .hero-card {
     width: 12rem;
     height: 10rem;
@@ -482,6 +486,22 @@ footer {
     margin: 0 auto;
 }
 
+.feed-thumbnail-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+}
+
+.feed-thumbnail {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
 .feed-heading {
     font-size: 2.5rem;
     margin-top: 0;
@@ -633,6 +653,12 @@ footer {
     }
 }
 
+@media (min-width: 1261px) {
+    .hero-icons {
+        display: none !important;
+    }
+}
+
 @media (max-width: 1260px) {
     .hero-card-wrapper {
         display: none;

assets/js/main.js

@@ -1,3 +1,5 @@
+// noinspection JSUnresolvedReference
+
 /* ========================
    Darkmode
    ======================== */
@@ -61,11 +63,38 @@ fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr
     .then(res => res.json())
     .then(data => {
         const container = document.getElementById('feed');
-        data.items.slice(0, 5).forEach(item => {
+        const isInFeedSection = container.closest('.feed-section') !== null;
+        const maxItems = isInFeedSection ? 4 : data.items.length;
+
+        data.items.slice(0, maxItems).forEach(item => {
             const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
+
+            let imageUrl;
+
+            if (item.thumbnail) {
+                imageUrl = item.thumbnail;
+            } else if (item.enclosure && item.enclosure.link) {
+                imageUrl = item.enclosure.link;
+            } else {
+                const imgMatch = item.content.match(/<img.*?src="(.*?)"/);
+                if (imgMatch && imgMatch[1]) {
+                    imageUrl = imgMatch[1];
+                } else {
+                    imageUrl = '/images/thumbnail.jpg';
+                }
+            }
+
             const entry = document.createElement('article');
             entry.classList.add('feed-entry');
+
+            const imageHtml = `
+        <div class="feed-thumbnail-wrapper">
+          <img src="${imageUrl}" alt="Beitragsbild" class="feed-thumbnail" />
+        </div>
+      `;
+
             entry.innerHTML = `
+        ${imageHtml}
         <div class="feed-content">${cleanedContent}</div>
         <a href="${item.link}" class="btn btn-secondary" target="_blank">Zum Beitrag</a>
       `;

layouts/_partials/hero.html

@@ -1,7 +1,29 @@
 <section class="py-5 hero-section">
     <div class="container">
         <div class="row align-items-center">
-            <div class="col-md-12 text-center mb-4 mb-md-0">
+            <div class="col-md-12 text-center mb-2 mb-md-0">
+                <div class="hero-icons d-flex justify-content-center gap-4 mt-5">
+                    <a href="https://www.instagram.com/ifsrde" class="d-flex align-items-center" aria-label="iFSR auf Instagram">
+                        {{ with resources.Get "icons/social-media/instagram.svg" }}
+                            {{ .Content | safeHTML }}
+                        {{ end }}
+                    </a>
+                    <a href="https://github.com/fsr" class="d-flex align-items-center" aria-label="iFSR auf GitHub">
+                        {{ with resources.Get "icons/social-media/github.svg" }}
+                            {{ .Content | safeHTML }}
+                        {{ end }}
+                    </a>
+                    <a href="https://t.me/s/ifsrde" class="d-flex align-items-center" aria-label="iFSR auf Telegram">
+                        {{ with resources.Get "icons/social-media/telegram.svg" }}
+                            {{ .Content | safeHTML }}
+                        {{ end }}
+                    </a>
+                    <a href="https://toot.kif.rocks/@iFSR" class="d-flex align-items-center" aria-label="iFSR auf Mastodon">
+                        {{ with resources.Get "icons/social-media/mastodon.svg" }}
+                            {{ .Content | safeHTML }}
+                        {{ end }}
+                    </a>
+                </div>
                 <h1 class="display-5 fw-bold text-center">Willkommen auf der Website des FSR Informatik</h1>
                 <p class="lead text-center">Gemeinsam stark im Studium – dein Fachschaftsrat steht für Austausch,
                     Unterstützung und Mitgestaltung.</p>