add new topbar, improve the look & feel of web pages

Thank you, @chris-sab, for your excellent work and for helping us
commit this alpha version of the topbar.

As part of this work, the following HTML sections were removed:

* begin-row
* begin-leftcolumn
* sidenav
* end-leftcolumn
* begin-rightcolumn
* before-content
* end-rightcolumn
* end-row.default

Also added a new HTML section, just above the "header" section:

* topbar

The web site now as a more modern looking topbar, thanks to the
work of the contractor (GitHub user @chris-sab) who is working on
issue #2273.

Performed `make www` to implement the above and test under macOS.

TODO: Fix the Responsive Web Design to deal with
      the new topbar system.

TODO: Improve the topbar.  What is there now is
      just an alpha version.

TODO: Decide what to do with `png/ioccc.png`.
      Remove it make selective use of the image on certain top level
      pages lower down?

TODO: The changes to `ioccc.css` causes some
      formatting problems with pages such as `location.html` (missing
      blank lines).  Fix formatting problems as needed.

TODO: Fix the "Nu HTML check this web page"
      links on things like the year level _YYYY/index.html_ pages.

TODO: Correct all HTML errors, warnings and perhaps
      informative messages from the Nu HTML check.

TODO: Consider adding color (colour) to the
      web pages in such a way that people with color perception
      challenges can still use the web site.

TODO: For those web browsers that have and allow
      JavaScript, make use of technology such as [Code
      Mirror](https://codemirror.net/) to directly render source
      code (C, shell, Makefile, etc.) with syntax coloring (colouring)
      directly in the browser.  For non-JavaScript browsers, fallback
      to the current use of GitHub source code viewing.
This commit is contained in:
Landon Curt Noll committed 2024-04-16 17:28:39 -07:00
1 parent 1cb03b400a
commit c5848302e8
409 files changed
+28334 -28797

No files matched your search

+5 -12
View File
@@ -530,14 +530,9 @@ The following HTML phase files are used to build HTML content:
3. inc/topbar.default.html
4. inc/header.default.html
5. inc/navbar.default.html
6. inc/begin-row.default.html
7. inc/begin-leftcolumn.default.html
8. inc/sidenav.default.html
9. inc/end-leftcolumn.default.html
10. inc/begin-rightcolumn.default.html
11. inc/before-content.default.html
6. inc/before-content.default.html
Phases 12-19 are reserved for future use.
Phases 7-19 are reserved for future use.
20. ((insert 'before tool' output))
21. ((insert 'pandoc wrapper tool' output))
@@ -546,12 +541,10 @@ Phases 12-19 are reserved for future use.
Phases 23-29 are reserved for future use.
30. inc/after-content.default.html
31. inc/end-rightcolumn.default.html
32. inc/end-row.default.html
33. inc/footer.default.html
34. inc/bottom.default.html
31. inc/footer.default.html
32. inc/bottom.default.html
Phases 35-39 are reserved for future use.
Phases 33-39 are reserved for future use.
In the above HTML phase numbers, except during HTML phase numbers 20-29, symbols
of the form `%%TOKEN%%` are substituted.
+71 -79
View File
@@ -7,6 +7,7 @@
<head>
<link rel="stylesheet" href="../ioccc.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>The International Obfuscated C Code Contest</title>
@@ -41,6 +42,73 @@
<body>
<!-- END: this line ends content from: inc/body.default.html -->
<!-- START: this line starts content from: inc/topbar.default.html -->
<div class="theader">
<nav class="topbar">
<div class="container">
<div class="logo">
IOCCC
</div>
<div class="topbar-items">
<div class="item">
<span class="item-header">
Home
</span>
<div class="sub-item">
<div class="outfit-font"><a href="../index.html">IOCCC Home</a></div>
<div class="outfit-font"><a href="../years.html">Winning Entries</a></div>
<div class="outfit-font"><a href="../authors.html">People who have won</a></div>
<div class="outfit-font"><a href="../location.html">Location of authors</a></div>
</div>
</div>
<div class="item">
<span class="item-header">
News
</span>
<div class="sub-item">
<div class="outfit-font"><a href="../news.html">IOCCC News</a></div>
<div class="outfit-font"><a href="../status.html">Contest status</a></div>
<div class="outfit-font"><a href="../next/index.html">Rules and Guidelines</a></div>
<div class="outfit-font"><a href="../faq.html#submit">How to enter the IOCCC</a></div>
<div class="outfit-font"><a href="../faq.html">FAQ</a></div>
</div>
</div>
<div class="item">
<span class="item-header">
Bugs
</span>
<div class="sub-item">
<div class="outfit-font"><a href="../bugs.html">Bugs &amp; (mis)features</a></div>
<div class="outfit-font"><a href="../faq.html#fix_an_entry">Fixing IOCCC entries</a></div>
<div class="outfit-font"><a href="../faq.html#fix_web_site">Fixing the web site</a></div>
<div class="outfit-font"><a href="../faq.html#fix_author">Fixing author info</a></div>
<div class="outfit-font"><a href="../thanks-for-help.html">Thanks for the help</a></div>
</div>
</div>
<div class="item">
<span class="item-header">
Judges
</span>
<div class="sub-item">
<div class="outfit-font"><a href="../judges.html">The IOCCC Judges</a></div>
<div class="outfit-font"><a href="../contact.html">Contacting the IOCCC</a></div>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- END: this line ends content from: inc/topbar.default.html -->
<!-- START: this line starts content from: inc/header.default.html -->
<div class="header">
@@ -57,68 +125,9 @@
</div>
<!-- END: this line ends content from: inc/navbar.default.html -->
<!-- START: this line starts content from: inc/begin-row.default.html -->
<div class="row">
<!-- END: this line ends content from: inc/begin-row.default.html -->
<!-- START: this line starts content from: inc/begin-leftcolumn.default.html -->
<div class="leftcolumn">
<!-- END: this line ends content from: inc/begin-leftcolumn.default.html -->
<!-- START: this line starts content from: inc/sidenav.default.html -->
<div class="sidenav">
<a href="#content">Jump to contents</a>
</div>
<hr>
<div class="sidenav">
<a href="../index.html">IOCCC Home</a>
<a href="../years.html">Winning Entries</a>
<a href="../authors.html">People who have won</a>
<a href="../location.html">Location of authors</a>
</div>
<hr>
<div class="sidenav">
<a href="../news.html">IOCCC News</a>
<a href="../status.html">Contest status</a>
<a href="../next/index.html">Rules and Guidelines</a>
<a href="../faq.html#submit">How to enter the IOCCC</a>
<a href="../faq.html">FAQ</a>
</div>
<hr>
<div class="sidenav">
<a href="../bugs.html">Bugs &amp; (mis)features</a>
<a href="../faq.html#fix_an_entry">Fixing IOCCC entries</a>
<a href="../faq.html#fix_web_site">Fixing the web site</a>
<a href="../faq.html#fix_author">Fixing author info</a>
<a href="../thanks-for-help.html">Thanks for the help</a>
</div>
<hr>
<div class="sidenav">
<a href="../judges.html">The IOCCC Judges</a>
<a href="../contact.html">Contacting the IOCCC</a>
</div>
<hr>
<div class="sidenav">
<a href="#top">Jump to top</a>
</div>
<!-- END: this line ends content from: inc/sidenav.default.html -->
<!-- START: this line starts content from: inc/end-leftcolumn.default.html -->
</div>
<!-- END: this line ends content from: inc/end-leftcolumn.default.html -->
<!-- START: this line starts content from: inc/begin-rightcolumn.default.html -->
<div class="rightcolumn">
<!-- END: this line ends content from: inc/begin-rightcolumn.default.html -->
<!-- START: this line starts content from: inc/before-content.default.html -->
<div id="content">
<div class="content" id="content">
<!-- END: this line ends content from: inc/before-content.default.html -->
<!-- START: this line starts content for HTML phase 21 by: bin/pandoc-wrapper.sh via bin/md2html.sh -->
@@ -362,14 +371,9 @@ HTML phases
<li>inc/topbar.default.html</li>
<li>inc/header.default.html</li>
<li>inc/navbar.default.html</li>
<li>inc/begin-row.default.html</li>
<li>inc/begin-leftcolumn.default.html</li>
<li>inc/sidenav.default.html</li>
<li>inc/end-leftcolumn.default.html</li>
<li>inc/begin-rightcolumn.default.html</li>
<li>inc/before-content.default.html</li>
</ol>
<p>Phases 12-19 are reserved for future use.</p>
<p>Phases 7-19 are reserved for future use.</p>
<ol start="20" type="1">
<li>((insert ‘before tool’ output))</li>
<li>((insert ‘pandoc wrapper tool’ output))</li>
@@ -378,12 +382,10 @@ HTML phases
<p>Phases 23-29 are reserved for future use.</p>
<ol start="30" type="1">
<li>inc/after-content.default.html</li>
<li>inc/end-rightcolumn.default.html</li>
<li>inc/end-row.default.html</li>
<li>inc/footer.default.html</li>
<li>inc/bottom.default.html</li>
</ol>
<p>Phases 35-39 are reserved for future use.</p>
<p>Phases 33-39 are reserved for future use.</p>
<p>In the above HTML phase numbers, except during HTML phase numbers 20-29, symbols
of the form <code>%%TOKEN%%</code> are substituted.</p>
<p>Any <code>%%TOKEN%%</code> printed by the ‘before tool’ (<code>-b tool</code>), the ‘pandoc wrapper
@@ -654,16 +656,6 @@ is directly under a <code>year</code> directory.</p>
</div>
<!-- END: this line ends content from: inc/after-content.default.html -->
<!-- START: this line starts content from: inc/end-rightcolumn.default.html -->
</div>
<!-- END: this line ends content from: inc/end-rightcolumn.default.html -->
<!-- START: this line starts content from: inc/end-row.default.html -->
</div>
<!-- END: this line ends content from: inc/end-row.default.html -->
<!-- START: this line starts content from: inc/footer.default.html -->
<!--
+14 -148
View File
@@ -327,9 +327,8 @@ function global_variable_setup
#
unset PHASE_NAME
declare -ag PHASE_NAME
PHASE_NAME=(top head body topbar header navbar begin-row begin-leftcolumn
sidenav end-leftcolumn end-leftcolumn begin-rightcolumn before-content
after-content end-rightcolumn end-row footer bottom)
PHASE_NAME=(top head body topbar header navbar before-content
after-content footer bottom)
unset HTML_PHASE_NAME
declare -Ag HTML_PHASE_NAME
for n in "${PHASE_NAME[@]}"; do
@@ -1905,110 +1904,15 @@ if [[ $status -ne 0 ]]; then
exit "$status"
fi
#############################################
# HTML phase 6: inc/begin-row.__name__.html #
#############################################
###################################################
# HTML phase 6: inc/before-content.__name__.html #
###################################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=6
CUR_PHASE_NAME="begin-row"
BASE_EXIT_CODE=70 # possible: exit 70 or exit 71 or exit 72 or exit 73 or exit 74
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
####################################################
# HTML phase 7: inc/begin-leftcolumn.__name__.html #
####################################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=7
CUR_PHASE_NAME="begin-leftcolumn"
BASE_EXIT_CODE=75 # possible: exit 75 or exit 76 or exit 77 or exit 78 or exit 79
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
###########################################
# HTML phase 8: inc/sidenav.__name__.html #
###########################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=8
CUR_PHASE_NAME="sidenav"
BASE_EXIT_CODE=80 # possible: exit 80 or exit 81 or exit 82 or exit 83 or exit 84
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
##################################################
# HTML phase 9: inc/end-leftcolumn.__name__.html #
##################################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=9
CUR_PHASE_NAME="end-leftcolumn"
BASE_EXIT_CODE=85 # possible: exit 85 or exit 86 or exit 87 or exit 88 or exit 89
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
#####################################################
# HTML phase 10: inc/begin-rightcolumn.__name__.html #
#####################################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=9
CUR_PHASE_NAME="begin-rightcolumn"
BASE_EXIT_CODE=90 # possible: exit 85 or exit 91 or exit 92 or exit 93 or exit 94
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
###################################################
# HTML phase 11: inc/before-content.__name__.html #
###################################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=11
CUR_PHASE_NAME="before-content"
BASE_EXIT_CODE=95 # possible: exit 95 or exit 96 or exit 97 or exit 98 or exit 99
BASE_EXIT_CODE=70 # possible: exit 70 or exit 71 or exit 72 or exit 73 or exit 74
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
@@ -2218,14 +2122,14 @@ if [[ $status -ne 0 ]]; then
exit "$status"
fi
####################################################
# HTML phase 31: inc/end-rightcolumn.__name__.html #
####################################################
###########################################
# HTML phase 31: inc/footer.__name__.html #
###########################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=31
CUR_PHASE_NAME="end-rightcolumn"
CUR_PHASE_NAME="footer"
BASE_EXIT_CODE=115 # possible: exit 115 or exit 116 or exit 117 or exit 118 or exit 119
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
@@ -2237,53 +2141,15 @@ if [[ $status -ne 0 ]]; then
exit "$status"
fi
############################################
# HTML phase 32: inc/end-row.__name__.html #
############################################
###########################################
# HTML phase 32: inc/bottom.__name__.html #
###########################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=32
CUR_PHASE_NAME="end-row"
BASE_EXIT_CODE=120 # possible: exit 120 or exit 121 or exit 122 or exit 123 or exit 124
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
###########################################
# HTML phase 33: inc/footer.__name__.html #
###########################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=33
CUR_PHASE_NAME="footer"
BASE_EXIT_CODE=125 # possible: exit 125 or exit 126 or exit 127 or exit 128 or exit 129
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"
if [[ $status -ne 0 ]]; then
echo "$0: ERROR: append_html_phase" \
"$CUR_PHASE_NUM $CUR_PHASE_NAME $BASE_EXIT_CODE $TMP_SED_SCRIPT $TMP_PHASE $TMP_INDEX_HTML," \
"error code: $status" 1>&2
exit "$status"
fi
###########################################
# HTML phase 34: inc/bottom.__name__.html #
###########################################
# NOTE: See inc/md2html.cfg for details on HTML phase numbers, HTML phase names, and HTML phase files
#
CUR_PHASE_NUM=34
CUR_PHASE_NAME="bottom"
BASE_EXIT_CODE=130 # possible: exit 130 or exit 131 or exit 132 or exit 133 or exit 134
BASE_EXIT_CODE=120 # possible: exit 120 or exit 121 or exit 122 or exit 123 or exit 124
#
append_html_phase "$CUR_PHASE_NUM" "$CUR_PHASE_NAME" "$BASE_EXIT_CODE" "$TMP_SED_SCRIPT" "$TMP_PHASE" "$TMP_INDEX_HTML"
status="$?"