Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

2 files changed, 30 insertions, 57 deletions

diff --git a/app/books/templates/books/book_detail.html b/app/books/templates/books/book_detail.html
index 1dad0fc..6304562 100644
--- a/app/books/templates/books/book_detail.html
+++ b/app/books/templates/books/book_detail.html
@@ -1,21 +1,19 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
-{%block bodyid%}class="detail"{%endblock%}								
+{%block bodyid%}class="detail center book-detail"{%endblock%}								
 {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
-    {% block primary %}<main itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
-        <header class="tight">
-        <h1 class="post-title book-title" itemprop="name">{{object.title|smartypants|widont|safe}}</h1>
-        <h2 class="post-subtitle" itemprop="author" itemscope itemtype="http://schema.org/Person">
-        <meta itemprop="name" content="{{object.author_name}}"/>by {{object.author_name}}</h2>
-
-
+    {% block primary %}<main class="content" itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
+        <header class="post-header">
+            <h1 class="post-hed" itemprop="name">{{object.title|smartypants|widont|safe}}</h1>
+            <h2 class="post-subtitle-line" itemprop="author" itemscope itemtype="http://schema.org/Person">
+            <meta itemprop="name" content="{{object.author_name}}"/>by {{object.author_name}}</h2>
         </header>
+        <div class="post-body">
         <div class="book-cover-wrapper">
             <img src="{{object.get_image_url}}" alt="{{object.title}} cover"  />
         </div>
         <div class="meta-cover">
             <dl class="book-metadata">
-
                 {% if object.rating %}<dt>Rating</dt><dd class="book-stars">
           {% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span></dd>{%endif%}
                 {% if object.read_in %}<dt>Read</dt>
@@ -33,7 +31,7 @@
             </div>
         </div>{%if object.body_html%}
         <div class="thoughts" itemprop="review" itemscope itemtype="http://schema.org/Review">
-            <h5>Notes</h5>
+            <h5 class="hedtinycaps">Notes</h5>
             <span class="hide" itemprop="reviewRating">{{object.rating}}</span>
             <meta itemprop="author" content="Scott Gilbertson" />
             <meta itemprop="datePublished" content="{{object.read_date|date:"c"}}">
@@ -41,22 +39,21 @@
         </div>{%endif%}
         {% if object.bookhighlight_set.all %}
         <div class="highlights">
-            <h4>Highlights:</h4>
+            <h4 class="hedtinycaps">Highlights:</h4>
             {% for object in object.bookhighlight_set.all %}{% if object.is_public %}
-            <div class="h-entry hentry post--article book">
-                <a class="highlink" id="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
-                <div class="book-highlight">
+            <div class="h-entry hentry book-highlight">
+                <a class="book-highlight-link" id="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
+                <div class="book-highlight-body">
                     {{object.body_html|safe|amp|smartypants}}
+                    <span class="book-highlight-footer">&ndash; Page: {{object.page}} {% if object.location %}(Kindle location: {{object.location|cut:"["|cut:"]"}}){%endif%}</span>
                 </div>
-                <p class="foot">&ndash; Page: {{object.page}} {% if object.location %}(Kindle location: {{object.location|cut:"["|cut:"]"}}){%endif%}</p>
             </div>
             {% endif %}{% endfor %}
         </div>
         {%endif%}
+        <p class="small dis"><em>When you buy a book using the link above, I may earn a small affiliate commission.</em></p>
+        </div>
     </main>
 {% endblock %}
 {% block disclaimer %}
-<div class="highlights">
-    <p class="dis"><em>When you buy a book using the link above, I may earn a small affiliate commission.</em></p>
-</div>
 {% endblock %}
diff --git a/app/books/templates/books/book_list.html b/app/books/templates/books/book_list.html
index 96d4d1b..dbfa767 100644
--- a/app/books/templates/books/book_list.html
+++ b/app/books/templates/books/book_list.html
@@ -6,48 +6,24 @@
 {% block metadescription %}Books I've read and thoughts on them. {% endblock %}
 {%block bodyid%}class="archive" id="books-archive"{%endblock%}
 {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
-{% block primary %}<main>{% autopaginate object_list 24 %}
-        <h1 class="hide">Books</h1>
-        <div class="intro">
-                <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
-                <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>
-        </div>
-        <nav class="pagination">{% paginate %}
-        </nav>
-        <div class="archive-grid book-grid"> {% for object in object_list %}
-            <article class="archive-card" itemscope itemtype="http://schema.org/Book">
+{% block primary %}<main role="main" class="archive-wrapper">{% autopaginate object_list 24 %}
+        <div class="archive-intro">
+        <h1 class="archive-hed">Book Notes</h1>{% if page_obj.number == 1%}
+            <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
+            <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>{%endif%}
+    </div>
+    <div class="archive-grid archive-grid-quad">{% for object in object_list %}
+            <article class="archive-grid-card" itemscope itemtype="http://schema.org/Book">
                 {% if object.image %}<div class="img-wrapper"><a href="{{object.get_absolute_url}}"><img itemprop="image" src="{{object.get_image_url}}" alt="cover art for {{object.title}} by {{object.author_name}}"/></a></div>{%endif%}
-                <h2 class="post-title" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
-                <h4 class="author" itemprop="author">{{object.author_name}}</h4>
-                <div class="post-summary" itemprop="review" itemscope itemtype="http://schema.org/Review">
-                    {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
+                <h2 class="card-hed card-hed-btm" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
+                <h4 class="card-smcaps" itemprop="author">{{object.author_name}}</h4>
+                <div class="card-summary" itemprop="review" itemscope itemtype="http://schema.org/Review">
+                    {% if object.rating %}<span class="card-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
                     <span class="hide" itemprop="author">Scott Gilbertson</span>
-                    <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
-        </article>
-        {% endfor %}</div>
+                    <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="card-dek read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
+        </article>{% endfor %}
+        </div>
     <nav aria-label="page navigation" class="pagination">{% paginate %}
     </nav>
         </main>
 {% endblock %}
-
-
-    title = models.CharField(max_length=200)
-    author_name = models.CharField(max_length=200)
-    slug = models.CharField(max_length=50)
-    year_pub = models.CharField(max_length=4, blank=True, null=True)
-    read_date = models.DateTimeField()
-    isbn = models.CharField(max_length=100, blank=True, null=True)
-    body_html = models.TextField(null=True, blank=True)
-    url = models.CharField(max_length=200, blank=True, null=True)
-    tags = TaggableManager()
-    RATINGS = (
-        ('1', "1 Star"),
-        ('2', "2 Stars"),
-        ('3', "3 Stars"),
-        ('4', "4 Stars"),
-        ('5', "5 Stars"),
-    )
-    rating = models.CharField(max_length=1, choices=RATINGS, null=True)
-    enable_comments = models.BooleanField(default=False)
-    image = models.FileField(upload_to='book-covers/', null=True, blank=True)
-