ref: 6f531df8ef6eeba985acd699ba1a443b2df8b308
parent: e7cc786809c7be924a364aaa242f90d37d9a0520
author: khm <[email protected]>
date: Sun May 24 20:47:51 EDT 2020
lib+css: update to html5 tags, classless css
--- a/lib/default_master.tpl
+++ b/lib/default_master.tpl
@@ -1,35 +1,26 @@
-<div id="header">
- <div class="superHeader">
+<header>
+ <nav>
% cat `{ get_lib_file top_bar.inc }- </div>
+ </nav>
+ <h1><a href="/">%($"siteTitle%) <span id="headerSubTitle">%($"siteSubTitle%)</span></a></h1>
+</header>
- <div class="midHeader">
- <h1 class="headerTitle"><a href="/">%($"siteTitle%) <span id="headerSubTitle">%($"siteSubTitle%)</span></a></h1>
- </div>
-
- <div class="subHeader"><br></div>
-</div>
-
% if(! ~ $#handlers_bar_left 0) {- <div id="side-bar">
+ <nav id="side-bar">
% for(h in $handlers_bar_left) {<div>
% run_handler $$h
</div>
% }
- </div>
+ </nav>
% }
-<div id="main-copy">
-
+<article>
% run_handlers $handlers_body_head
-
% run_handler $handler_body_main
-
% run_handlers $handlers_body_foot
+</article>
-</div>
-
-<div id="footer">
+<footer>
% cat `{ get_lib_file footer.inc }-</div>
+</footer>
--- a/lib/footer.inc
+++ b/lib/footer.inc
@@ -1,6 +1,7 @@
-<div class="left"><a href="http://werc.cat-v.org/">Powered by werc</a></div>
-<!-- TODO Maybe should add a programatically generated google search box -->
-<div class="right"><a href="/_users/login">User Login</a></div>
+<div><a href="http://werc.cat-v.org/">Powered by werc</a></div>
-<br>
-<br class="doNotDisplay doNotPrint">
+<div><a href="/_users/login">User Login</a>
+<!-- TODO: add duckduckgo site search
+<form action="/_search" method=get><input type=text name=q />
+-->
+</div>
--- a/lib/top_bar.inc
+++ b/lib/top_bar.inc
@@ -1,4 +1,4 @@
- <div class="left">
+ <div>
<a href="http://gsoc.cat-v.org">gsoc</a> |
<a href="http://doc.cat-v.org">doc archive</a> |
<a href="http://repo.cat-v.org">software repo</a> |
@@ -8,9 +8,8 @@
<a href="http://cat-v.org">cat-v.org</a>
</div>
- <div class="right">
- <span class="doNotDisplay">Related sites:</span>
- | <a href="http://cat-v.org/update_log">site updates</a>
- | <a href="/sitemap">site map</a>
+ <div>
+ <a href="http://cat-v.org/update_log">site updates</a> |
+ <a href="/sitemap">site map</a>
</div>
--- a/pub/style/style.css
+++ b/pub/style/style.css
@@ -1,330 +1,41 @@
-/* Default werc style */
+body { display: flex; flex-wrap: wrap; font-family: sans; }+header { flex-basis: 100%; flex-shrink: 0; }+article { flex-basis: 60%; padding-left: 1em; }+footer { flex-basis: 100%; flex-shrink: 0; }+header nav { display: flex; justify-content: space-between; }+nav a, header a { text-decoration: none ; color: inherit; }+header h1 span { margin-left: 1em; font-size: 50%; font-style: italic; }+body > nav { flex-basis: content; padding-right: 1vw; min-width: 16em; }+nav ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0; }+nav li ul { padding-left: 0.6em }+footer { display: flex; justify-content: space-between; }-body {- color: black;
- background-color: white;
- font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
- font-size: 84%; /* Enables font size scaling in MSIE */
- margin: 0;
- padding: 0;
-}
+/* cut here to leave vanity behind */
+body { margin:0; padding: 0; font-size: 84%; font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif; }+a { text-decoration: none; color: }+a:hover { text-decoration: underline }-/* # Header # */
-.superHeader {- color: white;
- background-color: rgb(100,135,220);
- height: 1.6em;
-}
+/* header and top bar */
+header nav { background-color: rgb(100,135,220); color: white; padding: 0.3em; border-bottom: 2px solid black; font-size: 91%; }+header h1 { background-color: #ff6d06; color: black; margin: 0; border-bottom: 2px solid black; font-weight: normal; padding: 0.25ex; font-size: 233%; }-.superHeader img { vertical-align: bottom; }+/* sidebar */
+body > nav { border-right: 1px solid #ddd; padding: 0; } +body > nav > div { border-bottom: 1px solid #ddd; } +body > nav > div a { color: rgb(0, 102, 204); display: block; text-transform: capitalize; font-weight: bold; padding: 0.25em 1ex 0.25em 2mm; font-size: 102%} +body > nav > div a:hover { color: white; background-color: rgb(100,135,220); border-left: black solid 0.2em; text-decoration: none; }+body > nav > div p { font-weight: bold; margin: 0 0 0.5em 2mm; padding: 1em 0 0 0; }-.superHeader a {- color: white;
- background-color: transparent;
- font-size: 91%;
- margin: 0;
- padding: 0 0.5ex 0 0.25ex;
-}
+/* main copy */
+article { padding: 0.5ex 0 5vh 1vw; }+article h1, article h2 { color: rgb(0,102,204); font-weight: bold; margin: 2em 0 0 0; border-bottom: 2px solid rgb(0,102,204); }+article h3, article h4, article h5 { color: rgb(0,102,204); font-weight: bold; margin: 2em 0 0 0; }+article h6, article h7, article h8 { color: rgb(0,102,204); font-weight: bold; margin: 2em 0 0 0; }+article a { color: rgb(0,102,204); }+article a:hover { color: rgb(100,135,220); }-a { text-decoration: none; }-a:hover { text-decoration: underline; }-
-.superHeader div {- position: absolute;
- top: 0.40ex;
-}
-
-.superHeader .left { left: 0.4em; }-.superHeader .right { right: 0.4em; }-
-.midHeader {- color: rgb(39,78,144);
- background-color: rgb(140,170,230);
- background-color: #ff6d06;
- border: solid 0 black;
- border-width: 2px 0;
-}
-
-.headerTitle {- color: black;
- font-size: 233%;
- font-weight: normal;
- margin: 0 0 0 4mm;
- padding: 0.25ex 0;
-}
-#headerSubTitle {- font-size: 50%;
- font-style: italic;
- margin-left: 1em;
-}
-
-.headerTitle a { color: black; }-.headerTitle a:hover { text-decoration: none; }-
-.subHeader {- display: none;
- color: white;
- background-color: rgb(0,51,153);
- margin: 0;
- padding: 1ex 1ex 1ex 1.5mm;
-}
-
-.subHeader a {- color: white;
- background-color: transparent;
- font-weight: bold;
- margin: 0;
- padding: 0 0.75ex 0 0.5ex;
-}
-
-.superHeader .highlight, .subHeader .highlight {- color: rgb(253,160,91);
- background-color: transparent;
-}
-
-
-/* # Side # */
-#side-bar {- width: 16em;
- float: left;
- clear: left;
- border-right: 1px solid #ddd;
-}
-
-#side-bar div {- border-bottom: 1px solid #ddd;
-}
-
-.sideBarTitle {- font-weight: bold;
- margin: 0 0 0.5em 2mm;
- padding: 1em 0 0 0;
-}
-
-#side-bar ul {- list-style-type: none;
- list-style-position: outside;
- margin: 0;
- padding: 0 0 0.3em 0;
-}
-
-li ul {- padding-left: 0.6em !important;
-}
-
-#side-bar li {- margin: 0;
- padding: 0.1ex 0; /* Circumvents a rendering bug (?) in MSIE 6.0 XXX should move to iehacks.css, this causes an ugly gap */
-}
-
-#side-bar a {- color: rgb(0,102,204);
- background-color: transparent;
- margin: 0;
- padding: 0.25em 1ex 0.25em 2mm;
- display: block;
- text-transform: capitalize;
- font-weight: bold!important;
- font-size: 102%;
- border-left: white solid 0.2em;
-}
-
-.thisPage, .thisPage a {- color: black!important;
- background-color: white;
- padding-left: 5mm;
-}
-
-#side-bar a:hover {- color: white;
- background-color: rgb(100,135,220);
- border-left: black solid 0.2em;
- text-decoration: none;
-}
-
-.sideBarText {- line-height: 1.5em;
- margin: 0 0 1em 0;
- padding: 0 1.5ex 0 2.5mm;
- display: block;
-}
-
-#side-bar .sideBarText a {- margin: 0;
- padding: 0;
- display: inline;
-}
-
-#side-bar .sideBarText a:hover {- color: rgb(0,102,204);
- background-color: transparent;
- text-decoration: none;
-}
-
-
-/* # Main Copy # */
-#main-copy {- max-width: 70em;
- color: black;
- background-color: transparent;
- text-align: justify;
- line-height: 1.5em;
- margin: 0em 0 0 16em;
- padding: 0.5mm 5mm 5mm 5mm;
- border-left: 1px solid #ddd;
-}
-
-#bodyText {- margin: 0 0 0 15.5em;
- padding: 2mm 5mm 2mm 5mm;
-}
-
-#main-copy p {- margin: 1em 1ex 1em 1ex !important; /* Need !important so troff-generated pages don't look totally squezed */
- padding: 0;
-}
-
-#main-copy a {- color: rgb(0,102,204);
- background-color: transparent;
-}
-
-#main-copy a:hover {- color: rgb(100,135,220);
-}
-
-#main-copy h1, #main-copy h2 {- color: rgb(0,102,204);
- background-color: transparent;
- font-size: 145.5%;
- font-weight: bold;
- margin: 2em 0 0 0;
- padding: 0.5ex 0 0.5ex 0.6ex;
- border-bottom: 2px solid rgb(0,102,204);
-}
-
-#main-copy h2 {- font-size: 115.5%;
- border-bottom: 1px solid rgb(0,102,204);
-}
-
-#main-copy .topOfPage {- color: rgb(0,102,204);
- background-color: transparent;
- font-size: 91%;
- font-weight: bold;
- text-decoration: none;
- margin: 3ex 1ex 0 0;
- padding: 0;
- float: right;
-}
-
-dl {- margin: 1em 1ex 2em 1ex;
- padding: 0;
-}
-
-dt {- font-weight: bold;
- margin: 0 0 0 0;
- padding: 0;
-}
-
-dd {- margin: 0 0 2em 2em;
- padding: 0;
-}
-
-
-/* # Footer # */
-#footer {- color: white;
- background-color: rgb(100,135,220);
- padding: 1em;
- clear: both;
-}
-
-#footer .left {- text-align: left;
- line-height: 1.55em;
- float: left;
- clear: left;
-}
-
-#footer .right {- text-align: right;
- line-height: 1.45em;
-}
-
-#footer a {- color: white;
- background-color: transparent;
-}
-
-
-/* GENERAL */
-
-table {- border: solid 1px black;
-}
-th {- background-color: #abc;
- border: solid 1px black;
- text-align: center;
-}
-td {- background-color: #def;
- border: solid 1px black;
-}
-
-hr {- border-width: 0px 0px 0.1em 0px;
- border-color: black;
-}
-
-acronym, .titleTip {- border-bottom: 1px solid #ddd;
- cursor: help;
- margin: 0;
- padding: 0 0 0.4px 0;
-}
-
-pre {- margin-left: 2em;
- font-size: 1.2em;
-}
-
-blockquote {- border-left: 1px solid blue;
- font-style: italic;
-}
-
-.smallCaps {- font-size: 110%;
- font-variant: small-caps;
-}
-
-.doNotDisplay { display: none; }-
-
-.notify_errors,
-.notify_notes,
-.notify_success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }-
-.notify_errors { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }-.notify_notes { background: #FFF6BF; color: #514721; border-color: #FFD324; }-.notify_success { background: #E6EFC2; color: #264409; border-color: #C6D880; }-.notify_errors a { color: #8a1f11; }-.notify_notes a { color: #514721; }-.notify_success a { color: #264409; }-
-
-/* # Page/Handler specific # */
-h1.dir-list-head, ul.dir-list {- text-transform: capitalize;
- font-weight: bold;
-}
-ul.sitemap-list a {- text-transform: capitalize;
-}
+/* footer */
+footer { color: white; background-color: rgb(100,135,220); }+footer a { color: inherit; }+footer div { padding: 1em; }--- /dev/null
+++ b/pub/style/style.werc140.css
@@ -1,0 +1,330 @@
+/* Default werc style */
+
+body {+ color: black;
+ background-color: white;
+ font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
+ font-size: 84%; /* Enables font size scaling in MSIE */
+ margin: 0;
+ padding: 0;
+}
+
+
+/* # Header # */
+.superHeader {+ color: white;
+ background-color: rgb(100,135,220);
+ height: 1.6em;
+}
+
+.superHeader img { vertical-align: bottom; }+
+.superHeader a {+ color: white;
+ background-color: transparent;
+ font-size: 91%;
+ margin: 0;
+ padding: 0 0.5ex 0 0.25ex;
+}
+
+a { text-decoration: none; }+a:hover { text-decoration: underline; }+
+.superHeader div {+ position: absolute;
+ top: 0.40ex;
+}
+
+.superHeader .left { left: 0.4em; }+.superHeader .right { right: 0.4em; }+
+.midHeader {+ color: rgb(39,78,144);
+ background-color: rgb(140,170,230);
+ background-color: #ff6d06;
+ border: solid 0 black;
+ border-width: 2px 0;
+}
+
+.headerTitle {+ color: black;
+ font-size: 233%;
+ font-weight: normal;
+ margin: 0 0 0 4mm;
+ padding: 0.25ex 0;
+}
+#headerSubTitle {+ font-size: 50%;
+ font-style: italic;
+ margin-left: 1em;
+}
+
+.headerTitle a { color: black; }+.headerTitle a:hover { text-decoration: none; }+
+.subHeader {+ display: none;
+ color: white;
+ background-color: rgb(0,51,153);
+ margin: 0;
+ padding: 1ex 1ex 1ex 1.5mm;
+}
+
+.subHeader a {+ color: white;
+ background-color: transparent;
+ font-weight: bold;
+ margin: 0;
+ padding: 0 0.75ex 0 0.5ex;
+}
+
+.superHeader .highlight, .subHeader .highlight {+ color: rgb(253,160,91);
+ background-color: transparent;
+}
+
+
+/* # Side # */
+#side-bar {+ width: 16em;
+ float: left;
+ clear: left;
+ border-right: 1px solid #ddd;
+}
+
+#side-bar div {+ border-bottom: 1px solid #ddd;
+}
+
+.sideBarTitle {+ font-weight: bold;
+ margin: 0 0 0.5em 2mm;
+ padding: 1em 0 0 0;
+}
+
+#side-bar ul {+ list-style-type: none;
+ list-style-position: outside;
+ margin: 0;
+ padding: 0 0 0.3em 0;
+}
+
+li ul {+ padding-left: 0.6em !important;
+}
+
+#side-bar li {+ margin: 0;
+ padding: 0.1ex 0; /* Circumvents a rendering bug (?) in MSIE 6.0 XXX should move to iehacks.css, this causes an ugly gap */
+}
+
+#side-bar a {+ color: rgb(0,102,204);
+ background-color: transparent;
+ margin: 0;
+ padding: 0.25em 1ex 0.25em 2mm;
+ display: block;
+ text-transform: capitalize;
+ font-weight: bold!important;
+ font-size: 102%;
+ border-left: white solid 0.2em;
+}
+
+.thisPage, .thisPage a {+ color: black!important;
+ background-color: white;
+ padding-left: 5mm;
+}
+
+#side-bar a:hover {+ color: white;
+ background-color: rgb(100,135,220);
+ border-left: black solid 0.2em;
+ text-decoration: none;
+}
+
+.sideBarText {+ line-height: 1.5em;
+ margin: 0 0 1em 0;
+ padding: 0 1.5ex 0 2.5mm;
+ display: block;
+}
+
+#side-bar .sideBarText a {+ margin: 0;
+ padding: 0;
+ display: inline;
+}
+
+#side-bar .sideBarText a:hover {+ color: rgb(0,102,204);
+ background-color: transparent;
+ text-decoration: none;
+}
+
+
+/* # Main Copy # */
+#main-copy {+ max-width: 70em;
+ color: black;
+ background-color: transparent;
+ text-align: justify;
+ line-height: 1.5em;
+ margin: 0em 0 0 16em;
+ padding: 0.5mm 5mm 5mm 5mm;
+ border-left: 1px solid #ddd;
+}
+
+#bodyText {+ margin: 0 0 0 15.5em;
+ padding: 2mm 5mm 2mm 5mm;
+}
+
+#main-copy p {+ margin: 1em 1ex 1em 1ex !important; /* Need !important so troff-generated pages don't look totally squezed */
+ padding: 0;
+}
+
+#main-copy a {+ color: rgb(0,102,204);
+ background-color: transparent;
+}
+
+#main-copy a:hover {+ color: rgb(100,135,220);
+}
+
+#main-copy h1, #main-copy h2 {+ color: rgb(0,102,204);
+ background-color: transparent;
+ font-size: 145.5%;
+ font-weight: bold;
+ margin: 2em 0 0 0;
+ padding: 0.5ex 0 0.5ex 0.6ex;
+ border-bottom: 2px solid rgb(0,102,204);
+}
+
+#main-copy h2 {+ font-size: 115.5%;
+ border-bottom: 1px solid rgb(0,102,204);
+}
+
+#main-copy .topOfPage {+ color: rgb(0,102,204);
+ background-color: transparent;
+ font-size: 91%;
+ font-weight: bold;
+ text-decoration: none;
+ margin: 3ex 1ex 0 0;
+ padding: 0;
+ float: right;
+}
+
+dl {+ margin: 1em 1ex 2em 1ex;
+ padding: 0;
+}
+
+dt {+ font-weight: bold;
+ margin: 0 0 0 0;
+ padding: 0;
+}
+
+dd {+ margin: 0 0 2em 2em;
+ padding: 0;
+}
+
+
+/* # Footer # */
+#footer {+ color: white;
+ background-color: rgb(100,135,220);
+ padding: 1em;
+ clear: both;
+}
+
+#footer .left {+ text-align: left;
+ line-height: 1.55em;
+ float: left;
+ clear: left;
+}
+
+#footer .right {+ text-align: right;
+ line-height: 1.45em;
+}
+
+#footer a {+ color: white;
+ background-color: transparent;
+}
+
+
+/* GENERAL */
+
+table {+ border: solid 1px black;
+}
+th {+ background-color: #abc;
+ border: solid 1px black;
+ text-align: center;
+}
+td {+ background-color: #def;
+ border: solid 1px black;
+}
+
+hr {+ border-width: 0px 0px 0.1em 0px;
+ border-color: black;
+}
+
+acronym, .titleTip {+ border-bottom: 1px solid #ddd;
+ cursor: help;
+ margin: 0;
+ padding: 0 0 0.4px 0;
+}
+
+pre {+ margin-left: 2em;
+ font-size: 1.2em;
+}
+
+blockquote {+ border-left: 1px solid blue;
+ font-style: italic;
+}
+
+.smallCaps {+ font-size: 110%;
+ font-variant: small-caps;
+}
+
+.doNotDisplay { display: none; }+
+
+.notify_errors,
+.notify_notes,
+.notify_success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }+
+.notify_errors { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }+.notify_notes { background: #FFF6BF; color: #514721; border-color: #FFD324; }+.notify_success { background: #E6EFC2; color: #264409; border-color: #C6D880; }+.notify_errors a { color: #8a1f11; }+.notify_notes a { color: #514721; }+.notify_success a { color: #264409; }+
+
+/* # Page/Handler specific # */
+h1.dir-list-head, ul.dir-list {+ text-transform: capitalize;
+ font-weight: bold;
+}
+ul.sitemap-list a {+ text-transform: capitalize;
+}