Links for books

_config.yml

@@ -151,15 +151,19 @@ books:
   - name: 'Practical malware analysis'
     cover: 'https://www.nostarch.com/sites/default/files/imagecache/product_full/practical_malware_analysis.png'
     progress: 70%
+    link: '#books'
   - name: "The antivirus hacker's handbook"
     cover: 'http://media.wiley.com/product_data/coverImage300/52/11190287/1119028752.jpg'
     progress: 100%
+    link: '#books'
   - name: 'The ruby programming language'
     cover: 'https://images-na.ssl-images-amazon.com/images/I/51i0hr6kccL._SX258_BO1,204,203,200_.jpg'
     progress: 50%
+    link: '#books'
   - name: 'Javascript: The good parts'
     cover: 'http://akamaicovers.oreilly.com/images/9780596517748/cat.gif'
     progress: 20%
+    link: '#books'
 
 defaults:
     -

_includes/books.html

@@ -1,12 +1,14 @@
-<div class="section">
+<div id="books" class="section">
   <h3>Books I've read</h3>
   <div class="books">
     <div class="row">
       {% for book in site.books %}
       <div class="book-wrap col-md-4">
         <figure class="book">
-          <img class="book greyscale" src="{{ book.cover }}" alt="{{ book.name }}"
-               data-toggle="tooltip" data-placement="top" title="{{book.name }}" data-container="body">
+          <a href="{{ book.link }}">
+            <img class="book greyscale" src="{{ book.cover }}" alt="{{ book.name }}"
+                 data-toggle="tooltip" data-placement="top" title="{{book.name }}" data-container="body">
+           </a>
           <div class="read" style="width: {{ book.progress }};"></div>
          </figure>
       </div>

_scss/_books.scss

@@ -1,10 +1,10 @@
 .books {
   .book-wrap {
     display: inline-block;
+    margin-bottom: 25px;
 
     figure.book {
       height: 200px;
-      margin-bottom: 10px;
       position: relative;
 
       &:hover {