Improving network overview. Added DDF logos and tag posters.

assets/components/networks/network.vue

@@ -1,12 +1,12 @@
 <template>
     <div
         v-if="network"
-        class="content network"
+        class="content"
     >
         <FilterBar :fetch-releases="fetchNetwork" />
 
-        <div class="content-inner">
+        <div class="network">
-            <div class="header">
+            <div class="sidebar">
                 <a
                     :href="network.url"
                     target="_blank"
@@ -17,34 +17,30 @@
                         :src="`/img/logos/${network.slug}/network.png`"
                         class="logo"
                     >
-
-                    <Icon
-                        v-if="network.url"
-                        icon="new-tab"
-                        class="icon-href"
-                    />
                 </a>
 
-                <p class="description">{{ network.description }}</p>
+                <p
+                    v-if="network.description"
+                    class="description"
+                >{{ network.description }}</p>
+
+                <template v-if="sites.length">
+                    <ul class="nolist sites">
+                        <li
+                            v-for="site in sites"
+                            :key="`site-${site.id}`"
+                        >
+                            <SiteTile :site="site" />
+                        </li>
+                    </ul>
+                </template>
             </div>
 
-            <template v-if="sites.length">
+            <div class="content-inner">
-                <h3 class="heading">Sites</h3>
+                <Releases
-
+                    :releases="releases"
-                <ul class="nolist sites">
+                />
-                    <li
+            </div>
-                        v-for="site in sites"
-                        :key="`site-${site.id}`"
-                    >
-                        <SiteTile :site="site" />
-                    </li>
-                </ul>
-            </template>
-
-            <Releases
-                :releases="releases"
-                :context="network.name"
-            />
         </div>
     </div>
 </template>
@@ -93,44 +89,57 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.header {
+.network {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: row;
-    justify-content: space-between;
+    flex-grow: 1;
-    align-items: top;
+    justify-content: stretch;
-    margin: 0 0 2rem 0;
+    overflow-y: auto;
 }
 
-.title {
+.sidebar {
-    display: inline-flex;
+    height: 100%;
-    align-items: top;
+    display: flex;
-    margin: 0 1rem 0 0;
+    flex-direction: column;
-
+    background: $profile;
-    &:hover .icon {
+    color: $text-contrast;
-        fill: $primary;
+    width: 25rem;
-    }
+    overflow: hidden;
 }
 
 .logo {
-    width: 20rem;
+    width: 100%;
     max-height: 8rem;
     object-fit: contain;
-    margin: 0 .5rem 0 0;
+    box-sizing: border-box;
+    padding: 1rem 2rem;
+    border-bottom: solid 1px $highlight-hint;
+    margin: 0;
+    filter: $logo-highlight;
 }
 
 .sites {
     display: grid;
     grid-gap: 1rem;
-    margin: 0 0 2rem 0;
+    padding: 1rem;
-}
+    margin: 0;
-
+    grid-template-columns: repeat(2, .5fr);
-.sites {
+    overflow-y: auto;
-    grid-template-columns: repeat(auto-fit, 15rem);
 }
 
 @media(max-width: $breakpoint) {
+    .network {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        height: 20rem;
+        overflow: hidden;
+    }
+
     .sites {
-        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
+        overflow-y: auto;
     }
 }
 </style>

assets/components/releases/release.vue

@@ -313,7 +313,7 @@ export default {
 
 .logo {
     display: inline-block;
-    filter: $logo-outline;
+    filter: $logo-shadow;
 }
 
 .logo-site {

assets/components/tags/tags.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tags">
-        <h3>Oral Sex</h3>
+        <h3>Oral</h3>
 
         <div class="tiles">
             <Tag

assets/components/tile/network.vue

@@ -52,7 +52,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-outline;
+    filter: $logo-shadow;
 }
 
 .title {

assets/components/tile/site.vue

@@ -4,11 +4,11 @@
         :title="site.name"
         class="tile"
     >
-        <object
+        <img
-            :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
+            :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
-            type="image/png"
+            :alt="site.name"
             class="logo"
-        >{{ site.name }}</object>
+        >
     </a>
 </template>
 
@@ -53,7 +53,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-outline;
+    filter: $logo-shadow;
 }
 
 .title {

assets/css/_theme.scss

@@ -23,7 +23,8 @@ $highlight-strong: rgba(255, 255, 255, .7);
 $highlight-weak: rgba(255, 255, 255, .2);
 $highlight-hint: rgba(255, 255, 255, .075);
 
-$logo-outline: 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-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);
 
 $profile: #222;
 

public/css/style.css

@@ -632,44 +632,63 @@
 }
 
 /* $primary: #ff886c; */
-.header[data-v-e2e12602] {
+.network[data-v-e2e12602] {
   display: -webkit-box;
   display: flex;
-  flex-wrap: wrap;
+  -webkit-box-orient: horizontal;
-  -webkit-box-pack: justify;
+  -webkit-box-direction: normal;
-          justify-content: space-between;
+          flex-direction: row;
-  -webkit-box-align: top;
+  -webkit-box-flex: 1;
-          align-items: top;
+          flex-grow: 1;
-  margin: 0 0 2rem 0;
+  -webkit-box-pack: stretch;
+          justify-content: stretch;
+  overflow-y: auto;
 }
-.title[data-v-e2e12602] {
+.sidebar[data-v-e2e12602] {
-  display: -webkit-inline-box;
+  height: 100%;
-  display: inline-flex;
+  display: -webkit-box;
-  -webkit-box-align: top;
+  display: flex;
-          align-items: top;
+  -webkit-box-orient: vertical;
-  margin: 0 1rem 0 0;
+  -webkit-box-direction: normal;
-}
+          flex-direction: column;
-.title:hover .icon[data-v-e2e12602] {
+  background: #222;
-    fill: #ff6c88;
+  color: #fff;
+  width: 25rem;
+  overflow: hidden;
 }
 .logo[data-v-e2e12602] {
-  width: 20rem;
+  width: 100%;
   max-height: 8rem;
   -o-object-fit: contain;
      object-fit: contain;
-  margin: 0 .5rem 0 0;
+  box-sizing: border-box;
+  padding: 1rem 2rem;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+  margin: 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));
 }
 .sites[data-v-e2e12602] {
   display: grid;
   grid-gap: 1rem;
-  margin: 0 0 2rem 0;
+  padding: 1rem;
-}
+  margin: 0;
-.sites[data-v-e2e12602] {
+  grid-template-columns: repeat(2, 0.5fr);
-  grid-template-columns: repeat(auto-fit, 15rem);
+  overflow-y: auto;
 }
 @media (max-width: 720px) {
+.network[data-v-e2e12602] {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+}
+.sidebar[data-v-e2e12602] {
+    height: 20rem;
+    overflow: hidden;
+}
 .sites[data-v-e2e12602] {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
+    overflow-y: auto;
 }
 }
 

seeds/04_media.js

@@ -29,7 +29,7 @@ const tagPosters = [
     {
         path: 'tags/double-penetration/poster.jpeg',
         tagSlug: 'double-penetration',
-        comment: '',
+        comment: 'Mia Malkova in "DP!" for HardX',
     },
     {
         path: 'tags/double-anal/poster.jpeg',
@@ -114,7 +114,7 @@ const tagPosters = [
     {
         path: 'tags/trainbang/poster.jpeg',
         tagSlug: 'trainbang',
-        comment: 'Nicole Black in GIO971 for LegalPorno',
+        comment: 'Kali Roses in "Passing Me Around" for Blacked',
     },
     {
         path: 'tags/bukkake/poster.jpeg',
@@ -211,11 +211,21 @@ const tagPhotos = [
         tagSlug: 'dv-tp',
         comment: 'Luna Rival in LegalPorno SZ1490',
     },
+    {
+        path: 'tags/double-penetration/0.jpeg',
+        tagSlug: 'double-penetration',
+        comment: '',
+    },
     {
         path: 'tags/gapes/0.jpeg',
         tagSlug: 'gapes',
         comment: 'McKenzee Miles in "Anal Buffet 4" for Evil Angel',
     },
+    {
+        path: 'tags/trainbang/0.jpeg',
+        tagSlug: 'trainbang',
+        comment: 'Nicole Black in GIO971 for LegalPorno',
+    },
     {
         path: 'tags/triple-anal/1.jpeg',
         tagSlug: 'triple-anal',