use a discord widget in favor of a link

index.html

@@ -103,6 +103,8 @@
             <p>
                 These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
             </p>
+            <div class="row">
+                <div class="col">
                     <div id="social-list">
                         <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
                     </div>
@@ -113,6 +115,12 @@
                         <li>If you want to play my Mario Maker 2 levels, my ID is <strong>8BH-566-4WF</strong></li>
                         <li>If you play The Sims 4, you can check out my builds on the gallery by searching for <strong>Ellpeck</strong></li>
                     </ul>
+                </div>
+                <div class="col-md-auto" id="discord-div">
+                    <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
+                </div>
+            </div>
+
             <script src="scripts/social.js"></script>
         </div>
 

scripts/social.js

@@ -1,8 +1,4 @@
 const socials = [{
-        name: 'Discord',
-        link: 'https://www.ellpeck.de/discord',
-    },
-    {
         name: 'Twitter',
         link: 'https://twitter.com/Ellpeck'
     },
@@ -50,3 +46,7 @@ for (social of socials) {
     s += '</a>'
 }
 $('#social-list').html(s);
+
+var disc = $("#discord-div");
+var theme = dark ? "dark" : "light";
+disc.html('<iframe id="discord-widget" src="https://discordapp.com/widget?id=181435613147430913&theme=' + theme + '" width="300" height="450" allowtransparency="true" frameborder="0"></iframe>');

style.css

@@ -62,18 +62,6 @@ body {
     margin-bottom: 20px;
 }
 
-.support-button {
-    width: 300px;
-    margin: 10px;
-    line-height: 50px;
-}
-
-.support-image {
-    width: 50px;
-    height: 50px;
-    float: left;
-}
-
 #social-list {
     text-align: center;
 }
@@ -136,15 +124,15 @@ body {
     margin-right: 10px;
 }
 
-.support-desc {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
 .alert {
     margin-top: 1rem;
 }
 
+#discord-widget {
+    display: block;
+    margin: auto;
+}
+
 @media (min-width: 1200px) {
     .navbar {
         width: 1200px;
@@ -159,15 +147,6 @@ body {
     }
 }
 
-@media(max-width: 991px) {
-    .support-button {
-        width: auto;
-        overflow: hidden;
-        text-indent: -99999px;
-        margin: 5px;
-    }
-}
-
 @media (max-width: 768px) {
     .container {
         max-width: none;