From d57f9911834f442f5e47628c454f2f7722912788 Mon Sep 17 00:00:00 2001
From: Landon Curt Noll <github-mail@asthe.com>
Date: Fri, 6 Jun 2025 18:15:38 -0700
Subject: [PATCH] checkpoint use CSS class now id for support and social CSS

---
 index.html |  8 ++++----
 index.md   |  8 ++++----
 ioccc.css  | 23 +++++++++++++----------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 809ae1551..e88f8f65e 100644
--- a/index.html
+++ b/index.html
@@ -448,8 +448,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
 <table>
 <tr>
 <td colspan="3" style="padding-top: 12px;">
-<span id="pseudo_h3">  Support IOCCC</span>
-<span id="small_click_below">   click below to support</span>
+<span class="pseudo_h3">  Support IOCCC</span>
+<span class="small_click_below">   click below to support</span>
 </td>
 </tr>
 <tr>
@@ -469,8 +469,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
 <table>
 <tr>
 <td colspan="3" style="padding-top: 12px;">
-<span id="pseudo_h3">  IOCCC on Social Media</span>
-<span id="small_click_below">   click below to visit</span>
+<span class="pseudo_h3">  IOCCC on Social Media</span>
+<span class="small_click_below">   click below to visit</span>
 </td>
 </tr>
 <tr>
diff --git a/index.md b/index.md
index a3cd06d5a..8b84ce9f4 100644
--- a/index.md
+++ b/index.md
@@ -26,8 +26,8 @@ FAQ on "[website menus](faq.html#menus)".
 >
 >    <tr>
 >    <td colspan="3" style="padding-top: 12px;">
->    <span id="pseudo_h3">&nbsp;&nbsp;Support IOCCC</span>
->    <span id="small_click_below">&nbsp;&nbsp;&nbsp;click below to support</span>
+>    <span class="pseudo_h3">&nbsp;&nbsp;Support IOCCC</span>
+>    <span class="small_click_below">&nbsp;&nbsp;&nbsp;click below to support</span>
 >    </td>
 >    </tr>
 >
@@ -49,8 +49,8 @@ FAQ on "[website menus](faq.html#menus)".
 >
 >    <tr>
 >    <td colspan="3" style="padding-top: 12px;">
->    <span id="pseudo_h3">&nbsp;&nbsp;IOCCC on Social Media</span>
->    <span id="small_click_below">&nbsp;&nbsp;&nbsp;click below to visit</span>
+>    <span class="pseudo_h3">&nbsp;&nbsp;IOCCC on Social Media</span>
+>    <span class="small_click_below">&nbsp;&nbsp;&nbsp;click below to visit</span>
 >    </td>
 >    </tr>
 >
diff --git a/ioccc.css b/ioccc.css
index 42adce187..55c82a59e 100644
--- a/ioccc.css
+++ b/ioccc.css
@@ -817,11 +817,12 @@ blockquote {
     color: DarkBlue;
 }
 
-/* This is how we hack the "Support IOCCC" and "IOCCC on Social Media" pseudo-h3 headings
+/* .pseudo_h3 - pseudo-h3 headings for HTML tables
  *
+ * This is how we hack the "Support IOCCC" and "IOCCC on Social Media" pseudo-h3 headings
  * Format like it is h3-ish.  We cannot use h3 because this is used within a HTML table.
  */
-#pseudo_h3 {
+.pseudo_h3 {
     font-family: Georgia, serif;
     font-weight: bold;
     page-break-after: avoid;
@@ -829,11 +830,13 @@ blockquote {
     color: DarkBlue;
 }
 
-/* This is how we hack the "click below to ..." small text
+/* .small_click_below - small text for for HTML tables
+ *
+ * This is how we hack the "click below to ..." small text
  *
  * Format small text that shows up on the same row as the pseudo-h3 headings.
  */
-#small_click_below {
+.small_click_below {
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: bold;
     page-break-after: avoid;
@@ -1048,10 +1051,10 @@ blockquote {
     .content h3 {
 	font-size: 1.25em;
     }
-    #pseudo_h3 {
+    .pseudo_h3 {
 	font-size: 1.25em;
     }
-    #small_click_below {
+    .small_click_below {
 	font-size: 0.75em;
     }
 }
@@ -1093,10 +1096,10 @@ blockquote {
     .content h3 {
 	font-size: 1em;
     }
-    #pseudo_h3 {
+    .pseudo_h3 {
 	font-size: 1em;
     }
-    #small_click_below {
+    .small_click_below {
 	font-size: 0.6em;
     }
 }
@@ -1148,10 +1151,10 @@ blockquote {
     .content h3 {
 	font-size: 0.9em;
     }
-    #pseudo_h3 {
+    .pseudo_h3 {
 	font-size: 0.9em;
     }
-    #small_click_below {
+    .small_click_below {
 	font-size: 0.5em;
     }
 }