update ioccc.css, add HTML templates & test page

The ioccc.css Cascading Style Sheet has updated.
This CSS will serve as a model for generated HTML pages,
especially HTML generated form markdown.
The top level HTML pages will also use this CSS.

This CSS is intended to be functional, black/gray/white, and
good enough for testing purposes.

Added HTML page templates that will be used
by tools in forming HTML pages:

* tmp/template-top.html
* tmp/template-header.html
* tmp/template-footer.html

See the modified
[tmp/README.md](https://ioccc-src.github.io/temp-test-ioccc/tmp/README.md#templates)
for info on the HTML page templates.

Added a test page containing dummy HTML:

* [tmp/test.html](https://ioccc-src.github.io/temp-test-ioccc/tmp/test.html)

This test page was generated from the above mentioned HTML page templates.
It is designed for 3 screen sizes:

* wide screens: 801 pixels wide and larger
* medium-sized screens: 401 pixels to 800 pixels wide
* small-sized screens: 400 pixels wide and smaller

NOTE: Some of top and side bar navigation links do not (yet) work.

If all goes well, the main web site can launch with web pages that
are based on the final ioccc.css.  After the main web site is update,
a web designer can improve the look and feel of the web site by
adjusting the ioccc.css, the HTML templates, and the tools used to
generate HTML content.
This commit is contained in:
Landon Curt Noll committed 2023-11-29 23:35:08 -08:00
1 parent 7df40a150d
commit 7d9111cdda
6 files changed
+870

No files matched your search

+60
View File
@@ -0,0 +1,60 @@
<!-- -->
<head>
<link rel="stylesheet" href="%%DOCROOT_URL_SLASH%%ioccc.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>%%TITIE%%</title>
<meta name="description" content="%%DESCRIPTION%%">
<meta name="keywords" content="%%KEYWORDS%%">
</head>
<body>
<div class="header">
<img src="%%DOCROOT_URL_SLASH%%png/ioccc.png" alt="IOCCC image by Matt Zucker" width=300 height=110>
<h1>%%HEADER_1%%</h1>
<h2>%%HEADER_2%%</h2>
</div>
<div class="topnav">
<a href="%%LEFT_LINK%%">&larr; %%LEFT_TEXT%%</a>
<a href="%%UP_LINK%%">&uarr; %%UP_TEXT%% &uarr;</a>
<a href="%%RIGHT_LINK%%">%%RIGHT_TEXT%% &rarr;</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="sidenav">
<a href="#content">Jump to contents</a>
</div>
<hr>
<div class="sidenav">
<a href="%%DOCROOT_URL_SLASH%%index.html">IOCCC Home</a>
<a href="%%DOCROOT_URL_SLASH%%years.html">Winning Entries</a>
<a href="%%DOCROOT_URL_SLASH%%winners.html">People who have won</a>
</div>
<hr>
<div class="sidenav">
<a href="%%DOCROOT_URL_SLASH%%news.html">IOCCC News</a>
<a href="%%DOCROOT_URL_SLASH%%judges.html">The IOCCC Judges</a>
<a href="%%DOCROOT_URL_SLASH%%contact.html">Contacting the IOCCC</a>
<a href="%%DOCROOT_URL_SLASH%%faq.html">FAQ</a>
</div>
<hr>
<div class="sidenav">
<a href="%%DOCROOT_URL_SLASH%%faq.html#fix_a_winner">Fixing IOCCC winners</a>
<a href="%%DOCROOT_URL_SLASH%%faq.html#fix_web_site">Fixing the web site</a>
<a href="%%DOCROOT_URL_SLASH%%bugs.html">Bugs &amp; (mis)features</a>
<a href="%%DOCROOT_URL_SLASH%%thanks-for-fixes.html">Thanks for the fixes</a>
</div>
<hr>
<div class="sidenav">
<a href="#top">Jump to top</a>
</div>
</div>
<div class="rightcolumn">
<a name="content"></a>