Transitioning to Vue. Installed environment and restored homepage scene overview.

public/css/style.css

@@ -1,138 +1,135 @@
-body {
-    margin: 0;
+.scenes[data-v-5533e378] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  grid-gap: 1rem;
 }
+.scene[data-v-5533e378] {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0 0 .5rem 0;
+  border-radius: .25rem;
+  overflow: hidden;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+}
+.scene-banner[data-v-5533e378] {
+  position: relative;
+  margin: 0 0 .5rem 0;
+}
+.scene-thumbnail[data-v-5533e378] {
+  width: 100%;
+  height: 200px;
+  display: block;
+  background-position: center;
+  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.scene-row[data-v-5533e378] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 .5rem;
+  margin: 0 0 .25rem 0;
+}
+.scene-details[data-v-5533e378] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+}
+.scene-site[data-v-5533e378],
+.scene-date[data-v-5533e378] {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: .8rem;
+  padding: .25rem;
+  text-decoration: none;
+}
+.scene-site[data-v-5533e378] {
+  border-radius: 0 0 .25rem 0;
+}
+.scene-date[data-v-5533e378] {
+  border-radius: 0 0 0 .25rem;
+}
+.scene-info[data-v-5533e378] {
+  flex-grow: 1;
+}
+.scene-link[data-v-5533e378] {
+  text-decoration: none;
+}
+.scene-title[data-v-5533e378] {
+  color: #000;
+  margin: 0;
+  font-size: 1rem;
+  word-wrap: break-word;
+  overflow: hidden;
+  max-height: 3rem;
+  line-height: 1.5rem;
+}
+.scene-network[data-v-5533e378] {
+  color: #555;
+  margin: 0 .25rem 0 0;
+  font-size: .8rem;
+}
+.scene-tags[data-v-5533e378] {
+  word-wrap: break-word;
+  overflow: hidden;
+  max-height: 2.5rem;
+  line-height: 1.25rem;
+}
+.scene-actor[data-v-5533e378],
+.scene-tag[data-v-5533e378] {
+  margin: 0 .25rem 0 0;
+}
+.scene-actor[data-v-5533e378] {
+  font-size: .9rem;
+}
+.scene-tag[data-v-5533e378] {
+  font-size: .75rem;
+}
+.scene-actor[data-v-5533e378]:not(:last-of-type)::after,
+.scene-tag[data-v-5533e378]:not(:last-of-type):after {
+  content: ",";
+}
+.actor-link[data-v-5533e378],
+.tag-link[data-v-5533e378] {
+  color: #000;
+}
+.thumbnail[data-v-5533e378] {
+  width: 300px;
+}
+
+html,
+body {
+  height: 100%; }
+
+body {
+  margin: 0; }
 
 .nolist {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0; }
+  .nolist li {
+    display: inline-block; }
+
+.heading {
+  color: #ff886c;
+  margin: 0 0 1rem 0; }
+
+.header[data-v-10b7ec04] {
+  color: #fff;
+  background: #ff886c;
+  padding: 1rem;
+}
+.logo[data-v-10b7ec04] {
+  margin: 0;
 }
 
-.nolist li {
-    display: inline-block;
+.content-inner[data-v-4f86a868] {
+  padding: 1rem;
 }
 
-.scenes {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.scene {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: 0 0 .5rem 0;;
-    border-radius: .25rem;
-    margin: .5rem;
-    overflow: hidden;
-    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
-}
-
-.scene-banner {
-    position: relative;
-    margin: 0 0 .5rem 0;
-}
-
-.scene-thumbnail {
-    width: 100%;
-    height: 200px;
-    display: block;
-    background-position: center;
-    background-size: cover;
-    object-fit: cover;
-}
-
-.scene-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 .5rem;
-    margin: 0 0 .25rem 0;
-}
-
-.scene-details {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-}
-
-.scene-site,
-.scene-date {
-    color: #fff;
-    background: rgba(0, 0, 0, .5);
-    font-size: .8rem;
-    padding: .25rem;
-    text-decoration: none;
-}
-
-.scene-site {
-    border-radius: 0 0 .25rem 0;
-}
-
-.scene-date {
-    border-radius: 0 0 0 .25rem;
-}
-
-.scene-info {
-    flex-grow: 1;
-}
-
-.scene-link {
-    text-decoration: none;
-}
-
-.scene-title {
-    color: #000;
-    margin: 0;
-    font-size: 1rem;
-    word-wrap: break-word;
-    overflow: hidden;
-    max-height: 3rem;
-    line-height: 1.5rem;
-}
-
-.scene-network {
-    color: #555;
-    margin: 0 .25rem 0 0;
-    font-size: .8rem;
-}
-
-.scene-tags {
-    word-wrap: break-word;
-    overflow: hidden;
-    max-height: 2.5rem;
-    line-height: 1.25rem;
-}
-
-.scene-actor,
-.scene-tag {
-    margin: 0 .25rem 0 0;
-}
-
-.scene-actor {
-    font-size: .9rem;
-}
-
-.scene-tag {
-    font-size: .75rem;
-}
-
-.scene-actor:not(:last-of-type)::after,
-.scene-tag:not(:last-of-type):after {
-    content: ",";
-}
-
-.actor-link,
-.tag-link {
-    color: #000;
-}
-
-.thumbnail {
-    width: 300px;
-}

public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Porn Radar</title>
+
+        <script src="/js/bundle.js" defer></script>
+
+        <link href="/css/style.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="container"></div>
+    </body>
+</html>