mirror of
https://github.com/ProjectSegfault/website.git
synced 2025-05-31 14:12:04 +05:30
push initial rewrite (already prod ready!)
This commit is contained in:
69
src/lib/Footer.svelte
Normal file
69
src/lib/Footer.svelte
Normal file
@@ -0,0 +1,69 @@
|
||||
<script>
|
||||
import IconDiscord from "~icons/simple-icons/discord";
|
||||
import IconMatrix from "~icons/simple-icons/matrix";
|
||||
import IconGitHub from "~icons/simple-icons/github";
|
||||
import IconSignal from "~icons/fa6-solid/signal";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<hr />
|
||||
<div class="content">
|
||||
<span>© 2021 - present, Project Segfault</span>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://discord.gg/26EG7fFtfS">
|
||||
<IconDiscord />
|
||||
</a>
|
||||
<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt">
|
||||
<IconMatrix />
|
||||
<a href="https://github.com/ProjectSegfault">
|
||||
<IconGitHub />
|
||||
</a>
|
||||
<a href="https://status.projectsegfau.lt/">
|
||||
<IconSignal />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--accent-primary);
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
div.links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
div.links {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<script context="module">
|
||||
export const prerender = true;
|
||||
export const hydrate = true;
|
||||
</script>
|
||||
<script lang="ts">
|
||||
import "../assets/animation.css";
|
||||
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
|
||||
let showMenu = false
|
||||
let innerWidth
|
||||
let mobile
|
||||
$: mobile = innerWidth < 800
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<header id="navigationBar" class="navigvationBar">
|
||||
<a href="/">
|
||||
<img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="Logo."/>
|
||||
</a>
|
||||
<a href="/" class="text-flicker-in-glow" style="color: #ce1717">Project <span style="color: #00d4aa">Segfault</span></a>
|
||||
{#if mobile}
|
||||
<a href="{'#'}" class="button" id="MenuButton" on:click="{() => showMenu = !showMenu}">Menu</a>
|
||||
{/if}
|
||||
{#if !mobile || showMenu}
|
||||
<div class="center navbar" id="navbar" class:responsive={mobile}>
|
||||
<a href="https://instances.projectsegfau.lt" class="button">Instances & Gameservers </a>
|
||||
|
||||
<a href="/minecraft" class="button">Minecraft</a>
|
||||
|
||||
<a href="/donate" class="button">Donate</a>
|
||||
|
||||
<a href="/faq" class="button">FAQ</a>
|
||||
|
||||
<a href="/members" class="button">Members</a>
|
||||
|
||||
<a href="/contact" class="button">Contact</a>
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
background-color: #252525;
|
||||
border: solid #252525;
|
||||
border-width: 1em;
|
||||
}
|
||||
#ProjectSegfaultLogoHeader {
|
||||
/*Here goes anything to do with the header logo*/
|
||||
border-radius: 16px;
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.text-flicker-in-glow {
|
||||
opacity: 1;
|
||||
-webkit-animation: text-flicker-in-glow 3000ms both;
|
||||
animation: text-flicker-in-glow 3000ms both;
|
||||
}
|
||||
@media screen and (prefers-reduced-motion) {
|
||||
.text-flicker-in-glow {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/lib/Monero.png
Normal file
BIN
src/lib/Monero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
61
src/lib/Nav.svelte
Normal file
61
src/lib/Nav.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script>
|
||||
import * as strings from "$lib/strings";
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<a class="brand" href="/">
|
||||
<img src="/logo.png" alt="Project Segfault logo">
|
||||
<span style="color: var(--accent-secondary); margin-left: 4px; margin-right: 4px;">{strings.PROJECT}</span>
|
||||
<span style="color: var(--accent-primary); margin-right: 8px;">{strings.SEGFAULT}</span>
|
||||
</a>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://instances.projectsegfau.lt/">{strings.INSTANCES}</a>
|
||||
<a href="/minecraft">{strings.MINECRAFT}</a>
|
||||
<a href="/donate">{strings.DONATE}</a>
|
||||
<a href="/faq">{strings.FAQ}</a>
|
||||
<a href="/contact">{strings.CONTACT}</a>
|
||||
<a href="https://blog.projectsegfau.lt/">{strings.BLOG}</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
background-color: var(--secondary);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
a.brand {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
div.links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 570px) {
|
||||
nav {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
div.links {
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
gap: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/lib/app.css
Normal file
29
src/lib/app.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: Comfortaa;
|
||||
src: url("/Comfortaa.ttf");
|
||||
}
|
||||
|
||||
html {
|
||||
--primary: #151515;
|
||||
--secondary: #252525;
|
||||
--accent-primary: #00d4aa;
|
||||
--accent-secondary: #ce1717;
|
||||
--text: #fff
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Comfortaa;
|
||||
background-color: var(--primary);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-primary);
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let title;
|
||||
export let description;
|
||||
export let separator;
|
||||
import SvelteSeo from 'svelte-seo';
|
||||
// Enjoy the jank.
|
||||
if(title === "Project Segfault") {
|
||||
title = "";
|
||||
separator = "";
|
||||
}
|
||||
else {
|
||||
separator = "|";
|
||||
}
|
||||
</script>
|
||||
|
||||
<SvelteSeo
|
||||
openGraph={{
|
||||
title: title,
|
||||
description: description,
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: 'https://projectsegfau.lt:8448/_matrix/media/r0/download/projectsegfau.lt/HBgjhWUExhKPzbpkpIqQfUkF',
|
||||
width: 850,
|
||||
height: 650,
|
||||
alt: 'Image'
|
||||
}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title} {separator} Project Segfault</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="mdsvex_content">
|
||||
<slot />
|
||||
</div>
|
||||
10
src/lib/strings.json
Normal file
10
src/lib/strings.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"PROJECT": "Project",
|
||||
"SEGFAULT": "Segfault",
|
||||
"INSTANCES": "Instances",
|
||||
"MINECRAFT": "Minecraft",
|
||||
"DONATE": "Donate",
|
||||
"FAQ": "FAQ",
|
||||
"CONTACT": "Contact",
|
||||
"BLOG": "Blog"
|
||||
}
|
||||
Reference in New Issue
Block a user