Feature: Added navigation between illustrations

template/artwork.html

@@ -31,7 +31,7 @@
         <div class="thumbnail-container">
           {{ range $parent.Recent }}
           <div class="artwork-thumbnail-small artwork-thumbnail">
-            <a href="#">
+            <a href="/artworks/{{ .ID }}">
               <img src="{{ (index .Images 0).Small }}" alt="{{ (index .Images 0).Small }}"
                 class="artwork-master-image" />
             </a>
@@ -45,6 +45,8 @@
     {{ end }}
   </div>
   <h2>Related works</h2>
-  {{ template "thumbnail-container.html" .Related }}
+  <div>
+    {{ template "thumbnail-container.html" .Related }}
+  </div>
 </div>
 {{ template "footer.html" }}

template/css/style.css

@@ -62,7 +62,7 @@ body {
   color: inherit;
   text-decoration: none;
   font-weight: bold;
-  font-size: 1.1rem;
+  font-size: 0.9rem;
 }
 .artwork-thumbnail .artwork-master-image {
   width: 100%;

template/css/style.scss

@@ -75,7 +75,7 @@ body {
     color: inherit;
     text-decoration: none;
     font-weight: bold;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
   }
 
   .artwork-master-image {

template/index.html

@@ -2,14 +2,16 @@
 <div class="container">
   <h1>Recommended works</h1>
 
-  {{ template "scrollable-container.html" .Recommended }}
+  <div class="thumbnail-container">
+    {{ template "thumbnail-container.html" .Recommended }}
+  </div>
 
   <h1>Today's rankings</h1>
   <div class="thumbnail-container">
     {{ range $i, $_ := .Rankings }}
     <div class="artwork-thumbnail-large artwork-thumbnail">
       <div class="artwork-rank-circle">{{ $i | inc}}</div>
-      <a href="#">
+      <a href="/artworks/{{ .ID }}">
         <img
           src="{{ (index .Images 0).Small }}"
           alt="{{ .Title }}"
@@ -17,7 +19,9 @@
         />
       </a>
 
-      <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
+      <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
+        <h3 class="no-margin">{{ .Title }}</h3>
+      </a>
       <a href="#" class="artwork-thumbnail-artist flex"
         ><img
           src="{{ .Artist.Avatar.medium }}"
@@ -47,6 +51,6 @@
   </div>
 
   <h1>Newest by all</h1>
-  {{ template "thumbnail-container.html" .Newest }}
+  <div>{{ template "thumbnail-container.html" .Newest }}</div>
 </div>
 {{ template "footer.html" }}

template/scrollable-container.html

@@ -1,23 +0,0 @@
-<div class="thumbnail-container">
-  {{ range . }}
-  <div class="artwork-thumbnail-small artwork-thumbnail">
-    <a href="#">
-      <img
-        src="{{ (index .Images 0).Small }}"
-        alt="{{ .Title }}"
-        class="artwork-master-image"
-      />
-    </a>
-
-    <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
-    <a href="#" class="artwork-thumbnail-artist flex"
-      ><img
-        src="{{ .Artist.Avatar.medium }}"
-        alt="{{ .Artist.Name }}"
-        class="artwork-thumbnail-artist-avatar border-rounded"
-      />
-      {{ .Artist.Name }}</a
-    >
-  </div>
-  {{ end }}
-</div>

template/thumbnail-container.html

@@ -1,23 +1,23 @@
-<div>
-  {{ range . }}
-  <div class="artwork-thumbnail-small artwork-thumbnail">
-    <a href="#">
-      <img
-        src="{{ (index .Images 0).Small }}"
-        alt="{{ .Title }}"
-        class="artwork-master-image"
-      />
-    </a>
+{{ range . }}
+<div class="artwork-thumbnail-small artwork-thumbnail">
+  <a href="/artworks/{{ .ID }}">
+    <img
+      src="{{ (index .Images 0).Small }}"
+      alt="{{ .Title }}"
+      class="artwork-master-image"
+    />
+  </a>
 
-    <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
-    <a href="#" class="artwork-thumbnail-artist flex"
-      ><img
-        src="{{ .Artist.Avatar.medium }}"
-        alt="{{ .Artist.Name }}"
-        class="artwork-thumbnail-artist-avatar border-rounded"
-      />
-      {{ .Artist.Name }}</a
-    >
-  </div>
-  {{ end }}
+  <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
+    <h3 class="no-margin">{{ .Title }}</h3>
+  </a>
+  <a href="#" class="artwork-thumbnail-artist flex"
+    ><img
+      src="{{ .Artist.Avatar.medium }}"
+      alt="{{ .Artist.Name }}"
+      class="artwork-thumbnail-artist-avatar border-rounded"
+    />
+    {{ .Artist.Name }}</a
+  >
 </div>
+{{ end }}