Update styling and structure for support section in index.html

Author: nikoscham

feascript-website.css

@@ -342,7 +342,7 @@ mjx-container {
   list-style: none;
   margin: 0;
   padding-left: 0;
-  max-width: 900px;
+  max-width: 1000px;
 }
 
 .tutorials-list li {
@@ -353,12 +353,12 @@ mjx-container {
   margin-bottom: 12px;
   padding: 14px 18px;
   border-radius: 12px;
-  border: 1px solid #e8e8e8;
+  border: 2px solid #e8e8e8;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
   transition:
     box-shadow 0.2s ease,
     transform 0.2s ease;
-  max-width: 900px;
+  max-width: 1000px;
 }
 
 .tutorials-list li:hover {
@@ -507,7 +507,7 @@ mjx-container {
   align-items: center;
   gap: 0.5em;
   padding: 12px 16px;
-  border: 1px solid #e4c9f9;
+  border: 3px solid #cac9f9;
   border-radius: 10px;
   background: #faf5ff;
   max-width: 100%;

index.html

@@ -931,10 +931,23 @@ <h2 id="documentation"><a name="Documentation"></a>Documentation</h2>
       <a href="https://blog.feascript.com">FEAScript blog</a>.
     </p>
 
-    <div class="sponsor-cta">
-      💖 If you find FEAScript useful, please consider supporting its development:
-      <a href="https://github.com/sponsors/FEAScript">GitHub Sponsors</a> ·
-      <a href="https://liberapay.com/FEAScript/donate">Liberapay</a>
+    <p class="blue-label" style="margin-bottom: 0">SUPPORT FEASCRIPT</p>
+    <div class="blue-box" style="margin-top: 5px">
+      <p>
+        💖 If you find FEAScript useful, please consider supporting its development:
+        <a href="https://github.com/sponsors/FEAScript"
+          ><img
+            src="https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-ea4aaa?logo=githubsponsors&logoColor=white"
+            alt="GitHub Sponsors"
+            style="height: 20px; vertical-align: middle; margin-left: 4px"
+        /></a>
+        <a href="https://liberapay.com/FEAScript/donate"
+          ><img
+            src="https://img.shields.io/badge/Donate-Liberapay-F6C915?logo=liberapay&logoColor=black"
+            alt="Donate on Liberapay"
+            style="height: 20px; vertical-align: middle; margin-left: 4px"
+        /></a>
+      </p>
     </div>
 
     <h2 id="licensing"><a name="Licensing"></a>Licensing</h2>