mirror of
https://github.com/ProjectSegfault/website.git
synced 2025-05-31 14:12:04 +05:30
use unocss, add blog, ui changes
This commit is contained in:
@@ -3,22 +3,26 @@
|
||||
export let position: any;
|
||||
export let description: any;
|
||||
export let icon: any;
|
||||
export let positionStyles: any;
|
||||
export let positionStyles: any;
|
||||
</script>
|
||||
|
||||
<div class="card-inner">
|
||||
<div class="main">
|
||||
<div class="bg-secondary rounded-2 p-4 w-[18rem] sm:w-md flex flex-col">
|
||||
<div class="flex-1 flex flex-row gap-4">
|
||||
{#if icon}
|
||||
<div>
|
||||
<img src={icon} alt="{title} icon" />
|
||||
<img
|
||||
src={icon}
|
||||
class="h-20 rounded-2"
|
||||
alt="{title} icon"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<span>
|
||||
<span class="text-2xl font-bold">
|
||||
{title}
|
||||
|
||||
{#if position}
|
||||
<span>- </span>
|
||||
<span>- </span>
|
||||
<span style={positionStyles}>{position}</span>
|
||||
{/if}
|
||||
</span>
|
||||
@@ -30,37 +34,3 @@
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-inner {
|
||||
background-color: var(--secondary);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
width: 30em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 555px) {
|
||||
.card-inner {
|
||||
width: 18em;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 5rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
<div class="card-outer">
|
||||
<div class="flex gap-8 flex-row flex-wrap">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,10 @@
|
||||
export { classes as class };
|
||||
</script>
|
||||
|
||||
<a href={url} class={classes}>
|
||||
<a
|
||||
href={url}
|
||||
class="border-none rounded-2 p-2 cursor-pointer font-primary text-secondary decoration-none w-fit text-xl flex items-center {classes}"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
@@ -14,50 +17,29 @@
|
||||
.picture,
|
||||
.pgp,
|
||||
.link {
|
||||
background-color: var(--alt);
|
||||
color: var(--alt-text);
|
||||
transition: all 0.25s;
|
||||
@apply bg-alt text-alt-text transition-all duration-250;
|
||||
}
|
||||
|
||||
.web:hover,
|
||||
.email:hover,
|
||||
.picture:hover,
|
||||
.pgp:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--alt);
|
||||
@apply bg-accent text-alt;
|
||||
}
|
||||
|
||||
.matrixcolored {
|
||||
background-color: var(--alt);
|
||||
color: var(--alt-text);
|
||||
@apply bg-alt text-alt-text;
|
||||
}
|
||||
|
||||
.discordcolored {
|
||||
background-color: #5865f2;
|
||||
color: #fff;
|
||||
@apply bg-[#5865f2] text-white;
|
||||
}
|
||||
|
||||
.gitcolored {
|
||||
background-color: #f05032;
|
||||
color: #fff;
|
||||
@apply bg-[#f05032] text-white;
|
||||
}
|
||||
|
||||
.githubcolored {
|
||||
background-color: var(--alt);
|
||||
color: var(--alt-text);
|
||||
}
|
||||
|
||||
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;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply bg-alt text-alt-text;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<script>
|
||||
import { page } from "$app/stores";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<div class="content">
|
||||
<footer class="flex flex-col text-xl sticky top-full">
|
||||
<div
|
||||
class="flex items-center flex-col border-t border-grey p-2 children:(text-text text-sm font-500 text-center)"
|
||||
>
|
||||
<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
|
||||
<span
|
||||
>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
|
||||
@@ -11,30 +9,9 @@
|
||||
<a href="https://opensource.org/licenses/MIT/">MIT license</a
|
||||
>.</span
|
||||
>
|
||||
<span
|
||||
><a href="https://github.com/ProjectSegfault/website">Source code</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 20px;
|
||||
position: sticky;
|
||||
top: 100vh;
|
||||
}
|
||||
|
||||
div.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--grey);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div.content > * {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
let submit = false;
|
||||
|
||||
let showSubmitButton = () => {
|
||||
const showSubmitButton = () => {
|
||||
submit = !submit;
|
||||
};
|
||||
</script>
|
||||
@@ -18,5 +18,9 @@
|
||||
on:success={showSubmitButton}
|
||||
/>
|
||||
{#if submit}
|
||||
<input type="submit" value="Submit" class="form-button" />
|
||||
<input
|
||||
type="submit"
|
||||
value="Submit"
|
||||
class="form-button"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -4,43 +4,25 @@
|
||||
export let id: string;
|
||||
</script>
|
||||
|
||||
<form {action} {method} {id}>
|
||||
<form
|
||||
{action}
|
||||
{method}
|
||||
{id}
|
||||
class="flex flex-col gap-4 w-fit"
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
:global(.form-button) {
|
||||
background-color: var(--secondary);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-family: var(--font-primary);
|
||||
text-decoration: none;
|
||||
@apply bg-secondary border-none rounded-2 p-2 cursor-pointer text-text font-primary decoration-none;
|
||||
}
|
||||
|
||||
:global(.form-button:not(select):hover) {
|
||||
background-color: var(--accent);
|
||||
text-decoration: none;
|
||||
transition: all 0.5s;
|
||||
color: var(--secondary);
|
||||
@apply bg-accent decoration-none transition-all duration-500 text-secondary;
|
||||
}
|
||||
|
||||
:global(.form-textbox) {
|
||||
background-color: var(--secondary);
|
||||
color: var(--text);
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font-primary);
|
||||
outline: none;
|
||||
@apply bg-secondary text-text rounded-2 border-none p-2 font-primary outline-none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
export let selectType: string;
|
||||
</script>
|
||||
|
||||
<div class="meta">
|
||||
<div
|
||||
class="flex items-center flex-row gap-4 children:w-[50%] lt-sm:(flex-col items-start justify-center children:w-[calc(100%-1rem)])"
|
||||
>
|
||||
<input
|
||||
type={inputType}
|
||||
name={inputType}
|
||||
@@ -12,35 +14,18 @@
|
||||
placeholder={inputPlaceholder}
|
||||
required
|
||||
/>
|
||||
<select name={selectType} required class="form-button">
|
||||
<select
|
||||
name={selectType}
|
||||
required
|
||||
class="form-button"
|
||||
>
|
||||
<slot />
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.meta > * {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.meta > * {
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.meta > *:nth-child(2) {
|
||||
@media screen and (max-width: 640px) {
|
||||
div > :nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,17 +3,9 @@
|
||||
export let icon: string;
|
||||
</script>
|
||||
|
||||
<div class="note">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if icon}
|
||||
<div class={icon} />
|
||||
{/if}
|
||||
<b>{content}</b>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,12 +10,6 @@
|
||||
rows="4"
|
||||
cols="25"
|
||||
required
|
||||
class="form-textbox"
|
||||
class="form-textbox resize-y"
|
||||
{placeholder}
|
||||
/>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,38 +6,15 @@
|
||||
export { styles as style };
|
||||
</script>
|
||||
|
||||
<div class="hero" style="margin-top: {marginTop}%; {styles}">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center children:(m-4 p-0 text-center)"
|
||||
style="margin-top: {marginTop}%; {styles}"
|
||||
>
|
||||
{#if title}
|
||||
<h1>{title}</h1>
|
||||
<h1 class="text-5xl font-800 text-accent">{title}</h1>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p>{description}</p>
|
||||
<p class="text-3xl text-text">{description}</p>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero > * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,30 +4,16 @@
|
||||
export let title: string;
|
||||
export let bg: string;
|
||||
export let color: string;
|
||||
export let styles: string;
|
||||
</script>
|
||||
|
||||
<a href={url} style="background-color: {bg}; color: {color};">
|
||||
<a
|
||||
href={url}
|
||||
class="decoration-none bg-accent px-3 py-2 text-primary rounded-2 transition-filter hover:brightness-125 flex items-center w-fit gap-2"
|
||||
style="background-color: {bg}; color: {color}; {styles}"
|
||||
>
|
||||
{#if icon}
|
||||
<div class={icon} />
|
||||
{/if}
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: var(--accent);
|
||||
padding: 8px 1em 8px 1em;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
transition: filter 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
<script>
|
||||
//@ts-ignoreS
|
||||
export let title;
|
||||
export let description;
|
||||
export let separator;
|
||||
|
||||
@@ -4,186 +4,150 @@
|
||||
|
||||
$: currentPage = $page.url.pathname;
|
||||
|
||||
let showMenuButton = false;
|
||||
|
||||
let listStyles = "";
|
||||
|
||||
let innerWidth: number = 0;
|
||||
|
||||
$: showMenuButton = innerWidth < 1030;
|
||||
|
||||
let menuOpen = false;
|
||||
|
||||
$: menuOpen = innerWidth > 1030;
|
||||
|
||||
let showThemeToggle: boolean = true;
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuOpen = !menuOpen;
|
||||
};
|
||||
|
||||
const handleNavigation = () => {
|
||||
if (showMenuButton) {
|
||||
menuOpen = false;
|
||||
} else {
|
||||
menuOpen = true;
|
||||
}
|
||||
};
|
||||
|
||||
const menus = [
|
||||
{ name: "Instances", url: "/instances" },
|
||||
{ name: "Donate", url: "/donate" },
|
||||
{ name: "FAQ", url: "/faq" },
|
||||
{ name: "Contact us", url: "/contact" },
|
||||
{ name: "Our team", url: "/team" },
|
||||
{ name: "Timeline", url: "/timeline" },
|
||||
{ name: "Blog", url: "https://blog.projectsegfau.lt/" },
|
||||
{ name: "Blog", url: "/blog" },
|
||||
{ name: "Legal", url: "/legal" },
|
||||
{ name: "Status", url: "https://status.projectsegfau.lt/" }
|
||||
{
|
||||
name: "Status",
|
||||
url: "https://status.projectsegfau.lt/",
|
||||
external: true
|
||||
}
|
||||
];
|
||||
|
||||
$: if (typeof Window === "undefined") {
|
||||
menuOpen = true;
|
||||
showMenuButton = false;
|
||||
showThemeToggle = false;
|
||||
listStyles = "list-styles";
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<a class="brand" href="/">
|
||||
<img src="/logo.png" alt="Project Segfault logo" />
|
||||
<span>Project Segfault</span>
|
||||
</a>
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<input type="checkbox" id="toggle-menu" />
|
||||
<label class="menu-icon" for="toggle-menu">
|
||||
<div id="menu-icon" class="i-fa6-solid:bars" />
|
||||
</label>
|
||||
|
||||
<div class="links">
|
||||
{#each menus as { url, name }}
|
||||
<a
|
||||
data-sveltekit-preload-data
|
||||
class:active={url !== "/"
|
||||
? currentPage.match(url)
|
||||
: url === currentPage}
|
||||
href={url}>{name}</a
|
||||
>
|
||||
{/each}
|
||||
<nav
|
||||
class="bg-primary border-b-1 border-b-grey flex p-2 flex-col justify-between nav:(flex-row items-center)"
|
||||
>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<a
|
||||
href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
|
||||
class="icon"
|
||||
class="flex items-center decoration-none text-text gap-2 transition-opacity duration-250 hover:opacity-80"
|
||||
href="/"
|
||||
>
|
||||
<div class="i-simple-icons:matrix" />
|
||||
<span>Matrix</span>
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Project Segfault logo"
|
||||
class="h-7"
|
||||
/>
|
||||
<span>Project Segfault</span>
|
||||
</a>
|
||||
<a href="https://github.com/ProjectSegfault/" class="icon">
|
||||
<div class="i-simple-icons:github" />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<div class="theme-toggle icon">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{#if showMenuButton}
|
||||
<button
|
||||
on:click={toggleMenu}
|
||||
class="i-fa6-solid:bars cursor-pointer mr-2"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if menuOpen}
|
||||
<div
|
||||
class="{listStyles} flex flex-col pt-2 nav:(flex-row pt-0) gap-2 links"
|
||||
>
|
||||
{#each menus as { url, name, external }}
|
||||
<a
|
||||
data-sveltekit-preload-data
|
||||
class:active={url !== "/"
|
||||
? currentPage.match(url)
|
||||
: url === currentPage}
|
||||
href={url}
|
||||
on:click={handleNavigation}
|
||||
>{#if external}
|
||||
<div
|
||||
class="i-fa6-solid:arrow-up-right-from-square mr-2"
|
||||
/>
|
||||
{/if}
|
||||
{name}
|
||||
</a>
|
||||
{/each}
|
||||
<a
|
||||
href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
|
||||
class="icon"
|
||||
>
|
||||
<div class="i-simple-icons:matrix" />
|
||||
<span>Matrix</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/ProjectSegfault/"
|
||||
class="icon"
|
||||
>
|
||||
<div class="i-simple-icons:github" />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
{#if showThemeToggle}
|
||||
<div class="icon">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
.theme-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
background-color: var(--primary);
|
||||
border-bottom: 1px solid var(--grey);
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
a.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
gap: 8px;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a.brand:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@apply text-accent;
|
||||
}
|
||||
|
||||
.links > * {
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: color 0.25s;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links > *:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-menu {
|
||||
display: none;
|
||||
@apply p-2 cursor-pointer text-text decoration-none transition-color duration-25 text-sm font-500 flex items-center hover\:text-accent;
|
||||
}
|
||||
|
||||
.icon > span {
|
||||
display: none;
|
||||
@apply flex nav\:hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.links {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.icon {
|
||||
@apply flex flex-row items-center gap-2;
|
||||
}
|
||||
|
||||
nav {
|
||||
:global(.list-styles) {
|
||||
@apply grid grid-cols-2 gap-2 w-fit links;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1030px) {
|
||||
:global(.list-styles) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.links a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0.5rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#toggle-menu:checked ~ .links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.icon > span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
[
|
||||
{
|
||||
"name": "akisblack",
|
||||
"description": "I am a soydev maintaining the website and api.",
|
||||
"position": "Web dev",
|
||||
"website": "https://akisblack.github.io/"
|
||||
},
|
||||
{
|
||||
"name": "Midou",
|
||||
"description": "A random person with an obsession to online cat pics, also happens to be the sysadmin of the project",
|
||||
"matrix": "https://matrix.to/#/@midou:projectsegfau.lt/",
|
||||
"position": "Sysadmin",
|
||||
"description": "I don't need to describe myself.",
|
||||
"git": "https://github.com/Midou36O/",
|
||||
"website": "https://midou36o.github.io/",
|
||||
"email": "midou@projectsegfau.lt",
|
||||
@@ -22,12 +28,5 @@
|
||||
"position": "Sysadmin",
|
||||
"description": "\"I am openssl_rand, a system administrator of the project Segfau.lt.\" - GitHub Copilot",
|
||||
"email": "mailto:openssl_rand@projectsegfau.lt"
|
||||
},
|
||||
{
|
||||
"name": "stephenvk",
|
||||
"matrix": "https://matrix.to/#/@stephenvk:projectsegfau.lt",
|
||||
"position": "Backup host",
|
||||
"description": "I am Stephenvk and I host a server that takes our backups.",
|
||||
"website": "https://stephenvk.xyz"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -17,17 +17,8 @@
|
||||
|
||||
<button
|
||||
on:click={toggle}
|
||||
class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]"
|
||||
class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-primary color-text"
|
||||
>
|
||||
<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" />
|
||||
<span class="ml-2">Toggle theme</span>
|
||||
<span class="ml-2 nav:(hidden ml-1)">Toggle theme</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 900px) {
|
||||
span {
|
||||
display: none;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url("/Raleway.ttf");
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/JetBrainsMono.ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html {
|
||||
--accent: #00a584;
|
||||
--accent-translucent: #00a58498;
|
||||
--font-primary: Raleway;
|
||||
--font-header: Raleway;
|
||||
--font-primary: "JetBrains Mono", monospace;
|
||||
--primary: #151515;
|
||||
--secondary: #252525;
|
||||
--tertiary: #353535;
|
||||
@@ -20,44 +19,32 @@ html {
|
||||
}
|
||||
|
||||
html.light {
|
||||
--primary: #dddddd;
|
||||
--secondary: #f9f3f3;
|
||||
--primary: #ffffff;
|
||||
--secondary: #eeeeee;
|
||||
--tertiary: #939393;
|
||||
--text: #444444;
|
||||
--grey: #444444;
|
||||
--grey: #cecece;
|
||||
--alt: #ddd;
|
||||
--alt-text: #333;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
background-color: var(--primary);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
line-height: 1.625;
|
||||
transition: all 0.25s;
|
||||
@apply font-primary bg-primary text-text m-0 flex flex-col relative min-h-screen leading-relaxed transition-all duration-250;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent-translucent);
|
||||
@apply bg-accentTranslucent;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--accent);
|
||||
text-underline-offset: 5px;
|
||||
transition: filter 0.25s;
|
||||
@apply underline text-accent underline-offset-5 transition-filter duration-250;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(125%);
|
||||
@apply brightness-125;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user