docs: add discord link

docs~/src/css/custom.css

@@ -65,3 +65,23 @@ img {
   aspect-ratio: auto;
   height: auto;
 }
+
+.discordLink {
+  display: block;
+  height: 2em;
+  object-fit: cover;
+  padding: 0.1em;
+}
+
+img.button {
+  /*aspect-ratio: auto;*/
+
+  height: 100%;
+  object-fit: cover;
+  padding: 0;
+  margin: 0;
+}
+
+.button-group + .button-group {
+  margin-top: 1em;
+}

docs~/src/pages/index.tsx

@@ -29,7 +29,7 @@ function HomepageHeader() {
         <p className="hero__subtitle">
             <Translate>Drag-and-Drop Avatar Assembly</Translate>
         </p>
-        <div className={styles.buttons}>
+        <div className={`button-group ${styles.buttons}`}>
           <InstallButton/>
           <Link
             className={`button button--secondary button--lg ${styles.button}`}
@@ -43,6 +43,13 @@ function HomepageHeader() {
             <Translate>Tutorials</Translate>
           </Link>
         </div>
+        <div className={`button-group ${styles.buttons}`}>
+            <a href={"https://discord.gg/dV4cVpewmM"} className={`discordLink`}>
+                <img className={`button button--lg ${styles.button}`}
+                     alt="Discord"
+                     src="https://img.shields.io/discord/1201675918956056627?style=flat-square&logo=Discord&logoColor=ffffff&logoSize=auto&label=Discord&color=%235865F2&cacheSeconds=60"/>
+            </a>
+        </div>
       </div>
     </header>
   );
@@ -54,9 +61,9 @@ export default function Home(): JSX.Element {
         <Layout
             title={translate({message: 'Modular Avatar'})}
             description={translate({message: "Drag-and-Drop Avatar Assembly"})}>
-      <HomepageHeader />
+            <HomepageHeader/>
             <main>
-          <HomepageFeatures />
+                <HomepageFeatures/>
             </main>
         </Layout>
   );