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

2020-01-06 21:49:37 +01:00
parent ce02406073
commit 9e6e5605ed
95 changed files with 390 additions and 139 deletions
--- a/public/css/style.css
+++ b/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));
-          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(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;
-     object-position: 0 0;
-  -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));
+  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
+          filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
 }
@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));
-          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(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));
-          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(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));
-          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(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;