mein changes

Signed-off-by: Alex J <odyssey346@disroot.org>
This commit is contained in:
Alex J 2022-07-06 13:52:30 +02:00
parent b9fe05953a
commit 1bc0a2ac6c
3 changed files with 83 additions and 13 deletions

View File

@ -2,23 +2,34 @@
{ {
"name": "Midou", "name": "Midou",
"matrix": "https://matrix.to/#/@midou:projectsegfau.lt/", "matrix": "https://matrix.to/#/@midou:projectsegfau.lt/",
"position": "System administrator" "position": "System administrator",
"description": "Fill out your fucking description",
"github": "https://github.com/Midou36O",
"website": "https://miicord.com"
}, },
{ {
"name": "MrLeRien", "name": "MrLeRien",
"discord": "https://discord.com/users/213634643327582208/", "discord": "https://discord.com/users/213634643327582208/",
"position": "Hoster" "position": "Hoster",
"description": "Fill out your fucking description",
"github": "https://github.com/MrLeRien"
}, },
{ {
"name": "akisblack", "name": "akisblack",
"matrix": "https://matrix.to/#/@akis:projectsegfau.lt/", "matrix": "https://matrix.to/#/@akis:projectsegfau.lt/",
"discord": "https://discord.com/users/845535118285602866/", "discord": "https://discord.com/users/845535118285602866/",
"position": "Web developer" "position": "Web developer",
"description": "Fill out your fucking description",
"github": "https://github.com/akisblack",
"website": "https://akisblack.github.io"
}, },
{ {
"name": "Devnol", "name": "Devnol",
"matrix": "https://matrix.to/#/@devnol:projectsegfau.lt/", "matrix": "https://matrix.to/#/@devnol:projectsegfau.lt/",
"discord": "https://discord.com/users/429353559566319626/", "discord": "https://discord.com/users/429353559566319626/",
"position": "Hoster" "position": "Hoster",
"description": "I am the asshole",
"github": "https://github.com/Devnol",
"website": "https://devnol.github.io"
} }
] ]

View File

@ -35,4 +35,4 @@ a {
text-decoration: underline; text-decoration: underline;
color: var(--accent-primary); color: var(--accent-primary);
text-underline-offset: 5px; text-underline-offset: 5px;
} }

View File

@ -1,5 +1,10 @@
<script lang="ts"> <script lang="ts">
import members from "$lib/Members.json"; import members from "$lib/Members.json";
import IconDiscord from "~icons/simple-icons/discord";
import IconMatrix from "~icons/simple-icons/matrix";
import IconGitHub from "~icons/simple-icons/github";
import IconGlobe from "~icons/fa6-solid/globe";
</script> </script>
<svelte:head> <svelte:head>
@ -10,19 +15,29 @@
<div class="members"> <div class="members">
<h1>Members</h1> <h1>Members</h1>
<div class="member-outer"> <div class="member-outer">
{#each members as { name, discord, matrix, position }} {#each members as { name, discord, matrix, position, description, github, website }}
<div class="member-inner"> <div class="member-inner">
<h2>{name}</h2> <h2 class="stupidh2">{name} - Position: {position}</h2>
{#if description}
<p class="description">{description}</p>
{/if}
<h3>Position: {position} </h3>
<div class="socials"> <div class="socials">
{#if matrix} {#if matrix}
<a href={matrix} class="matrixcolored">[Matrix]</a> <a href={matrix} class="matrixcolored"><IconMatrix /></a>
{/if} {/if}
{#if discord} {#if discord}
<a href={discord} class="discordcolored">Discord</a> <a href={discord} class="discordcolored"><IconDiscord /></a>
{/if}
{#if github}
<a href={github} class="githubcolored"><IconGitHub /></a>
{/if}
{#if website}
<a href={website} class="button"><IconGlobe /></a>
{/if} {/if}
</div> </div>
</div> </div>
@ -36,7 +51,12 @@
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
} }
.member-inner {
background-color: #252525;
border-radius: 16px;
padding: 10px;
width: 30%;
}
a { a {
border: none; border: none;
border-radius: 10px; border-radius: 10px;
@ -50,16 +70,55 @@
.matrixcolored { .matrixcolored {
background-color: #fff; background-color: #fff;
} margin-left: 0px;
font-size: 20px;
height: 23px;
vertical-align: middle;
}
.discordcolored { .discordcolored {
background-color: #5865f2; background-color: #5865f2;
color: #fff !important; color: #fff !important;
margin-left: 0px;
font-size: 20px;
height: 23px;
vertical-align: middle;
} }
.githubcolored {
background-color: #333;
color: #fff !important;
margin-left: 0px;
font-size: 20px;
height: 23px;
vertical-align: middle;
}
.button {
background-color: var(--tertiary);
color: #fff !important;
margin-left: 0px;
font-size: 20px;
height: 23px;
vertical-align: middle;
}
.button:hover {
background-color: var(--accent-tertiary);
color: var(--secondary) !important;
transition: all 0.5s;
}
.button:active {
background-color: var(--accent-primary);
transition: all 0.5s;
}
.socials { .socials {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: .5rem; gap: .5rem;
} }
@media only screen and (max-width: 820px) {
.member-inner {
width: initial;
}
}
</style> </style>