Added favicons for all networks. Showing sites on dark background, lightened logos. Updated Kink logos. Changed Bang! studios to sites, removed studio prominence.

assets/components/actors/actors.vue

@@ -29,10 +29,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'theme';
+
 .actors {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 10rem);
+    grid-template-columns: repeat(auto-fit, minmax(10rem, .5fr));
     grid-gap: 0 .5rem;
     padding: 1rem;
 }
+
+@media(max-width: $breakpoint) {
+    .actors {
+        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    }
+}
 </style>

assets/components/header/header.vue

@@ -3,7 +3,7 @@
         <router-link
             to="/"
             class="logo-link"
-        ><h1 class="logo">traxxx</h1></router-link>
+        ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
 
         <nav class="nav">
             <ul class="nolist">
@@ -76,6 +76,11 @@ export default {
     padding: .5rem 1rem;
     margin: 0 1rem 0 0;
     font-size: 2rem;
+
+    .icon {
+        width: 6rem;
+        height: 1.5rem;
+    }
 }
 
 .nav {
@@ -86,7 +91,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
+    padding: 1rem 1rem calc(1rem - 5px) 1rem;
     border-bottom: solid 5px transparent;
     color: $shadow;
     text-decoration: none;

assets/components/networks/network.vue

@@ -77,7 +77,7 @@ async function fetchNetwork() {
 
     this.sites = this.network.sites
         .filter(site => !site.independent)
-        .concat(this.studios)
+        // .concat(this.studios)
         .sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
 
     this.releases = this.network.sites.map(site => site.releases).flat();

assets/components/releases/release.vue

@@ -51,7 +51,7 @@
                     <span
                         v-if="release.duration >= 3600"
                         class="duration-segment"
-                    >{{ Math.floor(release.duration / 3600) }}:</span>
+                    >{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
                     <span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
                     <span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
                 </span>
@@ -167,7 +167,7 @@
                 <span
                     v-if="release.duration >= 3600"
                     class="duration-segment"
-                >{{ Math.floor(release.duration / 3600) }}:</span>
+                >{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
                 <span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
                 <span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
             </div>
@@ -282,7 +282,8 @@ export default {
 }
 
 .info {
-    background: $background;
+    background: $profile;
+    color: $text-contrast;
     margin: 0 0 1.5rem 0;
     box-shadow: 0 0 3px $shadow-weak;
     cursor: default;
@@ -292,6 +293,10 @@ export default {
         align-items: center;
         padding: 0 1rem;
     }
+
+    .link {
+        color: $text-contrast;
+    }
 }
 
 .tidbit {
@@ -299,11 +304,11 @@ export default {
     height: 100%;
 
     &:not(:last-child) {
-        border-right: solid 1px $shadow-hint;
+        border-right: solid 1px $highlight-hint;
     }
 
     .icon {
-        fill: $shadow-strong;
+        fill: $highlight-weak;
         margin: 0 .25rem 0 0;
     }
 
@@ -327,7 +332,7 @@ export default {
 
 .logo {
     display: inline-block;
-    filter: $logo-shadow;
+    filter: $logo-highlight;
 }
 
 .logo-site {
@@ -345,7 +350,7 @@ export default {
 }
 
 .chain {
-    color: $shadow;
+    color: $highlight;
     padding: 0 .5rem;
     font-weight: bold;
     font-size: .8rem;
@@ -369,7 +374,11 @@ export default {
 
 .actors {
     display: flex;
-    flex-wrap: wrap;
+
+    .actor {
+        width: 10rem;
+        margin: 0 1rem 0 0;
+    }
 }
 
 .link {

assets/components/sites/site.vue

@@ -94,6 +94,18 @@ export default {
 .link-site {
     margin: 0 1rem 0 0;
     justify-content: flex-start;
+
+    .logo {
+        object-position: 0 0;
+    }
+}
+
+.link-network {
+    justify-content: flex-end;
+
+    .logo {
+        object-position: 100% 0;
+    }
 }
 
 .logo {
@@ -101,7 +113,6 @@ export default {
     max-width: 15rem;
     max-height: 5rem;
     object-fit: contain;
-    object-position: 0 0;
     filter: $logo-highlight;
 }
 

assets/components/tile/actor.vue

@@ -71,7 +71,7 @@ export default {
 @import 'theme';
 
 .actor {
-    width: 10rem;
+    width: 100%;
     background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;

assets/components/tile/network.vue

@@ -27,7 +27,7 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    background: $profile;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -52,7 +52,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-shadow;
+    filter: $logo-highlight;
 }
 
 .title {

assets/components/tile/release.vue

@@ -9,16 +9,10 @@
                     v-if="release.site.independent"
                     :to="`/network/${release.network.slug}`"
                     class="site site-link"
-                >{{ release.network.name }}</router-link>
-
-                <router-link
-                    v-else-if="release.studio"
-                    :to="`/network/${release.network.slug}`"
-                    class="site site-link"
                 ><img
                     :src="`/img/logos/${release.network.slug}/favicon.png`"
                     class="favicon"
-                >{{ release.studio.name }}</router-link>
+                >{{ release.network.name }}</router-link>
 
                 <router-link
                     v-else

assets/components/tile/site.vue

@@ -27,7 +27,7 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    background: $tile;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -53,7 +53,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-shadow;
+    filter: $logo-highlight;
 }
 
 .title {

assets/css/_theme.scss

@@ -24,9 +24,11 @@ $highlight-weak: rgba(255, 255, 255, .2);
 $highlight-hint: rgba(255, 255, 255, .075);
 
 $logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
-$logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak);
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
+$logo-highlight: drop-shadow(0 0 1px $highlight);
 
 $profile: #222;
+$tile: #2a2a2a;
 
 $link: #cc4466;
 $empty: #222;

assets/img/logo.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="31.051453mm"
+   height="7.9586663mm"
+   viewBox="0 0 31.051453 7.9586663"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.0071666"
+     inkscape:cx="48.270932"
+     inkscape:cy="18.279076"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-77.20239,-97.922958)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="77.10714"
+       y="105.74404"
+       id="text4520"><tspan
+         sodipodi:role="line"
+         id="tspan4518"
+         x="77.10714"
+         y="105.74404"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"><tspan
+   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#333333;fill-opacity:1"
+   id="tspan4522">tra</tspan>xxx</tspan></text>
+  </g>
+</svg>

assets/img/logo.svg.2020_01_06_21_42_34.0.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="31.051453mm"
+   height="7.9586663mm"
+   viewBox="0 0 31.051453 7.9586663"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.0071666"
+     inkscape:cx="48.270932"
+     inkscape:cy="18.279076"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-77.20239,-97.922958)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="77.10714"
+       y="105.74404"
+       id="text4520"><tspan
+         sodipodi:role="line"
+         id="tspan4518"
+         x="77.10714"
+         y="105.74404"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"><tspan
+   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#333333;fill-opacity:1"
+   id="tspan4522">tra</tspan>xxx</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="90.459816"
+       y="102.49019"
+       id="text4629"><tspan
+         sodipodi:role="line"
+         id="tspan4627"
+         x="90.459816"
+         y="111.85396"
+         style="stroke-width:0.26458332"></tspan><tspan
+         sodipodi:role="line"
+         x="90.459816"
+         y="125.08312"
+         style="stroke-width:0.26458332"
+         id="tspan4631" /></text>
+  </g>
+</svg>

assets/js/networks/actions.js

@@ -55,7 +55,7 @@ function initNetworksActions(store, _router) {
 
         const { networks } = await graphql(`
             query Networks {
-                networks {
+                networks(orderBy: NAME_ASC) {
                     id
                     name
                     slug

public/css/style.css

@@ -1,4 +1,5 @@
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .filters[data-v-e35db0d8] {
   display: inline-block;
   list-style: none;
@@ -40,6 +41,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .filter-bar[data-v-6db17c96] {
   background: #fff;
   display: -webkit-box;
@@ -93,6 +95,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tile[data-v-3abcf101] {
   background: #fff;
   display: -webkit-box;
@@ -261,6 +264,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .heading[data-v-22ffe3e4] {
   padding: 0;
   margin: 0 0 1rem 0;
@@ -286,6 +290,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .banner[data-v-42bb19c4] {
   background: #222;
   flex-shrink: 0;
@@ -311,8 +316,9 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .actor[data-v-6989dc6f] {
-  width: 10rem;
+  width: 100%;
   background: #fff;
   display: inline-block;
   margin: 0 .5rem .5rem 0;
@@ -373,6 +379,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .column[data-v-d4b03dc2] {
   width: 1200px;
   max-width: 100%;
@@ -394,7 +401,8 @@
     margin: 0 1rem 0 0;
 }
 .info[data-v-d4b03dc2] {
-  background: #fff;
+  background: #222;
+  color: #fff;
   margin: 0 0 1.5rem 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   cursor: default;
@@ -406,15 +414,18 @@
             align-items: center;
     padding: 0 1rem;
 }
+.info .link[data-v-d4b03dc2] {
+    color: #fff;
+}
 .tidbit[data-v-d4b03dc2] {
   display: inline-block;
   height: 100%;
 }
 .tidbit[data-v-d4b03dc2]:not(:last-child) {
-    border-right: solid 1px rgba(0, 0, 0, 0.1);
+    border-right: solid 1px rgba(255, 255, 255, 0.075);
 }
 .tidbit .icon[data-v-d4b03dc2] {
-    fill: rgba(0, 0, 0, 0.7);
+    fill: rgba(255, 255, 255, 0.2);
     margin: 0 .25rem 0 0;
 }
 .tidbit.date[data-v-d4b03dc2], .tidbit.duration[data-v-d4b03dc2], .tidbit.shoot[data-v-d4b03dc2] {
@@ -436,8 +447,8 @@
 }
 .logo[data-v-d4b03dc2] {
   display: inline-block;
-  -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-          filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
 }
 .logo-site[data-v-d4b03dc2] {
   height: 3rem;
@@ -456,7 +467,7 @@
      object-position: 100% 50%;
 }
 .chain[data-v-d4b03dc2] {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.5);
   padding: 0 .5rem;
   font-weight: bold;
   font-size: .8rem;
@@ -476,7 +487,10 @@
 .actors[data-v-d4b03dc2] {
   display: -webkit-box;
   display: flex;
-  flex-wrap: wrap;
+}
+.actors .actor[data-v-d4b03dc2] {
+    width: 10rem;
+    margin: 0 1rem 0 0;
 }
 .link[data-v-d4b03dc2] {
   display: inline-block;
@@ -527,6 +541,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .header[data-v-194630f6] {
   background: #222;
   color: #fff;
@@ -545,16 +560,26 @@
   -webkit-box-pack: start;
           justify-content: flex-start;
 }
+.link-site .logo[data-v-194630f6] {
+    -o-object-position: 0 0;
+       object-position: 0 0;
+}
+.link-network[data-v-194630f6] {
+  -webkit-box-pack: end;
+          justify-content: flex-end;
+}
+.link-network .logo[data-v-194630f6] {
+    -o-object-position: 100% 0;
+       object-position: 100% 0;
+}
 .logo[data-v-194630f6] {
   width: 100%;
   max-width: 15rem;
   max-height: 5rem;
   -o-object-fit: contain;
      object-fit: contain;
-  -o-object-position: 0 0;
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-     object-position: 0 0;
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-  -webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
-          filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
 }
 @media (max-width: 720px) {
 .link[data-v-194630f6] {
@@ -566,8 +591,9 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tile[data-v-f4958086] {
-  background: #fff;
+  background: #2a2a2a;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
@@ -599,8 +625,8 @@
      object-fit: contain;
   font-size: 1rem;
   font-weight: bold;
-  -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-          filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
 }
 .title[data-v-f4958086] {
   color: #222;
@@ -613,6 +639,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .sites[data-v-7bebaa3e] {
   display: grid;
   grid-gap: 1rem;
@@ -636,6 +663,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 @media (max-width: 1200px) {
 .releases .tiles {
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -643,6 +671,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .network[data-v-e2e12602] {
   display: -webkit-box;
   display: flex;
@@ -688,8 +717,8 @@
      object-fit: contain;
   box-sizing: border-box;
   padding: 1rem;
-  -webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-          filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
 }
 .header[data-v-e2e12602] {
   width: 100%;
@@ -750,8 +779,9 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tile[data-v-8b4c90b0] {
-  background: #fff;
+  background: #222;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
@@ -782,8 +812,8 @@
      object-fit: contain;
   font-size: 1rem;
   font-weight: bold;
-  -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
-          filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
 }
 .title[data-v-8b4c90b0] {
   color: #222;
@@ -796,6 +826,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .networks[data-v-4709d404] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
@@ -809,6 +840,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .photos[data-v-0a0430c7] {
   display: inline-grid;
   grid-template-columns: repeat(auto-fit, 12rem);
@@ -853,6 +885,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .actor-inner[data-v-ea0483c2] {
   height: 100%;
   display: -webkit-box;
@@ -1111,14 +1144,22 @@
 }
 }
 
+/* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .actors[data-v-4f34b238] {
   display: grid;
-  grid-template-columns: repeat(auto-fit, 10rem);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 0.5fr));
   grid-gap: 0 .5rem;
   padding: 1rem;
 }
+@media (max-width: 720px) {
+.actors[data-v-4f34b238] {
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+}
+}
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .description a {
   color: #cc4466;
   text-decoration: inherit;
@@ -1128,6 +1169,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tag[data-v-7f130e7f] {
   display: -webkit-box;
   display: flex;
@@ -1172,6 +1214,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tile[data-v-602c6fd8] {
   color: #222;
   background: #fff;
@@ -1208,6 +1251,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .tags[data-v-66fa6284] {
   padding: 1rem;
 }
@@ -1218,6 +1262,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .errorpage[data-v-29109daf] {
   background: #fff;
   color: #ff6c88;
@@ -1242,6 +1287,7 @@
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .noselect {
   user-select: none;
   -webkit-user-select: none;
@@ -1364,6 +1410,7 @@ body {
     fill: #ff6c88; }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .header[data-v-10b7ec04] {
   display: -webkit-box;
   display: flex;
@@ -1385,6 +1432,10 @@ body {
   margin: 0 1rem 0 0;
   font-size: 2rem;
 }
+.logo .icon[data-v-10b7ec04] {
+    width: 6rem;
+    height: 1.5rem;
+}
 .nav[data-v-10b7ec04] {
   display: inline-block;
 }
@@ -1395,7 +1446,7 @@ body {
           align-items: center;
   -webkit-box-pack: center;
           justify-content: center;
-  padding: 1rem;
+  padding: 1rem 1rem calc(1rem - 5px) 1rem;
   border-bottom: solid 5px transparent;
   color: rgba(0, 0, 0, 0.5);
   text-decoration: none;
@@ -1435,6 +1486,7 @@ body {
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .container {
   background: #fafafa;
   height: 100%;
@@ -1463,6 +1515,7 @@ body {
 }
 
 /* $primary: #ff886c; */
+/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .icon {
   fill: #222;
   display: inline-block;

seeds/01_sites.js

@@ -121,12 +121,96 @@ function getSites(networksMap) {
         },
         // BANG
         {
-            slug: 'bang',
+            name: 'Trickery',
+            slug: 'bangtrickery',
+            url: 'https://www.bang.com/original/4800/bang-trickery',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Yngr',
+            slug: 'yngrcom',
+            // url: 'https://www.bang.com/original/5010/bang-yngr',
+            url: 'https://yngr.com',
+            network_id: networksMap.bang,
+            parameters: JSON.stringify({ siteId: 5010 }),
+        },
+        {
+            name: 'Roadside XXX',
+            slug: 'bangroadsidexxx',
+            // url: 'https://www.bang.com/original/4864/roadside-xxx',
+            url: 'https://roadsidexxx.com',
+            parameters: JSON.stringify({ siteId: 4864 }),
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Surprise',
+            slug: 'bangsurprise',
+            url: 'https://www.bang.com/original/5000/bang-surprise',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Real Teens',
+            slug: 'bangrealteens',
+            url: 'https://www.bang.com/original/3366/bang-real-teens',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'FCK.news',
+            slug: 'bangfcknews',
+            // url: 'https://www.bang.com/original/4998/bang-fckNews',
+            url: 'https://fck.news',
+            parameters: JSON.stringify({ siteId: 4998 }),
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Pretty & Raw',
+            slug: 'prettyandraw',
+            // url: 'https://www.bang.com/original/4792/bang-pretty-and-raw',
+            url: 'https://prettyandraw.com',
+            parameters: JSON.stringify({ siteId: 4782 }),
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Japan',
+            slug: 'bangjapan',
+            url: 'https://www.bang.com/original/3079/bang-japan',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Rammed',
+            slug: 'bangrammed',
+            url: 'https://www.bang.com/original/4836/bang-rammed',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Glamkore',
+            slug: 'bangglamkore',
+            url: 'https://www.bang.com/original/4586/bang-glamkore',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Screw The Cops',
+            slug: 'bangscrewthecops',
+            url: 'https://www.bang.com/original/4710/bang-screw-cops',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Real MILFs',
+            slug: 'bangrealmilfs',
+            url: 'https://www.bang.com/original/4448/bang-real-milfs',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Confessions',
+            slug: 'bangconfessions',
+            url: 'https://www.bang.com/original/4308/bang-confessions',
+            network_id: networksMap.bang,
+        },
+        {
+            name: 'Casting',
+            slug: 'bangcasting',
+            url: 'https://www.bang.com/original/3261/bang-casting',
             network_id: networksMap.bang,
-            name: 'Bang!',
-            url: 'https://bang.com',
-            description: null,
-            parameters: JSON.stringify({ independent: true }),
         },
         // BANGBROS
         {
@@ -1259,6 +1343,13 @@ function getSites(networksMap) {
             description: 'Submissive Sluts Are Dominated With Rough Sex And Bondage. Real pornstars, hardcore bondage, master & slave roles are what SexAndSubmission.com is all about. Watch submissive sluts give in to total domination!',
             network_id: networksMap.kink,
         },
+        {
+            slug: 'strugglingbabes',
+            name: 'Struggling Babes',
+            url: 'https://www.kink.com/channel/strugglingbabes',
+            description: 'Demystifying and celebrating alternative sexuality by providing the most authentic kinky videos. Experience the other side of porn.',
+            network_id: networksMap.kink,
+        },
         {
             slug: 'thetrainingofo',
             name: 'The Training of O',

seeds/02_studios.js

@@ -2,91 +2,6 @@ const upsert = require('../src/utils/upsert');
 
 function getStudios(networksMap) {
     return [
-        // Bang!
-        {
-            name: 'Trickery',
-            slug: 'bangtrickery',
-            url: 'https://www.bang.com/original/4800/bang-trickery',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Yngr',
-            slug: 'yngrcom',
-            url: 'https://www.bang.com/original/5010/bang-yngr',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Roadside XXX',
-            slug: 'bangroadsidexxx',
-            url: 'https://www.bang.com/original/4864/roadside-xxx',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Surprise',
-            slug: 'bangsurprise',
-            url: 'https://www.bang.com/original/5000/bang-surprise',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Real Teens',
-            slug: 'bangrealteens',
-            url: 'https://www.bang.com/original/3366/bang-real-teens',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'FCK.news',
-            slug: 'bangfcknews',
-            url: 'https://www.bang.com/original/4998/bang-fckNews',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Pretty & Raw',
-            slug: 'prettyandraw',
-            url: 'https://www.bang.com/original/4792/bang-pretty-and-raw',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Japan',
-            slug: 'bangjapan',
-            url: 'https://www.bang.com/original/3079/bang-japan',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Rammed',
-            slug: 'bangrammed',
-            url: 'https://www.bang.com/original/4836/bang-rammed',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Glamkore',
-            slug: 'bangglamkore',
-            url: 'https://www.bang.com/original/4586/bang-glamkore',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Screw The Cops',
-            slug: 'bangscrewthecops',
-            url: 'https://www.bang.com/original/4710/bang-screw-cops',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Real MILFs',
-            slug: 'bangrealmilfs',
-            url: 'https://www.bang.com/original/4448/bang-real-milfs',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Confessions',
-            slug: 'bangconfessions',
-            url: 'https://www.bang.com/original/4308/bang-confessions',
-            network_id: networksMap.bang,
-        },
-        {
-            name: 'Casting',
-            slug: 'bangcasting',
-            url: 'https://www.bang.com/original/3261/bang-casting',
-            network_id: networksMap.bang,
-        },
         // LegalPorno
         {
             slug: 'gonzocom',