commit 3bebdf43b809427d43e42804358177ff2633257a
parent 175da9bcca8152c54fb9877398fcd5d30e983291
Author: Nils Gillmann <ng0@n0.is>
Date: Tue, 9 Oct 2018 06:42:47 +0000
first commit with improved sidebar
Signed-off-by: Nils Gillmann <ng0@n0.is>
Diffstat:
5 files changed, 182 insertions(+), 43 deletions(-)
diff --git a/_template_.html b/_template_.html
@@ -26,38 +26,22 @@
<p align="center">
%(choices)s
</p>
+ <!-- TODO: breadcrumbs -->
<hr>
-
- <!-- Table 1: contains the sidebar and the body. -->
- <table cellspacing="3" cellpadding="0" border="0" align="center" width="100%%">
- <tr valign="top">
- <td>
- <!-- Table 2: The sidebar-->
- <table align="right" cellspacing="0" cellpadding="5" width="100" class="sidebar">
- <tr valign="top">
- <td>
- <p class="l1">
- <strong>%(sectiontypes)s:</strong><br />
- </p>
- %(sections)s
- <br>
- <a href="#">Go to top</a>
- </td>
- </tr>
- </table><!-- End of table 2 -->
- </td>
- <td width="85%%">
- <h2>Publications by %(field)s</h2>
-
- <ul class="sections">
- %(entries)s
- </ul>
- </td>
- <td width="5%%"><br /></td>
- </tr>
- </table><!-- End of table 1 -->
-
-
+ <section>
+ <h2>Publications by %(field)s</h2>
+ <div class="sheet">
+ <ul class="sections">
+ %(entries)s
+ </ul>
+ </div>
+ <section class="side-bar">
+ <strong>%(sectiontypes)s:</strong><br>
+ <ul class="bar-list">
+ %(sections)s
+ </ul>
+ </section>
+ </section>
<hr>
<p class="contact">
Please send new or corrected entries to
diff --git a/_template_bibtex.html b/_template_bibtex.html
@@ -29,11 +29,11 @@
<a href='./topic.html'>By topic</a> |
<a href='./date.html'>By date</a> |
<a href='./author.html'>By author</a>
- </p>
+ </p>
<hr>
- <table cellspacing="15" border="0" align="center" width="100%%">
+ <p>
%(entries)s
- </table>
+ </p>
<hr>
<p>
<br>
diff --git a/css/main.css b/css/main.css
@@ -91,11 +91,11 @@ A:visited {
}
H1, H2, H3, H4, H5, H6 {
- font-family: lucidatypewriter, "Lucida Typewriter", "Lucida Console", Monaco, monospace;
+ font-family: lucidatypewriter, "Lucida Typewriter", "Lucida Console", Monaco, sans-serif;
}
H1 A, H2 A, H3 A, H4 A, H5 A, H6 A {
- font-family: lucidatypewriter, "Lucida Typewriter", "Lucida Console", Monaco, monospace;
+ font-family: lucidatypewriter, "Lucida Typewriter", "Lucida Console", Monaco, sans-serif;
}
H1 {
@@ -109,3 +109,125 @@ H2 {
H3 {
color: #006;
}
+
+.side-bar {
+ box-sizing: border-box;
+ color: black;
+ font-size: 0.9em;
+ padding: 30px 0px;
+}
+.bar-title {
+ color: black;
+ font-size: 14px;
+}
+
+.bar-box-padded {
+ padding: 10px;
+}
+
+.bar-list {
+ list-style-type: none;
+ padding: 0px;
+}
+
+.bar-item {
+ display: inline-block;
+ margin: 10px 5px;
+ vertical-align: top;
+}
+
+.bar-link:link, .bar-link:visited {
+ border-color: silver;
+ border-radius: 4px;
+ border-style: solid;
+ border-width: thin;
+ color: black;
+ padding: 5px 10px;
+}
+
+.bar-link:active, .bar-link:focus, .bar-link:hover {
+ background-color: #FF73F4;
+ border-color: #FF73F4;
+}
+
+.feed-link {
+ background-image: url("/static/base/img/feed-bg-white.png");
+ background-position: bottom left;
+ background-repeat: no-repeat;
+}
+
+*/
+.a11y-offset {
+ position: absolute;
+ left: -50000px;
+}
+
+@media screen and (min-width: 1280px) {
+ .side-bar {
+ border-color: #999;
+ border-radius: 4px;
+ border-style: solid;
+ border-width: thin;
+ display: inline-block;
+ padding: 0px;
+ text-align: left;
+ vertical-align: top;
+ width: 250px;
+ }
+
+ .bar-title {
+ background-color: #F5F5F5;
+ font-weight: normal;
+ margin: 0px;
+ padding: 8px;
+ }
+
+ .bar-title-top {
+ border-radius: 4px 4px 0px 0px;
+ }
+
+ .bar-list {
+ margin: 0px;
+ }
+
+ .bar-item {
+ display: block;
+ margin: 0px;
+ }
+
+ .bar-link:link,
+ .bar-link:visited {
+ border-color: #F5F5F5;
+ border-radius: 0px;
+ border-style: solid none none none;
+ display: block;
+ margin: 0px;
+ padding: 8px 8px 8px 16px;
+ }
+}
+.sheet {
+ box-sizing: border-box;
+}
+
+.table-box {
+ overflow-x: auto;
+}
+
+.top-shadow-bg {
+ background-image: url("../img/top-shadow-bg.png");
+ background-repeat: repeat-x;
+}
+
+
+
+@media screen and (min-width: 1280px) {
+ .sheet {
+ display: inline-block;
+ vertical-align: top;
+ width: 75%;
+ }
+
+ .sheet-padded {
+ padding-right: 20px;
+ }
+
diff --git a/css/pubs.css b/css/pubs.css
@@ -98,7 +98,7 @@ P.draftEntry {
margin-bottom: 0;
}
-p.abstract {
+pre.bibtex, p.abstract {
background-color: #F2EFE4;
border-style: solid;
border-color: #D4CBB6;
@@ -106,6 +106,7 @@ p.abstract {
border-width: thin;
overflow: auto;
padding: 2em;
+ font-size: smaller;
}
@@ -114,6 +115,11 @@ TABLE.sidebar {
border-color: black;
border-style: solid;
background-color: #CFF;
+ /* new: */
+ border-collapse: collapse;
+ margin: 0;
+ padding: 0;
+ table-layout: fixed;
}
TD.bibtex {
@@ -125,8 +131,35 @@ TD.bibtex {
background-color: #DFF;
}
-PRE.bibtex {
- font-family: lucidatypewriter, "Lucida Typewriter", Monaco, "Lucida Sans Unicode", monospace;
- font-size: smaller;
+/* PRE.bibtex { */
+/* font-family: lucidatypewriter, "Lucida Typewriter", Monaco, "Lucida Sans Unicode", monospace; */
+/* font-size: smaller; */
+/* } */
+
+
+@media screen and (max-width: 600px) {
+ table thead {
+ border: none;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
+ table tr {
+ border-bottom: 1px solid black;
+ display: block;
+ }
+
+ table td {
+ border-bottom: 1px solid black;
+ display: block;
+ text-align: right;
+ }
+ table td::before {
+ content: attr(data-label);
+ float: right;
+ }
}
-
diff --git a/writeHTML.py b/writeHTML.py
@@ -69,12 +69,12 @@ def writeHTML(f, sections, sectionType, fieldName, choices,
title = config.TAG_TITLES[tag]
short_title = config.TAG_SHORT_TITLES[tag]
- #
+ # what used to be the sidebar:
secStr = []
for s, _ in sections:
hts = re.sub(r'\s+', ' ', s.strip())
hts = s.replace(" ", " ")
- secStr.append("<p class='l2'><a href='#%s'>%s</a></p>\n"%
+ secStr.append("<li class='bar-item'><a class='bar-link' href='#%s'>%s</a></li>\n"%
((BibTeX.url_untranslate(s), hts)))
secStr = "".join(secStr)
