Redesigned release page. Added 'single site' marker, linking directly to network page. Fixed Dogfart scraper duration.

public/css/style.css

@@ -24,7 +24,6 @@
   padding: .5rem;
   margin: 0 .25rem;
   border: solid 1px transparent;
-  border-radius: .5rem;
   font-size: .9rem;
   font-weight: bold;
   cursor: pointer;
@@ -76,9 +75,8 @@
   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);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   height: 100%;
 }
 .banner[data-v-3abcf101] {
@@ -105,7 +103,7 @@
   align-items: center;
   box-sizing: border-box;
   padding: 0 .5rem;
-  margin: 0 0 .5rem 0;
+  margin: 0 0 .25rem 0;
 }
 .details[data-v-3abcf101] {
   width: 100%;
@@ -123,12 +121,8 @@
   text-decoration: none;
 }
 .site[data-v-3abcf101] {
-  border-radius: 0 0 .25rem 0;
   font-weight: bold;
 }
-.date[data-v-3abcf101] {
-  border-radius: 0 0 0 .25rem;
-}
 .info[data-v-3abcf101] {
   display: flex;
   flex-direction: column;
@@ -154,11 +148,11 @@
 .actors[data-v-3abcf101] {
   word-wrap: break-word;
   overflow: hidden;
-  max-height: 2.5rem;
-  line-height: 1.25rem;
+  max-height: 2.75rem;
+  line-height: 1.5rem;
 }
 .tags[data-v-3abcf101] {
-  max-height: 2.5rem;
+  max-height: 2.85rem;
   padding: .25rem .5rem 1rem .5rem;
   line-height: 1.25rem;
   word-wrap: break-word;
@@ -168,7 +162,7 @@
   margin: 0 .25rem 0 0;
 }
 .tag[data-v-3abcf101] {
-  margin: 0 .25rem .5rem 0;
+  margin: 0 .25rem .25rem 0;
 }
 .actor[data-v-3abcf101]:not(:last-of-type)::after {
   content: ",";
@@ -184,8 +178,8 @@
 }
 .tag-link[data-v-3abcf101] {
   color: rgba(0, 0, 0, 0.5);
+  display: inline-block;
   padding: .25rem;
-  border-radius: .25rem;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   font-size: .75rem;
   font-weight: bold;
@@ -195,13 +189,26 @@
     color: #ff6c88;
 }
 
+/* $primary: #ff886c; */
+.actor[data-v-6989dc6f] {
+  background: #fff;
+  display: inline-block;
+  margin: 0 .25rem .25rem 0;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+}
+.name[data-v-6989dc6f] {
+  color: #cc4466;
+  display: inline-block;
+  padding: .5rem;
+  text-decoration: none;
+}
+
 /* $primary: #ff886c; */
 .banner[data-v-cbb14462] {
   background: #222;
   flex-shrink: 0;
   white-space: nowrap;
   overflow-x: auto;
-  margin: 0 0 1rem 0;
   scrollbar-width: none;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
   font-size: 0;
@@ -217,35 +224,90 @@
   max-width: 100%;
 }
 .item[data-v-cbb14462] {
+  height: 100%;
   max-height: 18rem;
   vertical-align: middle;
 }
 
 /* $primary: #ff886c; */
-.row[data-v-2bc41e74] {
-  display: block;
+.column[data-v-2bc41e74] {
+  width: 1200px;
+  max-width: 100%;
   padding: 0 1rem;
-  margin: 0 0 .5rem 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+.row[data-v-2bc41e74] {
+  display: flex;
+  align-items: center;
+  margin: 0 0 1rem 0;
 }
 .row .icon[data-v-2bc41e74] {
+    display: inline-block;
     width: 1rem;
     fill: rgba(0, 0, 0, 0.7);
-    margin: 0 .5rem 0 0;
+    margin: 0 1rem 0 0;
 }
-.actors[data-v-2bc41e74],
-.tags[data-v-2bc41e74] {
-  list-style: none;
+.info[data-v-2bc41e74] {
+  background: #fff;
+  margin: 0 0 1.5rem 0;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  cursor: default;
 }
-.actor[data-v-2bc41e74],
-.tag[data-v-2bc41e74] {
+.info .column[data-v-2bc41e74] {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+}
+.tidbit[data-v-2bc41e74] {
   display: inline-block;
-  text-transform: capitalize;
+  height: 100%;
 }
-.actor[data-v-2bc41e74]:not(:last-child)::after,
-  .tag[data-v-2bc41e74]:not(:last-child)::after {
-    content: ',';
-    display: inline-block;
-    width: .6rem;
+.tidbit[data-v-2bc41e74]:not(:last-child) {
+    border-right: solid 1px rgba(0, 0, 0, 0.1);
+}
+.tidbit .icon[data-v-2bc41e74] {
+    fill: rgba(0, 0, 0, 0.7);
+    margin: 0 .25rem 0 0;
+}
+.tidbit.date[data-v-2bc41e74], .tidbit.duration[data-v-2bc41e74], .tidbit.shoot[data-v-2bc41e74] {
+    padding: 1.25rem 1rem 1.25rem 0;
+    margin: 0 1rem 0 0;
+}
+.site[data-v-2bc41e74] {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-end;
+  padding: .25rem 0;
+  font-size: 0;
+}
+.logo[data-v-2bc41e74] {
+  display: inline-block;
+}
+.logo-site[data-v-2bc41e74] {
+  height: 3rem;
+  max-width: 15rem;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.logo-network[data-v-2bc41e74] {
+  height: 1.5rem;
+  max-width: 10rem;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.chain[data-v-2bc41e74] {
+  color: rgba(0, 0, 0, 0.5);
+  padding: 0 .5rem;
+  font-weight: bold;
+  font-size: .8rem;
+}
+.title[data-v-2bc41e74] {
+  margin: 0 0 1.5rem 0;
+}
+.description[data-v-2bc41e74] {
+  line-height: 1.25;
 }
 .duration[data-v-2bc41e74] {
   font-size: 0;
@@ -253,21 +315,49 @@
 .duration-segment[data-v-2bc41e74] {
   font-size: 1rem;
 }
-.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] {
+.link[data-v-2bc41e74] {
+  display: inline-block;
   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 {
+.link[data-v-2bc41e74]:hover {
     color: #ff6c88;
 }
+.link:hover .icon[data-v-2bc41e74] {
+      fill: #ff6c88;
+}
+.tag .link[data-v-2bc41e74] {
+  background: #fff;
+  display: inline-block;
+  padding: .5rem;
+  margin: 0 .25rem .25rem 0;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+  text-decoration: none;
+  text-transform: capitalize;
+}
+.tag .link[data-v-2bc41e74]:hover {
+    color: #ff6c88;
+}
+.showable[data-v-2bc41e74] {
+  display: none;
+}
+@media (max-width: 1200px) {
+.logo-network[data-v-2bc41e74],
+  .chain[data-v-2bc41e74] {
+    display: none;
+}
+}
+@media (max-width: 720px) {
+.hideable[data-v-2bc41e74] {
+    display: none;
+}
+.showable[data-v-2bc41e74] {
+    display: block;
+}
+.logo-site[data-v-2bc41e74] {
+    max-width: 10rem;
+}
+}
 
 /* $primary: #ff886c; */
 .header[data-v-3e57cf44] {
@@ -327,6 +417,7 @@
 
 /* $primary: #ff886c; */
 .tile[data-v-f4958086] {
+  background: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -431,6 +522,10 @@
   margin: 0 .5rem 0 0;
   text-transform: capitalize;
 }
+.title .icon[data-v-80991bcc] {
+    width: 1.25rem;
+    height: 1.25rem;
+}
 .heading[data-v-80991bcc] {
   padding: 0;
   margin: 0 0 1rem 0;
@@ -471,6 +566,15 @@
   -ms-user-select: none;
   -webkit-tap-highlight-color: transparent; }
 
+.nolist {
+  list-style: none;
+  padding: 0;
+  margin: 0; }
+  .nolist li {
+    display: inline-block;
+    padding: 0;
+    margin: 0; }
+
 .tooltip {
   display: block !important;
   z-index: 10000; }