Added favicons for all networks. Showing sites on dark background, lightened logos. Updated Kink logos. Changed Bang! studios to sites, removed studio prominence.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
@import 'theme';
|
||||
|
||||
.actor {
|
||||
width: 10rem;
|
||||
width: 100%;
|
||||
background: $background;
|
||||
display: inline-block;
|
||||
margin: 0 .5rem .5rem 0;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user