change formatting of the landing page to make the social media feed look better

Author: chrisorban

docs/feed.html

@@ -161,7 +161,7 @@ <h1 class="title">Social Media Feed</h1>
 </header>
 
 
-<iframe allowfullscreen="" sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="800" height="10000" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&amp;theme=light&amp;size=200&amp;header=false&amp;replies=false&amp;boosts=true">
+<iframe allowfullscreen="" sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="600" height="10000" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&amp;theme=light&amp;size=200&amp;header=false&amp;replies=false&amp;boosts=true">
 </iframe>
 
 

docs/styles.css

@@ -15,8 +15,8 @@
 /* For larger screens, make it even wider */
 @media (min-width: 1400px) {
     #quarto-margin-sidebar {
-        width: 500px !important;
-        min-width: 500px !important;
+        width: 400px !important;
+        min-width: 400px !important;
         overflow: hidden !important; /* Hide scrollbars */
     }
 

feed.qmd

@@ -2,6 +2,6 @@
 title: "Social Media Feed"
 ---
 
-<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="800" height="10000" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=200&header=false&replies=false&boosts=true"></iframe>
+<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="600" height="10000" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=200&header=false&replies=false&boosts=true"></iframe>
 
 

styles.css

@@ -15,8 +15,8 @@
 /* For larger screens, make it even wider */
 @media (min-width: 1400px) {
     #quarto-margin-sidebar {
-        width: 500px !important;
-        min-width: 500px !important;
+        width: 400px !important;
+        min-width: 400px !important;
         overflow: hidden !important; /* Hide scrollbars */
     }