added News RSS

assets/css/main.css

@@ -258,7 +258,7 @@ li .dropdown-item-mobile {
 
 .hero-card.left-1 a:hover,
 .hero-card.left-1 a:active {
-    color: var(--color-accent);
+    color: var(--color-link);
 }
 
 .hero-card.left-1 svg {
@@ -271,7 +271,7 @@ li .dropdown-item-mobile {
 
 .hero-card.right-1 svg:hover,
 .hero-card.right-1 svg:active{
-    color: var(--color-accent);
+    color: var(--color-link);
 }
 
 .left-1 {
@@ -399,6 +399,7 @@ li .dropdown-item-mobile {
 }
 
 .btn-secondary:hover, .btn-secondary:active {
+    text-decoration: none !important;
     color: var(--color-primary-button-dark) !important;
     background-color: transparent !important;
     border-color: var(--color-primary-button-dark);
@@ -460,6 +461,90 @@ footer {
     outline: none;
 }
 
+/* ========================
+   News
+   ======================== */
+.feed-section #feed {
+    margin: 2rem auto;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+}
+
+.page {
+    max-width: 80%;
+    margin: 0 auto;
+}
+
+.feed-heading {
+    font-size: 2.5rem;
+    margin-top: 0;
+    display: block;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+    color: var(--color-text);
+    background-color: var(--color-accent);
+    border-radius: 8px;
+    padding: 5px 10px;
+    box-shadow: 0 4px 0 0 var(--color-text);
+}
+
+.dark .feed-heading {
+    color: var(--color-text-dark);
+    box-shadow: 0 4px 0 0 var(--color-off);
+}
+
+.feed-entry {
+    flex: 0 1 calc(50% - 2rem);
+    box-sizing: border-box;
+    background-color: var(--color-off);
+    border: 1px solid var(--color-text);
+    border-radius: 20px;
+    box-shadow: 0 4px 0 0 var(--color-text);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.page .feed-entry {
+    margin-bottom: 2rem;
+}
+
+.feed-content {
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 0.75rem;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}
+
+.page .feed-content {
+    overflow: visible !important;
+    display: block !important;
+    -webkit-line-clamp: unset !important;
+    -webkit-box-orient: unset !important;
+    text-overflow: unset !important;
+    white-space: normal !important;
+}
+
+.feed-content a {
+    color: var(--color-link);
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.feed-content a:hover {
+    color: var(--color-link);
+    text-decoration: underline;
+}
+
 /* ========================
    404 Error Page
    ======================== */
@@ -529,7 +614,7 @@ footer {
         padding: 0 !important;
     }
 
-    .ese-section .card-body {
+    .ese-section .card-body .page {
         max-width: 100%;
     }
 }
@@ -557,4 +642,10 @@ footer {
     .hero-section p {
         font-size: 1.1rem;
     }
+}
+
+@media (max-width: 768px) {
+    .feed-entry {
+        flex: 0 1 100%;
+    }
 }

assets/js/main.js

@@ -35,7 +35,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // update on change
     const observer = new MutationObserver(updateBodyThemeAttr);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    observer.observe(document.documentElement, {attributes: true, attributeFilter: ["class"]});
 
     prefersDarkScheme.addEventListener("change", () => {
         updateBodyThemeAttr();
@@ -45,7 +45,7 @@ document.addEventListener("DOMContentLoaded", () => {
 /* ========================
    Details Toggle
    ======================== */
-window.toggleDetails = function(element) {
+window.toggleDetails = function (element) {
     element.classList.toggle('expanded');
 
     const plusIcon = element.querySelector('.icon-plus');
@@ -55,4 +55,20 @@ window.toggleDetails = function(element) {
 
     plusIcon.style.display = isExpanded ? 'none' : 'inline';
     minusIcon.style.display = isExpanded ? 'inline' : 'none';
-};
+};
+
+fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss')
+    .then(res => res.json())
+    .then(data => {
+        const container = document.getElementById('feed');
+        data.items.slice(0, 5).forEach(item => {
+            const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
+            const entry = document.createElement('article');
+            entry.classList.add('feed-entry');
+            entry.innerHTML = `
+        <div class="feed-content">${cleanedContent}</div>
+        <a href="${item.link}" class="btn btn-secondary" target="_blank">Zum Beitrag</a>
+      `;
+            container.appendChild(entry);
+        });
+    });

layouts/_default/home.html

@@ -74,4 +74,10 @@
             </div>
         </div>
     </section>
+    <section class="feed-section">
+        <div class="container">
+            <h2 class="feed-heading text-center">Neuigkeiten</h2>
+            <div id="feed"></div>
+        </div>
+    </section>
 {{ end }}

layouts/_partials/head.html

@@ -2,6 +2,7 @@
 <meta name="viewport" content="width=device-width">
 <meta name="description" content="Offizielle Website des iFSR – Informationen, Veranstaltungen und Ressourcen für Studierende der Informatik an der TU Dresden.">
 <link rel="icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
+<!-- SVG Preload -->
 <link rel="preload" href="/images/logo.svg" as="image" type="image/svg+xml">
 <link rel="preload" href="/icons/dark.svg" as="image" type="image/svg+xml">
 <link rel="preload" href="/icons/light.svg" as="image" type="image/svg+xml">

layouts/neuigkeiten/single.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+    <div class="container">
+        <div id="markdown">
+            {{ .Content }}
+        </div>
+        <div id="feed" class="page"></div>
+    </div>
+{{ end }}