Doomsday - BlockFeatured & GridFeatured

src/components/BlockFeatured/BlockFeatured.stories.js

@@ -0,0 +1,21 @@
+import BlockFeatured from "./BlockFeatured"
+import API from "@/static/db.json"
+
+export default {
+    title: "@austinblanchard / BlockFeatured"
+}
+
+export const BlockFeaturedDefault = () => ({
+    components: { BlockFeatured },
+    data() {
+        return {
+            api: API
+        }
+    },
+    template: `<block-featured
+                :imagePrimary="api.images[0]"
+                :imageSecondary="api.images[1]"
+                title="HP - Meant To Move"
+                credit="Yoni Lappin"
+                to="" />`
+})

src/components/BlockFeatured/BlockFeatured.vue

@@ -0,0 +1,155 @@
+<template>
+    <nuxt-link class="block-featured">
+        <div class="featured-text">
+            <split-text
+                v-if="title"
+                element="h2"
+                :text="title"
+                class="title"
+                separator=" - "
+            />
+            <p class="credit">by {{ credit }}</p>
+        </div>
+        <wp-image
+            class="primary-image"
+            :aspect-ratio="56.25"
+            :image="imagePrimary"
+        />
+        <wp-image
+            class="secondary-image"
+            :aspect-ratio="56.25"
+            :image="imageSecondary"
+        />
+    </nuxt-link>
+</template>
+
+<script>
+// Components
+import NuxtLink from "@/components/global/NuxtLink"
+import WpImage from "@/components/global/WpImage"
+import SplitText from "@/components/global/SplitText"
+
+export default {
+    components: {
+        NuxtLink,
+        WpImage,
+        SplitText
+    },
+    props: {
+        imagePrimary: {
+            type: Object,
+            default: () => {}
+        },
+        imageSecondary: {
+            type: Object,
+            default: () => {}
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        credit: {
+            type: String,
+            default: ""
+        },
+        to: {
+            type: String,
+            default: ""
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.block-featured {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin: 200px auto 600px;
+
+    // Text
+    .featured-text {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 40;
+        text-align: right;
+    }
+    .title {
+        display: flex;
+        flex-direction: column;
+
+        margin: 0;
+        font-family: var(--font-secondary);
+        font-weight: 700;
+        text-align: right;
+    }
+    .line-1 {
+        font-size: 50px;
+    }
+    .line-2 {
+        font-size: 25px;
+    }
+    .credit {
+        margin-top: 10px;
+        margin-bottom: 0;
+        font-size: 20px;
+    }
+    // Images
+    .primary-image {
+        width: 83%;
+        max-width: 980px;
+        transition: transform 0.4s $authenticMotion;
+    }
+    .secondary-image.mode-intrinsic-ratio {
+        width: 66%;
+        max-width: 780px;
+
+        position: absolute;
+        top: 50%;
+        right: 50px;
+        transform: translateY(45%);
+        z-index: 30;
+
+        pointer-events: none;
+        transition: transform 0.4s $authenticMotion;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover {
+            .primary-image {
+                transform: translateX(50px);
+            }
+            .secondary-image.mode-intrinsic-ratio {
+                transform: translateY(-50%);
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$lt-tablet} {
+        margin: 100px auto 400px;
+
+        .secondary-image.mode-intrinsic-ratio {
+            right: 0;
+        }
+    }
+    @media #{$lt-phone} {
+        margin: 50px auto 300px;
+
+        .line-1 {
+            font-size: 25px;
+        }
+        .line-2 {
+            font-size: 15px;
+        }
+        .credit {
+            font-size: 12px;
+        }
+    }
+    @media only screen and (max-width: 500px) {
+        margin: 50px auto 200px;
+    }
+}
+</style>

src/components/GridFeatured/GridFeatured.stories.js

@@ -0,0 +1,49 @@
+import GridFeatured from "./GridFeatured"
+import API from "@/static/db.json"
+
+let pageItem = {
+    ...API.pages[0]
+}
+
+const pageItems = [
+    {
+        ...pageItem,
+        title: "Philip J. - Fry",
+        credit: "Yoni Lappin"
+    },
+    {
+        ...pageItem,
+        title: "Headless Body - of Agnew",
+        credit: "Yoni Lappin"
+    },
+    {
+        ...pageItem,
+        title: "Bender Bending - Rodriguez",
+        credit: "Yoni Lappin"
+    },
+    {
+        ...pageItem,
+        title: "Amy - Wong",
+        credit: "Yoni Lappin"
+    },
+    {
+        ...pageItem,
+        title: "Hermes - Conrad",
+        credit: "Yoni Lappin"
+    }
+]
+
+export default {
+    title: "@austinblanchard / GridFeatured"
+}
+
+export const GridFeaturedDefault = () => ({
+    components: { GridFeatured },
+    data() {
+        return {
+            api: API,
+            pageItems: pageItems
+        }
+    },
+    template: `<grid-featured :items="pageItems" />`
+})

src/components/GridFeatured/GridFeatured.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="grid-featured">
+        <block-featured
+            v-for="(item, i) in items"
+            :key="item.id"
+            :to="item.uri"
+            :title="item.title"
+            :credit="item.credit"
+            :image-primary="item.featuredImage"
+            :image-secondary="item.featuredImage"
+        />
+    </div>
+</template>
+
+<script>
+// Components
+import BlockFeatured from "@/components/BlockFeatured/BlockFeatured"
+
+export default {
+    components: {
+        BlockFeatured
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.grid-featured {
+    width: 100%;
+    max-width: var(--unit-max-width);
+    margin: 0 auto;
+    padding: 0 var(--unit-gutter);
+    box-sizing: border-box;
+
+    .block-featured {
+        &:nth-child(2n + 2) {
+            .featured-text {
+                left: 0;
+                right: auto;
+                text-align: left;
+            }
+            .title {
+                text-align: left;
+            }
+            .primary-image {
+                margin-left: auto;
+            }
+            .secondary-image.mode-intrinsic-ratio {
+                left: 50px;
+                right: auto;
+            }
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .block-featured:nth-child(2n + 2):hover {
+            .primary-image {
+                transform: translateX(-50px);
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$lt-tablet} {
+        .block-featured {
+            &:nth-child(2n + 2) {
+                .secondary-image.mode-intrinsic-ratio {
+                    left: 0;
+                    right: auto;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/global/SplitText.vue

@@ -0,0 +1,51 @@
+<template>
+    <component :is="element">
+        <span
+            v-for="(line, i) in lines"
+            :key="i"
+            :class="['line', `line-${i + 1}`]"
+            v-html="line"
+        />
+    </component>
+</template>
+
+<script>
+export default {
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        separator: {
+            type: String,
+            default: " &#8211; "
+        },
+        element: {
+            type: String,
+            default: "span"
+        },
+        keepSeparator: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        lines() {
+            let output = this.text.split(this.separator)
+
+            // Add separator back into array
+            // This is useful if separating by an opening quote
+            if (this.keepSeparator) {
+                output = output.map((element, index) => {
+                    if (index > 0) {
+                        return this.separator + element
+                    }
+                    return element
+                });
+            }
+
+            return output
+        }
+    }
+}
+</script>

src/styles/global.scss

@@ -9,7 +9,7 @@
     --font-secondary: "Druk Wide", sans-serif;
 
     --color-black: #000000;
-    --color-white: #000000;
+    --color-white: #ffffff;
     --color-orange: #ffb762;
     --color-pink: #f7aea8;
     --color-red: #f96447;
@@ -18,10 +18,15 @@
     --unit-100vh: 100vh;
     --unit-gutter: 50px;
     --unit-max-width: 1800px;
+
+    @media #{$lt-phone} {
+        --unit-gutter: 20px;
+    }
 }
 
 // Base styles
 body {
+    margin: 0;
     font-family: var(--font-primary);
     color: var(--color-orange);
     background-color: var(--color-black);
@@ -31,6 +36,7 @@ a {
     color: inherit;
     transition: color 0.4s $authenticMotion;
 }
+// TODO probably shouldn't have this in the boiler plate as it affects NuxtLink, etc
 a:hover {
     color: var(--color-white);
 }