Throw a shelf of pseudo book spines at the top of the page
authorAlex Chan <a.chan@wellcome.ac.uk>
Sun, 11 Oct 2020 22:32:52 +0000 (23:32 +0100)
committerAlex Chan <a.chan@wellcome.ac.uk>
Sun, 11 Oct 2020 22:32:52 +0000 (23:32 +0100)
scripts/generate_bookshelf.py [new file with mode: 0755]
static/bookshelf.png [new file with mode: 0644]
static/style.css
templates/_header.html

diff --git a/scripts/generate_bookshelf.py b/scripts/generate_bookshelf.py
new file mode 100755 (executable)
index 0000000..a15119c
--- /dev/null
@@ -0,0 +1,28 @@
+#!/usr/bin/env python3
+
+import random
+
+from PIL import Image, ImageDraw
+
+
+if __name__ == "__main__":
+    x_coord = 0
+    max_width = 2000
+    min_height = 30
+    max_height = 45
+
+    im = Image.new("RGBA", size=(max_width, max_height))
+
+    draw = ImageDraw.Draw(im)
+
+    while x_coord <= max_width:
+        width = random.randint(5, 25)
+        height = random.randint(min_height, max_height)
+        grey = random.randint(10, 110)
+
+        draw.rectangle(
+            [(x_coord, 0), (x_coord + width, height)], fill=(grey, grey, grey)
+        )
+        x_coord += width
+
+    im.save("static/bookshelf.png")
diff --git a/static/bookshelf.png b/static/bookshelf.png
new file mode 100644 (file)
index 0000000..c5236ce
Binary files /dev/null and b/static/bookshelf.png differ
index f95bc79..5ac8499 100644 (file)
@@ -24,12 +24,34 @@ h1 .book-title {
 }
 
 aside {
-  background: url('/static/specktre_tQt7j.png') #333366;
-  background-size: auto 100%;
   color: white;
-  padding: 6px 1em;
   font-size: 13pt;
   line-height: 1.35em;
+  margin-bottom: 2em;
+}
+
+aside #fallback_background, aside #shelf_background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+aside #fallback_background {
+  background: #666666;
+  height: 30px;
+  z-index: 1;
+}
+
+aside #shelf_background {
+  background: url('/static/bookshelf.png');
+  background-size: auto 100%;
+  height: 45px;
+  z-index: 2;
+}
+
+aside #aside_inner {
+  padding: 3px 1em;
 }
 
 aside a {
@@ -60,11 +82,11 @@ main {
 }
 
 a {
-  color: #4c3dae;
+  color: blue;
 }
 
 a:hover {
-  background: rgba(76, 61, 174, 0.3);
+  background: rgba(0, 0, 255, 0.3);
 }
 
 aside a {
index 928a578..d6feeb9 100644 (file)
@@ -1,5 +1,8 @@
 <aside>
-  <div id="aside_inner">
-    <h1 id="brand"><a href="/">lexie&rsquo;s book tracker <img src="/static/book_white.svg" alt=""></a></h1><br>
+  <div id="shelf_background">
+    <div id="aside_inner">
+      <h1 id="brand"><a href="/">lexie&rsquo;s book tracker <img src="/static/book_white.svg" alt=""></a></h1><br>
+    </div>
   </div>
+  <div id="fallback_background"></div>
 </aside>