Improving network overview. Added DDF logos and tag posters.
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="network"
|
||||
class="content network"
|
||||
class="content"
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchNetwork" />
|
||||
|
||||
<div class="content-inner">
|
||||
<div class="header">
|
||||
<div class="network">
|
||||
<div class="sidebar">
|
||||
<a
|
||||
:href="network.url"
|
||||
target="_blank"
|
||||
|
@ -17,20 +17,14 @@
|
|||
: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>
|
||||
</div>
|
||||
<p
|
||||
v-if="network.description"
|
||||
class="description"
|
||||
>{{ network.description }}</p>
|
||||
|
||||
<template v-if="sites.length">
|
||||
<h3 class="heading">Sites</h3>
|
||||
|
||||
<ul class="nolist sites">
|
||||
<li
|
||||
v-for="site in sites"
|
||||
|
@ -40,13 +34,15 @@
|
|||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<Releases
|
||||
:releases="releases"
|
||||
:context="network.name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -93,44 +89,57 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.header {
|
||||
.network {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: top;
|
||||
margin: 0 0 2rem 0;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
justify-content: stretch;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-flex;
|
||||
align-items: top;
|
||||
margin: 0 1rem 0 0;
|
||||
|
||||
&:hover .icon {
|
||||
fill: $primary;
|
||||
}
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $profile;
|
||||
color: $text-contrast;
|
||||
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;
|
||||
}
|
||||
|
||||
.sites {
|
||||
grid-template-columns: repeat(auto-fit, 15rem);
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
grid-template-columns: repeat(2, .5fr);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
|
|
@ -313,7 +313,7 @@ export default {
|
|||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
filter: $logo-outline;
|
||||
filter: $logo-shadow;
|
||||
}
|
||||
|
||||
.logo-site {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="tags">
|
||||
<h3>Oral Sex</h3>
|
||||
<h3>Oral</h3>
|
||||
|
||||
<div class="tiles">
|
||||
<Tag
|
||||
|
|
|
@ -52,7 +52,7 @@ export default {
|
|||
object-fit: contain;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
filter: $logo-outline;
|
||||
filter: $logo-shadow;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
:title="site.name"
|
||||
class="tile"
|
||||
>
|
||||
<object
|
||||
:data="`/img/logos/${site.network.slug}/${site.slug}.png`"
|
||||
type="image/png"
|
||||
<img
|
||||
:src="`/img/logos/${site.network.slug}/${site.slug}.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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -632,44 +632,63 @@
|
|||
}
|
||||
|
||||
/* $primary: #ff886c; */
|
||||
.header[data-v-e2e12602] {
|
||||
.network[data-v-e2e12602] {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: top;
|
||||
align-items: top;
|
||||
margin: 0 0 2rem 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: row;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: stretch;
|
||||
justify-content: stretch;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.title[data-v-e2e12602] {
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: top;
|
||||
align-items: top;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
.title:hover .icon[data-v-e2e12602] {
|
||||
fill: #ff6c88;
|
||||
.sidebar[data-v-e2e12602] {
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
background: #222;
|
||||
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;
|
||||
}
|
||||
.sites[data-v-e2e12602] {
|
||||
grid-template-columns: repeat(auto-fit, 15rem);
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
grid-template-columns: repeat(2, 0.5fr);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 782 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 93 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 113 KiB |
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 3.7 MiB |
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 114 KiB |
|
@ -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',
|
||||
|
|