Some more donation layout tweaks.

Author: tomspilman

website/content/donate.njk

@@ -62,12 +62,14 @@ title: Donate
 	</div>
         </div>
     </section>
+
     <section class="container-xxl mb-5">
         <h1 id="patreons" class="fw-bold"><a href="#patreons">Monthly Sponsors</a></h1>
         <p>
             The following is a list of individuals and studios that support us through <a href="https://www.patreon.com/bePatron?u=3142012">Patreon</a>.
         </p>
         <br/>
+	<div class="credits">
             {% set tiers = [
                 { name: "EnvironmentMapEffect", url: "https://www.patreon.com/checkout/MonoGame?rid=9142452", size: "fs-3" },
                 { name: "Model.Draw", url: "https://www.patreon.com/checkout/MonoGame?rid=9142450", size: "fs-4" },
@@ -81,30 +83,26 @@ title: Donate
 		       <h3 class="fw-bold text-center"><a href="#{{tier.name}}">{{tier.name}}</a></h3>
 			<br />
 			<br />
+			<ul class="donationList list-unstyled">
 		            {% for patreon in patreons %}
 			        {% if patreon.tier == tier.name and patreon.active %}
-		                <div class="col-6 col-md-4 mb-1 text-center {{tier.size}}" >
-				    {% if patreon.url %}<a href="{{patreon.url}}">{% endif %}{{patreon.name}}{% if patreon.url %}</a>{% endif %}
-		                    <br />
-				</div>
+					<li class="{{tier.size}}">{% if patreon.url %}<a href="{{patreon.url}}">{% endif %}{{patreon.name}}{% if patreon.url %}</a>{% endif %}</li>
 			        {% endif %}
 	                    {% endfor %}
 		            {% for patreon in patreons %}
 			        {% if patreon.tier == tier.name and not patreon.active %}
-		                <div class="col-6 col-md-4 mb-1 text-center text-secondary {{tier.size}}">
-	                            {{patreon.name}}
-		                    <br />
-				</div>
+			                <li class="{{tier.size}} text-secondary">{{patreon.name}}</li>
 			        {% endif %}
 	                    {% endfor %}
+			</ul>
 			<br />
 			<br />
 			<br />
 			<br />
 		</div>
 
             {% endfor%}
-
+	</div>
     </section>
 
     <section class="container-xxl mb-5">

website/content/public/css/main.css

@@ -869,3 +869,34 @@ blockquote {
 .mg-two-column-list li {
   margin-left: 1.5rem; /* Adjusts indentation for list items */
 }
+
+
+/*******************************************************************************
+*** Section: Donations
+*** Styles for donations page
+*******************************************************************************/
+
+.donationList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  column-gap: 0px;
+}
+
+.donationList li {
+  width: fit-content;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.donationList li:not(:last-child)::after {
+  content: '\00B7';
+  margin: 0 0.5em;
+  opacity: 0.6;
+}
+
+.credits {
+  width: clamp(320px, 80%, 1200px);
+  margin-inline: auto;
+}