diff --git a/styles.css.pp b/styles.css.pp
index 4ebc3c7..d87da71 100644
--- a/styles.css.pp
+++ b/styles.css.pp
@@ -218,8 +218,6 @@ margin-right: ◊|default-margin|;
◊(define content-width "29rem")
#content {
- border-top: 0.3rem solid ◊|content-rule-color|;
- border-bottom: 0.3rem solid ◊|content-rule-color|;
width: ◊|content-width|;
padding: 3rem 0 8rem 0;
}
@@ -600,65 +598,82 @@ margin-left: ◊(+ single-quote-width)em;
◊(define nav-width "3rem")
◊(define big-nav-width "8rem")
-◊(define border-width "0px")
-.nav-inner {
- border: solid ◊border-width grey;
+#top-stripe {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ left: 2rem;
+ width: 38rem;
+ border-bottom: 0.2rem solid ◊|content-rule-color|;
+}
+
+#prev .nav-inner,
+#next .nav-inner {
position: fixed;
}
#bottom .nav-inner {
+ border-top: 0.2rem solid ◊|content-rule-color|;
opacity: 0.95;
position: absolute;
+ left: 2rem;
+ width: 38rem;
}
-
-#navtable #left .xref:before {
- content: "← ";
+#bottom a {
+ border-bottom: inherit;
}
-#navtable #right .xref:after {
- content: " →";
-}
-#navtable {
- margin: 0;
- height: 100%;
- width: ◊|content-width|;
+
+#left a.xref:before {
+ content: "← ";
}
-#navtable td {
- vertical-align: top; ◊; otherwise vertical centering happens
- padding: 0; ◊; to allow links to fill whole td
+#right a.xref:after {
+ content: " →";
}
-#navtable a.xref {
+#bottom a.xref {
display: block;
+ text-align: center;
box-sizing: content-box; ◊; must override border-box setting here
- padding: 0.3rem;
+ padding: 0.4rem;
padding-bottom: 0.6rem;
- height: 100%;
+ height: 2rem;
background: none;
color: black;
line-height: 1.1;
font-size: 85%;
opacity: 0.5; ◊; this works better than straight gray, which Webkit renders heavy
+ transition: opacity 0.2s;
}
-#navtable a.xref:hover {
- opacity: 1;
+#bottom .span {
+ display: inline-block,
+ width: 12%;
}
-#navtable td:hover, #tfl-fonts-nav tr + tr td:hover {
- ◊make-css-background-gradient[`("#ffffff" ,anchor-hover-color) '("17%" "100%") #:radial #t]
+#bottom span + span {
+ border-left: 1px solid gray;
}
-#navtable a.xref, #navtable a.xref:hover {
- transition: opacity 0.2s;
+#bottom #left,
+#bottom #right {
+ width: 32%;
}
+#bottom a.xref:hover {
+ opacity: 1;
+}
+
+#bottom a.xref:hover,
+#tfl-fonts-nav tr + tr td:hover {
+ ◊make-css-background-gradient[`("#ffffff" ,anchor-hover-color) '("17%" "100%") #:radial #t]
+}
div.pdf-thumbnail {
font-family: "concourse-c6";
@@ -758,16 +773,6 @@ width: ◊|nav-width|;
}
-#bottom .nav-inner {
-left: ◊|body-left-margin|;
-right: ◊|default-margin|;
-max-width:1000px; ◊; same as body
-min-width:520px; ◊; same as body
-}
-
-#bottom a {
- border-bottom: inherit;
-}
diff --git a/template.html.p b/template.html.p
index 3299f84..7eb183e 100644
--- a/template.html.p
+++ b/template.html.p
@@ -136,15 +136,14 @@ document.write('html
(body
@@ -176,4 +173,4 @@ document.write('