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

assets/components/home/home.vue

@@ -4,6 +4,19 @@
             <Icon icon="filter" />
 
             <ul class="filters">
+                <li class="filter">
+                    <label
+                        class="toggle"
+                        :class="{ active: showStraight }"
+                    >
+                        <input
+                            v-model="showStraight"
+                            type="checkbox"
+                            class="check"
+                        >straight
+                    </label>
+                </li>
+
                 <li class="filter">
                     <label
                         class="toggle"
@@ -105,7 +118,10 @@
                             rel="noopener noreferrer"
                             class="scene-row scene-link"
                         >
-                            <h3 class="scene-title">{{ release.title }}</h3>
+                            <h3
+                                :title="release.title"
+                                class="scene-title"
+                            >{{ release.title }}</h3>
                         </a>
 
                         <span class="scene-row">
@@ -163,6 +179,7 @@ async function mounted() {
 export default {
     data() {
         return {
+            showStraight: true,
             showLesbian: true,
             showGay: false,
             showTrans: false,
@@ -299,7 +316,7 @@ export default {
 }
 
 .scene-title {
-    color: #000;
+    color: $text;
     margin: 0;
     font-size: 1rem;
     word-wrap: break-word;
@@ -314,6 +331,13 @@ export default {
     font-size: .8rem;
 }
 
+.scene-actors {
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 2.5rem;
+    line-height: 1.25rem;
+}
+
 .scene-tags {
     word-wrap: break-word;
     overflow: hidden;
@@ -341,7 +365,19 @@ export default {
 
 .actor-link,
 .tag-link {
-    color: #000;
+    text-decoration: none;
+
+    &:hover {
+        color: $primary;
+    }
+}
+
+.actor-link {
+    color: $link;
+}
+
+.tag-link {
+    color: $shadow-strong;
 }
 
 .thumbnail {

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>