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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
74
assets/img/logo.svg
Normal file
74
assets/img/logo.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
89
assets/img/logo.svg.2020_01_06_21_42_34.0.svg
Normal file
89
assets/img/logo.svg.2020_01_06_21_42_34.0.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -55,7 +55,7 @@ function initNetworksActions(store, _router) {
|
||||
|
||||
const { networks } = await graphql(`
|
||||
query Networks {
|
||||
networks {
|
||||
networks(orderBy: NAME_ASC) {
|
||||
id
|
||||
name
|
||||
slug
|
||||
|
||||
Reference in New Issue
Block a user