- {#each members as { name, discord, matrix, position }}
+ {#each members as { name, discord, matrix, position, description, github, website }}
-
{name}
+
{name} - Position: {position}
+ {#if description}
+
{description}
+ {/if}
-
Position: {position}
-
+
{#if matrix}
-
[Matrix]
+
{/if}
{#if discord}
-
Discord
+
+ {/if}
+
+ {#if github}
+
+ {/if}
+
+ {#if website}
+
{/if}
@@ -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;
+ }
+ }
\ No newline at end of file