checkpoint use CSS styles to format support and social media

In addition to being CSS-enabled, we added Responsive Web Design
support for smaller screen widths.

TODO: test HTML validation
This commit is contained in:
Landon Curt Noll committed 2025-06-06 18:03:23 -07:00
1 parent 6f23c20c12
commit 59ff9400c4
3 files changed
+52 -14

No files matched your search

+5 -7
View File
@@ -448,8 +448,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
<table>
<tr>
<td colspan="3" style="padding-top: 12px;">
<font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">  Support IOCCC</font>
<font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">   click below to support</font>
<span id="pseudo_h3">  Support IOCCC</span>
<span id="small_click_below">   click below to support</span>
</td>
</tr>
<tr>
@@ -460,9 +460,7 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
    <a href="https://coff.ee/ioccc"><img src="png/buymeacoffee.128x38.png" alt="Buy Me A Coffee logo" width=128 height=38></a>
</td>
<td>
    <a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png"
alt="GitHub logo"
width=128 height=51></a>
    <a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png" alt="GitHub logo" width=128 height=51></a>
</td>
</tr>
</table>
@@ -471,8 +469,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
<table>
<tr>
<td colspan="3" style="padding-top: 12px;">
<font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">  IOCCC on Social Media</font>
<font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">   click below to visit</font>
<span id="pseudo_h3">  IOCCC on Social Media</span>
<span id="small_click_below">   click below to visit</span>
</td>
</tr>
<tr>
+5 -7
View File
@@ -26,8 +26,8 @@ FAQ on "[website menus](faq.html#menus)".
>
> <tr>
> <td colspan="3" style="padding-top: 12px;">
> <font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">&nbsp;&nbsp;Support IOCCC</font>
> <font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">&nbsp;&nbsp;&nbsp;click below to support</font>
> <span id="pseudo_h3">&nbsp;&nbsp;Support IOCCC</span>
> <span id="small_click_below">&nbsp;&nbsp;&nbsp;click below to support</span>
> </td>
> </tr>
>
@@ -39,9 +39,7 @@ FAQ on "[website menus](faq.html#menus)".
> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://coff.ee/ioccc"><img src="png/buymeacoffee.128x38.png" alt="Buy Me A Coffee logo" width=128 height=38></a>
> </td>
> <td>
> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png"
> alt="GitHub logo"
> width=128 height=51></a>
> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png" alt="GitHub logo" width=128 height=51></a>
> </td>
> </tr>
>
@@ -51,8 +49,8 @@ FAQ on "[website menus](faq.html#menus)".
>
> <tr>
> <td colspan="3" style="padding-top: 12px;">
> <font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">&nbsp;&nbsp;IOCCC on Social Media</font>
> <font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">&nbsp;&nbsp;&nbsp;click below to visit</font>
> <span id="pseudo_h3">&nbsp;&nbsp;IOCCC on Social Media</span>
> <span id="small_click_below">&nbsp;&nbsp;&nbsp;click below to visit</span>
> </td>
> </tr>
>
+42
View File
@@ -817,6 +817,30 @@ blockquote {
color: DarkBlue;
}
/* 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 {
font-family: Georgia, serif;
font-weight: bold;
page-break-after: avoid;
font-size: 1.5em;
color: DarkBlue;
}
/* 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 {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
page-break-after: avoid;
font-size: 0.9em;
color: black;
}
/* Guidelines / Rules change bar ============================================================================ */
.leftbar {
@@ -1024,6 +1048,12 @@ blockquote {
.content h3 {
font-size: 1.25em;
}
#pseudo_h3 {
font-size: 1.25em;
}
#small_click_below {
font-size: 0.75em;
}
}
/*
@@ -1063,6 +1093,12 @@ blockquote {
.content h3 {
font-size: 1em;
}
#pseudo_h3 {
font-size: 1em;
}
#small_click_below {
font-size: 0.6em;
}
}
/*
@@ -1112,6 +1148,12 @@ blockquote {
.content h3 {
font-size: 0.9em;
}
#pseudo_h3 {
font-size: 0.9em;
}
#small_click_below {
font-size: 0.5em;
}
}
/*