0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

mein changes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/Members.json
View File

@@ -2,23 +2,34 @@
{
"name": "Midou",
"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",
"discord": "https://discord.com/users/213634643327582208/",
"position": "Hoster"
"position": "Hoster",
"description": "Fill out your fucking description",
"github": "https://github.com/MrLeRien"
},
{
"name": "akisblack",
"matrix": "https://matrix.to/#/@akis:projectsegfau.lt/",
"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",
"matrix": "https://matrix.to/#/@devnol:projectsegfau.lt/",
"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"
}
]

2
src/lib/app.css
View File

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

75
src/routes/members.svelte
View File

@@ -1,5 +1,10 @@
<script lang="ts">
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>
<svelte:head>
@@ -10,19 +15,29 @@
<div class="members">
<h1>Members</h1>
<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">
<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">
{#if matrix}
<a href={matrix} class="matrixcolored">[Matrix]</a>
<a href={matrix} class="matrixcolored"><IconMatrix /></a>
{/if}
{#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}
</div>
</div>
@@ -36,7 +51,12 @@
flex-direction: column;
gap: 2rem;
}
.member-inner {
background-color: #252525;
border-radius: 16px;
padding: 10px;
width: 30%;
}
a {
border: none;
border-radius: 10px;
@@ -50,16 +70,55 @@
.matrixcolored {
background-color: #fff;
}
margin-left: 0px;
font-size: 20px;
height: 23px;
vertical-align: middle;
}
.discordcolored {
background-color: #5865f2;
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 {
display: flex;
flex-direction: row;
gap: .5rem;
}
@media only screen and (max-width: 820px) {
.member-inner {
width: initial;
}
}
</style>