website/src/routes/index.svelte

76 lines
1.6 KiB
Svelte
Raw Normal View History

2022-08-04 14:54:22 +05:30
<script lang="ts">
import SvelteSeo from "svelte-seo";
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";
2022-08-04 14:54:22 +05:30
</script>
<SvelteSeo
title="Home"
description={description}
/>
<div class="hero">
<h1><span>Project</span> <span>Segfault</span></h1>
2022-08-04 21:20:02 +05:30
<p>Open source development and hosted services</p>
<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>
2022-08-04 21:20:02 +05:30
</div>
2022-08-04 14:54:22 +05:30
</div>
<style>
h1 {
font-size: 50px;
font-weight: 800;
color: var(--accent-primary);
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
2022-08-04 21:20:02 +05:30
justify-content: center;
margin-top: 7%;
2022-08-04 14:54:22 +05:30
font-family: var(--font-header);
}
2022-08-04 21:20:02 +05:30
.hero > * {
2022-08-04 14:54:22 +05:30
margin: 0;
padding: 0;
2022-08-04 21:20:02 +05:30
text-align: center;
2022-08-04 14:54:22 +05:30
}
.hero > p {
2022-08-04 21:20:02 +05:30
font-size: 30px;
2022-08-04 14:54:22 +05:30
color: #b6b6b6;
}
2022-08-04 21:20:02 +05:30
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 1rem;
}
a {
text-decoration: none;
background-color: var(--accent-primary);
padding: 8px 1em 8px 1em;
2022-08-04 21:20:02 +05:30
color: var(--primary);
border-radius: 10px;
transition: filter .25s;
display: flex;
align-items: center;
gap: 4px;
2022-08-04 21:20:02 +05:30
}
a:hover {
filter: brightness(125%);
}
2022-08-04 14:54:22 +05:30
</style>