From c1e382cffc5c97534ce8782974137243233455bb Mon Sep 17 00:00:00 2001
From: Matthew Butterick <mb@mbtype.com>
Date: Thu, 5 Jan 2017 10:59:26 -0800
Subject: [PATCH] adjust styles

---
 styles.css.pp   | 79 ++++++++++++++++++++++++++-----------------------
 template.html.p | 27 ++++++++---------
 2 files changed, 54 insertions(+), 52 deletions(-)

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('<link rel="stylesheet" type="text/css" media="all" href="/firefo
       ◊if[(not toolbar?) ""]{
         ◊div[#:class "nav-outer" #:id "bottom"]{
             ◊div[#:class "nav-inner"]{
-              ◊table[#:id "navtable"]{
-                ◊tr{
-                  ◊td{◊xref["/index.html"]{TFL home}}
-                  ◊td{◊xref["/toc.html"]{Read excerpts}}
-                  ◊td{◊xref[buy-url]{get the book}}}}}}}})
+                  ◊span[#:style "width:33%"]{◊xref["/index.html"]{TFL home}}
+                  ◊span[#:style "width:34%"]{◊xref["/toc.html"]{Read excerpts}}
+                  ◊span[#:style "width:33%"]{◊xref[buy-url]{get the book}}}}}})
 
 
 ◊(define (default-body)
     ◊body{  ◊; use this body for all other pages
+      ◊div[#:id "top-stripe"]{}
       ◊div[#:id "content"]{
         ◊doc
         ◊(gap 1)
@@ -158,15 +157,13 @@ document.write('<link rel="stylesheet" type="text/css" media="all" href="/firefo
         (empty-string)
         ◊div[#:class "nav-outer" #:id "bottom"]{
             ◊div[#:class "nav-inner"]{
-              ◊table[#:id "navtable"]{
-                ◊tr{
-                  ◊(if (eq? here 'toc.html)
-                    (empty-string)
-                    ◊td[#:id "left" #:style (format "width: ~a%" side-cell-width)]{◊xref{◊(select 'title previous-page)}})
-                  ◊td[#:style "width:10%"]{◊xref["/index.html"]{TFL home}}
-                  ◊td[#:style (format "width:~a%" center-cell-width)]{◊xref[buy-url]{get the book}}
-                  ◊td[#:style (format "width:~a%" center-cell-width)]{◊xref["/fonts.html"]{get the fonts}}
-                  ◊(if next-page ◊td[#:id "right" #:style (format "width: ~a%" side-cell-width)]{◊xref{◊(select 'title next-page)}} "")}}}})})
+                  ◊span[#:id "left"]{◊(if (eq? here 'toc.html)
+                    ◊xref["index.html"]{home} 
+                    ◊xref{◊(select 'title previous-page)})}
+                    ◊span{◊xref["/index.html"]{TFL home}}
+                    ◊span{◊xref[buy-url]{get the book}}
+                    ◊span{◊xref["/fonts.html"]{get the fonts}}
+                    ◊(if next-page ◊span[#:id "right"]{◊xref{◊(select 'title next-page)}} "")}})})
 
 ◊(->html
     (body 
@@ -176,4 +173,4 @@ document.write('<link rel="stylesheet" type="text/css" media="all" href="/firefo
                       
 
 </html>
-<!-- © 2015 Matthew Butterick · website made with Pollen (pollenpub.com) -->
\ No newline at end of file
+<!-- © 2008–2017 Matthew Butterick · website made with Pollen (pollenpub.com) -->
\ No newline at end of file