mirror of
https://github.com/ProjectSegfault/website.git
synced 2025-05-31 14:12:04 +05:30
more changes
This commit is contained in:
@@ -12,33 +12,18 @@
|
||||
<div class="hero">
|
||||
<h1><span>Project</span> <span>Segfault</span></h1>
|
||||
|
||||
<p>Open source development <br /> and hosted services</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>What is this?</h2>
|
||||
|
||||
<p>
|
||||
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>
|
||||
|
||||
<p>
|
||||
We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites and pages that explain things about us, or contain useful information about our services.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0px 2px 2px rgba(78, 78, 78, 0.6);
|
||||
}
|
||||
|
||||
h1 > *:first-child {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
h1 > *:last-child {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
@@ -46,19 +31,41 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
justify-content: center;
|
||||
margin-top: 7%;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
.hero > p {
|
||||
.hero > * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero > p {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
color: #b6b6b6;
|
||||
}
|
||||
|
||||
.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: 1rem;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
transition: filter .25s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
</style>
|
||||
106
src/routes/projects.svelte
Normal file
106
src/routes/projects.svelte
Normal file
@@ -0,0 +1,106 @@
|
||||
<script lang="ts">
|
||||
import projects from "$lib/Projects.json";
|
||||
import IconGitHub from "~icons/simple-icons/github";
|
||||
|
||||
import IconGlobe from "~icons/fa6-solid/globe";
|
||||
import IconEmail from "~icons/fa6-solid/envelope";
|
||||
import IconCamera from "~icons/fa6-solid/camera";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Our projects | Project Segfault</title>
|
||||
<meta name="description" content="Our collection of projects." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="team">
|
||||
<h1>Our projects</h1>
|
||||
<div class="projects-outer">
|
||||
{#each projects as { name, description, github, website }}
|
||||
<div class="projects-inner">
|
||||
<div class="main">
|
||||
<span>{name}</span>
|
||||
|
||||
{#if description}
|
||||
<p class="description">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="socials">
|
||||
{#if github}
|
||||
<a href={github} class="githubcolored"><IconGitHub /></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
{#if website}
|
||||
<a href={website} class="web"><IconGlobe /></a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.projects-outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.projects-inner {
|
||||
background-color: #252525;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
width: 30em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-primary);
|
||||
color: var(--secondary);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.githubcolored {
|
||||
background-color: #333;
|
||||
color: #fff !important;
|
||||
font-size: 20px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.web {
|
||||
background-color: var(--tertiary);
|
||||
color: #fff !important;
|
||||
font-size: 20px;
|
||||
height: 23px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.web:hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
color: var(--secondary) !important;
|
||||
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -128,15 +128,14 @@
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.web:hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
color: var(--secondary) !important;
|
||||
.web {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.web:active {
|
||||
background-color: var(--accent-primary);
|
||||
transition: all 0.5s;
|
||||
.web:hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
color: var(--secondary) !important;
|
||||
|
||||
}
|
||||
|
||||
.socials {
|
||||
|
||||
Reference in New Issue
Block a user