Added icons to release page. Improved release and home page styling.

assets/components/release/release.vue

@@ -32,17 +32,9 @@
 
         <h2 class="row title">{{ release.title }}</h2>
 
-        <span class="row">
-            <a
-                :href="release.url"
-                :title="release.shootId || release.entryId"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="date"
-            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
-        </span>
-
         <ul class="row actors">
+            <Icon icon="star" />
+
             <li
                 v-for="actor in release.actors"
                 :key="actor.id"
@@ -57,23 +49,44 @@
             </li>
         </ul>
 
+        <span class="row">
+            <Icon icon="calendar2" />
+
+            <a
+                :href="release.url"
+                :title="release.shootId || release.entryId"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="date date-link"
+            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
+        </span>
+
         <span class="row site">
+            <Icon icon="clapboard-play" />
+
             <a
                 :href="release.site.url"
                 target="_blank"
                 rel="noopener noreferrer"
+                class="site-link"
             >{{ release.site.name }}</a>
 
             (<a
                 :href="release.network.url"
                 target="_blank"
                 rel="noopener noreferrer"
+                class="network-link"
             >{{ release.network.name }}</a>)
         </span>
 
-        <p class="row description">{{ release.description }}</p>
+        <p class="row description">
+            <Icon icon="info2" />
+            {{ release.description }}
+        </p>
 
         <ul class="row tags">
+            <Icon icon="price-tags" />
+
             <li
                 v-for="tag in release.tags"
                 :key="`tag-${tag.id}`"
@@ -162,6 +175,11 @@ export default {
     display: block;
     padding: 0 1rem;
     margin: 0 0 .5rem 0;
+
+    .icon {
+        fill: $shadow-strong;
+        margin: 0 .5rem 0 0;
+    }
 }
 
 .actors,
@@ -180,4 +198,17 @@ export default {
         width: .6rem;
     }
 }
+
+.date-link,
+.site-link,
+.network-link,
+.actor-link,
+.tag-link {
+    color: $link;
+    text-decoration: none;
+
+    &:hover {
+        color: $primary;
+    }
+}
 </style>