fixed some formatting on book detail pages

2 files changed, 41 insertions, 13 deletions

diff --git a/design/sass/_details.scss b/design/sass/_details.scss
index b72ca9d..f0459a3 100644
--- a/design/sass/_details.scss
+++ b/design/sass/_details.scss
@@ -509,6 +509,17 @@ sup {
 }
 
 // ### Books ###
+.book {
+    &:after {
+        display: block;
+        content: '';
+        height: 30px;
+        border-bottom: 3px solid #efefef;
+        width: 200px;
+        margin: 0 auto 3rem auto;
+        padding-left: 30px;
+    }
+}
 .book-metadata {
     text-align: left;
     @include fancy_sans;
@@ -542,30 +553,45 @@ sup {
         max-width: 20rem;
     }
 }
+.thoughts {
+    margin-top: 4rem;
+    p:first-of-type {
+        margin-top: 0;
+    }
+}
 .thoughts h5, .highlights h4 {
     font-weight: 500;
     letter-spacing: 1px;
     margin: 3em 0 .5em 0;
-    @include generic_sans;
+    @include fancy_sans;
     @include smcaps;
     @include fontsize(14);
 }
-.highlights article:first-of-type {
-    margin-top: 1em;
+.highlights div:first-of-type p:first-of-type {
+    margin-top: 0;
+}
+.book-highlight p:last-of-type {
+    margin-bottom: 0;
+}
+.book p:last-of-type, .highlights div:first-of-type p:last-of-type{
+    margin-top: 8px;
 }
 .highlink {
-    @include fontsize(22);
+    @include fontsize(20);
     margin-right: .5rem;
     float: left;
     line-height: 1.6;
+    text-decoration: none;
     color: lighten($body_font_color, 60);
     @include breakpoint(alpha) {
-        margin-top: -1px;
+        margin-top: 1px;
     }
     &:visited {
         color: lighten($body_font_color, 60);
     }
 }
-.highlights .foot {
-    @include fontsize(14);
+.foot {
+    margin-top: 16px;
+    @include fancy_sans;
+    @include fontsize(16);
 }
diff --git a/design/templates/details/book.html b/design/templates/details/book.html
index f7bba47..2ae6b86 100644
--- a/design/templates/details/book.html
+++ b/design/templates/details/book.html
@@ -34,7 +34,7 @@
         <div class="thoughts" itemprop="review" itemscope itemtype="http://schema.org/Review">
             <h5>Notes</h5>
             <span class="hide" itemprop="reviewRating">{{object.rating}}</span>
-            <meta itemprop="author" value="Scott Gilbertson" />
+            <meta itemprop="author" content="Scott Gilbertson" />
             <meta itemprop="datePublished" content="{{object.read_date|date:"c"}}">
             <div itemprop="reviewBody">{{object.body_html|safe|smartypants|widont}}</div>
         </div>{%endif%}
@@ -42,11 +42,13 @@
         <div class="highlights">
             <h4>Highlights:</h4>
             {% for object in object.bookhighlight_set.all reversed %}
-            <article class="h-entry hentry post--article book" itemscope itemType="http://schema.org/Article">
-                <a class="highlink" name="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
-                {{object.body_html|safe|amp|smartypants}}
-                <p class="foot">page: {{object.page}} {% if object.location %}<small>kindle location: {{object.location|cut:"["|cut:"]"}}</small>{%endif%}</p>
-            </article>
+            <div class="h-entry hentry post--article book" itemscope itemType="http://schema.org/Article">
+                <a class="highlink" id="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
+                <div class="book-highlight">
+                    {{object.body_html|safe|amp|smartypants}}
+                </div>
+                <p class="foot">&ndash; Page: {{object.page}} {% if object.location %}(Kindle location: {{object.location|cut:"["|cut:"]"}}){%endif%}</p>
+            </div>
             {% endfor %}
         </div>
         {%endif%}