From ea05499f777ee35c3ff68b84107ea3dfc4c016e8 Mon Sep 17 00:00:00 2001 From: Kurt H Maier Date: Mon, 25 May 2020 00:47:51 -0700 Subject: [PATCH] lib+css: update to html5 tags, classless css --- lib/default_master.tpl | 31 ++-- lib/footer.inc | 11 +- lib/top_bar.inc | 9 +- pub/style/style.css | 359 ++++-------------------------------- pub/style/style.werc140.css | 330 +++++++++++++++++++++++++++++++++ 5 files changed, 386 insertions(+), 354 deletions(-) mode change 100755 => 100644 pub/style/style.css create mode 100755 pub/style/style.werc140.css diff --git a/lib/default_master.tpl b/lib/default_master.tpl index e894042..6742c49 100644 --- a/lib/default_master.tpl +++ b/lib/default_master.tpl @@ -1,35 +1,26 @@ - + +

%($"siteTitle%) %($"siteSubTitle%)

+ % if(! ~ $#handlers_bar_left 0) { - + % } -
- +
% run_handlers $handlers_body_head - % run_handler $handler_body_main - % run_handlers $handlers_body_foot +
-
- - + diff --git a/lib/footer.inc b/lib/footer.inc index 52d06fb..1eac7d8 100644 --- a/lib/footer.inc +++ b/lib/footer.inc @@ -1,6 +1,7 @@ -
Powered by werc
- -
User Login
+
Powered by werc
-
-
+
User Login + +
diff --git a/lib/top_bar.inc b/lib/top_bar.inc index 4615920..cbb89b8 100644 --- a/lib/top_bar.inc +++ b/lib/top_bar.inc @@ -1,4 +1,4 @@ -
+
gsoc | doc archive | software repo | @@ -8,9 +8,8 @@ cat-v.org
-
- Related sites: - | site updates - | site map +
+ site updates | + site map
diff --git a/pub/style/style.css b/pub/style/style.css old mode 100755 new mode 100644 index e3261e9..8d24664 --- 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; } diff --git a/pub/style/style.werc140.css b/pub/style/style.werc140.css new file mode 100755 index 0000000..e3261e9 --- /dev/null +++ b/pub/style/style.werc140.css @@ -0,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; +}