lots of shit

This commit is contained in:
Akis 2022-08-05 15:46:54 +03:00
parent df7c5b4c7a
commit 9916e5f2f8
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
6 changed files with 165 additions and 68 deletions

42
src/lib/Hero.svelte Normal file
View File

@ -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>

View File

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

View File

@ -7,7 +7,7 @@ description: Frequently Asked Questions
## Who is the project owner? ## 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? ## 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) 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)

View File

@ -1,8 +1,22 @@
<script lang="ts"> <script lang="ts">
import SvelteSeo from "svelte-seo"; 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."; 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"; 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> </script>
<SvelteSeo <SvelteSeo
@ -10,44 +24,47 @@
description={description} 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"> <div class="buttons">
<a href="https://instances.projectsegfau.lt/">Explore our services</a> <a href="https://instances.projectsegfau.lt/">Explore our services</a>
<a href="/projects">Explore our projects</a> <a href="/projects">Explore our projects</a>
<a href="/donate"><IconMoneyBill /> Donate</a> <a href="/donate"><IconMoneyBill /> Donate</a>
</div> </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> </div>
<style> <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 { .buttons {
display: flex; display: flex;
@ -58,7 +75,13 @@
margin: 1rem; margin: 1rem;
} }
a { @media screen and (max-width: 452px) {
.buttons {
flex-direction: column;
}
}
.buttons a {
text-decoration: none; text-decoration: none;
background-color: var(--accent-primary); background-color: var(--accent-primary);
padding: 8px 1em 8px 1em; padding: 8px 1em 8px 1em;
@ -70,7 +93,58 @@
gap: 4px; gap: 4px;
} }
a:hover { .buttons a:hover {
filter: brightness(125%); filter: brightness(125%);
} }
</style>
.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}

View File

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

View File

@ -8,12 +8,13 @@
TimelineContent, TimelineContent,
TimelineOppositeContent TimelineOppositeContent
} from 'svelte-vertical-timeline'; } from 'svelte-vertical-timeline';
import Hero from "$lib/Hero.svelte";
</script> </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"> <Timeline position="alternate">
<TimelineItem> <TimelineItem>
@ -60,7 +61,7 @@
</TimelineSeparator> </TimelineSeparator>
<TimelineContent> <TimelineContent>
<h3>MrLeRien opens a small homeserver with the help of Midou</h3> <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> </TimelineContent>
</TimelineItem> </TimelineItem>
<TimelineItem> <TimelineItem>
@ -167,33 +168,19 @@
<TimelineConnector /> <TimelineConnector />
</TimelineSeparator> </TimelineSeparator>
<TimelineContent> <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> </TimelineContent>
</TimelineItem> </TimelineItem>
</Timeline> </Timeline>
<style> <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; font-weight: 800;
} }
.hero > h3 > span { span {
color: var(--accent-primary); color: var(--accent-primary);
} }
</style> </style>