Browse Source

added fosscord-community-instances to the landingpage

pull/33/head
xnacly 5 months ago
parent
commit
78ab644e94
  1. 84
      assets/css/style.css
  2. 1
      assets/images/verified.svg
  3. 3
      components/hero.vue
  4. 75
      components/instances.vue
  5. 17
      components/navbar.vue
  6. 6
      pages/instances.vue

84
assets/css/style.css

@ -4,6 +4,7 @@
--fosscord: #2e4eef;
--fosscord-hover: #2e4eefa9;
--background-color: #23272a;
--background-color-hover: #23272a80;
--background-color-accent: #ffffff;
}
@ -334,7 +335,8 @@ h3 {
color: #2e2e2e;
}
.color-main.link:hover, .color-main.link:focus {
.color-main.link:hover,
.color-main.link:focus {
color: #616161;
}
@ -514,7 +516,8 @@ h3 {
color: white;
font-weight: 400;
}
.footer_el_link:hover, .footer_el_link:focus {
.footer_el_link:hover,
.footer_el_link:focus {
color: var(--fosscord-hover) !important;
}
.footer_logo {
@ -542,7 +545,6 @@ h3 {
.icons:hover {
fill: var(--fosscord-hover);
}
.nav_link {
margin-left: 1rem;
}
@ -615,14 +617,80 @@ h3 {
justify-content: center;
}
.contributors_container_container {
margin-top: 5rem;
margin-top: 4rem;
margin-bottom: 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#main_header {
font-size: 5rem;
}
#main_header_sub {
font-weight: 500;
margin-top: 1rem;
font-size: 2rem;
}
.instances_container_main {
margin-top: 2rem;
margin-bottom: 5.9rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 1rem;
padding-bottom: 1rem;
height: 100%;
}
.instances_container {
display: flex;
justify-content: center;
align-items: start;
flex-wrap: wrap;
margin: 2rem;
margin-bottom: 4rem;
}
.instance_container {
background: var(--background-color);
max-width: 15rem;
margin: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
}
.instance_container:hover {
background: var(--background-color-hover);
}
.instance_img {
width: 15rem;
border-radius: 5%;
}
.grey {
filter: grayscale(1);
}
.fosscord_image {
filter: none !important;
}
.instance_info_container {
margin: 1rem;
/* text-align: center; */
}
.instances_container_header {
text-align: center;
}
.instance_desc {
font-size: small;
word-wrap: break-word;
}
.verified_icon {
fill: var(--fosscord);
width: 1.25rem;
}
.instance_name {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color-accent: #111111;
@ -638,8 +706,10 @@ h3 {
}
@media screen and (max-width: 600px) {
#main_header {
font-size: 3rem;
word-break: break-all;
font-size: 4rem;
}
#main_header_sub {
font-size: 1.5rem;
}
section {
text-align: center;

1
assets/images/verified.svg

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="var(--fosscord)" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>

3
components/hero.vue

@ -3,8 +3,9 @@
<div id="hero_container">
<section id="hero" class="container">
<h2 id="main_header">
Fosscord for better and secure communication
Fosscord
</h2>
<span id="main_header_sub">For better and secure communication</span>
<div style="margin-top: 2rem">
<a
id="open_demo"

75
components/instances.vue

@ -0,0 +1,75 @@
<template>
<div class="instances_container_main">
<h3 class="instances_container_header">Community Instances:</h3>
<div class="instances_container">
<div
class="instance_container"
v-for="instance of instances"
v-bind:key="instance"
>
<a v-bind:href="instance.url">
<img
class="instance_img"
:class="
instance.image ===
'https://raw.githubusercontent.com/fosscord/fosscord/master/assets/logo512.png' &&
instance.name !== 'fosscord.com'
? 'grey'
: '' || (instance.name === 'fosscord.com' && 'fosscord_image')
"
v-bind:src="instance.image"
/>
</a>
<div class="instance_info_container">
<a v-bind:href="instance.url">
<h6 class="instance_name">
{{ instance.name }}
<svg
v-if="instance.official"
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="check-circle"
class="verified_icon"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path>
</svg>
</h6>
</a>
<span class="instance_desc">{{ instance.description }}</span>
</div>
</div>
</div>
<a
href="https://github.com/fosscord/fosscord-community-instances/pulls"
class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1"
>Add your own Instance</a
>
</div>
</template>
<script>
export default {
data() {
return {
instances: []
};
},
async fetch() {
let res = await fetch(
"https://raw.githubusercontent.com/fosscord/fosscord-community-instances/main/instances.json"
);
res = await res.json();
this.instances = res.map(i => {
if (!i.image)
i.image =
"https://raw.githubusercontent.com/fosscord/fosscord/master/assets/logo512.png";
return i;
});
}
};
</script>

17
components/navbar.vue

@ -3,7 +3,15 @@
<div id="navbar_container">
<div id="navbar_left">
<NuxtLink to="/" class="link logo color-main"
><img src="https://raw.githubusercontent.com/fosscord/fosscord/master/assets/logo/logo.svg" height="30px" width="30px" class="fosscord-logo" alt="fosscord.com" /> &nbsp;<span class="fosscord-logo-text">Fosscord</span></NuxtLink>
><img
src="https://raw.githubusercontent.com/fosscord/fosscord/master/assets/logo/logo.svg"
height="30px"
width="30px"
class="fosscord-logo"
alt="fosscord.com"
/>
&nbsp;<span class="fosscord-logo-text">Fosscord</span></NuxtLink
>
</div>
<div id="toggle_container">
<NuxtLink to="/" class="link logo color-main" id="back_button"
@ -40,6 +48,9 @@
class="link mx-15 color-main nav_link"
>Documentation</a
>
<NuxtLink to="/instances/" class="link mr-15 color-main nav_link"
>Instances</NuxtLink
>
<!--
<a
href="https://github.com/fosscord/fosscord"
@ -87,9 +98,9 @@
export default {
data() {
return {
showMobileNavbar: false,
showMobileNavbar: false
};
},
}
};
</script>

6
pages/instances.vue

@ -0,0 +1,6 @@
<template>
<div>
<instances />
</div>
</template>
<script></script>
Loading…
Cancel
Save