lots of shit

src/lib/Hero.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let title: string;
+    export let description: string;
+    export let marginTop: string;
+</script>
+
+<div class="hero" style="margin-top: {marginTop}%;">
+    {#if title}
+        <h1>{title}</h1>
+    {/if}
+    {#if description}
+        <p>{description}</p>
+    {/if}
+    <slot />
+</div>
+
+<style>
+    .hero {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-header);
+    }
+
+    .hero > * {
+        margin: 0;
+        padding: 0;
+        text-align: center;
+    }
+
+    p {
+        font-size: 30px;
+        color: #b6b6b6;
+    }
+
+    h1 {
+        font-size: 50px;
+        font-weight: 800;
+        color: var(--accent-primary);
+    }
+</style>

src/lib/Nav.svelte

@@ -25,6 +25,7 @@
 		<a href="/faq">FAQ</a>
 		<a href="/contact">Contact us</a>
 		<a href="/team">Our team</a>
+		<a href="/timeline">Timeline</a>
 		<a href="https://blog.projectsegfau.lt/">Blog</a>
 		<a href="/legal">Legal</a>
 		<a href="https://status.projectsegfau.lt/">Status</a>

src/routes/faq.md

@@ -7,7 +7,7 @@ description: Frequently Asked Questions
 
 ## Who is the project owner?
 
-The project doesn't have a single owner but is made up of a team of people. A list of the people involved and their positions can be found [on our members page](/members).
+The project doesn't have a single owner but is made up of a team of people. A list of the people involved and their positions can be found [on our members page](/team).
 
 ## What's the backstory to Project Segfault?
 We have a rather interesting backstory, if I do say so myself. [Click here to see a timeline of things that happened in Project Segfault's history](/timeline)

src/routes/index.svelte

@@ -1,8 +1,22 @@
 <script lang="ts">
     import SvelteSeo from "svelte-seo";
+    import Hero from "$lib/Hero.svelte";
 
     let description: string = "7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.";
     import IconMoneyBill from "~icons/fa6-solid/money-bill";
+
+    let announcements: any = [];
+	async function fetchAnnouncements() {
+		const url = `https://segfautils.projectsegfau.lt/api/announcements`;
+		const response = await fetch(url);
+		announcements = await response.json();
+        return announcements;
+	}
+
+    const promise = fetchAnnouncements();
+
+    import IconCircleInfo from "~icons/fa6-solid/circle-info";
+    import IconTriangleExclamation from "~icons/fa6-solid/triangle-exclamation";
 </script>
 
 <SvelteSeo
@@ -10,44 +24,47 @@
 	description={description}
 />
 
-<div class="hero">
+<Hero title="Project Segfault" description="Open source development and hosted services" marginTop=7>
-    <h1><span>Project</span> <span>Segfault</span></h1>
-    
-    <p>Open source development and hosted services</p>
-    
     <div class="buttons">
         <a href="https://instances.projectsegfau.lt/">Explore our services</a>
         <a href="/projects">Explore our projects</a>
         <a href="/donate"><IconMoneyBill /> Donate</a>
     </div>
+</Hero>
+
+<div class="announcements">
+    {#await promise}
+    <span></span>
+    {:then}
+            <div class="announcement-container">
+                <div class="announcement">
+                    <div class="general">
+                        {#if (announcements.severity === "info") }
+                            <IconCircleInfo />
+                            {:else}
+                                <IconTriangleExclamation />
+                        {/if}
+                        <span>
+                            {announcements.created}
+                        </span>
+                    </div>
+                    <div class="title">
+                        <h1>{announcements.title}</h1>
+                    </div>
+
+                    <div class="read-more">
+                        <a href={announcements.link}>Read more...</a>
+                    </div>
+                </div>
+            </div>
+    {:catch}
+        <span></span>
+    {/await}
 </div>
 
+
+
 <style>
-    h1 {
-        font-size: 50px;
-        font-weight: 800;
-        color: var(--accent-primary);
-    }
-
-    .hero {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin-top: 7%;
-        font-family: var(--font-header);
-    }
-
-    .hero > * {
-        margin: 0;
-        padding: 0;
-        text-align: center;
-    }
-
-    .hero > p {
-        font-size: 30px;
-        color: #b6b6b6;
-    }
 
     .buttons {
         display: flex;
@@ -58,7 +75,13 @@
         margin: 1rem;
     }
 
-    a {
+    @media screen and (max-width: 452px) {
+        .buttons {
+            flex-direction: column;
+        }
+    }
+
+    .buttons a {
         text-decoration: none;
         background-color: var(--accent-primary);
         padding: 8px 1em 8px 1em;
@@ -70,7 +93,58 @@
         gap: 4px;
     }
 
-    a:hover {
+    .buttons a:hover {
         filter: brightness(125%);
     }
+
+    .announcement-container {
+        display: flex;
+        justify-content: center;
+        margin-top: 4rem;
+    }
+    
+    .announcement {
+        color: var(--primary);
+        padding: 2rem 1rem;
+        border-radius: 10px;
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .announcement a {
+        color: var(--primary);
+    }
+
+    .announcement .general {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
 </style>
+
+{#if (announcements.severity === "info") }
+    <style>
+        .announcement {
+            background-color: #8caaee;
+        }
+    </style>
+    {:else if (announcements.severity === "low") }
+        <style>
+            .announcement {
+                background-color: #a6d189;
+            }
+        </style>
+    {:else if (announcements.severity === "medium") }
+        <style>
+            .announcement {
+                background-color: #e5c890;
+            }
+        </style>
+    {:else if (announcements.severity === "high") }
+        <style>
+            .announcement {
+                background-color: #e78284;
+            }
+        </style>
+{/if}

src/routes/team.svelte

@@ -54,9 +54,8 @@
 					{/if}
 
 					{#if pgp}
-                                        	<a href={pgp} class="pgpcolored"><IconKey /></a
+						<a href={pgp} class="pgp"><IconKey /></a>
-                                        	>
+					{/if}
-                                        {/if}
 
 					{#if picture}
 						<a href={picture} class="picture"><IconCamera /></a>
@@ -104,12 +103,6 @@
 		width: fit-content;
 	}
 
-	.pgpcolored {
-		background-color: #333 ;
-		font-size: 20px;
-	        height: 23px;
-	}
-
 	.matrixcolored {
 		background-color: #fff;
 		font-size: 20px;
@@ -132,7 +125,8 @@
 
 	.web,
 	.email,
-	.picture {
+	.picture,
+	.pgp {
 		background-color: var(--tertiary);
 		color: #fff !important;
 		font-size: 20px;
@@ -146,7 +140,6 @@
 	.web:hover {
 		background-color: var(--accent-tertiary);
 		color: var(--secondary) !important;
-		
 	}
 
 	.socials {

src/routes/timeline.svelte

@@ -8,12 +8,13 @@
 		TimelineContent,
 		TimelineOppositeContent
 	} from 'svelte-vertical-timeline';
+	import Hero from "$lib/Hero.svelte";
 </script>
 
 
-<div class="hero">
+<Hero>
-    <h3>A timeline of <span>Project</span> <span>Segfault</span>'s history</h3>
+    <h1>A timeline of <span>Project Segfault</span>'s history</h1>
-</div>
+</Hero>
 
 <Timeline position="alternate">
 	<TimelineItem>
@@ -60,7 +61,7 @@
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>MrLeRien opens a small homeserver with the help of Midou</h3>
-			<p>This eventually formed a nice little (primarily focused on hosting) project called mutahar.rocks. Here, the duo focused on hosting anything they could on a Core 2 Duo HP machine with 8GB of RAM running Arch Linux. This alongside a small VPS we're already had.</p>
+			<p>This eventually formed a nice little (primarily focused on hosting) project called mutahar.rocks. Here, the duo focused on hosting anything they could on a Core 2 Duo HP machine with 8GB of RAM running Arch Linux. This alongside a small VPS they already had.</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -167,33 +168,19 @@
 			<TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
-			<h3> Project Segfault decides to expand and now develops software. </h3>
+			<h3>Project Segfault decides to expand and now develops software.</h3>
-			<p> This started after Odyssey decided to work on segfautils. An API for Project Segfault. Midou followed suit with another rather big project that is (not) being developped right now. (hint: this will help people with many servers or mini servers 👀)  </p>
+			<p>This started after Odyssey decided to work on Segfautils, an API for Project Segfault. Midou plans to start a huge project in the near future together with the team that can help people with multiple servers.</p>
 		</TimelineContent>
 	</TimelineItem>
 </Timeline>
 
 <style>
-    .hero {
+	h1 {
-        display: flex;
+		font-size: 50px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        font-family: var(--font-header);
-    }
-
-    .hero > * {
-        margin: 0;
-        padding: 0;
-        text-align: center;
-    }
-
-	.hero > h3  {
-        font-size: 50px;
         font-weight: 800;
 	}
 
-	.hero > h3 > span {
+    span {
 		color: var(--accent-primary);
 	}
 </style>