Drastic actor page redesign. Storing one avatar per actor, other profile photos as 'photo' role; no longer assuming first photo is avatar.

2019-11-28 05:36:22 +01:00 · 2019-11-28 05:36:22 +01:00 · 4be508b388
parent 884ef248e4
commit 4be508b388
300 changed files with 1110 additions and 213 deletions
--- a/assets/components/actor/actor.vue
+++ b/assets/components/actor/actor.vue
@ -5,104 +5,228 @@
    >
        <FilterBar :fetch-releases="fetchReleases" />

-        <div class="header">
-            <img
-                v-if="actor.avatars && actor.avatars.length > 0"
-                :src="`/media/${actor.avatars[0].path}`"
-                class="avatar"
-            >
-
-            <ul class="bio sidebar nolist">
-                <h2 class="title">{{ actor.name }}</h2>
-
-
-                <li v-if="actor.aliases.length">
-                    <dfn class="bio-heading">Also known as</dfn>
-                    <span>{{ actor.aliases.join(', ') }}</span>
-                </li>
-
-                <li v-if="actor.gender">
-                    <dfn class="bio-heading">Gender</dfn>
-                    <span>{{ actor.gender }}</span>
-                </li>
-
-                <li v-if="actor.birthdate">
-                    <dfn class="bio-heading">Date of birth</dfn>
-                    <span>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }} ({{ age }})</span>
-                </li>
-
-                <li v-if="actor.birthCountry || actor.birthPlace">
-                    <dfn class="bio-heading">Born in</dfn>
-
-                    <span v-if="actor.birthCountry">
-                        <img
-                            class="flag"
-                            :src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
-                        >{{ actor.birthCountry.name }}
-                    </span>
-
-                    <span v-if="actor.birthPlace">{{ actor.birthPlace }}</span>
-                </li>
-
-                <li v-if="actor.residenceCountry || actor.residencePlace">
-                    <dfn class="bio-heading">Lives in</dfn>
-
-                    <span v-if="actor.residenceCountry">
-                        <img
-                            class="flag"
-                            :src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.svg`"
-                        >{{ actor.residenceCountry.name }}
-                    </span>
-
-                    <span v-if="actor.residencePlace">{{ actor.residencePlace }}</span>
-                </li>
-
-                <li v-if="actor.ethnicity">
-                    <dfn class="bio-heading">Ethnicity</dfn>
-                    <span>{{ actor.ethnicity }}</span>
-                </li>
-
-                <li v-if="actor.height">
-                    <dfn class="bio-heading">Height</dfn>
-                    <span>{{ actor.height }} cm</span>
-                </li>
-
-                <li v-if="actor.bust || actor.waist || actor.hip">
-                    <dfn class="bio-heading">Measurements</dfn>
-                    <span>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }} <span v-if="actor.naturalBoobs !== undefined">({{ actor.naturalBoobs ? 'Natural' : 'Enhanced' }})</span></span>
-                </li>
-
-                <li v-if="actor.social && actor.social.length > 0">
-                    <dfn class="bio-heading">Social</dfn>
-                    <a
-                        v-for="social in actor.social"
-                        :key="`social-${social.id}`"
-                        :href="social.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="social"
-                    >{{ social.platform || social.url }}</a>
-                </li>
-
-                <li class="description">{{ actor.description }}</li>
-
-                <div class="photos">
+        <div class="actor-inner">
+            <div class="profile">
+                <a
+                    v-if="actor.avatar"
+                    :href="`/media/${actor.avatar.path}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="avatar-link"
+                >
                    <img
-                        v-for="avatar in actor.avatars.slice(1)"
-                        :key="`avatar-${avatar.id}`"
-                        :src="`/media/${avatar.path}`"
-                        class="photo"
+                        :src="`/media/${actor.avatar.thumbnail}`"
+                        class="avatar"
                    >
+                </a>
+
+                <ul class="bio nolist">
+                    <li class="bio-header">
+                        <h2 class="bio-name">{{ actor.name }}</h2>
+                        <span
+                            class="bio-gender"
+                            :class="{ male: actor.gender === 'male', female: actor.gender === 'female' }"
+                        ><Icon :icon="actor.gender" /></span>
+                    </li>
+
+                    <li
+                        v-if="actor.aliases.length"
+                        class="bio-item"
+                    >
+                        <dfn class="bio-heading">Also known as</dfn>
+                        <span>{{ actor.aliases.join(', ') }}</span>
+                    </li>
+
+                    <li
+                        v-if="actor.birthdate"
+                        class="bio-item"
+                    >
+                        <dfn class="bio-heading"><Icon icon="cake" />Birthdate</dfn>
+
+                        <span
+                            v-if="actor.birthdate"
+                            class="birthdate"
+                        >{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ age }}</span></span>
+                    </li>
+
+                    <li
+                        v-if="actor.birthCountry || actor.birthPlace"
+                        class="bio-item birth"
+                    >
+                        <dfn class="bio-heading"><Icon icon="home2" />Born in</dfn>
+
+                        <span>
+                            <span
+                                v-if="actor.birthPlace"
+                                class="place"
+                            >{{ actor.birthPlace }}</span>
+
+                            <span
+                                v-if="actor.birthCountry"
+                                class="country birthcountry"
+                            >
+                                <img
+                                    class="flag"
+                                    :src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.png`"
+                                >{{ actor.birthCountry.name }}
+                            </span>
+                        </span>
+                    </li>
+
+                    <li
+                        v-if="actor.residenceCountry || actor.residencePlace"
+                        class="bio-item residence"
+                    >
+                        <dfn class="bio-heading"><Icon icon="location" />Lives in</dfn>
+
+                        <span>
+                            <span
+                                v-if="actor.residencePlace"
+                                class="place"
+                            >{{ actor.residencePlace }}</span>
+
+                            <span
+                                v-if="actor.residenceCountry"
+                                class="country"
+                            >
+                                <img
+                                    v-if="actor.residenceCountry"
+                                    class="flag"
+                                    :src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.png`"
+                                >{{ actor.residenceCountry.name }}
+                            </span>
+                        </span>
+                    </li>
+                </ul>
+
+                <ul class="bio nolist">
+                    <li
+                        v-if="actor.ethnicity"
+                        class="bio-item ethnicity"
+                    >
+                        <dfn class="bio-heading"><Icon icon="earth2" />Ethnicity</dfn>
+                        <span>{{ actor.ethnicity }}</span>
+                    </li>
+
+                    <li
+                        v-if="actor.bust || actor.waist || actor.hip"
+                        title="bust-waist-hip"
+                        class="bio-item"
+                    >
+                        <dfn class="bio-heading"><Icon icon="ruler" />Sizes</dfn>
+                        <span>
+                            <Icon
+                                v-if="actor.naturalBoobs === false"
+                                v-tooltip="'Boobs enhanced'"
+                                icon="magic-wand"
+                                class="enhanced"
+                            />{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
+                        </span>
+                    </li>
+
+                    <li
+                        v-if="actor.height"
+                        class="bio-item height"
+                    >
+                        <dfn class="bio-heading"><Icon icon="height" />Height</dfn>
+                        <span>
+                            <span class="height-metric">{{ actor.height }} cm</span>
+                            <span class="height-imperial">{{ imperialHeight.feet }}' {{ imperialHeight.inches }}"</span>
+                        </span>
+                    </li>
+
+                    <li
+                        v-if="actor.weight"
+                        class="bio-item weight"
+                    >
+                        <dfn class="bio-heading"><Icon icon="scale" />Weight</dfn>
+
+                        <span>
+                            <span class="weight-metric">{{ actor.weight }} kg</span>
+                            <span class="weight-imperial">{{ imperialWeight }} lbs</span>
+                        </span>
+                    </li>
+
+                    <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
+                </ul>
+
+                <div>
+                    <p
+                        v-if="actor.description"
+                        class="description"
+                        :class="{ expanded }"
+                        @click="expanded = !expanded"
+                    >{{ actor.description }}</p>
+
+                    <li
+                        v-if="actor.social && actor.social.length > 0"
+                        class="social"
+                    >
+                        <a
+                            v-for="social in actor.social"
+                            :key="`social-${social.id}`"
+                            v-tooltip.bottom="social.url"
+                            :href="social.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="social-link"
+                        >
+                            <Icon
+                                v-if="social.platform"
+                                :icon="social.platform"
+                            />
+
+                            <Icon
+                                v-else
+                                icon="link"
+                            />
+                        </a>
+                    </li>
                </div>
-            </ul>
+            </div>

-        </div>

-        <div class="content-inner">
-            <Releases
-                :releases="releases"
-                :context="actor.name"
-            />
+            <div class="actor-content">
+                <div
+                    v-if="actor.photos && actor.photos.length > 0"
+                    class="photos-container"
+                    @wheel.prevent="scrollPhotos"
+                >
+                    <div
+                        class="photos"
+                        @wheel.prevent="scrollPhotos"
+                    >
+                        <a
+                            v-if="actor.avatar"
+                            :href="`/media/${actor.avatar.path}`"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="avatar-link photo-link"
+                        >
+                            <img
+                                :src="`/media/${actor.avatar.thumbnail}`"
+                                class="avatar photo"
+                            >
+                        </a>
+
+                        <a
+                            v-for="photo in actor.photos"
+                            :key="`photo-${photo.id}`"
+                            :href="`/media/${photo.path}`"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="photo-link"
+                        >
+                            <img
+                                :src="`/media/${photo.thumbnail}`"
+                                class="photo"
+                            >
+                        </a>
+                    </div>
+                </div>
+
+                <Releases :releases="releases" />
+            </div>
        </div>
    </div>
 </template>
@ -110,6 +234,8 @@
 <script>
 import dayjs from 'dayjs';

+import { cmToFeetInches, kgToLbs } from '../../../src/utils/convert';
+
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';

@ -121,6 +247,18 @@ async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
 }

+function imperialHeight() {
+    return cmToFeetInches(this.actor.height);
+}
+
+function imperialWeight() {
+    return kgToLbs(this.actor.weight);
+}
+
+function scrollPhotos(event) {
+    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
 async function mounted() {
    [[this.actor]] = await Promise.all([
        this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
@ -140,14 +278,18 @@ export default {
            actor: null,
            releases: null,
            pageTitle: null,
+            expanded: false,
        };
    },
    computed: {
        age,
+        imperialHeight,
+        imperialWeight,
    },
    mounted,
    methods: {
        fetchReleases,
+        scrollPhotos,
    },
 };
 </script>
@ -155,15 +297,194 @@ export default {
 <style lang="scss" scoped>
@import 'theme';

-.header {
+.actor-inner {
+    height: 100%;
    display: flex;
-    justify-content: space-between;
-    padding: 1rem;
+    flex-direction: column;
+    padding: 0;
+    overflow-x: auto;
 }

-.title {
+.profile {
+    background: $profile;
+    color: $highlight-extreme;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+
+    .avatar-link {
+        font-size: 0;
+        padding: 1rem;
+    }
+
+    .avatar {
+        height: 15rem;
+        width: 15rem;
+        flex-shrink: 0;
+        margin: 0 1rem 0 0;
+        object-fit: cover;
+        object-position: 50% 0;
+    }
+}
+
+.bio {
+    flex-grow: 1;
+    min-width: 18rem;
+    box-sizing: border-box;
+    padding: 1rem;
+    margin: 0 3rem 0 0;
+}
+
+.bio-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 1rem 0;
+}
+
+.bio-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 .5rem 0;
+    line-height: 1.75;
+    text-align: right;
+    font-size: .9rem;
+    font-weight: bold;
+}
+
+.bio-heading {
+    color: $highlight;
+    font-weight: normal;
+    font-style: normal;
+
+    .icon {
+        fill: $highlight;
+        margin: 0 .5rem 0 0;
+    }
+}
+
+.flag {
+    margin: 0 .25rem 0 0;
+}
+
+.bio-name {
    display: inline-block;
-    margin: 0 .5rem 0 0;
+    padding: 0;
+    margin: 0;
+}
+
+.bio-gender {
+    display: inline-block;
+    font-weight: bold;
+    text-transform: capitalize;
+    font-weight: normal;
+
+    .icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+
+    &.female .icon {
+        fill: $female;
+    }
+
+    &.male .icon {
+        fill: $male;
+    }
+}
+
+.birthdate {
+    display: block;
+}
+
+.age {
+    font-weight: bold;
+    padding: 0 0 0 .5rem;
+    border-left: solid 1px $highlight-weak;
+    margin: 0 0 0 .5rem;
+
+    /*
+    &::before {
+        content: ' (';
+    }
+
+    &::after {
+        content: ')';
+    }
+
+    &::before,
+    &::after {
+        color: $highlight;
+    }
+    */
+}
+
+.country {
+    display: block;
+}
+
+.height-imperial,
+.weight-imperial {
+    padding: 0 0 0 .5rem;
+    border-left: solid 1px $highlight-weak;
+    margin: 0 0 0 .5rem;
+}
+
+.enhanced.icon {
+    fill: $primary;
+    padding: 0 .5rem;
+}
+
+.description {
+    max-height: 10rem;
+    flex-grow: 1;
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 1rem 0 0 0;
+    margin: 0 2rem 0 0;
+    line-height: 1.5;
+    text-overflow: ellipsis;
+    font-size: .9rem;
+    overflow: hidden;
+    cursor: pointer;
+
+    &.expanded {
+        overflow: visible;
+    }
+}
+
+.social {
+    display: block;
+    margin: 1rem 0;
+}
+
+.social-link {
+    display: inline-block;
+    padding: 0 1rem 0 0;
+
+    .icon {
+        fill: $highlight;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    &:hover .icon {
+        fill: $primary;
+    }
+}
+
+.scraped {
+    color: $highlight-weak;
+    margin: 1rem 0 0 0;
+    font-size: .8rem;
+}
+
+.actor-content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
 }

 .heading {
@ -171,41 +492,115 @@ export default {
    margin: 0 0 1rem 0;
 }

-.bio-heading {
-    display: inline-block;
-    font-weight: bold;
-    margin: .5rem 0 0 0;
+.photos-container {
+    min-width: 15rem;
+    box-sizing: border-box;
+    border-right: solid 1px $shadow-hint;
+    padding: 1rem 1.5rem 1rem 1rem;
+    margin: 0 .5rem 0 0;
+}

-    &::after {
-        content: ':';
+.photos {
+    max-width: 35vw;
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fit, 15rem);
+    grid-gap: .5rem;
+    font-size: 0;
+
+    .avatar-link {
+        display: none;
    }
 }

-.description {
-    padding: 1rem;
-}
-
-.avatar {
-    height: 20rem;
-    margin: 0 1rem 0 0;
-    display: block;
+.photo-link {
+    height: 15rem;
 }

 .photo {
-    height: 10rem;
-}
-
-.social {
-    display: block;
-}
-
-.flag {
-    height: 1rem;
-    border: solid 1px $shadow-weak;
-    margin: 0 .25rem 0 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 0;
+    box-shadow: 0 0 3px $shadow-weak;
 }

 .releases {
    flex-grow: 1;
+    padding: 1rem;
+}
+
+@media(max-width: $breakpoint4) {
+    .description {
+        display: none;
+    }
+}
+
+@media(max-width: $breakpoint3) {
+    .profile .avatar-link,
+    .social {
+        display: none;
+    }
+
+    .actor-content {
+        flex-direction: column;
+    }
+
+    .photos-container {
+        border: none;
+        border-bottom: solid 1px $shadow-hint;
+        padding: 1rem 1rem 1.5rem 1rem;
+        margin: 0 0 .5rem 0;
+    }
+
+    .photos {
+        width: 100%;
+        max-width: 100%;
+        display: flex;
+        overflow-x: scroll;
+        scrollbar-width: none;
+
+        .avatar-link {
+            display: inline-block;
+        }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .photo-link {
+        height: 15rem;
+        flex-shrink: 0;
+        margin: 0 .5rem 0 0;
+    }
+}
+
+@media(max-width: $breakpoint) {
+    .profile {
+        flex-direction: column;
+        padding: 0 0 .5rem 0;
+    }
+
+    .bio {
+        width: 100%;
+        padding: 0 1rem;
+        margin: 0;
+    }
+
+    .bio-header {
+        margin: 1rem 0;
+    }
+
+    .place,
+    .ethnicity,
+    .residence,
+    .weight,
+    .scraped {
+        display: none;
+    }
+
+    .social {
+        padding: 0 1rem;
+    }
 }
 </style>
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@ -123,6 +123,7 @@ export default {
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem;
+    z-index: 1;
    font-size: 0;
    box-shadow: 0 0 3px $shadow;

--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@ -1,11 +1,11 @@
 <template>
-    <div>
+    <div class="releases">
        <h3
            v-if="context"
            class="heading"
        ><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>

-        <ul class="nolist releases">
+        <ul class="nolist tiles">
            <li
                v-for="release in releases"
                :key="`release-${release.id}`"
@ -55,14 +55,20 @@ export default {
    }
 }

-.releases {
+.tiles {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
    grid-gap: 1rem;
 }

+@media(max-width: $breakpoint4) {
+    .tiles {
+        grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
+    }
+}
+
@media(max-width: $breakpoint) {
-    .releases {
+    .tiles {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
 }
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@ -70,6 +70,7 @@
                class="row link"
            >
                <h3
+                    v-tooltip.top="release.title"
                    :title="release.title"
                    class="title"
                >{{ release.title }}</h3>
@ -212,12 +213,12 @@ export default {

 .title {
    color: $text;
-    margin: 0;
+    margin: 0 .25rem .25rem 0;
    font-size: 1rem;
-    word-wrap: break-word;
-    overflow: hidden;
    max-height: 3rem;
-    line-height: 1.5rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }

 .network {
@ -234,9 +235,9 @@ export default {
 }

 .tags {
-    max-height: 2.85rem;
+    max-height: 2.5rem;
    padding: .25rem .5rem 1rem .5rem;
-    line-height: 1.25rem;
+    line-height: 1.5rem;
    word-wrap: break-word;
    overflow-y: hidden;
 }
@ -269,10 +270,11 @@ export default {
    color: $shadow;
    display: inline-block;
    padding: .25rem;
-    box-shadow: 0 0 2px $shadow-weak;
    font-size: .75rem;
    font-weight: bold;
    text-decoration: none;
+    line-height: 1;
+    border: solid 1px $shadow-hint;

    &:hover {
        color: $primary;
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@ -2,6 +2,7 @@
 $breakpoint: 720px;
 $breakpoint2: 900px;
 $breakpoint3: 1200px;
+$breakpoint4: 1500px;
 $primary: #ff6c88;

 $background: #fff;
@ -10,11 +11,20 @@ $text: #222;
 $text-contrast: #fff;

 $shadow: rgba(0, 0, 0, .5);
+$shadow-extreme: rgba(0, 0, 0, .9);
 $shadow-strong: rgba(0, 0, 0, .7);
 $shadow-weak: rgba(0, 0, 0, .2);
 $shadow-hint: rgba(0, 0, 0, .1);

 $highlight: rgba(255, 255, 255, .5);
-$link: #cc4466;
+$highlight-weak: rgba(255, 255, 255, .2);
+$highlight-extreme: rgba(255, 255, 255, .9);
+$highlight-strong: rgba(255, 255, 255, .7);

+$profile: #222;
+
+$link: #cc4466;
 $empty: #222;
+
+$male: #0af;
+$female: #f0a;
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -24,7 +24,7 @@ body {
 }

 .heading {
-    color: $primary;
+    color: $shadow;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
--- a/assets/img/aid-kit.svg
+++ b/assets/img/aid-kit.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>aid-kit</title>
+<path d="M14 4h-3v-2c0-0.55-0.45-1-1-1h-4c-0.55 0-1 0.45-1 1v2h-3c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM6 2h4v2h-4v-2zM12 11h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2z"></path>
+</svg>
--- a/assets/img/amazon.svg
+++ b/assets/img/amazon.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>amazon</title>
+<path d="M14.463 13.831c-1.753 1.294-4.291 1.981-6.478 1.981-3.066 0-5.825-1.131-7.912-3.019-0.163-0.147-0.019-0.35 0.178-0.234 2.253 1.313 5.041 2.1 7.919 2.1 1.941 0 4.075-0.403 6.041-1.238 0.294-0.125 0.544 0.197 0.253 0.409z"></path>
+<path d="M15.191 13c-0.225-0.287-1.481-0.137-2.047-0.069-0.172 0.019-0.197-0.128-0.044-0.238 1.003-0.703 2.647-0.5 2.838-0.266 0.194 0.238-0.050 1.884-0.991 2.672-0.144 0.122-0.281 0.056-0.219-0.103 0.216-0.528 0.688-1.709 0.463-1.997z"></path>
+<path d="M11.053 11.838l0.003 0.003c0.387-0.341 1.084-0.95 1.478-1.278 0.156-0.125 0.128-0.334 0.006-0.509-0.353-0.488-0.728-0.884-0.728-1.784v-3c0-1.272 0.088-2.438-0.847-3.313-0.738-0.706-1.963-0.956-2.9-0.956-1.831 0-3.875 0.684-4.303 2.947-0.047 0.241 0.131 0.369 0.287 0.403l1.866 0.203c0.175-0.009 0.3-0.181 0.334-0.356 0.159-0.778 0.813-1.156 1.547-1.156 0.397 0 0.847 0.144 1.081 0.5 0.269 0.397 0.234 0.938 0.234 1.397v0.25c-1.116 0.125-2.575 0.206-3.619 0.666-1.206 0.522-2.053 1.584-2.053 3.147 0 2 1.259 3 2.881 3 1.369 0 2.116-0.322 3.172-1.403 0.35 0.506 0.463 0.753 1.103 1.284 0.147 0.078 0.328 0.072 0.456-0.044zM9.113 7.144c0 0.75 0.019 1.375-0.359 2.041-0.306 0.544-0.791 0.875-1.331 0.875-0.737 0-1.169-0.563-1.169-1.394 0-1.641 1.472-1.938 2.863-1.938v0.416z"></path>
+</svg>
--- a/assets/img/balance.svg
+++ b/assets/img/balance.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>balance</title>
+<path d="M6 7.5v-0.5h-6v0.5c0 0.828 0.672 1.5 1.5 1.5h3c0.828 0 1.5-0.672 1.5-1.5z"></path>
+<path d="M10 7.5c0 0.828 0.672 1.5 1.5 1.5h3c0.828 0 1.5-0.672 1.5-1.5v-0.5h-6v0.5z"></path>
+<path d="M9 2h3.15l-2.087 3.757c-0.134 0.241-0.047 0.546 0.194 0.68s0.546 0.047 0.68-0.194l2.063-3.713 2.063 3.713c0.091 0.164 0.262 0.257 0.438 0.257 0.082 0 0.165-0.020 0.242-0.063 0.241-0.134 0.328-0.439 0.194-0.68l-2.5-4.5c-0.088-0.159-0.255-0.257-0.437-0.257h-4c0-0.552-0.448-1-1-1s-1 0.448-1 1h-4c-0.182 0-0.349 0.098-0.437 0.257l-2.5 4.5c-0.134 0.241-0.047 0.546 0.194 0.68s0.546 0.047 0.68-0.194l2.063-3.713 2.063 3.713c0.091 0.164 0.262 0.257 0.438 0.257 0.082 0 0.165-0.020 0.242-0.063 0.241-0.134 0.328-0.439 0.194-0.68l-2.087-3.757h3.15v12l-3 1v1h8v-1l-3-1v-12z"></path>
+</svg>
--- a/assets/img/bin.svg
+++ b/assets/img/bin.svg
@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bin</title>
+<path d="M2 5v10c0 0.55 0.45 1 1 1h9c0.55 0 1-0.45 1-1v-10h-11zM5 14h-1v-7h1v7zM7 14h-1v-7h1v7zM9 14h-1v-7h1v7zM11 14h-1v-7h1v7z"></path>
+<path d="M13.25 2h-3.25v-1.25c0-0.412-0.338-0.75-0.75-0.75h-3.5c-0.412 0-0.75 0.338-0.75 0.75v1.25h-3.25c-0.413 0-0.75 0.337-0.75 0.75v1.25h13v-1.25c0-0.413-0.338-0.75-0.75-0.75zM9 2h-3v-0.987h3v0.987z"></path>
+</svg>
--- a/assets/img/cake.svg
+++ b/assets/img/cake.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cake</title>
+<path d="M9 5.019v-1.519c0-0.275-0.225-0.5-0.5-0.5h-1c-0.275 0-0.5 0.225-0.5 0.5v1.519c-3.946 0.154-7 1.206-7 2.481v6c0 1.381 3.582 2.5 8 2.5s8-1.119 8-2.5v-6c0-1.275-3.054-2.327-7-2.481zM1.672 7.275c0.379-0.199 0.898-0.388 1.501-0.545 1.085-0.283 2.417-0.463 3.827-0.522v1.292c0 0.275 0.225 0.5 0.5 0.5h1c0.275 0 0.5-0.225 0.5-0.5v-1.292c1.41 0.058 2.741 0.238 3.827 0.522 0.603 0.157 1.122 0.346 1.501 0.545 0.167 0.088 0.283 0.165 0.362 0.225-0.079 0.061-0.195 0.137-0.362 0.225-0.379 0.199-0.898 0.388-1.501 0.545-1.339 0.35-3.053 0.542-4.827 0.542s-3.488-0.193-4.827-0.542c-0.603-0.157-1.122-0.346-1.501-0.545-0.167-0.088-0.283-0.165-0.362-0.225 0.079-0.061 0.195-0.137 0.362-0.225zM15 11.93c-1.365 0.769-3.988 1.289-7 1.289s-5.635-0.52-7-1.289v-1.406c1.365 0.769 3.988 1.289 7 1.289s5.635-0.52 7-1.289v1.406zM8 2.5c-0.552 0-1-0.448-1-1 0-0.020 0.001-0.039 0.002-0.058 0.038-0.961 0.998-1.442 0.998-1.442s0.96 0.481 0.998 1.442c0.001 0.019 0.002 0.039 0.002 0.058 0 0.552-0.448 1-1 1z"></path>
+</svg>
--- a/assets/img/facebook.svg
+++ b/assets/img/facebook.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>facebook</title>
+<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
+</svg>
--- a/assets/img/facebook2.svg
+++ b/assets/img/facebook2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>facebook2</title>
+<path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path>
+</svg>
--- a/assets/img/height.svg
+++ b/assets/img/height.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>height</title>
+<path d="M12 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
+<path d="M12 4h-3c-0.552 0-1 0.448-1 1v5h1v6h1.25v-6h0.5v6h1.25v-6h1v-5c0-0.552-0.448-1-1-1z"></path>
+<path d="M6 1v-1h-5v16h5v-1h-4v-2h2v-1h-2v-2h2v-1h-2v-2h2v-1h-2v-2h2v-1h-2v-2z"></path>
+</svg>
--- a/assets/img/home2.svg
+++ b/assets/img/home2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>home2</title>
+<path d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
+</svg>
--- a/assets/img/home6.svg
+++ b/assets/img/home6.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>home6</title>
+<path d="M8 0l-8 6v3l2-1.5v7.5c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1v-7.5l2 1.5v-3l-8-6zM13 14.998c-0.001 0.001-0.001 0.001-0.002 0.002h-4.998v-5h-3v5h-1.998c-0.001-0.001-0.001-0.001-0.002-0.002v-8.248l5-3.75 5 3.75v8.248zM9 7h2v2h-2z"></path>
+</svg>
--- a/assets/img/image.svg
+++ b/assets/img/image.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>image</title>
+<path d="M15 1h-14c-0.55 0-1 0.45-1 1v12c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-12c0-0.55-0.45-1-1-1zM11.5 3c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM14 13h-12v-2l3.5-6 4 5h1l3.5-3v6z"></path>
+</svg>
--- a/assets/img/images.svg
+++ b/assets/img/images.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16">
+<title>images</title>
+<path d="M17 2h-1v-1c0-0.55-0.45-1-1-1h-14c-0.55 0-1 0.45-1 1v12c0 0.55 0.45 1 1 1h1v1c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-12c0-0.55-0.45-1-1-1zM2 3v10h-1v-12h14v1h-12c-0.55 0-1 0.45-1 1zM15 5.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5 1.5 0.672 1.5 1.5zM16 14h-12v-2l3.5-6 4 5h1l3.5-3v6z"></path>
+</svg>
--- a/assets/img/instagram.svg
+++ b/assets/img/instagram.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>instagram</title>
+<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
+<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
+<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
+</svg>
--- a/assets/img/intersex.svg
+++ b/assets/img/intersex.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="28" viewBox="0 0 22 28">
+<title>intersex</title>
+<path d="M16 0.5c0-0.281 0.219-0.5 0.5-0.5h4.5c0.547 0 1 0.453 1 1v4.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-2.094l-3.969 3.984c1.219 1.531 1.969 3.484 1.969 5.609 0 4.625-3.5 8.437-8 8.937v2.063h1.5c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v1.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-1.5h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h1.5v-2.063c-4.719-0.516-8.359-4.719-7.969-9.656 0.328-4.25 3.703-7.734 7.922-8.219 2.531-0.297 4.875 0.484 6.656 1.906l3.984-3.969h-2.094c-0.281 0-0.5-0.219-0.5-0.5v-1zM9 20c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z"></path>
+</svg>
--- a/assets/img/location.svg
+++ b/assets/img/location.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>location</title>
+<path d="M8 0c-2.761 0-5 2.239-5 5 0 5 5 11 5 11s5-6 5-11c0-2.761-2.239-5-5-5zM8 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path>
+</svg>
--- a/assets/img/location3.svg
+++ b/assets/img/location3.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>location3</title>
+<path d="M8 0c-2.761 0-5 2.239-5 5 0 5 5 11 5 11s5-6 5-11c0-2.761-2.239-5-5-5zM8 8.063c-1.691 0-3.063-1.371-3.063-3.063s1.371-3.063 3.063-3.063 3.063 1.371 3.063 3.063-1.371 3.063-3.063 3.063zM6.063 5c0-1.070 0.867-1.938 1.938-1.938s1.938 0.867 1.938 1.938c0 1.070-0.867 1.938-1.938 1.938s-1.938-0.867-1.938-1.938z"></path>
+</svg>
--- a/assets/img/magic-wand.svg
+++ b/assets/img/magic-wand.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>magic-wand</title>
+<path d="M4 3l-2-2h-1v1l2 2zM5 0h1v2h-1zM9 5h2v1h-2zM10 2v-1h-1l-2 2 1 1zM0 5h2v1h-2zM5 9h1v2h-1zM1 9v1h1l2-2-1-1zM15.781 13.781l-9.939-9.939c-0.292-0.292-0.769-0.292-1.061 0l-0.939 0.939c-0.292 0.292-0.292 0.769 0 1.061l9.939 9.939c0.292 0.292 0.769 0.292 1.061 0l0.939-0.939c0.292-0.292 0.292-0.769 0-1.061zM7.5 8.5l-3-3 1-1 3 3-1 1z"></path>
+</svg>
--- a/assets/img/pandage.svg
+++ b/assets/img/pandage.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pandage</title>
+<path d="M14.902 1.098c-1.464-1.464-3.839-1.464-5.303 0l-8.5 8.5c-1.464 1.464-1.464 3.839 0 5.303s3.839 1.464 5.303 0l8.5-8.5c1.464-1.464 1.464-3.839 0-5.303zM14.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM13.5 1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM14 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM12.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM11.5 1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM12 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM10.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM3.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM4.5 12c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM2.5 10c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM3 12.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM1.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM1.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM2.5 15c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM3.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM4.5 15c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM5.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM7.854 11.854c-0.098 0.098-0.226 0.146-0.354 0.146s-0.256-0.049-0.354-0.146l-3-3c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l3 3c0.195 0.195 0.195 0.512 0 0.707zM11.854 7.854c-0.098 0.098-0.226 0.146-0.354 0.146s-0.256-0.049-0.354-0.146l-3-3c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l3 3c0.195 0.195 0.195 0.512 0 0.707zM12.5 5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM13.5 6c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM14.5 5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5z"></path>
+</svg>
--- a/assets/img/pandage2.svg
+++ b/assets/img/pandage2.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pandage2</title>
+<path d="M14.902 1.098c-1.464-1.464-3.839-1.464-5.303 0l-8.5 8.5c-1.464 1.464-1.464 3.839 0 5.303s3.839 1.464 5.303 0l8.5-8.5c1.464-1.464 1.464-3.839 0-5.303zM14.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM13.5 1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM14 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM12.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM11.5 1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM12 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM10.5 2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM3.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM4.5 12c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM2.5 10c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM3 12.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5zM1.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM1.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM2.5 15c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM3.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM4.5 15c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM5.5 14c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM7.854 11.854c-0.098 0.098-0.226 0.146-0.354 0.146s-0.256-0.049-0.354-0.146l-3-3c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l3 3c0.195 0.195 0.195 0.512 0 0.707zM11.854 7.854c-0.098 0.098-0.226 0.146-0.354 0.146s-0.256-0.049-0.354-0.146l-3-3c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l3 3c0.195 0.195 0.195 0.512 0 0.707zM12.5 5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM13.5 6c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM14.5 5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5z"></path>
+<path d="M1.99 7.293l5.303-5.303-0.891-0.891c-0.732-0.732-1.692-1.098-2.652-1.098s-1.919 0.366-2.652 1.098c-1.464 1.464-1.464 3.839 0 5.303l0.891 0.891z"></path>
+<path d="M14.010 8.707l-5.303 5.303 0.891 0.891c0.732 0.732 1.692 1.098 2.652 1.098s1.919-0.366 2.652-1.098c1.464-1.464 1.464-3.839 0-5.303l-0.891-0.891z"></path>
+</svg>
--- a/assets/img/pencil-ruler.svg
+++ b/assets/img/pencil-ruler.svg
@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pencil-ruler</title>
+<path d="M3.899 0.221c-0.093-0.139-0.25-0.222-0.417-0.221s-0.323 0.085-0.415 0.224l-1.984 3c-0.054 0.082-0.083 0.178-0.083 0.276v11.5c0 0.551 0.449 1 1 1h3c0.551 0 1-0.449 1-1v-11.5c0-0.099-0.030-0.196-0.085-0.279l-2.016-3zM3.092 2h0.798l1.11 1.652 0 10.348h-3v-10.35l1.092-1.65z"></path>
+<path d="M3.5 13c0.276 0 0.5-0.224 0.5-0.5v-8c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v8c0 0.276 0.224 0.5 0.5 0.5z"></path>
+<path d="M8 0v16h6v-16h-6zM13 2h-1v1h1v1h-2v1h2v1h-1v1h1v1h-2v1h2v1h-1v1h1v1h-2v1h2v2h-4v-14h4v1z"></path>
+</svg>
--- a/assets/img/reddit.svg
+++ b/assets/img/reddit.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>reddit</title>
+<path d="M8 20c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM20 20c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM20.097 24.274c0.515-0.406 1.262-0.317 1.668 0.198s0.317 1.262-0.198 1.668c-1.434 1.13-3.619 1.86-5.567 1.86s-4.133-0.73-5.567-1.86c-0.515-0.406-0.604-1.153-0.198-1.668s1.153-0.604 1.668-0.198c0.826 0.651 2.46 1.351 4.097 1.351s3.271-0.7 4.097-1.351zM32 16c0-2.209-1.791-4-4-4-1.504 0-2.812 0.83-3.495 2.057-2.056-1.125-4.561-1.851-7.29-2.019l2.387-5.36 4.569 1.319c0.411 1.167 1.522 2.004 2.83 2.004 1.657 0 3-1.343 3-3s-1.343-3-3-3c-1.142 0-2.136 0.639-2.642 1.579l-5.091-1.47c-0.57-0.164-1.173 0.116-1.414 0.658l-3.243 7.282c-2.661 0.187-5.102 0.907-7.114 2.007-0.683-1.227-1.993-2.056-3.496-2.056-2.209 0-4 1.791-4 4 0 1.635 0.981 3.039 2.387 3.659-0.252 0.751-0.387 1.535-0.387 2.341 0 5.523 6.268 10 14 10s14-4.477 14-10c0-0.806-0.134-1.589-0.387-2.34 1.405-0.62 2.387-2.025 2.387-3.66zM27 5.875c0.621 0 1.125 0.504 1.125 1.125s-0.504 1.125-1.125 1.125-1.125-0.504-1.125-1.125 0.504-1.125 1.125-1.125zM2 16c0-1.103 0.897-2 2-2 0.797 0 1.487 0.469 1.808 1.145-1.045 0.793-1.911 1.707-2.552 2.711-0.735-0.296-1.256-1.016-1.256-1.856zM16 29.625c-6.42 0-11.625-3.414-11.625-7.625s5.205-7.625 11.625-7.625c6.42 0 11.625 3.414 11.625 7.625s-5.205 7.625-11.625 7.625zM28.744 17.856c-0.641-1.003-1.507-1.918-2.552-2.711 0.321-0.676 1.011-1.145 1.808-1.145 1.103 0 2 0.897 2 2 0 0.84-0.52 1.56-1.256 1.856z"></path>
+</svg>
--- a/assets/img/ruler.svg
+++ b/assets/img/ruler.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>ruler</title>
+<path d="M16 8h-16v6h16v-6zM14 13v-1h-1v1h-1v-2h-1v2h-1v-1h-1v1h-1v-2h-1v2h-1v-1h-1v1h-1v-2h-1v2h-2v-4h14v4h-1z"></path>
+</svg>
--- a/assets/img/scale.svg
+++ b/assets/img/scale.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>scale</title>
+<path d="M13.5 1h-12c-0.825 0-1.5 0.675-1.5 1.5v12c0 0.825 0.675 1.5 1.5 1.5h12c0.825 0 1.5-0.675 1.5-1.5v-12c0-0.825-0.675-1.5-1.5-1.5zM10.5 8h-2.5v-3.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3.5h-2.5l-1.933-1.933c0.898-1.817 2.769-3.067 4.933-3.067s4.035 1.25 4.933 3.067l-1.933 1.933z"></path>
+</svg>
--- a/assets/img/shorts.svg
+++ b/assets/img/shorts.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>shorts</title>
+<path d="M14 3h-13l-1 11h6l1.5-5.972 1.5 5.972h6l-1-11zM4 5h-2v-1h2v1zM7 5h-2v-1h2v1zM10 5h-2v-1h2v1zM13 5h-2v-1h2v1z"></path>
+</svg>
--- a/assets/img/snapchat.svg
+++ b/assets/img/snapchat.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28">
+<title>snapchat-ghost</title>
+<path d="M13.25 2c2.812-0.031 5.141 1.547 6.312 4.078 0.359 0.766 0.422 1.953 0.422 2.797 0 1-0.078 1.984-0.141 2.984 0.125 0.063 0.297 0.109 0.438 0.109 0.562 0 1.031-0.422 1.594-0.422 0.531 0 1.297 0.375 1.297 1 0 1.5-3.141 1.219-3.141 2.531 0 0.234 0.094 0.453 0.187 0.672 0.75 1.641 2.172 3.219 3.859 3.922 0.406 0.172 0.812 0.266 1.25 0.359 0.281 0.063 0.438 0.266 0.438 0.547 0 1.062-2.703 1.5-3.422 1.609-0.313 0.484-0.078 1.625-0.906 1.625-0.641 0-1.281-0.203-1.969-0.203-0.328 0-0.656 0.016-0.969 0.078-1.859 0.313-2.484 2.312-5.531 2.312-2.938 0-3.641-2-5.453-2.312-0.328-0.063-0.656-0.078-0.984-0.078-0.703 0-1.375 0.234-1.937 0.234-0.875 0-0.609-1.156-0.938-1.656-0.719-0.109-3.422-0.547-3.422-1.609 0-0.281 0.156-0.484 0.438-0.547 0.438-0.094 0.844-0.187 1.25-0.359 1.672-0.688 3.125-2.281 3.859-3.922 0.094-0.219 0.187-0.438 0.187-0.672 0-1.313-3.156-1.062-3.156-2.516 0-0.609 0.719-1 1.266-1 0.484 0 0.969 0.406 1.578 0.406 0.172 0 0.344-0.031 0.5-0.109-0.063-0.984-0.141-1.969-0.141-2.969 0-0.844 0.063-2.047 0.422-2.812 1.375-2.969 3.703-4.047 6.813-4.078z"></path>
+</svg>
--- a/assets/img/syringe2.svg
+++ b/assets/img/syringe2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>syringe2</title>
+<path d="M15.5 6l0.5-2-4-4-2 0.5 0.985 0.985-1.631 1.631-2.235-2.235-1.237 1.237 1.506 1.506c-0.033 0.025-0.064 0.053-0.094 0.083l-5.586 5.586c-0.389 0.389-0.389 1.025 0 1.414l0.293 0.293v1l0.646 0.646-2.646 2.646 0.707 0.707 2.646-2.646 0.646 0.646h1l0.293 0.293c0.194 0.194 0.451 0.292 0.707 0.292s0.513-0.097 0.707-0.292l5.586-5.586c0.030-0.030 0.057-0.062 0.083-0.094l1.506 1.506 1.237-1.237-2.235-2.235 1.631-1.631 0.985 0.985zM11.674 8.088l-5.586 5.586c-0.029 0.029-0.064 0.035-0.088 0.035s-0.059-0.006-0.088-0.035l-3.586-3.586c-0.029-0.029-0.035-0.064-0.035-0.088s0.006-0.059 0.035-0.088l5.586-5.586c0.029-0.029 0.064-0.035 0.088-0.035s0.059 0.006 0.088 0.035l3.586 3.586c0.047 0.047 0.047 0.13 0 0.177zM12.354 6.116l-2.47-2.47 1.631-1.631 2.47 2.47-1.631 1.631zM6.235 11.765l-2-2 0.53-0.53 2 2zM9.235 8.765l-2-2 0.53-0.53 2 2zM7.735 10.265l-2-2 0.53-0.53 2 2z"></path>
+</svg>
--- a/assets/img/transgender.svg
+++ b/assets/img/transgender.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28">
+<title>transgender-alt</title>
+<path d="M20 0.5c0-0.281 0.219-0.5 0.5-0.5h4.5c0.547 0 1 0.453 1 1v4.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-2.094l-3.969 3.984c1.219 1.531 1.969 3.484 1.969 5.609 0 4.625-3.5 8.437-8 8.937v2.063h1.5c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v1.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-1.5h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h1.5v-2.063c-4.5-0.5-8-4.312-8-8.937 0-2.125 0.75-4.078 1.969-5.609l-0.812-0.828-1.578 1.734c-0.187 0.203-0.5 0.219-0.703 0.047l-0.75-0.688c-0.203-0.172-0.219-0.5-0.031-0.703l1.641-1.797-1.734-1.75v2.094c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-4.5c0-0.547 0.453-1 1-1h4.5c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-2.078l1.656 1.672 1.344-1.469c0.187-0.203 0.5-0.219 0.703-0.047l0.75 0.688c0.203 0.172 0.219 0.5 0.031 0.703l-1.406 1.547 0.891 0.875c1.531-1.219 3.484-1.969 5.609-1.969s4.078 0.75 5.609 1.969l3.984-3.969h-2.094c-0.281 0-0.5-0.219-0.5-0.5v-1zM13 20c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z"></path>
+</svg>
--- a/assets/img/transsexual.svg
+++ b/assets/img/transsexual.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28">
+<title>transgender-alt</title>
+<path d="M20 0.5c0-0.281 0.219-0.5 0.5-0.5h4.5c0.547 0 1 0.453 1 1v4.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-2.094l-3.969 3.984c1.219 1.531 1.969 3.484 1.969 5.609 0 4.625-3.5 8.437-8 8.937v2.063h1.5c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v1.5c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-1.5h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h1.5v-2.063c-4.5-0.5-8-4.312-8-8.937 0-2.125 0.75-4.078 1.969-5.609l-0.812-0.828-1.578 1.734c-0.187 0.203-0.5 0.219-0.703 0.047l-0.75-0.688c-0.203-0.172-0.219-0.5-0.031-0.703l1.641-1.797-1.734-1.75v2.094c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-4.5c0-0.547 0.453-1 1-1h4.5c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-2.078l1.656 1.672 1.344-1.469c0.187-0.203 0.5-0.219 0.703-0.047l0.75 0.688c0.203 0.172 0.219 0.5 0.031 0.703l-1.406 1.547 0.891 0.875c1.531-1.219 3.484-1.969 5.609-1.969s4.078 0.75 5.609 1.969l3.984-3.969h-2.094c-0.281 0-0.5-0.219-0.5-0.5v-1zM13 20c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z"></path>
+</svg>
--- a/assets/img/tshirt.svg
+++ b/assets/img/tshirt.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>tshirt</title>
+<path d="M10.905 2l5.095 1v4h-3v8h-10v-8h-3v-4l5.095-1c0.333 1.294 1.508 2.25 2.905 2.25s2.572-0.956 2.905-2.25z"></path>
+</svg>
--- a/assets/img/tumblr.svg
+++ b/assets/img/tumblr.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>tumblr</title>
+<path d="M9.001 7l-0 3.659c0 0.928-0.012 1.463 0.086 1.727 0.098 0.262 0.342 0.534 0.609 0.691 0.354 0.212 0.758 0.318 1.214 0.318 0.81 0 1.289-0.107 2.090-0.633v2.405c-0.683 0.321-1.279 0.509-1.833 0.639-0.555 0.129-1.154 0.194-1.798 0.194-0.732 0-1.163-0.092-1.725-0.276-0.562-0.185-1.042-0.45-1.438-0.79-0.398-0.343-0.672-0.706-0.826-1.091s-0.23-0.944-0.23-1.676v-5.611h-2.147v-2.266c0.628-0.204 1.331-0.497 1.778-0.877 0.449-0.382 0.809-0.839 1.080-1.374 0.272-0.534 0.459-1.214 0.561-2.039h2.579l-0 4h3.999v3h-3.999z"></path>
+</svg>
--- a/assets/img/tumblr2.svg
+++ b/assets/img/tumblr2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>tumblr2</title>
+<path d="M14.5 0h-13c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM11.434 12.884c-0.472 0.222-0.9 0.378-1.281 0.469-0.381 0.088-0.797 0.134-1.241 0.134-0.506 0-0.803-0.063-1.191-0.191s-0.719-0.309-0.994-0.544c-0.275-0.238-0.463-0.488-0.569-0.753s-0.159-0.65-0.159-1.156v-3.872h-1.5v-1.563c0.434-0.141 0.938-0.344 1.244-0.606 0.309-0.263 0.559-0.578 0.744-0.947 0.188-0.369 0.316-0.837 0.388-1.406h1.569v2.55h2.556v1.972h-2.553v2.831c0 0.641-0.009 1.009 0.059 1.191s0.238 0.369 0.422 0.475c0.244 0.147 0.525 0.219 0.838 0.219 0.559 0 1.116-0.181 1.669-0.544v1.741z"></path>
+</svg>
--- a/assets/img/twitter.svg
+++ b/assets/img/twitter.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>twitter</title>
+<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
+</svg>
--- a/assets/img/vk.svg
+++ b/assets/img/vk.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>vk</title>
+<path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM25.919 22.4l-2.925 0.044c0 0-0.631 0.125-1.456-0.444-1.094-0.75-2.125-2.706-2.931-2.45-0.813 0.256-0.788 2.012-0.788 2.012s0.006 0.375-0.181 0.575c-0.2 0.219-0.6 0.262-0.6 0.262h-1.306c0 0-2.888 0.175-5.431-2.475-2.775-2.887-5.225-8.619-5.225-8.619s-0.144-0.375 0.013-0.556c0.175-0.206 0.644-0.219 0.644-0.219l3.131-0.019c0 0 0.294 0.050 0.506 0.206 0.175 0.125 0.269 0.369 0.269 0.369s0.506 1.281 1.175 2.438c1.306 2.256 1.919 2.75 2.362 2.513 0.644-0.35 0.45-3.194 0.45-3.194s0.012-1.031-0.325-1.488c-0.262-0.356-0.756-0.463-0.969-0.488-0.175-0.025 0.113-0.431 0.488-0.619 0.563-0.275 1.556-0.294 2.731-0.281 0.913 0.006 1.181 0.069 1.538 0.15 1.081 0.262 0.712 1.269 0.712 3.681 0 0.775-0.137 1.863 0.419 2.219 0.238 0.156 0.825 0.025 2.294-2.469 0.694-1.181 1.219-2.569 1.219-2.569s0.113-0.25 0.288-0.356c0.181-0.106 0.425-0.075 0.425-0.075l3.294-0.019c0 0 0.988-0.119 1.15 0.331 0.169 0.469-0.369 1.563-1.712 3.356-2.206 2.944-2.456 2.669-0.619 4.369 1.75 1.625 2.113 2.419 2.175 2.519 0.712 1.2-0.813 1.294-0.813 1.294z"></path>
+</svg>
--- a/assets/img/woman.svg
+++ b/assets/img/woman.svg
@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>woman</title>
+<path d="M9 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
+<path d="M11.234 8l0.766-0.555-2.083-3.221c-0.092-0.14-0.249-0.225-0.417-0.225h-4c-0.168 0-0.325 0.084-0.417 0.225l-2.083 3.221 0.766 0.555 1.729-2.244 0.601 1.402-2.095 3.841h1.917l0.333 5h1v-5h0.5v5h1l0.333-5h1.917l-2.095-3.842 0.601-1.402 1.729 2.244z"></path>
+</svg>
--- a/assets/img/wrench.svg
+++ b/assets/img/wrench.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>wrench</title>
+<path d="M15.671 12.779l-7.196-6.168c0.335-0.63 0.525-1.348 0.525-2.111 0-2.485-2.015-4.5-4.5-4.5-0.455 0-0.893 0.068-1.307 0.193l2.6 2.6c0.389 0.389 0.389 1.025 0 1.414l-1.586 1.586c-0.389 0.389-1.025 0.389-1.414 0l-2.6-2.6c-0.125 0.414-0.193 0.852-0.193 1.307 0 2.485 2.015 4.5 4.5 4.5 0.763 0 1.482-0.19 2.111-0.525l6.168 7.196c0.358 0.418 0.969 0.441 1.358 0.052l1.586-1.586c0.389-0.389 0.365-1-0.052-1.358z"></path>
+</svg>
--- a/assets/img/youtube.svg
+++ b/assets/img/youtube.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>youtube</title>
+<path d="M31.681 9.6c0 0-0.313-2.206-1.275-3.175-1.219-1.275-2.581-1.281-3.206-1.356-4.475-0.325-11.194-0.325-11.194-0.325h-0.012c0 0-6.719 0-11.194 0.325-0.625 0.075-1.987 0.081-3.206 1.356-0.963 0.969-1.269 3.175-1.269 3.175s-0.319 2.588-0.319 5.181v2.425c0 2.587 0.319 5.181 0.319 5.181s0.313 2.206 1.269 3.175c1.219 1.275 2.819 1.231 3.531 1.369 2.563 0.244 10.881 0.319 10.881 0.319s6.725-0.012 11.2-0.331c0.625-0.075 1.988-0.081 3.206-1.356 0.962-0.969 1.275-3.175 1.275-3.175s0.319-2.587 0.319-5.181v-2.425c-0.006-2.588-0.325-5.181-0.325-5.181zM12.694 20.15v-8.994l8.644 4.513-8.644 4.481z"></path>
+</svg>
--- a/package-lock.json
+++ b/package-lock.json
@ -10939,6 +10939,11 @@
        }
      }
    },
+    "url-pattern": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/url-pattern/-/url-pattern-1.0.3.tgz",
+      "integrity": "sha1-BAkpJHGyTyPFDWWkeTF5PStaz8E="
+    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -89,6 +89,7 @@
        "sharp": "^0.23.2",
        "tough-cookie": "^3.0.1",
        "tty-table": "^2.7.0",
+        "url-pattern": "^1.0.3",
        "v-tooltip": "^2.0.2",
        "vue": "^2.6.10",
        "vue-router": "^3.0.6",
--- a/public/css/style.css
+++ b/public/css/style.css
@ -45,6 +45,7 @@
  display: flex;
  justify-content: space-between;
  padding: .5rem 1rem;
+  z-index: 1;
  font-size: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
 }
@ -170,12 +171,12 @@
 }
 .title[data-v-3abcf101] {
  color: #222;
-  margin: 0;
+  margin: 0 .25rem .25rem 0;
  font-size: 1rem;
-  word-wrap: break-word;
-  overflow: hidden;
  max-height: 3rem;
-  line-height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .network[data-v-3abcf101] {
  color: #555;
@ -189,9 +190,9 @@
  line-height: 1.5rem;
 }
 .tags[data-v-3abcf101] {
-  max-height: 2.85rem;
+  max-height: 2.5rem;
  padding: .25rem .5rem 1rem .5rem;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
  word-wrap: break-word;
  overflow-y: hidden;
 }
@ -217,10 +218,11 @@
  color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: .25rem;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  font-size: .75rem;
  font-weight: bold;
  text-decoration: none;
+  line-height: 1;
+  border: solid 1px rgba(0, 0, 0, 0.1);
 }
 .tag-link[data-v-3abcf101]:hover {
    color: #ff6c88;
@ -234,13 +236,18 @@
 .heading .range[data-v-22ffe3e4] {
    text-transform: capitalize;
 }
-.releases[data-v-22ffe3e4] {
+.tiles[data-v-22ffe3e4] {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 0.5fr));
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 0.33fr));
  grid-gap: 1rem;
 }
+@media (max-width: 1500px) {
+.tiles[data-v-22ffe3e4] {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 0.5fr));
+}
+}
@media (max-width: 720px) {
-.releases[data-v-22ffe3e4] {
+.tiles[data-v-22ffe3e4] {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
 }
@ -575,48 +582,267 @@
 }

 /* $primary: #ff886c; */
-.header[data-v-677a8360] {
+.actor-inner[data-v-677a8360] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow-x: auto;
+}
+.profile[data-v-677a8360] {
+  background: #222;
+  color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+.profile .avatar-link[data-v-677a8360] {
+    font-size: 0;
+    padding: 1rem;
+}
+.profile .avatar[data-v-677a8360] {
+    height: 15rem;
+    width: 15rem;
+    flex-shrink: 0;
+    margin: 0 1rem 0 0;
+    -o-object-fit: cover;
+       object-fit: cover;
+    -o-object-position: 50% 0;
+       object-position: 50% 0;
+}
+.bio[data-v-677a8360] {
+  flex-grow: 1;
+  min-width: 18rem;
+  box-sizing: border-box;
+  padding: 1rem;
+  margin: 0 3rem 0 0;
+}
+.bio-header[data-v-677a8360] {
  display: flex;
  justify-content: space-between;
-  padding: 1rem;
+  align-items: center;
+  margin: 0 0 1rem 0;
 }
-.title[data-v-677a8360] {
+.bio-item[data-v-677a8360] {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 .5rem 0;
+  line-height: 1.75;
+  text-align: right;
+  font-size: .9rem;
+  font-weight: bold;
+}
+.bio-heading[data-v-677a8360] {
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: normal;
+  font-style: normal;
+}
+.bio-heading .icon[data-v-677a8360] {
+    fill: rgba(255, 255, 255, 0.5);
+    margin: 0 .5rem 0 0;
+}
+.flag[data-v-677a8360] {
+  margin: 0 .25rem 0 0;
+}
+.bio-name[data-v-677a8360] {
  display: inline-block;
-  margin: 0 .5rem 0 0;
+  padding: 0;
+  margin: 0;
+}
+.bio-gender[data-v-677a8360] {
+  display: inline-block;
+  font-weight: bold;
+  text-transform: capitalize;
+  font-weight: normal;
+}
+.bio-gender .icon[data-v-677a8360] {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+.bio-gender.female .icon[data-v-677a8360] {
+    fill: #f0a;
+}
+.bio-gender.male .icon[data-v-677a8360] {
+    fill: #0af;
+}
+.birthdate[data-v-677a8360] {
+  display: block;
+}
+.age[data-v-677a8360] {
+  font-weight: bold;
+  padding: 0 0 0 .5rem;
+  border-left: solid 1px rgba(255, 255, 255, 0.2);
+  margin: 0 0 0 .5rem;
+  /*
+    &::before {
+        content: ' (';
+    }
+
+    &::after {
+        content: ')';
+    }
+
+    &::before,
+    &::after {
+        color: $highlight;
+    }
+    */
+}
+.country[data-v-677a8360] {
+  display: block;
+}
+.height-imperial[data-v-677a8360],
+.weight-imperial[data-v-677a8360] {
+  padding: 0 0 0 .5rem;
+  border-left: solid 1px rgba(255, 255, 255, 0.2);
+  margin: 0 0 0 .5rem;
+}
+.enhanced.icon[data-v-677a8360] {
+  fill: #ff6c88;
+  padding: 0 .5rem;
+}
+.description[data-v-677a8360] {
+  max-height: 10rem;
+  flex-grow: 1;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 1rem 0 0 0;
+  margin: 0 2rem 0 0;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  font-size: .9rem;
+  overflow: hidden;
+  cursor: pointer;
+}
+.description.expanded[data-v-677a8360] {
+    overflow: visible;
+}
+.social[data-v-677a8360] {
+  display: block;
+  margin: 1rem 0;
+}
+.social-link[data-v-677a8360] {
+  display: inline-block;
+  padding: 0 1rem 0 0;
+}
+.social-link .icon[data-v-677a8360] {
+    fill: rgba(255, 255, 255, 0.5);
+    width: 1.5rem;
+    height: 1.5rem;
+}
+.social-link:hover .icon[data-v-677a8360] {
+    fill: #ff6c88;
+}
+.scraped[data-v-677a8360] {
+  color: rgba(255, 255, 255, 0.2);
+  margin: 1rem 0 0 0;
+  font-size: .8rem;
+}
+.actor-content[data-v-677a8360] {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
 }
 .heading[data-v-677a8360] {
  padding: 0;
  margin: 0 0 1rem 0;
 }
-.bio-heading[data-v-677a8360] {
-  display: inline-block;
-  font-weight: bold;
-  margin: .5rem 0 0 0;
+.photos-container[data-v-677a8360] {
+  min-width: 15rem;
+  box-sizing: border-box;
+  border-right: solid 1px rgba(0, 0, 0, 0.1);
+  padding: 1rem 1.5rem 1rem 1rem;
+  margin: 0 .5rem 0 0;
 }
-.bio-heading[data-v-677a8360]::after {
-    content: ':';
+.photos[data-v-677a8360] {
+  max-width: 35vw;
+  display: inline-grid;
+  grid-template-columns: repeat(auto-fit, 15rem);
+  grid-gap: .5rem;
+  font-size: 0;
 }
-.description[data-v-677a8360] {
-  padding: 1rem;
+.photos .avatar-link[data-v-677a8360] {
+    display: none;
 }
-.avatar[data-v-677a8360] {
-  height: 20rem;
-  margin: 0 1rem 0 0;
-  display: block;
+.photo-link[data-v-677a8360] {
+  height: 15rem;
 }
 .photo[data-v-677a8360] {
-  height: 10rem;
-}
-.social[data-v-677a8360] {
-  display: block;
-}
-.flag[data-v-677a8360] {
-  height: 1rem;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  margin: 0 .25rem 0 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: 50% 0;
+     object-position: 50% 0;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 }
 .releases[data-v-677a8360] {
  flex-grow: 1;
+  padding: 1rem;
+}
+@media (max-width: 1500px) {
+.description[data-v-677a8360] {
+    display: none;
+}
+}
+@media (max-width: 1200px) {
+.profile .avatar-link[data-v-677a8360],
+  .social[data-v-677a8360] {
+    display: none;
+}
+.actor-content[data-v-677a8360] {
+    flex-direction: column;
+}
+.photos-container[data-v-677a8360] {
+    border: none;
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    padding: 1rem 1rem 1.5rem 1rem;
+    margin: 0 0 .5rem 0;
+}
+.photos[data-v-677a8360] {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    overflow-x: scroll;
+    scrollbar-width: none;
+}
+.photos .avatar-link[data-v-677a8360] {
+      display: inline-block;
+}
+.photos[data-v-677a8360]::-webkit-scrollbar {
+      display: none;
+}
+.photo-link[data-v-677a8360] {
+    height: 15rem;
+    flex-shrink: 0;
+    margin: 0 .5rem 0 0;
+}
+}
+@media (max-width: 720px) {
+.profile[data-v-677a8360] {
+    flex-direction: column;
+    padding: 0 0 .5rem 0;
+}
+.bio[data-v-677a8360] {
+    width: 100%;
+    padding: 0 1rem;
+    margin: 0;
+}
+.bio-header[data-v-677a8360] {
+    margin: 1rem 0;
+}
+.place[data-v-677a8360],
+  .ethnicity[data-v-677a8360],
+  .residence[data-v-677a8360],
+  .weight[data-v-677a8360],
+  .scraped[data-v-677a8360] {
+    display: none;
+}
+.social[data-v-677a8360] {
+    padding: 0 1rem;
+}
 }

 /* $primary: #ff886c; */
@ -765,7 +991,7 @@ body {
    display: inline-block; }

 .heading {
-  color: #ff6c88;
+  color: rgba(0, 0, 0, 0.5);
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 1.5rem; }
--- a/public/img/flags/ad.png
+++ b/public/img/flags/ad.png
--- a/public/img/flags/ae.png
+++ b/public/img/flags/ae.png
--- a/public/img/flags/af.png
+++ b/public/img/flags/af.png
--- a/public/img/flags/ag.png
+++ b/public/img/flags/ag.png
--- a/public/img/flags/ai.png
+++ b/public/img/flags/ai.png
--- a/public/img/flags/al.png
+++ b/public/img/flags/al.png
--- a/public/img/flags/am.png
+++ b/public/img/flags/am.png
--- a/public/img/flags/an.png
+++ b/public/img/flags/an.png
--- a/public/img/flags/ao.png
+++ b/public/img/flags/ao.png
--- a/public/img/flags/ar.png
+++ b/public/img/flags/ar.png
--- a/public/img/flags/as.png
+++ b/public/img/flags/as.png
--- a/public/img/flags/at.png
+++ b/public/img/flags/at.png
--- a/public/img/flags/au.png
+++ b/public/img/flags/au.png
--- a/public/img/flags/aw.png
+++ b/public/img/flags/aw.png
--- a/public/img/flags/ax.png
+++ b/public/img/flags/ax.png
--- a/public/img/flags/az.png
+++ b/public/img/flags/az.png
--- a/public/img/flags/ba.png
+++ b/public/img/flags/ba.png
--- a/public/img/flags/bb.png
+++ b/public/img/flags/bb.png
--- a/public/img/flags/bd.png
+++ b/public/img/flags/bd.png
--- a/public/img/flags/be.png
+++ b/public/img/flags/be.png
--- a/public/img/flags/bf.png
+++ b/public/img/flags/bf.png
--- a/public/img/flags/bg.png
+++ b/public/img/flags/bg.png
--- a/public/img/flags/bh.png
+++ b/public/img/flags/bh.png
--- a/public/img/flags/bi.png
+++ b/public/img/flags/bi.png
--- a/public/img/flags/bj.png
+++ b/public/img/flags/bj.png
--- a/public/img/flags/bm.png
+++ b/public/img/flags/bm.png
--- a/public/img/flags/bn.png
+++ b/public/img/flags/bn.png
--- a/public/img/flags/bo.png
+++ b/public/img/flags/bo.png
--- a/public/img/flags/br.png
+++ b/public/img/flags/br.png
--- a/public/img/flags/bs.png
+++ b/public/img/flags/bs.png
--- a/public/img/flags/bt.png
+++ b/public/img/flags/bt.png
--- a/public/img/flags/bv.png
+++ b/public/img/flags/bv.png
--- a/public/img/flags/bw.png
+++ b/public/img/flags/bw.png
--- a/public/img/flags/by.png
+++ b/public/img/flags/by.png
--- a/public/img/flags/bz.png
+++ b/public/img/flags/bz.png
--- a/public/img/flags/ca.png
+++ b/public/img/flags/ca.png
--- a/public/img/flags/catalonia.png
+++ b/public/img/flags/catalonia.png
--- a/public/img/flags/cc.png
+++ b/public/img/flags/cc.png
--- a/public/img/flags/cd.png
+++ b/public/img/flags/cd.png
--- a/public/img/flags/cf.png
+++ b/public/img/flags/cf.png
--- a/public/img/flags/cg.png
+++ b/public/img/flags/cg.png
--- a/public/img/flags/ch.png
+++ b/public/img/flags/ch.png
--- a/public/img/flags/ci.png
+++ b/public/img/flags/ci.png
--- a/public/img/flags/ck.png
+++ b/public/img/flags/ck.png
--- a/public/img/flags/cl.png
+++ b/public/img/flags/cl.png
--- a/public/img/flags/cm.png
+++ b/public/img/flags/cm.png
--- a/public/img/flags/cn.png
+++ b/public/img/flags/cn.png
--- a/public/img/flags/co.png
+++ b/public/img/flags/co.png
--- a/public/img/flags/cr.png
+++ b/public/img/flags/cr.png
--- a/public/img/flags/cs.png
+++ b/public/img/flags/cs.png
--- a/public/img/flags/cu.png
+++ b/public/img/flags/cu.png
--- a/public/img/flags/cv.png
+++ b/public/img/flags/cv.png
--- a/public/img/flags/cx.png
+++ b/public/img/flags/cx.png
--- a/public/img/flags/cy.png
+++ b/public/img/flags/cy.png
--- a/public/img/flags/cz.png
+++ b/public/img/flags/cz.png
--- a/Show More
+++ b/Show More