Use tint colours throughout the app
authorAlex Chan <a.chan@wellcome.ac.uk>
Sun, 11 Oct 2020 23:02:41 +0000 (00:02 +0100)
committerAlex Chan <a.chan@wellcome.ac.uk>
Sun, 11 Oct 2020 23:02:41 +0000 (00:02 +0100)
static/book.svg
static/bookshelf.png
static/style.css
templates/_inline_book_list.html
templates/_review_entry.html
templates/list_reading.html

index 51b92c6..e772281 100644 (file)
@@ -1,5 +1,5 @@
 <!-- https://thenounproject.com/search/?q=books&i=179979 -->
 <!-- https://thenounproject.com/search/?q=books&i=179979 -->
-<svg height='300px' width='300px'  fill="#CEEAE4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-255 347 100 100" style="enable-background:new -255 347 100 100;" xml:space="preserve"><style type="text/css">
+<svg height='300px' width='300px'  fill="#bbb" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-255 347 100 100" style="enable-background:new -255 347 100 100;" xml:space="preserve"><style type="text/css">
        .st0{enable-background:new    ;}
        .st1{fill:#000000;}
        .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
        .st0{enable-background:new    ;}
        .st1{fill:#000000;}
        .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
index c5236ce..206e73e 100644 (file)
Binary files a/static/bookshelf.png and b/static/bookshelf.png differ
index 5ac8499..34421fa 100644 (file)
@@ -44,7 +44,7 @@ aside #fallback_background {
 }
 
 aside #shelf_background {
 }
 
 aside #shelf_background {
-  background: url('/static/bookshelf.png');
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAAtCAMAAADBTQACAAAA6lBMVEUAAAAKCgoLCwsMDAwODg4PDw8TExMUFBQVFRUYGBgZGRkaGhobGxscHBwdHR0fHx8gICAjIyMkJCQnJycoKCgpKSkqKiorKyssLCwtLS0wMDAxMTEyMjIzMzM0NDQ2NjY4ODg6Ojo7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJERERFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExNTU1PT09QUFBRUVFSUlJTU1NUVFRVVVVWVlZXV1dYWFhZWVlbW1tcXFxdXV1eXl5gYGBhYWFiYmJjY2NkZGRlZWVmZmZpaWlsbGxtbW1ubm6kDlq2AAAAAXRSTlMAQObYZgAABEZJREFUGBntwWlvlWUCgOG7T18kqEWdYCswKrXESHQwAl+IflA/MPH3ap1EXIiAJCMtaUc0LmVRsFAXkAqlFsqcntOevstzunm6PKf3dXUdYFEgpoe6XyjrJWeSikPE3GDetzT0s7w+5owyb5aIKcrepOEsBV00PUXVb9Q9Tt4MC96grpumISqOUXORsiOU/E7DM8QNU7KPkgkK+ok4z4LHqXpIzF5auE7e2+RNk3OFmpeZc44W+siZpOQV5oxQdZC474jYT9M/iblFzq/EjFHzDg2jzHmNqNPE9RO3n6hLND1HxQPyJom5Q9EeinZRdZGCfkp2sKiXkv9S9hbzxlnUTcl9ymbIuU3dfSKeJmaAmEdU3CJvjLo3qTtJC49RMUBFRs5d5j2g5mcaZin6Fy1cpGkvMYdo4Uta6KPoHk2XyHmBnAcUHSDqJxquUXeMBUMUHKdsjJgJorpY9G9q7hDzCxWXyHmRhkc0HaSFEWoO0zRN0zRld2n4hpjj5J2j6gR1gbILLOilIiBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8jA529k9ieliJe1Pk7EYq+GqCmB1IS9k3Rt1Oiv43TdwumsaniDhEJ+sdJyZDVRk5s1eIeJ01+maMiGOswc1RavqYF25S9STp+ceH1L3HVjP+B3E9dJxnBllON6qZuUjTCXQXVTx/lrrAag2cQct6433m9VKRsXYTP7NogPYYRdLft/s7CvawvFe/RFr04yMW7WcrecB6+eEH4vayCk+co24HGylD21z376zdqUlyTiBtUV0fU3aEvIFhBC+NoWRlrNSzI6yPy5O0xZ90niP/oWgfStPlGaL2s5wbVyk7Sl7PEFvTmds0HGUjjV1GW8b5WeZ1o/WWsf1M0vQUbXD0U1Zo+AZK3+GPaZ/PiHqRpQyh9fIhS5tB2jCzg6xGhlbnwh3mvMs2NckKHfgIeJk5xz8gro+OM4OW9HCIosOU7Rhl0V5au30LrcXNCQoG2AAP2cK6vqcTZLTJGCt0nnk9bL5rVO1Cm6Lna4peYc7rJ6k4yAZ7iLRJpljGIC30ou0lQyVTrMSnSOvnKu32Fdps2bdI7TJMRYbWwSfUPEf7XWBp/XSQk7TbtRGkbWMCpeD451QMshYZm2YSSan6iJKnaWmIJYwiqS2yK2id3GDLuXefjfUBS/qaDXD9V6R1NErFEXKeGEab5NnTlD1GztW/WJ3RcRa8TdPOU7Qww0bKWNYIktRxhtlM0yTmOkUH2OZOseVkqOMdO0OH+YK4PajTjJOiYbSMM7TX7kH0f76SyBM6SrN0AAAAAElFTkSuQmCC);
   background-size: auto 100%;
   height: 45px;
   z-index: 2;
   background-size: auto 100%;
   height: 45px;
   z-index: 2;
@@ -82,11 +82,11 @@ main {
 }
 
 a {
 }
 
 a {
-  color: blue;
+  color: black;
 }
 
 a:hover {
 }
 
 a:hover {
-  background: rgba(0, 0, 255, 0.3);
+  background: rgba(0, 0, 0, 0.3);
 }
 
 aside a {
 }
 
 aside a {
index a7e671f..a8886b1 100644 (file)
@@ -1,5 +1,24 @@
 {% for book_entry in all_books %}
 {% for book_entry in all_books %}
-<div class="reading">
+{% set r = (tint_colors[book_entry.book.cover_image][0] * 255) | int %}
+{% set g = (tint_colors[book_entry.book.cover_image][1] * 255) | int %}
+{% set b = (tint_colors[book_entry.book.cover_image][2] * 255) | int %}
+
+<style>
+  #reading_{{ r }}_{{ g }}_{{ b }} {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+    border-color: rgb({{ r }}, {{ g }}, {{ b }});
+  }
+
+  #reading_{{ r }}_{{ g }}_{{ b }} a {
+    color: rgb({{ r }}, {{ g }}, {{ b }});;
+  }
+
+  #reading_{{ r }}_{{ g }}_{{ b }} a:hover {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+  }
+</style>
+
+<div class="reading" id="reading_{{ r }}_{{ g }}_{{ b }}">
   <div class="reading_inner">
     <div class="book_thumbnail">
       {% set book = book_entry.book %}
   <div class="reading_inner">
     <div class="book_thumbnail">
       {% set book = book_entry.book %}
index 313fa67..4ed68c6 100644 (file)
@@ -1,4 +1,25 @@
-<div class="review_preview {% if review_entry.review.rating == 5 %}review_fave{% endif %}">
+{% set r = (tint_colors[review_entry.book.cover_image][0] * 255) | int %}
+{% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
+{% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
+
+<style>
+  #review_preview_{{ r }}_{{ g }}_{{ b }} {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+    border-color: rgb({{ r }}, {{ g }}, {{ b }});
+  }
+
+  #review_preview_{{ r }}_{{ g }}_{{ b }}.review_fave {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.2);
+    border-color: rgb({{ r }}, {{ g }}, {{ b }});
+  }
+
+  #review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+  }
+</style>
+
+<div class="review_preview {% if review_entry.review.rating == 5 %}review_fave{% endif %}"
+id="review_preview_{{ r }}_{{ g }}_{{ b }}">
   <a href="/{{ review_entry.out_path() }}">
     <div class="book_thumbnail">
       {% set book = review_entry.book %}
   <a href="/{{ review_entry.out_path() }}">
     <div class="book_thumbnail">
       {% set book = review_entry.book %}
index 62ad46c..75ae2b4 100644 (file)
   <h2>books i&rsquo;m currently reading</h2>
 
   {% for reading_entry in all_reading %}
   <h2>books i&rsquo;m currently reading</h2>
 
   {% for reading_entry in all_reading %}
-  <div class="reading">
+  {% set r = (tint_colors[reading_entry.book.cover_image][0] * 255) | int %}
+  {% set g = (tint_colors[reading_entry.book.cover_image][1] * 255) | int %}
+  {% set b = (tint_colors[reading_entry.book.cover_image][2] * 255) | int %}
+
+  <style>
+    #reading_{{ r }}_{{ g }}_{{ b }} {
+      background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+      border-color: rgb({{ r }}, {{ g }}, {{ b }});
+    }
+  </style>
+
+  <div class="reading" id="reading_{{ r }}_{{ g }}_{{ b }}">
     <div class="reading_inner">
       <div class="book_thumbnail">
         {% set book = reading_entry.book %}
     <div class="reading_inner">
       <div class="book_thumbnail">
         {% set book = reading_entry.book %}