forked from ProjectSegfault/website
add custom instance page
This commit is contained in:
parent
02cb6b2abb
commit
83f2c2f374
GPG Key ID:
267BF5C6677944ED
67
src/lib/Card/CardInner.svelte
Normal file
67
src/lib/Card/CardInner.svelte
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let title: any;
|
||||||
|
export let position: any;
|
||||||
|
export let description: any;
|
||||||
|
export let icon: any;
|
||||||
|
export let internal: boolean;
|
||||||
|
|
||||||
|
import IconCircleInfo from "~icons/fa6-solid/circle-info";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="card-inner">
|
||||||
|
<div class="main">
|
||||||
|
{#if icon}
|
||||||
|
<div>
|
||||||
|
<img src={icon} alt="{title} icon">
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
{title}
|
||||||
|
|
||||||
|
{#if position}
|
||||||
|
- {position}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{#if description}
|
||||||
|
<p class="description">{description}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
12
src/lib/Card/CardOuter.svelte
Normal file
12
src/lib/Card/CardOuter.svelte
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<div class="card-outer">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
61
src/lib/Card/Link.svelte
Normal file
61
src/lib/Card/Link.svelte
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let url: any;
|
||||||
|
export let classes: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a href={url} class="{classes}">
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.web,
|
||||||
|
.email,
|
||||||
|
.picture,
|
||||||
|
.pgp {
|
||||||
|
background-color: var(--tertiary);
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 20px;
|
||||||
|
height: 23px;
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web:hover,
|
||||||
|
.email:hover,
|
||||||
|
.picture:hover,
|
||||||
|
.pgp:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matrixcolored {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 20px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discordcolored {
|
||||||
|
background-color: #5865f2;
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 20px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.githubcolored {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 20px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/lib/Card/LinksOuter.svelte
Normal file
11
src/lib/Card/LinksOuter.svelte
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
4
src/lib/Card/index.ts
Normal file
4
src/lib/Card/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export { default as CardOuter } from "./CardOuter.svelte";
|
||||||
|
export { default as CardInner } from "./CardInner.svelte";
|
||||||
|
export { default as LinksOuter } from "./LinksOuter.svelte";
|
||||||
|
export { default as Link } from "./Link.svelte";
|
||||||
112
src/lib/Instances.json
Normal file
112
src/lib/Instances.json
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Invidious",
|
||||||
|
"description": "A frontend for YouTube.",
|
||||||
|
"website": "https://invidious.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/invidious-colored-vector.svg",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Libreddit",
|
||||||
|
"description": "A frontend for Reddit.",
|
||||||
|
"website": "https://libreddit.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/libreddit.png",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Librarian (LBRY)",
|
||||||
|
"description": "A frontend for Odysee.",
|
||||||
|
"website": "https://lbry.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/lbry.jpg",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Nitter",
|
||||||
|
"description": "A frontend for Twitter.",
|
||||||
|
"website": "https://nitter.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/nitter.png",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Quetre",
|
||||||
|
"description": "A frontend for Quora.",
|
||||||
|
"website": "https://quetre.projectsegfau.lt/",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Element",
|
||||||
|
"description": "An alternative for Discord.",
|
||||||
|
"website": "https://chat.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/matrix.png",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Piped",
|
||||||
|
"description": "Another alternative for YouTube.",
|
||||||
|
"website": "https://piped.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/piped.svg",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SearXNG",
|
||||||
|
"description": "A private meta-search engine.",
|
||||||
|
"website": "https://search.projectsegfau.lt/search",
|
||||||
|
"icon": "https://docs.searxng.org/_static/searxng-wordmark.svg",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Lingva Translate",
|
||||||
|
"description": "A frontend for Google Translate.",
|
||||||
|
"website": "https://translate.projectsegfau.lt",
|
||||||
|
"icon": "https://github.com/thedaviddelta/lingva-translate/raw/main/public/logo.svg",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bibliogram",
|
||||||
|
"description": "A frontend for Instagram.",
|
||||||
|
"website": "https://bib.projectsegfau.lt",
|
||||||
|
"category": "Instances"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Minecraft",
|
||||||
|
"description": "Our invite-only Minecraft SMP.",
|
||||||
|
"website": "https://projectsegfau.lt/minecraft",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/minecraft.png",
|
||||||
|
"category": "Gameservers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Minetest",
|
||||||
|
"description": "Minecraft \"alternative\".",
|
||||||
|
"website": "https://matrix.to/#/#minetest:projectsegfau.lt",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/1024px-Minetest_logo.svg.png",
|
||||||
|
"category": "Gameservers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Portainer (Soleil Levant)",
|
||||||
|
"description": "A frontend for Google Translate.",
|
||||||
|
"website": "https://portainer.soleil-levant.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/docker.svg",
|
||||||
|
"category": "Internal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Portainer (Helios)",
|
||||||
|
"description": "A frontend for Instagram.",
|
||||||
|
"website": "https://portainer.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/docker.svg",
|
||||||
|
"category": "Internal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "mailcow",
|
||||||
|
"description": "Our invite-only Minecraft SMP.",
|
||||||
|
"website": "https://mail.projectsegfau.lt/",
|
||||||
|
"icon": "https://instances.projectsegfau.lt/assets/icons/custom/cow_mailcow.svg",
|
||||||
|
"category": "Internal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Plausible analytics",
|
||||||
|
"description": "Minecraft \"alternative\".",
|
||||||
|
"website": "https://analytics.projectsegfau.lt/projectsegfau.lt",
|
||||||
|
"icon": "https://avatars.githubusercontent.com/u/54802774?s=200&v=4",
|
||||||
|
"category": "Internal"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -8,7 +8,7 @@
|
|||||||
$: currentPage = $page.url.pathname;
|
$: currentPage = $page.url.pathname;
|
||||||
|
|
||||||
const menus = [
|
const menus = [
|
||||||
{name: "Instances", url: "https://instances.projectsegfau.lt/"},
|
{name: "Instances", url: "/instances"},
|
||||||
{name: "Projects", url: "/projects"},
|
{name: "Projects", url: "/projects"},
|
||||||
{name: "Minecraft", url: "/minecraft"},
|
{name: "Minecraft", url: "/minecraft"},
|
||||||
{name: "Donate", url: "/donate"},
|
{name: "Donate", url: "/donate"},
|
||||||
|
|||||||
52
src/routes/instances.svelte
Normal file
52
src/routes/instances.svelte
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<script>
|
||||||
|
import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
|
||||||
|
import instances from "$lib/Instances.json";
|
||||||
|
import IconGlobe from "~icons/fa6-solid/globe";
|
||||||
|
|
||||||
|
let groups = instances.reduce((curr, val) => {
|
||||||
|
let group = curr.find(g => g.category === `${val.category}`)
|
||||||
|
if (group) {
|
||||||
|
group.values.push(val)
|
||||||
|
} else {
|
||||||
|
curr.push({ category: `${val.category}`, values: [ val ] })
|
||||||
|
}
|
||||||
|
return curr
|
||||||
|
}, [])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Our instances</h1>
|
||||||
|
<CardOuter>
|
||||||
|
<div class="container">
|
||||||
|
{#each groups as group}
|
||||||
|
<div class="container-inner">
|
||||||
|
<h1>{group.category}</h1>
|
||||||
|
<div class="items">
|
||||||
|
{#each group.values as item }
|
||||||
|
<CardInner title={item.name} description={item.description} icon={item.icon}>
|
||||||
|
<LinksOuter>
|
||||||
|
<Link url={item.website} classes="web">
|
||||||
|
<IconGlobe />
|
||||||
|
</Link>
|
||||||
|
</LinksOuter>
|
||||||
|
</CardInner>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</CardOuter>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.container-inner, .container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
|
||||||
import projects from "$lib/Projects.json";
|
import projects from "$lib/Projects.json";
|
||||||
import IconGitHub from "~icons/simple-icons/github";
|
import IconGitHub from "~icons/simple-icons/github";
|
||||||
|
|
||||||
import IconGlobe from "~icons/fa6-solid/globe";
|
import IconGlobe from "~icons/fa6-solid/globe";
|
||||||
import IconEmail from "~icons/fa6-solid/envelope";
|
import IconEmail from "~icons/fa6-solid/envelope";
|
||||||
import IconCamera from "~icons/fa6-solid/camera";
|
import IconCamera from "~icons/fa6-solid/camera";
|
||||||
@ -12,94 +12,24 @@
|
|||||||
<meta name="description" content="Our collection of projects." />
|
<meta name="description" content="Our collection of projects." />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="team">
|
|
||||||
<h1>Our projects</h1>
|
<h1>Our projects</h1>
|
||||||
<div class="projects-outer">
|
<CardOuter>
|
||||||
{#each projects as { name, description, github, website }}
|
{#each projects as { name, description, github, website }}
|
||||||
<div class="projects-inner">
|
<CardInner title={name} {description}>
|
||||||
<div class="main">
|
<LinksOuter>
|
||||||
<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}
|
{#if website}
|
||||||
<a href={website} class="web"><IconGlobe /></a>
|
<Link url={website} classes="web">
|
||||||
|
<IconGlobe />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
</div>
|
{#if github}
|
||||||
|
<Link url={github} classes="githubcolored">
|
||||||
|
<IconGitHub />
|
||||||
|
</Link>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
</LinksOuter>
|
||||||
|
</CardInner>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</CardOuter>
|
||||||
</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.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web:hover {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: var(--secondary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.socials {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,4 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
|
||||||
import members from "$lib/Team.json";
|
import members from "$lib/Team.json";
|
||||||
import IconDiscord from "~icons/simple-icons/discord";
|
import IconDiscord from "~icons/simple-icons/discord";
|
||||||
import IconMatrix from "~icons/simple-icons/matrix";
|
import IconMatrix from "~icons/simple-icons/matrix";
|
||||||
@ -14,138 +15,54 @@
|
|||||||
<meta name="description" content="Team members of Project Segfault." />
|
<meta name="description" content="Team members of Project Segfault." />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="team">
|
|
||||||
<h1>Our team</h1>
|
<h1>Our team</h1>
|
||||||
<p>Our excellent team members!</p>
|
<CardOuter>
|
||||||
<div class="team-outer">
|
|
||||||
{#each members as { name, discord, matrix, position, description, github, pgp, website, email, picture }}
|
{#each members as { name, discord, matrix, position, description, github, pgp, website, email, picture }}
|
||||||
<div class="team-inner">
|
<CardInner title={name} {position} {description}>
|
||||||
<div class="main">
|
<LinksOuter>
|
||||||
<span>{name} - {position}</span>
|
|
||||||
|
|
||||||
{#if description}
|
|
||||||
<p class="description">{description}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="socials">
|
|
||||||
{#if matrix}
|
{#if matrix}
|
||||||
<a href={matrix} class="matrixcolored"><IconMatrix /></a
|
<Link url={matrix} classes="matrixcolored">
|
||||||
>
|
<IconMatrix />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if discord}
|
{#if discord}
|
||||||
<a href={discord} class="discordcolored"
|
<Link url={discord} classes="discordcolored">
|
||||||
><IconDiscord /></a
|
<IconDiscord />
|
||||||
>
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if github}
|
{#if github}
|
||||||
<a href={github} class="githubcolored"><IconGitHub /></a
|
<Link url={github} classes="githubcolored">
|
||||||
>
|
<IconGitHub />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if website}
|
{#if website}
|
||||||
<a href={website} class="web"><IconGlobe /></a>
|
<Link url={website} classes="web">
|
||||||
|
<IconGlobe />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if email}
|
{#if email}
|
||||||
<a href="mailto:{email}" class="email"><IconEmail /></a>
|
<Link url="mailto:{email}" classes="email">
|
||||||
|
<IconEmail />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if pgp}
|
{#if pgp}
|
||||||
<a href={pgp} class="pgp"><IconKey /></a>
|
<Link url={pgp} classes="pgp">
|
||||||
|
<IconKey />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if picture}
|
{#if picture}
|
||||||
<a href={picture} class="picture"><IconCamera /></a>
|
<Link url={picture} classes="picture">
|
||||||
|
<IconCamera />
|
||||||
|
</Link>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
</div>
|
</LinksOuter>
|
||||||
|
</CardInner>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</CardOuter>
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.team-outer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-inner {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.matrixcolored {
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff !important;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.discordcolored {
|
|
||||||
background-color: #5865f2;
|
|
||||||
color: #fff !important;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.githubcolored {
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff !important;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web,
|
|
||||||
.email,
|
|
||||||
.picture,
|
|
||||||
.pgp {
|
|
||||||
background-color: var(--tertiary);
|
|
||||||
color: #fff !important;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 23px;
|
|
||||||
transition: all 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web:hover,
|
|
||||||
.email:hover,
|
|
||||||
.picture:hover,
|
|
||||||
.pgp:hover {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: #333 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.socials {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user