A bunch of cosmetic tweaks; add an index page
authorAlex Chan <alex@alexwlchan.net>
Sun, 2 Feb 2020 19:17:41 +0000 (19:17 +0000)
committerAlex Chan <alex@alexwlchan.net>
Sun, 2 Feb 2020 19:17:41 +0000 (19:17 +0000)
scripts/render_html.py
src/index.md [new file with mode: 0644]
static/style.css
templates/_footer.html
templates/_header.html
templates/index.html [new file with mode: 0644]
templates/list_reviews.html
templates/review.html

index 2b58a58..670754e 100755 (executable)
@@ -130,3 +130,11 @@ if __name__ == "__main__":
 
     out_path = pathlib.Path("_html") / "reviews/index.html"
     out_path.write_text(html)
+
+    # Render the front page
+
+    index_template = env.get_template("index.html")
+    html = index_template.render(text=open("src/index.md").read())
+
+    index_path = pathlib.Path("_html") / "index.html"
+    index_path.write_text(html)
diff --git a/src/index.md b/src/index.md
new file mode 100644 (file)
index 0000000..fdb8e75
--- /dev/null
@@ -0,0 +1,9 @@
+# Welcome to my book tracker!
+
+This is a small app I created to track the books I’m reading. In this app, I can:
+
+*   Write mini-reviews of the [books I’ve read](/reviews/)
+*   Keep track of what I’m [currently reading](/currently-reading/)
+*   Write down what books [I want to read](/plans/), and why I want to read them
+
+This was inspired by a [similar book tracker](http://tessa-books.glitch.me/) created by [Tessa Thornton](https://twitter.com/tessthornton).
index 4672f17..b6a80e4 100644 (file)
@@ -24,11 +24,15 @@ aside {
   background: url('/static/specktre_tQt7j.png') #333366;
   background-size: auto 100%;
   color: white;
-  padding: 8px 1em;
-  font-size: 12pt;
+  padding: 6px 1em;
+  font-size: 10pt;
   line-height: 1.35em;
 }
 
+aside a {
+  text-decoration: none;
+}
+
 aside h1 {
   margin-top: 0;
   margin-bottom: 0;
@@ -72,7 +76,7 @@ table.book_metadata {
 }
 
 td {
-  padding-right: 8px;
+  padding-right: 10px;
   padding-top:    2px;
   padding-bottom: 2px;
 }
@@ -97,3 +101,61 @@ footer a {
 footer a:hover {
   background: rgba(128, 128, 128, 0.3);
 }
+
+.review_preview {
+  border: 2px solid #00a892;
+  background: rgba(0, 255, 221, 0.05);
+  border-radius: 6px;
+  margin-bottom: 1em;
+}
+
+.review_preview a {
+  grid-template-columns: 110px auto;
+  display: grid;
+  grid-gap: 15px;
+  width: 100%;
+  color: black;
+  text-decoration: none;
+}
+
+.review_preview a:hover {
+  background: rgba(0, 255, 221, 0.2);
+}
+
+.review_preview img {
+  max-height: 110px;
+  border: 0.5px solid rgba(0, 255, 221, 0.6);
+  margin-top: 12px;
+  margin-bottom: 7px;
+}
+
+.review_preview .book_thumbnail {
+  text-align: center;
+}
+
+.review_preview .book_metadata {
+  grid-row: 1/1;
+  grid-column: 2/2;
+  display: inline-block;
+  margin-top:    auto;
+  margin-bottom: auto;
+  line-height: 1.25em;
+}
+
+.review_preview .book_metadata p.title {
+  font-style: italic;
+  font-size: 1.15em;
+  margin-bottom: 0.65em;
+}
+
+.review_preview .book_metadata p {
+  margin: 0;
+}
+
+.nav {
+  margin-top: 0;
+}
+
+.nav .selected {
+  font-weight: bold;
+}
index ef975b7..ac113e2 100644 (file)
@@ -1,6 +1,6 @@
 <footer>
   <div id="footer_inner">
-    made with ð\9f\92\96 by <a href="https://twitter.com/alexwlchan">lexie</a>, who thinks you look great today
+    made with ð\9f\92\9c by <a href="https://twitter.com/alexwlchan">lexie</a>, who thinks you look great today
     •
     code on <a href="https://snekks.club/alexwlchan/books.alexwlchan.net">snekks.club</a>
   </div>
index 76f825a..2d1a9ea 100644 (file)
@@ -1,6 +1,5 @@
 <aside>
   <div id="aside_inner">
-    <h1 id="brand">lexie&rsquo;s book tracker</h1><br>
-    <a href="/reviews">reviews</a>
+    <h1 id="brand"><a href="/">lexie&rsquo;s book tracker</a></h1><br>
   </div>
 </aside>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644 (file)
index 0000000..4e9200b
--- /dev/null
@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ text | render_markdown | safe }}
+{% endblock %}
index 2066e7c..2dfe90b 100644 (file)
@@ -1,53 +1,11 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <h1>my reviews</h1>
-  <style>
-    .review_preview {
-      border: 3px solid #4c3dae;
-      border-radius: 6px;
-      margin-bottom: 1em;
-    }
+  <p class="nav">
+    <a class="selected" href="/reviews">read</a> / <a href="/currently-reading">reading</a> / <a href="/plans">to read</a>
+  </p>
 
-    .review_preview a {
-      grid-template-columns: 110px auto;
-      display: grid;
-      grid-gap: 15px;
-      width: 100%;
-      color: black;
-      text-decoration: none;
-    }
-
-    .review_preview img {
-      max-height: 110px;
-      border: 0.5px solid rgba(76, 61, 174, 0.6);
-      margin-top: 12px;
-      margin-bottom: 7px;
-    }
-
-    .review_preview .book_thumbnail {
-      text-align: center;
-    }
-
-    .review_preview .book_metadata {
-      grid-row: 1/1;
-      grid-column: 2/2;
-      display: inline-block;
-      margin-top:    auto;
-      margin-bottom: auto;
-      line-height: 1.25em;
-    }
-
-    .review_preview .book_metadata p.title {
-      font-style: italic;
-      font-size: 1.15em;
-      margin-bottom: 0.65em;
-    }
-
-    .review_preview .book_metadata p {
-      margin: 0;
-    }
-  </style>
+  <h2>books i&rsquo;ve read</h2>
 
   {% for review_entry in all_reviews %}
   <div class="review_preview">
index be5e0c4..2c12a76 100644 (file)
@@ -37,4 +37,6 @@
   </table>
 
   {{ review_entry.review.text | render_markdown | safe }}
+
+  <p>(see <a href="/reviews">all reviews</a>)</p>
 {% endblock %}