Use a book icon as a separator, not leaves
authorAlex Chan <alex@alexwlchan.net>
Sun, 5 Jul 2020 17:22:06 +0000 (18:22 +0100)
committerAlex Chan <alex@alexwlchan.net>
Sun, 5 Jul 2020 17:22:06 +0000 (18:22 +0100)
static/book.svg [new file with mode: 0644]
static/book_white.svg [new file with mode: 0644]
static/style.css
templates/_header.html
templates/list_reviews.html

diff --git a/static/book.svg b/static/book.svg
new file mode 100644 (file)
index 0000000..51b92c6
--- /dev/null
@@ -0,0 +1,7 @@
+<!-- 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">
+       .st0{enable-background:new    ;}
+       .st1{fill:#000000;}
+       .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
+       .st3{fill:none;}
+</style><g><rect x="-447" y="347" width="185" height="99"></rect><rect x="-255" y="311" width="100" height="30"></rect><text transform="matrix(1 0 0 1 -189 327.5)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">http://thenounproject.com</text><text transform="matrix(1 0 0 1 -247.834 322.5)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="6.1578px">The Noun Project</text><text transform="matrix(1 0 0 1 -246.7139 327.2998)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="4px">Icon Template</text><text transform="matrix(1 0 0 1 -433.5 357.5)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="6.1578px">Reminders</text><line class="st2" x1="-247" y1="332.5" x2="-237" y2="332.5"></line><line class="st2" x1="-434" y1="363.5" x2="-417" y2="363.5"></line><g><g><g><rect x="-425.8" y="378.3" class="st1" width="8.7" height="8.6"></rect><path class="st1" d="M-419.5,389.3h4.7v-4.7h-4.7V389.3z M-414.3,389.7h-5.6v-5.6h5.6V389.7L-414.3,389.7z M-421.2,391.1h8.3      v-8.2h-8.3V391.1L-421.2,391.1z M-412.5,391.5h-9.2v-9.1h9.2V391.5L-412.5,391.5z"></path><polygon class="st1" points="-421.1,391.1 -421.3,391 -413,382.8 -412.9,382.9     "></polygon></g></g></g><rect x="-434" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -434 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Strokes</text><text transform="matrix(1 0 0 1 -434 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Try to keep strokes at 4px</text><text transform="matrix(1 0 0 1 -434 417.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Minimum stroke weight is 2px</text><text transform="matrix(1 0 0 1 -434 421.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">For thicker strokes use even </text><text transform="matrix(1 0 0 1 -434 424.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">numbers: 6px, 8px etc.</text><text transform="matrix(1 0 0 1 -434 429.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="2.4px">Remember to expand strokes </text><text transform="matrix(1 0 0 1 -434 432.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="2.4px">before saving as an SVG </text><rect x="-391.5" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -391.5 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Size</text><text transform="matrix(1 0 0 1 -391.5 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Cannot be wider or taller than </text><text transform="matrix(1 0 0 1 -391.5 415.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">100px (artboard size)</text><text transform="matrix(1 0 0 1 -391.5 420.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Scale your icon to fill as much of </text><text transform="matrix(1 0 0 1 -391.5 423.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">the artboard as possible</text><rect x="-349" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -349 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Ungroup</text><text transform="matrix(1 0 0 1 -349 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">If your design has more than one </text><text transform="matrix(1 0 0 1 -349 415.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">shape, make sure to ungroup</text><rect x="-305" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -305 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Save as</text><text transform="matrix(1 0 0 1 -305 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Save as .SVG and make sure </text><text transform="matrix(1 0 0 1 -305 415.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">“Use Artboards” is checked</text><text transform="matrix(1.0074 0 0 1 -380.542 377.5938)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.5731px">100px</text><text transform="matrix(1.0074 0 0 1 -296 386)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="5.1462px">.SVG</text><rect x="-381.5" y="381.8" class="st1" width="10.3" height="10.2"></rect><rect x="-381.5" y="378.8" class="st1" width="0.5" height="2.3"></rect><rect x="-371.8" y="378.8" class="st1" width="0.5" height="2.3"></rect><rect x="-382" y="379.3" class="st1" width="11.2" height="0.6"></rect><g><rect x="-338.8" y="380.8" class="st1" width="10.3" height="10.2"></rect><rect x="-331.8" y="375.7" class="st1" width="3.3" height="3.3"></rect></g><rect x="-433.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-391.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-348.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-304.5" y="369.5" class="st2" width="30" height="30"></rect></g><path d="M-205.1,422.2"></path><g><g><g><path d="M-220.5,402.1c-0.4,0-0.7-0.1-1-0.2c-0.8-0.4-1.2-1.2-1.2-2v-24c0-1.2,1-2.2,2.2-2.2h12.7c1.2,0,2.2,1,2.2,2.2v24     c0,0.8-0.5,1.6-1.2,2c-0.8,0.4-1.7,0.3-2.3-0.2l-5.1-3.6l-5.1,3.6C-219.6,402-220,402.1-220.5,402.1z M-218.2,378.2v17.3l2.8-2     c0.8-0.6,1.8-0.6,2.6,0l2.8,2v-17.3H-218.2z"></path></g></g><g><g><path d="M-222.9,389.5c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h52.6c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-52.6     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9c1.2,0,2.2,1,2.2,2.2S-221.7,389.5-222.9,389.5z"></path></g></g><g><g><path d="M-171.9,390.7c-0.8,0-1.5-0.4-2-1.1c-5.8-10.2-0.2-19.8,0-20.2c0.6-1.1,2-1.4,3.1-0.8c1.1,0.6,1.4,2,0.8,3.1     c-0.2,0.3-4.4,7.9,0,15.8c0.6,1.1,0.2,2.5-0.8,3.1C-171.2,390.6-171.5,390.7-171.9,390.7z"></path></g></g><g><g><path d="M-170,427.3h-55.7c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h55.7c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-55.7     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9h55.7c1.2,0,2.2,1,2.2,2.2S-168.8,427.3-170,427.3z"></path></g></g><g><g><path d="M-171.6,427.3c-0.8,0-1.5-0.4-2-1.1c-5.8-10.1-0.2-20.1,0-20.5c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.9,3.1     c-0.2,0.3-4.5,8.2,0,16.1c0.6,1.1,0.2,2.5-0.8,3.1C-170.9,427.2-171.3,427.3-171.6,427.3z"></path></g></g><g><g><path d="M-176.3,409h-58.6c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h14.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-14.4     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9h58.6c1.2,0,2.2,1,2.2,2.2S-175.1,409-176.3,409z"></path></g></g><g><g><path d="M-177.9,409c-0.8,0-1.5-0.4-2-1.1c-5.8-10.1-0.2-20.1,0-20.5c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.9,3.1     c-0.2,0.3-4.5,8.2,0,16.1c0.6,1.1,0.2,2.5-0.8,3.1C-177.2,408.9-177.5,409-177.9,409z"></path></g></g><g><g><path d="M-170.3,390.7h-36.6c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2h36.6c1.2,0,2.2,1,2.2,2.2S-169.1,390.7-170.3,390.7z"></path></g></g></g></svg>
\ No newline at end of file
diff --git a/static/book_white.svg b/static/book_white.svg
new file mode 100644 (file)
index 0000000..6b8b6f2
--- /dev/null
@@ -0,0 +1,7 @@
+<!-- https://thenounproject.com/search/?q=books&i=179979 -->
+<svg height='300px' width='300px'  fill="#ffffff" 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;}
+       .st3{fill:none;}
+</style><g><rect x="-447" y="347" width="185" height="99"></rect><rect x="-255" y="311" width="100" height="30"></rect><text transform="matrix(1 0 0 1 -189 327.5)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">http://thenounproject.com</text><text transform="matrix(1 0 0 1 -247.834 322.5)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="6.1578px">The Noun Project</text><text transform="matrix(1 0 0 1 -246.7139 327.2998)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="4px">Icon Template</text><text transform="matrix(1 0 0 1 -433.5 357.5)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="6.1578px">Reminders</text><line class="st2" x1="-247" y1="332.5" x2="-237" y2="332.5"></line><line class="st2" x1="-434" y1="363.5" x2="-417" y2="363.5"></line><g><g><g><rect x="-425.8" y="378.3" class="st1" width="8.7" height="8.6"></rect><path class="st1" d="M-419.5,389.3h4.7v-4.7h-4.7V389.3z M-414.3,389.7h-5.6v-5.6h5.6V389.7L-414.3,389.7z M-421.2,391.1h8.3      v-8.2h-8.3V391.1L-421.2,391.1z M-412.5,391.5h-9.2v-9.1h9.2V391.5L-412.5,391.5z"></path><polygon class="st1" points="-421.1,391.1 -421.3,391 -413,382.8 -412.9,382.9     "></polygon></g></g></g><rect x="-434" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -434 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Strokes</text><text transform="matrix(1 0 0 1 -434 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Try to keep strokes at 4px</text><text transform="matrix(1 0 0 1 -434 417.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Minimum stroke weight is 2px</text><text transform="matrix(1 0 0 1 -434 421.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">For thicker strokes use even </text><text transform="matrix(1 0 0 1 -434 424.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">numbers: 6px, 8px etc.</text><text transform="matrix(1 0 0 1 -434 429.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="2.4px">Remember to expand strokes </text><text transform="matrix(1 0 0 1 -434 432.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="2.4px">before saving as an SVG </text><rect x="-391.5" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -391.5 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Size</text><text transform="matrix(1 0 0 1 -391.5 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Cannot be wider or taller than </text><text transform="matrix(1 0 0 1 -391.5 415.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">100px (artboard size)</text><text transform="matrix(1 0 0 1 -391.5 420.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Scale your icon to fill as much of </text><text transform="matrix(1 0 0 1 -391.5 423.6572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">the artboard as possible</text><rect x="-349" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -349 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Ungroup</text><text transform="matrix(1 0 0 1 -349 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">If your design has more than one </text><text transform="matrix(1 0 0 1 -349 415.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">shape, make sure to ungroup</text><rect x="-305" y="405" class="st3" width="35" height="32.5"></rect><text transform="matrix(1 0 0 1 -305 407.1572)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="3px">Save as</text><text transform="matrix(1 0 0 1 -305 412.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">Save as .SVG and make sure </text><text transform="matrix(1 0 0 1 -305 415.1572)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.4px">“Use Artboards” is checked</text><text transform="matrix(1.0074 0 0 1 -380.542 377.5938)" class="st1" style="" font-family="&apos;Helvetica&apos;" font-size="2.5731px">100px</text><text transform="matrix(1.0074 0 0 1 -296 386)" class="st1" style="" font-family="&apos;Helvetica-Bold&apos;" font-size="5.1462px">.SVG</text><rect x="-381.5" y="381.8" class="st1" width="10.3" height="10.2"></rect><rect x="-381.5" y="378.8" class="st1" width="0.5" height="2.3"></rect><rect x="-371.8" y="378.8" class="st1" width="0.5" height="2.3"></rect><rect x="-382" y="379.3" class="st1" width="11.2" height="0.6"></rect><g><rect x="-338.8" y="380.8" class="st1" width="10.3" height="10.2"></rect><rect x="-331.8" y="375.7" class="st1" width="3.3" height="3.3"></rect></g><rect x="-433.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-391.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-348.5" y="369.5" class="st2" width="30" height="30"></rect><rect x="-304.5" y="369.5" class="st2" width="30" height="30"></rect></g><path d="M-205.1,422.2"></path><g><g><g><path d="M-220.5,402.1c-0.4,0-0.7-0.1-1-0.2c-0.8-0.4-1.2-1.2-1.2-2v-24c0-1.2,1-2.2,2.2-2.2h12.7c1.2,0,2.2,1,2.2,2.2v24     c0,0.8-0.5,1.6-1.2,2c-0.8,0.4-1.7,0.3-2.3-0.2l-5.1-3.6l-5.1,3.6C-219.6,402-220,402.1-220.5,402.1z M-218.2,378.2v17.3l2.8-2     c0.8-0.6,1.8-0.6,2.6,0l2.8,2v-17.3H-218.2z"></path></g></g><g><g><path d="M-222.9,389.5c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h52.6c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-52.6     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9c1.2,0,2.2,1,2.2,2.2S-221.7,389.5-222.9,389.5z"></path></g></g><g><g><path d="M-171.9,390.7c-0.8,0-1.5-0.4-2-1.1c-5.8-10.2-0.2-19.8,0-20.2c0.6-1.1,2-1.4,3.1-0.8c1.1,0.6,1.4,2,0.8,3.1     c-0.2,0.3-4.4,7.9,0,15.8c0.6,1.1,0.2,2.5-0.8,3.1C-171.2,390.6-171.5,390.7-171.9,390.7z"></path></g></g><g><g><path d="M-170,427.3h-55.7c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h55.7c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-55.7     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9h55.7c1.2,0,2.2,1,2.2,2.2S-168.8,427.3-170,427.3z"></path></g></g><g><g><path d="M-171.6,427.3c-0.8,0-1.5-0.4-2-1.1c-5.8-10.1-0.2-20.1,0-20.5c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.9,3.1     c-0.2,0.3-4.5,8.2,0,16.1c0.6,1.1,0.2,2.5-0.8,3.1C-170.9,427.2-171.3,427.3-171.6,427.3z"></path></g></g><g><g><path d="M-176.3,409h-58.6c-7.3,0-7.3-7.4-7.3-11.4c0-4,0-11.4,7.3-11.4h14.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-14.4     c-2.1,0-2.8,1-2.8,6.9c0,5.9,0.7,6.9,2.8,6.9h58.6c1.2,0,2.2,1,2.2,2.2S-175.1,409-176.3,409z"></path></g></g><g><g><path d="M-177.9,409c-0.8,0-1.5-0.4-2-1.1c-5.8-10.1-0.2-20.1,0-20.5c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.9,3.1     c-0.2,0.3-4.5,8.2,0,16.1c0.6,1.1,0.2,2.5-0.8,3.1C-177.2,408.9-177.5,409-177.9,409z"></path></g></g><g><g><path d="M-170.3,390.7h-36.6c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2h36.6c1.2,0,2.2,1,2.2,2.2S-169.1,390.7-170.3,390.7z"></path></g></g></g></svg>
\ No newline at end of file
index 69af77b..f95bc79 100644 (file)
@@ -28,7 +28,7 @@ aside {
   background-size: auto 100%;
   color: white;
   padding: 6px 1em;
-  font-size: 12pt;
+  font-size: 13pt;
   line-height: 1.35em;
 }
 
@@ -36,6 +36,12 @@ aside a {
   text-decoration: none;
 }
 
+aside img {
+  height: 30px;
+  margin-bottom: -8px;
+  margin-top:    -2px;
+}
+
 aside h1 {
   margin-top: 0;
   margin-bottom: 0;
@@ -43,10 +49,6 @@ aside h1 {
   font-size: 1em;
 }
 
-aside h1::after {
-  content: " 📚";
-}
-
 main, aside #aside_inner, footer #footer_inner {
   max-width: 780px;
   margin-left:  auto;
@@ -196,13 +198,15 @@ footer a:hover {
 }
 
 .divider {
-  color: #bbb;
   text-align: center;
-  font-size: 2em;
-  margin-top:    1em;
+  margin-top:    1.5em;
   margin-bottom: 1em;
 }
 
+.divider img {
+  width: 50px;
+}
+
 #jump_to {
   margin-bottom: -0.5em;
 }
index 2d1a9ea..928a578 100644 (file)
@@ -1,5 +1,5 @@
 <aside>
   <div id="aside_inner">
-    <h1 id="brand"><a href="/">lexie&rsquo;s book tracker</a></h1><br>
+    <h1 id="brand"><a href="/">lexie&rsquo;s book tracker <img src="/static/book_white.svg" alt=""></a></h1><br>
   </div>
 </aside>
index 08d17eb..ec664c0 100644 (file)
@@ -19,7 +19,7 @@
   </p>
 
   {% for year, reviews in all_reviews %}
-  <div class="divider">{{ loop.cycle('&#x2766;', '&#x2767;') | safe }}</div>
+  <div class="divider"><img src="/static/book.svg"></div>
 
   <div class="books_by_year" id="books_by_year_{{ year }}">
     <h3>the {{ reviews|length }} book{% if reviews|length != 1 %}s{% endif %}