From 076cae07dfdf6abce90b39908b4b9e06da839ca8 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Tue, 29 Oct 2019 05:21:51 +0100
Subject: [PATCH] Added icons to release page. Improved release and home page
 styling.

---
 assets/components/home/home.vue       | 42 +++++++++++++++++++--
 assets/components/release/release.vue | 53 +++++++++++++++++++++------
 assets/css/_theme.scss                |  2 +
 assets/img/bubble-notification.svg    |  5 +++
 assets/img/bubble8.svg                |  5 +++
 assets/img/bubbles10.svg              |  5 +++
 assets/img/calendar.svg               |  5 +++
 assets/img/calendar2.svg              |  5 +++
 assets/img/calendar4.svg              |  5 +++
 assets/img/clapboard-play.svg         |  5 +++
 assets/img/cog.svg                    |  5 +++
 assets/img/earth2.svg                 |  5 +++
 assets/img/equalizer.svg              |  5 +++
 assets/img/heart7.svg                 |  5 +++
 assets/img/heart8.svg                 |  5 +++
 assets/img/info2.svg                  |  5 +++
 assets/img/price-tags.svg             |  6 +++
 assets/img/search.svg                 |  5 +++
 assets/img/star-empty.svg             |  5 +++
 assets/img/star-full.svg              |  5 +++
 assets/img/star.svg                   |  5 +++
 assets/img/stars.svg                  |  7 ++++
 assets/img/users.svg                  |  6 +++
 public/css/style.css                  | 39 +++++++++++++++++++-
 24 files changed, 224 insertions(+), 16 deletions(-)
 create mode 100644 assets/img/bubble-notification.svg
 create mode 100644 assets/img/bubble8.svg
 create mode 100644 assets/img/bubbles10.svg
 create mode 100644 assets/img/calendar.svg
 create mode 100644 assets/img/calendar2.svg
 create mode 100644 assets/img/calendar4.svg
 create mode 100644 assets/img/clapboard-play.svg
 create mode 100644 assets/img/cog.svg
 create mode 100644 assets/img/earth2.svg
 create mode 100644 assets/img/equalizer.svg
 create mode 100644 assets/img/heart7.svg
 create mode 100644 assets/img/heart8.svg
 create mode 100644 assets/img/info2.svg
 create mode 100644 assets/img/price-tags.svg
 create mode 100644 assets/img/search.svg
 create mode 100644 assets/img/star-empty.svg
 create mode 100644 assets/img/star-full.svg
 create mode 100644 assets/img/star.svg
 create mode 100644 assets/img/stars.svg
 create mode 100644 assets/img/users.svg

diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue
index 1b96920f..b3862340 100644
--- a/assets/components/home/home.vue
+++ b/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 {
diff --git a/assets/components/release/release.vue b/assets/components/release/release.vue
index 4f59333a..f540e30d 100644
--- a/assets/components/release/release.vue
+++ b/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>
diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss
index 46edfd24..d0fc10d1 100644
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@@ -5,9 +5,11 @@ $text: #222;
 $text-contrast: #fff;
 
 $shadow: rgba(0, 0, 0, .5);
+$shadow-strong: rgba(0, 0, 0, .7);
 $shadow-weak: rgba(0, 0, 0, .2);
 $shadow-hint: rgba(0, 0, 0, .1);
 
 $highlight: rgba(255, 255, 255, .5);
+$link: #cc4466;
 
 $empty: #222;
diff --git a/assets/img/bubble-notification.svg b/assets/img/bubble-notification.svg
new file mode 100644
index 00000000..fce02dcf
--- /dev/null
+++ b/assets/img/bubble-notification.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bubble-notification</title>
+<path d="M8 1c-4.418 0-8 2.91-8 6.5 0 2.040 1.157 3.86 2.966 5.052 0.022 0.146 0.034 0.296 0.034 0.448 0 1.092-0.929 2.048-2 2.572v0.421c1.983-0.045 4.034-0.353 5.753-2.072 0.406 0.052 0.823 0.079 1.247 0.079 4.418 0 8-2.91 8-6.5s-3.582-6.5-8-6.5zM9 11h-2v-2h2v2zM9 8h-2v-4h2v4z"></path>
+</svg>
diff --git a/assets/img/bubble8.svg b/assets/img/bubble8.svg
new file mode 100644
index 00000000..f7e93f62
--- /dev/null
+++ b/assets/img/bubble8.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bubble8</title>
+<path d="M14.5 1c0.825 0 1.5 0.675 1.5 1.5v8c0 0.825-0.675 1.5-1.5 1.5h-5.7l-4.8 4v-4h-2.5c-0.825 0-1.5-0.675-1.5-1.5v-8c0-0.825 0.675-1.5 1.5-1.5h13z"></path>
+</svg>
diff --git a/assets/img/bubbles10.svg b/assets/img/bubbles10.svg
new file mode 100644
index 00000000..544c7012
--- /dev/null
+++ b/assets/img/bubbles10.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16">
+<title>bubbles10</title>
+<path d="M12.5 0c0.825 0 1.5 0.675 1.5 1.5v5c0 0.825-0.675 1.5-1.5 1.5h-5.7l-4.8 4v-4h-0.5c-0.825 0-1.5-0.675-1.5-1.5v-5c0-0.825 0.675-1.5 1.5-1.5h11zM16.5 3c0.825 0 1.5 0.675 1.5 1.5v6c0 0.825-0.675 1.5-1.5 1.5h-2.5v4l-4.8-4h-3.2v-2h3.924l3.076 2.73v-2.73h3v-5h-1v-2h1.5z"></path>
+</svg>
diff --git a/assets/img/calendar.svg b/assets/img/calendar.svg
new file mode 100644
index 00000000..bb432df8
--- /dev/null
+++ b/assets/img/calendar.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>calendar</title>
+<path d="M0 15c0 0.552 0.448 1 1 1h14c0.552 0 1-0.448 1-1v-9h-16v9zM11 7h4v2h-4v-2zM11 10h4v2h-4v-2zM11 13h4v2h-4v-2zM6 7h4v2h-4v-2zM6 10h4v2h-4v-2zM6 13h4v2h-4v-2zM1 7h4v2h-4v-2zM1 10h4v2h-4v-2zM1 13h4v2h-4v-2zM15 2h-2v-1.429c0-0.316-0.224-0.571-0.5-0.571s-0.5 0.256-0.5 0.571v1.429h-8v-1.429c0-0.316-0.224-0.571-0.5-0.571s-0.5 0.256-0.5 0.571v1.429h-2c-0.552 0-1 0.448-1 1v2h16v-2c0-0.552-0.448-1-1-1zM3.5 4.5c-0.552 0-1-0.448-1-1 0-0.37 0.201-0.693 0.5-0.866v0.866c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-0.866c0.299 0.173 0.5 0.496 0.5 0.866 0 0.552-0.448 1-1 1zM12.5 4.5c-0.552 0-1-0.448-1-1 0-0.37 0.201-0.693 0.5-0.866v0.866c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-0.866c0.299 0.173 0.5 0.496 0.5 0.866 0 0.552-0.448 1-1 1z"></path>
+</svg>
diff --git a/assets/img/calendar2.svg b/assets/img/calendar2.svg
new file mode 100644
index 00000000..c7c8a1d8
--- /dev/null
+++ b/assets/img/calendar2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>calendar2</title>
+<path d="M5 6h2v2h-2zM8 6h2v2h-2zM11 6h2v2h-2zM2 12h2v2h-2zM5 12h2v2h-2zM8 12h2v2h-2zM5 9h2v2h-2zM8 9h2v2h-2zM11 9h2v2h-2zM2 9h2v2h-2zM13 0v1h-2v-1h-7v1h-2v-1h-2v16h15v-16h-2zM14 15h-13v-11h13v11z"></path>
+</svg>
diff --git a/assets/img/calendar4.svg b/assets/img/calendar4.svg
new file mode 100644
index 00000000..8ad373bb
--- /dev/null
+++ b/assets/img/calendar4.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>calendar4</title>
+<path d="M13 3h-1v2h-3v-2h-3v2h-3v-2h-1c-0.55 0-1 0.45-1 1v11c0 0.55 0.45 1 1 1h11c0.55 0 1-0.45 1-1v-11c0-0.55-0.45-1-1-1zM4 15h-1.998c-0.001-0.001-0.001-0.001-0.002-0.002v-1.998h2v2zM4 12h-2v-2h2v2zM4 9h-2v-2h2v2zM7 15h-2v-2h2v2zM7 12h-2v-2h2v2zM7 9h-2v-2h2v2zM10 15h-2v-2h2v2zM10 12h-2v-2h2v2zM10 9h-2v-2h2v2zM13 14.998c-0.001 0.001-0.001 0.001-0.002 0.002h-1.998v-2h2v1.998zM13 12h-2v-2h2v2zM13 9h-2v-2h2v2zM5 2c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v2h1v-2zM11 2c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v2h1v-2z"></path>
+</svg>
diff --git a/assets/img/clapboard-play.svg b/assets/img/clapboard-play.svg
new file mode 100644
index 00000000..3d3ea499
--- /dev/null
+++ b/assets/img/clapboard-play.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>clapboard-play</title>
+<path d="M1.223 4.102l13.523-3.623 0.776 2.898-13.523 3.623zM2 7v9h14v-9h-14zM7 14v-5l4 2.5-4 2.5z"></path>
+</svg>
diff --git a/assets/img/cog.svg b/assets/img/cog.svg
new file mode 100644
index 00000000..9cf13597
--- /dev/null
+++ b/assets/img/cog.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cog</title>
+<path d="M14.59 9.535c-0.839-1.454-0.335-3.317 1.127-4.164l-1.572-2.723c-0.449 0.263-0.972 0.414-1.529 0.414-1.68 0-3.042-1.371-3.042-3.062h-3.145c0.004 0.522-0.126 1.051-0.406 1.535-0.839 1.454-2.706 1.948-4.17 1.106l-1.572 2.723c0.453 0.257 0.845 0.634 1.123 1.117 0.838 1.452 0.336 3.311-1.12 4.16l1.572 2.723c0.448-0.261 0.967-0.41 1.522-0.41 1.675 0 3.033 1.362 3.042 3.046h3.145c-0.001-0.517 0.129-1.040 0.406-1.519 0.838-1.452 2.7-1.947 4.163-1.11l1.572-2.723c-0.45-0.257-0.839-0.633-1.116-1.113zM8 11.24c-1.789 0-3.24-1.45-3.24-3.24s1.45-3.24 3.24-3.24c1.789 0 3.24 1.45 3.24 3.24s-1.45 3.24-3.24 3.24z"></path>
+</svg>
diff --git a/assets/img/earth2.svg b/assets/img/earth2.svg
new file mode 100644
index 00000000..32354aa4
--- /dev/null
+++ b/assets/img/earth2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>earth2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM5.5 1.46v0.54l-2.5 2.5h-1.063c0.799-1.381 2.056-2.463 3.563-3.040zM8 10l-3.573 4.020c-0.146-0.087-0.288-0.178-0.427-0.275v-3.245l-2-1.5v-2.5c0-0.276 0.224-0.5 0.5-0.5h1.5c0 0 1.5 2 4 2.5v1.5zM14.049 7.668c-0.247-0.832-0.461-0.913-1.549-1.283v-0c-0.372-0.117-0.723-0.322-1.018-0.617-0.976-0.976-0.976-2.559 0-3.536 0.066-0.066 0.134-0.126 0.205-0.183 1.988 1.235 3.313 3.438 3.313 5.951 0 1.296-0.353 2.51-0.967 3.551 0.257-1.664 0.162-2.997 0.016-3.883z"></path>
+</svg>
diff --git a/assets/img/equalizer.svg b/assets/img/equalizer.svg
new file mode 100644
index 00000000..17841afe
--- /dev/null
+++ b/assets/img/equalizer.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>equalizer</title>
+<path d="M7 2v-0.25c0-0.413-0.338-0.75-0.75-0.75h-2.5c-0.413 0-0.75 0.337-0.75 0.75v0.25h-3v2h3v0.25c0 0.412 0.337 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-0.25h9v-2h-9zM4 4v-2h2v2h-2zM13 6.75c0-0.412-0.338-0.75-0.75-0.75h-2.5c-0.412 0-0.75 0.338-0.75 0.75v0.25h-9v2h9v0.25c0 0.412 0.338 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-0.25h3v-2h-3v-0.25zM10 9v-2h2v2h-2zM7 11.75c0-0.412-0.338-0.75-0.75-0.75h-2.5c-0.413 0-0.75 0.338-0.75 0.75v0.25h-3v2h3v0.25c0 0.412 0.337 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-0.25h9v-2h-9v-0.25zM4 14v-2h2v2h-2z"></path>
+</svg>
diff --git a/assets/img/heart7.svg b/assets/img/heart7.svg
new file mode 100644
index 00000000..657de24e
--- /dev/null
+++ b/assets/img/heart7.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>heart7</title>
+<path d="M11.75 1c-1.624 0-3.034 0.911-3.75 2.249-0.716-1.338-2.126-2.249-3.75-2.249-2.347 0-4.25 1.903-4.25 4.25 0 5.75 8 9.75 8 9.75s8-4 8-9.75c0-2.347-1.903-4.25-4.25-4.25z"></path>
+</svg>
diff --git a/assets/img/heart8.svg b/assets/img/heart8.svg
new file mode 100644
index 00000000..7f7f99a8
--- /dev/null
+++ b/assets/img/heart8.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>heart8</title>
+<path d="M8 15l-0.437-0.212c-0.309-0.15-7.563-3.733-7.563-9.179 0-2.541 2.117-4.609 4.719-4.609 1.245 0 2.414 0.476 3.281 1.296 0.867-0.82 2.037-1.296 3.281-1.296 2.602 0 4.719 2.068 4.719 4.609 0 5.446-7.255 9.029-7.563 9.179l-0.437 0.212zM4.719 3c-1.499 0-2.719 1.17-2.719 2.609 0 2.124 1.691 3.988 3.11 5.178 1.133 0.95 2.283 1.636 2.89 1.971 0.607-0.335 1.757-1.022 2.89-1.971 1.419-1.189 3.11-3.053 3.11-5.178 0-1.439-1.22-2.609-2.719-2.609-1.011 0-1.932 0.533-2.405 1.392l-0.876 1.589-0.876-1.589c-0.473-0.859-1.395-1.392-2.405-1.392z"></path>
+</svg>
diff --git a/assets/img/info2.svg b/assets/img/info2.svg
new file mode 100644
index 00000000..84f749da
--- /dev/null
+++ b/assets/img/info2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>info2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM7 3.75c0-0.413 0.338-0.75 0.75-0.75h0.5c0.412 0 0.75 0.337 0.75 0.75v0.5c0 0.412-0.338 0.75-0.75 0.75h-0.5c-0.412 0-0.75-0.338-0.75-0.75v-0.5zM10 13h-4v-1h1v-4h-1v-1h3v5h1v1z"></path>
+</svg>
diff --git a/assets/img/price-tags.svg b/assets/img/price-tags.svg
new file mode 100644
index 00000000..4aa7f78d
--- /dev/null
+++ b/assets/img/price-tags.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+<title>price-tags</title>
+<path d="M19.25 0h-6c-0.412 0-0.989 0.239-1.28 0.53l-7.439 7.439c-0.292 0.292-0.292 0.769 0 1.061l6.439 6.439c0.292 0.292 0.769 0.292 1.061 0l7.439-7.439c0.292-0.292 0.53-0.868 0.53-1.28v-6c0-0.412-0.337-0.75-0.75-0.75zM15.5 6c-0.828 0-1.5-0.672-1.5-1.5s0.672-1.5 1.5-1.5 1.5 0.672 1.5 1.5-0.672 1.5-1.5 1.5z"></path>
+<path d="M2 8.5l8.5-8.5h-1.25c-0.412 0-0.989 0.239-1.28 0.53l-7.439 7.439c-0.292 0.292-0.292 0.769 0 1.061l6.439 6.439c0.292 0.292 0.769 0.292 1.061 0l0.47-0.47-6.5-6.5z"></path>
+</svg>
diff --git a/assets/img/search.svg b/assets/img/search.svg
new file mode 100644
index 00000000..601d582c
--- /dev/null
+++ b/assets/img/search.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>search</title>
+<path d="M16 13.5l-4.695-4.695c0.444-0.837 0.695-1.792 0.695-2.805 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.013 0 1.968-0.252 2.805-0.695l4.695 4.695 2.5-2.5zM2 6c0-2.209 1.791-4 4-4s4 1.791 4 4-1.791 4-4 4-4-1.791-4-4z"></path>
+</svg>
diff --git a/assets/img/star-empty.svg b/assets/img/star-empty.svg
new file mode 100644
index 00000000..fd704ba2
--- /dev/null
+++ b/assets/img/star-empty.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>star-empty</title>
+<path d="M12.635 15.777c-0.103 0-0.206-0.032-0.293-0.095l-4.342-3.141-4.342 3.141c-0.175 0.127-0.413 0.126-0.588-0.001s-0.248-0.353-0.181-0.559l1.657-5.079-4.34-3.139c-0.176-0.127-0.249-0.353-0.183-0.559s0.259-0.346 0.476-0.346l5.367-0 1.658-5.080c0.067-0.206 0.259-0.345 0.475-0.345s0.408 0.139 0.475 0.345l1.658 5.080 5.367 0c0.217 0 0.409 0.14 0.476 0.346s-0.007 0.432-0.183 0.559l-4.34 3.139 1.657 5.079c0.067 0.206-0.006 0.432-0.181 0.559-0.088 0.064-0.191 0.096-0.295 0.096zM2.044 6.998l3.384 2.448c0.176 0.127 0.25 0.354 0.182 0.56l-1.294 3.964 3.39-2.452c0.175-0.127 0.411-0.127 0.586 0l3.39 2.452-1.294-3.964c-0.067-0.206 0.006-0.433 0.182-0.56l3.384-2.448-4.185-0c-0.216 0-0.408-0.139-0.475-0.345l-1.295-3.969-1.295 3.969c-0.067 0.206-0.259 0.345-0.475 0.345l-4.185 0z"></path>
+</svg>
diff --git a/assets/img/star-full.svg b/assets/img/star-full.svg
new file mode 100644
index 00000000..f1a5bff0
--- /dev/null
+++ b/assets/img/star-full.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>star-full</title>
+<path d="M15.976 6.345c-0.067-0.206-0.259-0.346-0.476-0.346l-5.367-0-1.658-5.080c-0.067-0.206-0.259-0.345-0.475-0.345s-0.408 0.139-0.475 0.345l-1.658 5.080-5.367 0c-0.217 0-0.409 0.14-0.476 0.346s0.007 0.432 0.183 0.559l4.34 3.139-1.657 5.079c-0.067 0.206 0.006 0.432 0.181 0.559s0.412 0.128 0.588 0.001l4.342-3.141 4.342 3.141c0.087 0.063 0.19 0.095 0.293 0.095s0.207-0.032 0.295-0.096c0.175-0.128 0.248-0.353 0.181-0.559l-1.657-5.079 4.34-3.139c0.176-0.127 0.249-0.353 0.183-0.559z"></path>
+</svg>
diff --git a/assets/img/star.svg b/assets/img/star.svg
new file mode 100644
index 00000000..4c53a041
--- /dev/null
+++ b/assets/img/star.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>star</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM11.233 12.975l-3.233-2.2-3.233 2.2 1.093-3.754-3.091-2.395 3.908-0.121 1.323-3.68 1.322 3.68 3.908 0.121-3.091 2.395 1.093 3.754z"></path>
+</svg>
diff --git a/assets/img/stars.svg b/assets/img/stars.svg
new file mode 100644
index 00000000..a2255ad8
--- /dev/null
+++ b/assets/img/stars.svg
@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
+<title>stars</title>
+<path d="M4.5 7.152l0.926 2.851h2.997l-2.425 1.762 0.926 2.851-2.425-1.762-2.425 1.762 0.926-2.851-2.425-1.762h2.997z"></path>
+<path d="M8.5 0.152l0.926 2.851h2.997l-2.425 1.762 0.926 2.851-2.425-1.762-2.425 1.762 0.926-2.851-2.425-1.762h2.997z"></path>
+<path d="M12.5 7.152l0.926 2.851h2.997l-2.425 1.762 0.926 2.851-2.425-1.762-2.425 1.762 0.926-2.851-2.425-1.762h2.997z"></path>
+</svg>
diff --git a/assets/img/users.svg b/assets/img/users.svg
new file mode 100644
index 00000000..76475b99
--- /dev/null
+++ b/assets/img/users.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16">
+<title>users</title>
+<path d="M12 12.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"></path>
+<path d="M5.112 12.427c0.864-0.565 1.939-0.994 3.122-1.256-0.235-0.278-0.449-0.588-0.633-0.922-0.475-0.863-0.726-1.813-0.726-2.748 0-1.344 0-2.614 0.478-3.653 0.464-1.008 1.299-1.633 2.488-1.867-0.264-1.195-0.968-1.98-2.841-1.98-3 0-3 2.015-3 4.5 0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h4.359c0.227-0.202 0.478-0.393 0.753-0.573z"></path>
+</svg>
diff --git a/public/css/style.css b/public/css/style.css
index fde55eb2..322f9952 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -102,7 +102,7 @@
   text-decoration: none;
 }
 .scene-title[data-v-5533e378] {
-  color: #000;
+  color: #222;
   margin: 0;
   font-size: 1rem;
   word-wrap: break-word;
@@ -115,6 +115,12 @@
   margin: 0 .25rem 0 0;
   font-size: .8rem;
 }
+.scene-actors[data-v-5533e378] {
+  word-wrap: break-word;
+  overflow: hidden;
+  max-height: 2.5rem;
+  line-height: 1.25rem;
+}
 .scene-tags[data-v-5533e378] {
   word-wrap: break-word;
   overflow: hidden;
@@ -137,7 +143,17 @@
 }
 .actor-link[data-v-5533e378],
 .tag-link[data-v-5533e378] {
-  color: #000;
+  text-decoration: none;
+}
+.actor-link[data-v-5533e378]:hover,
+  .tag-link[data-v-5533e378]:hover {
+    color: #ff6c88;
+}
+.actor-link[data-v-5533e378] {
+  color: #cc4466;
+}
+.tag-link[data-v-5533e378] {
+  color: rgba(0, 0, 0, 0.7);
 }
 .thumbnail[data-v-5533e378] {
   width: 300px;
@@ -168,6 +184,10 @@
   padding: 0 1rem;
   margin: 0 0 .5rem 0;
 }
+.row .icon[data-v-2bc41e74] {
+    fill: rgba(0, 0, 0, 0.7);
+    margin: 0 .5rem 0 0;
+}
 .actors[data-v-2bc41e74],
 .tags[data-v-2bc41e74] {
   list-style: none;
@@ -183,6 +203,21 @@
     display: inline-block;
     width: .6rem;
 }
+.date-link[data-v-2bc41e74],
+.site-link[data-v-2bc41e74],
+.network-link[data-v-2bc41e74],
+.actor-link[data-v-2bc41e74],
+.tag-link[data-v-2bc41e74] {
+  color: #cc4466;
+  text-decoration: none;
+}
+.date-link[data-v-2bc41e74]:hover,
+  .site-link[data-v-2bc41e74]:hover,
+  .network-link[data-v-2bc41e74]:hover,
+  .actor-link[data-v-2bc41e74]:hover,
+  .tag-link[data-v-2bc41e74]:hover {
+    color: #ff6c88;
+}
 
 /* $primary: #ff886c; */
 .noselect {