Use Flex

Author: smashedr

src/about.html

@@ -16,20 +16,22 @@ <h1><i class="fa-regular fa-address-card"></i> {{ page.title }}</h1>
     </figcaption>
 </figure>
 
-<div>
+<div class="d-flex flex-column flex-md-row">
+    <div class="me-md-3">
 <a href="https://github.com/smashedr" target="_blank" rel="noopener">
     <img src="https://github-readme-stats.vercel.app/api?username=smashedr&theme=dark&show_icons=true&hide_rank=true&show=reviews&card_width=350"
          alt="GitHub Stats"  class="img-fluid mb-2"></a>
-
+    </div><!-- flex item -->
+    <div class="me-md-3">
 <a href="https://github.com/smashedr" target="_blank" rel="noopener">
     <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=smashedr&theme=dark&layout=donut "
          alt="Top Languages"  class="img-fluid mb-2"></a>
-</div>
+    </div><!-- flex item -->
+</div><!-- flex row-md -->
 
-<div class="row">
-    <div class="col-12  col-md-6">
+<div class="d-flex flex-column flex-md-row">
+    <div class="me-md-5">
         <h2>Links</h2>
-
         <p class="ms-3">
             <i class="fa-brands fa-github me-2"></i>
             <a href="{{ site.github_url }}" target="_blank" rel="noopener">CSSNR GitHub</a>
@@ -41,7 +43,6 @@ <h2>Links</h2>
             <a href="https://github.com/smashedr" target="_blank" rel="noopener">Personal GitHub</a>
             <br>
         </p>
-
         <p class="ms-3">
             <i class="fa-brands fa-discord me-2"></i>
             <a href="https://discord.gg/wXy6m2X8wY" target="_blank" rel="noopener">CSSNR Discord</a>
@@ -50,23 +51,22 @@ <h2>Links</h2>
             <a href="https://discord.gg/6pzXJE5" target="_blank" rel="noopener">SMWC.world Discord</a>
             <br>
         </p>
-
         <p class="ms-3">
             <i class="fa-brands fa-firefox me-2"></i>
             <a href="https://addons.mozilla.org/en-US/firefox/user/18021912/" target="_blank" rel="noopener">Mozilla Profile</a>
             <br>
         </p>
+    </div><!-- flex item -->
 
-    </div>
-    <div class="col-12  col-md-6">
+    <div class="me-md-5">
         <h2>Development</h2>
         <ul>
             <li>Web Extensions</li>
             <li>GitHub Actions</li>
             <li>Docker Containers</li>
             <li>Django and Flask</li>
         </ul>
-    </div>
-</div>
+    </div><!-- flex item -->
+</div><!-- flex row-md -->
 
 <p class="lead">More Information Coming Soon...</p>

src/css/screenshots.css

@@ -4,7 +4,7 @@
 dark: true
 noindex: true
 title: Feedback
-description: Feedback
+description: General Feedback and Inquiries
 ---
 
 <div class="d-flex align-items-center h-100">

src/feedback.html

@@ -23,10 +23,14 @@ <h1><i class="fa-brands fa-github"></i> {{ site.site_name }}</h1>
 </div>
 
 <p>
-    <a href="#web-extensions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Web Extensions</a> &bull;
-    <a href="#web-apps" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Web Apps</a> &bull;
-    <a href="#github-actions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">GitHub Actions</a> &bull;
-    <a href="#other-software" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Other Software</a>
+    <a href="#web-extensions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+        Web Extensions</a> &bull;
+    <a href="#web-apps" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+        Web Apps</a> &bull;
+    <a href="#github-actions" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+        GitHub Actions</a> &bull;
+    <a href="#other-software" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover d-inline-block">
+        Other Software</a>
 </p>
 
 <h2 id="web-extensions">Web Extensions</h2>