Merge pull request #65 from ProjectSegfault/various-fixes

various fixes
This commit is contained in:
Akis 2022-08-24 20:51:55 +03:00 committed by GitHub
commit 84ca2beda6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 59 additions and 33 deletions

View File

@ -12,7 +12,8 @@
.web,
.email,
.picture,
.pgp {
.pgp,
.link {
background-color: var(--alt);
color: var(--alt-text);
font-size: 20px;

View File

@ -37,18 +37,4 @@
font-weight: 500;
text-align: center;
}
.badge {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img {
width: 270px;
background: var(--accent);
padding: 0.5rem;
border-radius: 10px;
}
</style>

View File

@ -5,7 +5,7 @@
$: currentPage = $page.url.pathname;
const menus = [
{ name: "Instances", url: "/instances" },
{ name: "Services", url: "/services" },
{ name: "Projects", url: "/projects" },
{ name: "Minecraft", url: "/minecraft" },
{ name: "Donate", url: "/donate" },
@ -46,12 +46,20 @@
<a href="https://github.com/ProjectSegfault/">
<div class="i-simple-icons:github" />
</a>
<div>
<div class="theme-toggle">
<ThemeToggle />
</div>
</div>
</nav>
<noscript>
<style>
.theme-toggle {
display: none !important;
}
</style>
</noscript>
<style>
nav {
background-color: var(--primary);

View File

@ -16,6 +16,7 @@ html {
--grey: #5454547a;
--alt: #333;
--alt-text: #ddd;
color-scheme: dark;
}
html.light {
@ -26,6 +27,7 @@ html.light {
--grey: #444444;
--alt: #ddd;
--alt-text: #333;
color-scheme: light;
}
body {

View File

@ -5,15 +5,26 @@ description: Do you want to contact us?
<script lang="ts">
import ContactForm from "$lib/ContactForm.svelte";
import Note from "$lib/Form/Note.svelte";
</script>
# { title }
{ description }
## Contact Form
<div class="contact-form">
<h2>Contact form</h2>
<ContactForm />
</div>
<ContactForm />
<noscript>
<Note content="The contact form (and by extension Segfautils) does not work without JavaScript enabled." icon="i-fa6-solid:circle-info" />
<style>
.contact-form {
display: none;
}
</style>
</noscript>
## Our email

View File

@ -2,6 +2,7 @@
import SvelteSeo from "svelte-seo";
import Hero from "$lib/Hero.svelte";
import LinkButton from "$lib/LinkButton.svelte";
import Note from "$lib/Form/Note.svelte";
import dayjs from "dayjs";
let description: string = "Open source development and hosted services.";
@ -25,12 +26,14 @@
marginTop="7"
>
<div class="buttons">
<LinkButton url="/instances" title="Explore our services" />
<LinkButton url="/projects" title="Explore our projects" />
<LinkButton url="/services" title="Explore our services" icon="i-fa6-solid:bell-concierge" />
<LinkButton url="/projects" title="Explore our projects" icon="i-fa6-solid:tractor" />
<LinkButton
url="/donate"
icon="i-fa6-solid:money-bill"
title="Donate"
bg="#F6C915"
color="#151515"
/>
</div>
</Hero>
@ -67,6 +70,17 @@
{/await}
</div>
<noscript>
<div class="flex justify-center text-center text-red">
<Note content="Announcements do not work without JavaScript enabled." />
</div>
<style>
.announcements {
display: none;
}
</style>
</noscript>
{#if announcements.severity === "info"}
<style>
.announcement {

View File

@ -1,8 +1,8 @@
<script>
import { CardInner, CardOuter, LinksOuter, Link } from "$lib/Card";
import instances from "$lib/Instances.json";
import services from "$lib/Services.json";
let groups = instances.reduce((curr, val) => {
let groups = services.reduce((curr, val) => {
let group = curr.find((g) => g.category === `${val.category}`);
if (group) {
group.values.push(val);
@ -13,7 +13,12 @@
}, []);
</script>
<h1>Our instances</h1>
<svelte:head>
<title>Our services | Project Segfault</title>
<meta name="description" content="Our collection of services." />
</svelte:head>
<h1>Our services</h1>
<CardOuter>
<div class="container">
{#each groups as group}
@ -21,22 +26,26 @@
<h2>{group.category}</h2>
<div class="items">
{#each group.values as item}
<a href={item.website}>
<CardInner
title={item.name}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<Link url={item.projectWebsite} class="web">
<Link url={item.website} class="web">
<div class="projectWebsite">
<div class="i-fa6-solid:globe" />
<span>Instance link</span>
</div>
</Link>
<Link url={item.projectWebsite} class="link">
<div class="projectWebsite">
<div class="i-fa6-solid:circle-info" />
<span>Project website</span>
</div>
</Link>
</LinksOuter>
</CardInner>
</a>
{/each}
</div>
</div>
@ -58,11 +67,6 @@
gap: 2rem;
}
a {
text-decoration: none;
color: var(--text);
}
.projectWebsite {
display: flex;
align-items: center;