mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-12-22 21:19:51 +05:30
lots of shit
This commit is contained in:
parent
df7c5b4c7a
commit
9916e5f2f8
GPG Key ID:
267BF5C6677944ED
42
src/lib/Hero.svelte
Normal file
42
src/lib/Hero.svelte
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
.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}
|
||||
@ -54,8 +54,7 @@
|
||||
{/if}
|
||||
|
||||
{#if pgp}
|
||||
<a href={pgp} class="pgpcolored"><IconKey /></a
|
||||
>
|
||||
<a href={pgp} class="pgp"><IconKey /></a>
|
||||
{/if}
|
||||
|
||||
{#if picture}
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
@ -168,32 +169,18 @@
|
||||
</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>
|
||||
<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 {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero > h3 > span {
|
||||
span {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user