SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ introduce quick facts component

Browse source
This commit is contained in:
Sebin Nyshkim 2020-12-06 01:24:46 +01:00
parent 72e5323c63
commit 446a61795c
2 changed files with 137 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

111
src/App.vue
View file

@ -17,8 +17,16 @@
<ref-figure>
<template v-slot:img>
<div>
<img v-if="!nsfw" src="@img/fullbody-ref-SFW.jpg" alt="Sebin Full Body Ref" />
<img v-if="nsfw" src="@img/fullbody-ref-NSFW.jpg" alt="Sebin Full Body Ref" />
<img
v-if="nsfw"
src="@img/sebin-ref-body-NSFW.png"
alt="Sebin Full Body Ref"
/>
<img
v-else
src="@img/sebin-ref-body-SFW.png"
alt="Sebin Full Body Ref"
/>
</div>
</template>
<template v-slot:caption>
@ -34,7 +42,7 @@
<data-table class="prose" :dataset="getSebinData.colors" />
<div class="prose">
<div class="tldr">
<quick-facts>
<ul>
<li>Bipedal plantigrade</li>
<li>
@ -46,7 +54,8 @@
<li>Brown spikes running over back and top-side of tail</li>
<li>Tail about 1 meter in length</li>
</ul>
</div>
</quick-facts>
<p>
Sebin is a bipedal plantigrade. His body is mostly covered by red
scales with yellow chest plates running from below his chin over his
@ -59,14 +68,15 @@
<h3 id="wings">Wings</h3>
<div class="prose">
<div class="tldr">
<quick-facts>
<ul>
<li>Wingspan 3-4 meters</li>
<li>Closed when on the ground</li>
<li>Function like a second pair of arms</li>
<li>Pointy talon on end of "hand"</li>
</ul>
</div>
</quick-facts>
<p>
His wing span is around 3-4 meters. He has them closed when on the
ground. His wings function like a second pair of arms, at which ends
@ -83,43 +93,11 @@
<template v-slot:img>
<div>
<img
src="@img/sebin-hairstyle-short.jpg"
alt="Sebin with short hair"
src="@img/sebin-ref-expressions.png"
alt="Sebin's Expressions"
/>
</div>
</template>
<template v-slot:caption>
<label>Sebin with short hair</label>
</template>
<template v-slot:copyright>
<a href="https://twitter.com/LeoboArt">
LeoboArt
</a>
</template>
</ref-figure>
<div class="prose">
<div class="tldr">
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as
for eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</div>
</div>
<ref-figure>
<template v-slot:img>
<div>
<img src="@img/expressions-ref.jpg" alt="Sebin's Expressions" />
</div>
</template>
<template v-slot:caption>
<label>Sebin's Expressions</label>
</template>
@ -131,6 +109,20 @@
</ref-figure>
<div class="prose">
<quick-facts>
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as
for eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</quick-facts>
<p>
He has round pupils instead of the slit ones typical for reptilians.
He has short yellow spikes above his eyes that resemble eyebrows, as
@ -146,7 +138,7 @@
<h3 id="upperbody">Upper Body</h3>
<div class="prose">
<div class="tldr">
<quick-facts>
<ul>
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
<li>
@ -154,7 +146,8 @@
preference towards body builder
</li>
</ul>
</div>
</quick-facts>
<p>
Sebin started working out at the age of 17. Being in top shape is
very important to him. His favorite workouts are weight-lifting
@ -197,9 +190,11 @@
<h3>Additional Muscle References</h3>
<div class="prose" v-show="!nsfw">
<p class="nsfw-bar">
Some of these additional references are NSFW. Click
<a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
mode.
<strong>
Some of these additional references are NSFW. Click
<a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
mode.
</strong>
</p>
</div>
<gallery v-show="nsfw">
@ -288,7 +283,7 @@
<ref-figure v-show="nsfw">
<template v-slot:img>
<div>
<img src="@img/penis-ref.jpg" alt="Sebin's manly parts" />
<img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
</div>
</template>
<template v-slot:caption>
@ -304,7 +299,7 @@
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
<div class="prose" v-show="nsfw">
<div class="tldr">
<quick-facts>
<ul>
<li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li>
@ -314,7 +309,8 @@
</li>
<li>External balls</li>
</ul>
</div>
</quick-facts>
<p>
Despite his majorly reptilian appearance he has nipples, a feature
of the human side of his family, which also shows with his external
@ -626,6 +622,7 @@
</template>
<script>
import QuickFacts from "@components/QuickFacts.vue";
import DataTable from "@components/DataTable.vue";
import Gallery from "@components/Gallery.vue";
import RefFigure from "@components/Figure.vue";
@ -638,6 +635,7 @@ import Helper from "@mixins/Helper.js";
export default {
name: "app",
components: {
QuickFacts,
DataTable,
Gallery,
RefFigure,
@ -699,7 +697,8 @@ main {
@include mq-mobile {
h2,
h3,
p {
p,
.quickfacts {
margin-left: 1rem;
margin-right: 1rem;
}
@ -715,18 +714,4 @@ section {
border-bottom: 0.125em $copy-color dotted;
}
}
.tldr {
font-style: italic;
background-color: rgba($bg-color-light, 0.25);
margin: 1em auto;
border-left: 0.25em solid $bg-color-light;
padding: 1em;
&:before {
display: block;
content: "tl;dr";
margin-bottom: 1em;
}
}
</style>

89
src/components/QuickFacts.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<div class="quickfacts" :class="{ open: isExpanded }">
<h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
<div class="quickfacts__list">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
};
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded;
}
}
};
</script>
<style lang="scss">
@import "@scss/base.scss";
.quickfacts {
border-radius: 1em;
overflow: hidden;
margin: 1em 0;
position: relative;
&:before {
position: absolute;
content: "";
display: block;
top: 1em;
right: 1em;
transform: rotate(180deg);
transition: 0.3s all ease-in-out;
border: {
right: 0.75em solid transparent;
bottom: 0.75em solid #fff;
left: 0.75em solid transparent;
}
}
&.open {
.quickfacts__head {
background-color: $bg-color-light;
}
.quickfacts__list {
max-height: 17em;
padding: 1.5rem;
}
&:before {
transform: rotate(0deg);
}
}
&__head {
background-color: $bg-color-dark;
margin: 0;
border: 0;
padding: 0.75rem 1.5rem;
transition: 0.3s all ease-in-out;
cursor: pointer;
}
&__list {
background-color: rgba($bg-color-dark, 0.5);
max-height: 0em;
padding: 0 1.5rem;
transition: 0.3s all ease-in-out;
ul {
margin: 0;
padding-left: 1.25em;
}
}
}
</style>