ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2024-06-25 22:22:00 +05:30
Code Issues Projects Releases Wiki Activity

lots of shit

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

1
src/lib/Nav.svelte
View File

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

2
src/routes/faq.md
View File

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

140
src/routes/index.svelte
View File

@ -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">
<h1><span>Project</span> <span>Segfault</span></h1>
<p>Open source development and hosted services</p>
<Hero title="Project Segfault" description="Open source development and hosted services" marginTop=7>
<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%);
}
</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}

15
src/routes/team.svelte
View File

@ -54,9 +54,8 @@
{/if}
{#if pgp}
<a href={pgp} class="pgpcolored"><IconKey /></a
>
{/if}
<a href={pgp} class="pgp"><IconKey /></a>
{/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 {

33
src/routes/timeline.svelte
View File

@ -8,12 +8,13 @@
TimelineContent,
TimelineOppositeContent
} from 'svelte-vertical-timeline';
import Hero from "$lib/Hero.svelte";
</script>
<div class="hero">
<h3>A timeline of <span>Project</span> <span>Segfault</span>'s history</h3>
</div>
<Hero>
<h1>A timeline of <span>Project Segfault</span>'s history</h1>
</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>
<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>
<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 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 {
display: flex;
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;
h1 {
font-size: 50px;
font-weight: 800;
}
.hero > h3 > span {
span {
color: var(--accent-primary);
}
</style>