lots of unfinished changes

This commit is contained in:
Akis 2022-08-04 17:30:24 +03:00
parent 2f2f75b9b1
commit d257749a9d
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
8 changed files with 48 additions and 74 deletions

View File

@ -1,4 +1,4 @@
# Project Segfault Website
# Project Segfault website
Live at [projectsegfau.lt](https://projectsegfau.lt).
@ -10,17 +10,10 @@ Live at [projectsegfau.lt](https://projectsegfau.lt).
- Install [pnpm](https://pnpm.io/) (optional, although strongly recommended).
- Learn [Svelte](https://svelte.dev).
### Universal
### Running a dev server.
1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
2. Change directory into the clone using `cd ./website`.
3. Install dependencies using `pnpm i` (recommended) or `npm i`.
4. Run the dev server using `pnpm dev` (recommended) or `npm run dev`.
5. Open a browser on `http://localhost:5173/` and you should see the website running locally!
### NixOS
1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
2. Change directory into the clone using `cd ./website`.
3. In the same terminal type `nix-shell`.
4. Open a browser on `http://localhost:5173/` and you should see the website running locally!
5. Open a browser on `http://localhost:5173/` and you should see the website running locally!

View File

@ -1,13 +0,0 @@
{ pkgs ? import <nixpkgs> {}
}:
pkgs.mkShell {
name="dev";
buildInputs = [
pkgs.nodejs-16_x
];
shellHook = ''
echo "Installing dependencies using npm, please wait."
npm i
echo "You can now "run npm run dev" to start a dev server."
'';
}

View File

@ -5,13 +5,7 @@
<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;"
>Project</span
>
<span style="color: var(--accent-primary); margin-right: 8px;"
>Segfault</span
>
<span>Project Segfault</span>
</a>
<input type="checkbox" id="toggle-menu" />
@ -22,13 +16,13 @@
</label>
<div class="links">
<a href="https://instances.projectsegfau.lt/">Instances & Gameservers</a
<a href="https://instances.projectsegfau.lt/">Hosted services</a
>
<a href="/minecraft">Minecraft</a>
<a href="/donate">Donate</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
<a href="/members">Members</a>
<a href="/contact">Contact us</a>
<a href="/members">Our team</a>
<a href="https://blog.projectsegfau.lt/">Blog</a>
<a href="/legal">Legal</a>
</div>
@ -36,9 +30,10 @@
<style>
nav {
background-color: var(--secondary);
padding: 1rem;
background-color: var(--primary);
border-bottom: 1px solid var(--grey);
display: flex;
padding: .5rem;
flex-direction: row;
align-items: center;
justify-content: space-between;
@ -47,6 +42,13 @@
display: flex;
align-items: center;
text-decoration: none;
color: var(--text);
gap: 8px;
transition: opacity .25s;
}
a.brand:hover {
opacity: .6;
}
.links {
@ -55,32 +57,22 @@
}
.links > * {
background-color: var(--tertiary);
border: none;
border-radius: 10px;
padding: 1rem;
padding: .5rem;
cursor: pointer;
color: var(--text);
font-family: var(--font-primary);
text-decoration: none;
transition: color .25s;
font-size: 13px;
font-weight: 500;
}
.links > *:hover {
background-color: var(--accent-tertiary);
text-decoration: none;
transition: all 0.5s;
color: var(--secondary);
}
.links > *:active {
background-color: var(--accent-primary);
text-decoration: none;
transition: all 0.5s;
color: var(--secondary);
color: var(--accent-primary);
}
img {
height: 36px;
height: 30px;
border-radius: 50%;
}
@ -97,8 +89,7 @@
.links {
display: none;
width: 100%;
background-color: var(--secondary);
padding-top: 2rem;
padding-top: 12px;
}
nav {
@ -112,15 +103,17 @@
}
.menu-icon {
display: block;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: absolute;
top: 0.45rem;
right: 1rem;
background-color: var(--tertiary);
top: .35rem;
border: none;
border-radius: 10px;
padding: 1rem;
height: 30px;
width: 30px;
cursor: pointer;
line-height: 1;
}

View File

@ -14,10 +14,11 @@ html {
--primary: #151515;
--secondary: #252525;
--tertiary: #353535;
--accent-primary: #cfce73;
--accent-secondary: #9c6fd6;
--accent-tertiary: #fcc348;
--text: #fff;
--accent-primary: #00d4aa;
--accent-secondary: #00d4aa;
--accent-tertiary: #00d4aa;
--text: #ffffffde;
--grey: #5454547a;
--font-primary: Comfortaa;
--font-header: Inter

View File

@ -1,5 +1,5 @@
---
title: Contact Us
title: Contact us
description: Do you want to contact us?
---
@ -23,4 +23,4 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
## People
You can find ways to contact individual members [on our Members page](/members).
You can find ways to contact individual team members [on our team page](/team).

View File

@ -18,7 +18,7 @@
<h2>What is this?</h2>
<p>
We are 7 teenagers who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
We are 7 humans who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
</p>
<h2>Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?</h2>

View File

@ -1,5 +1,5 @@
<script lang="ts">
import members from "$lib/Members.json";
import members from "$lib/Team.json";
import IconDiscord from "~icons/simple-icons/discord";
import IconMatrix from "~icons/simple-icons/matrix";
import IconGitHub from "~icons/simple-icons/github";
@ -10,16 +10,16 @@
</script>
<svelte:head>
<title>Members | Project Segfault</title>
<meta name="description" content="Members of Project Segfault." />
<title>Our team | Project Segfault</title>
<meta name="description" content="Team members of Project Segfault." />
</svelte:head>
<div class="members">
<h1>Members</h1>
<p>Our excellent members!</p>
<div class="member-outer">
<div class="team">
<h1>Our team</h1>
<p>Our excellent team members!</p>
<div class="team-outer">
{#each members as { name, discord, matrix, position, description, github, website, email, picture }}
<div class="member-inner">
<div class="team-inner">
<div class="main">
<span>{name} - {position}</span>
@ -63,14 +63,14 @@
</div>
<style>
.member-outer {
.team-outer {
display: flex;
flex-direction: column;
gap: 2rem;
flex-flow: row wrap;
}
.member-inner {
.team-inner {
background-color: #252525;
border-radius: 10px;
padding: 1rem;