Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
  <div id="atmosphere"></div>
  <div id="particles-js"></div>
  <transition name="fade">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.802 231.646" id="logo" preserveAspectRatio="none" v-if="!expanded"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.4 26.64c2.77-.37 5.33-.75 7.9-1.05 2.8-.34 5.6.55 5.27 3.54-.17 1.6-2.97 3.67-4.92 4.13-2.95.7-6.2.2-10.66.2 0 7.5-.03 14.56 0 21.6 0 4.48 3.72 6.43 9.6 5.1 5.1-1.13 5.1-1.13 7.74 3 .67-1.7 1.52-2.86 1.56-4.06.4-12.53 1.13-25.08.8-37.6-.15-5.2.1-11.6-6.58-14.32-.6-.25-.9-1.27-2.06-3.04C36.23 2.58 40.8.97 45.5 0c.9-.17 3.23 2.18 3.32 3.48.4 5.52.1 11.1.23 16.64.06 2.8.45 5.6.66 7.98 5.55-1 10-2.2 14.52-2.52 7.68-.52 12.65 5.55 12.47 14.23-.12 5.12.17 10.24.28 15.35.1 3.6-.5 7.52 4.88 8.13.8.1 2.02 2.04 1.9 3-.1.83-1.8 2.13-2.77 2.12-6.13-.07-12.25-.36-18.36-.8-.96-.08-1.84-1.32-2.76-2 .73-.97 1.4-2.7 2.2-2.77 5.03-.47 5.15-3.72 4.88-7.53-.4-5.7-.2-11.47-1.08-17.08-.8-5.1-11.15-8.52-15.1-5.24-1.02.85-1.95 2.52-1.92 3.8.2 7.6.56 15.23 1.2 22.82.12 1.33 1.84 2.5 2.8 3.76.68.9 2.05 2.14 1.82 2.67-.44 1.02-1.73 2.17-2.8 2.3-2.6.36-5.3.1-7.97.2-6.14.28-12.32 1.1-18.44.78-4.15-.22-9.33-.9-12-3.5-2.55-2.48-3-7.64-3.38-11.72-.43-4.57.32-9.24.47-13.87.1-3.15.37-6.42-4.2-6.97-.82-.1-2.07-1.5-2.08-2.3-.02-.8 1.22-1.7 2.05-2.4 2.6-2.14 5.2-4.28 7.93-6.28 1.86-1.38 3.9-2.52 5.87-3.76.64 1.9 1.3 3.8 1.9 5.74.18.6.2 1.26.4 2.4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M120.63 56.5c-1.18 2.27-1.8 5.2-3.62 6.7-13.82 11.5-33.73 4.24-36.73-13.48C79 42.27 82.1 30.96 95.9 25.18c6.25-2.62 18.94.42 23.15 6.32 1.53 2.13 1.8 5.16 2.66 7.78-2.38.75-4.76 2.03-7.18 2.15-6.57.3-13.17.13-19.76.15-4.7 0-6 2.15-4.08 6.78 3.44 8.34 11.82 12.2 20.9 9.55 2.48-.72 4.9-1.76 7.33-2.65.58.4 1.16.83 1.73 1.25zm-30.1-18.55c5.82-.34 10.87-.45 15.86-1.03 1.38-.16 2.6-1.72 3.9-2.64-1.2-1.4-2.13-3.4-3.67-4.12-5.9-2.77-11.98.04-16.1 7.8zM259.4 186c1.4-8.62 6.35-15.04 2.8-22.8-.38-.84-.13-1.97-.14-2.97-.05-5.43-.1-10.86-.1-16.3 0-11.1-.32-22.23.18-33.32.3-6.5-2.18-10.44-8-12.72-2.15-.84-4.24-1.93-6.47-2.57-3.36-.96-5.65-3.38-4.7-6.4.65-2 3.8-4.24 6.05-4.5 5.25-.62 10.64-.34 15.95 0 14.83.97 29.63 3.27 44.53.7 6.58-1.13 11.72 1.66 16.73 5.86 12.25 10.3 15.64 23.62 12.02 38.2-1.57 6.33-6.77 12.1-11.3 17.24-4.16 4.72-5.42 8.24-1.94 13.53 1 1.52 2.4 2.77 3.6 4.14 5.02 5.7 10 11.4 15.07 17.04 1.77 1.97 3.62 3.9 5.68 5.53 3.28 2.58 7.32.93 7.95-3.22.3-1.95.02-4 .1-5.98.43-8.95 1.14-17.9 1.27-26.85.1-6.95-.8-13.92-.67-20.86.16-9.1 1.04-18.22 1.35-27.34.2-5.94-2.33-9.03-8.14-10.82-5.5-1.7-6.53-2.56-8.55-7.87 5.06-1.02 9.94-2.6 14.9-2.88 12.43-.73 24.9-.97 37.36-1.17 3.47-.05 7.08.27 10.35 1.27 1.52.47 3.4 3.08 3.28 4.58-.12 1.43-2.4 3.23-4.1 3.88-4.25 1.63-8.82 2.44-13.04 4.13-1.47.58-3.13 2.74-3.25 4.3-.7 8.85-.93 17.74-1.4 26.62-.57 10.96-1.18 21.92-1.86 32.88-.45 7.1-.92 14.2-1.62 21.3-.35 3.6 1.25 5.42 4.48 5.85 5.9.8 11.85 1.46 17.8 1.92 4.92.38 9.9.8 14.82.47 8.57-.57 13.46-7.18 19.28-12.36 3.65-3.26 5.4-6.3 4.15-11.45-3.14-12.98-.5-26.08-.1-39.15.24-8.12.1-16.4-1.36-24.34-.5-2.77-5.24-5.1-8.44-6.92-2.2-1.26-5.13-1.17-7.64-1.98-3.58-1.15-5.34-4.2-4.08-7.38.7-1.76 3.9-3.42 6.07-3.53 8.15-.4 16.32-.2 24.5-.14 1.12 0 2.24.45 3.37.52 3.84.24 7.94 1.34 11.5.4 7.77-2.07 15.27-2.37 23.1-.5 3.26.77 6.95.42 10.32-.16 6.73-1.17 16.87 3.05 19.84 9.28 2.4 5.03 4.53 10.3 5.82 15.7.5 2.1-1.05 6.36-2.7 7-3.5 1.34-8 2.03-11.03-1.7-3.5-4.3-6.6-8.92-10-13.34-.76-1-1.8-2.06-2.93-2.5-7.98-3.13-16.28-4.46-24.83-3.56-4.05.42-8.95 5.93-9.2 11.27-.4 8.63-.34 17.3.1 25.93.26 5.45 2.18 6.38 7.64 5.1.65-.14 1.3-.5 1.93-.44 10.42 1.26 15.8-4.47 18.98-13.46.48-1.37 1.3-2.9 2.42-3.7 1.64-1.2 3.78-2.57 5.54-2.38 1.16.13 2.87 2.9 2.88 4.48.1 12.28-.15 24.56-.34 36.85-.04 2.47-.26 4.96-.47 7.44-.4 4.83-3.33 7.63-8.2 7.32-4.57-.3-4.54-4-4.72-7.34-.1-1.66-.02-3.33-.02-5 0-8.03-1.44-9.74-9.35-10.14-4.14-.22-8.32 0-12.45.3-3.48.25-4.78 2.58-4.6 5.9.48 8.28.84 16.6 1.45 24.87.5 6.82 2.78 9.17 9.52 9.64 9.06.62 18.15 1.03 27.23 1.35 5.52.2 9.73-2.67 13.65-6.28 4.12-3.8 8.6-7.2 12.68-11.05 1.2-1.13 1.16-3.5 2.3-4.74 1.54-1.7 3.53-3.58 5.6-3.96 1.2-.23 3.28 2.06 4.37 3.62 4.13 5.98 7.22 12.9 12.18 18.03 9.1 9.37 26.92 3.58 30.06-9.23 1.3-5.35.35-10.5-3.83-14.2-6.77-6.05-14.44-10.7-22.3-15.37-9.78-5.8-19.93-12.43-22.9-25.97-2.7-12.4-1.53-23.6 7.12-31.94 7.06-6.8 16.83-10.83 25.52-15.88 1.1-.64 3.04-.4 4.4.04 6.32 2 12.74 3.83 18.82 6.42 9.56 4.06 12.18 21.95 4.48 29.07-2.02 1.9-3.73 2.13-5.6-.68-3.2-4.82-6.44-9.77-10.44-13.9-7.52-7.8-18.23-7.27-24.77.65-6.9 8.36-5.47 19.62 3.47 25.66 2.72 1.83 5.8 3.48 8.96 4.23 12.75 3.03 21.98 11.37 30.57 20.36 2.64 2.75 3.44 7.35 4.83 11.2 1.2 3.3.98 7.3 6.06 7.87 1.2.13 2.26 2.54 3.22 4 3.8 5.82 7.1 12.04 11.46 17.4 3.68 4.54 9.16 7.4 15.13 4.83 6.97-3 14.32-6.17 15.65-15.18.72-4.87-.32-9.55-4-12.8-6.8-6-14.2-10.95-22.33-15.38-8.04-4.4-16.86-9.87-20.72-19.3-4.87-11.9-5.9-24.06 2.04-35.18 2.57-3.6 6.5-6.35 10.18-9 4.3-3.1 8.98-5.68 13.52-8.45 3.8-2.3 7.74-2.63 11.95-1.1 5 1.83 10.15 3.22 15.08 5.18 10.54 4.2 13.73 21.68 5.42 29.56-2.12 2-3.94 2.13-5.86-1.06-2.8-4.68-5.96-9.32-9.83-13.1-2.68-2.64-6.6-4.7-10.3-5.43-7.93-1.57-13.96 2.22-17.52 9.78-3.5 7.45-2.33 14.58 4.15 19.77 3.4 2.72 7.6 4.84 11.77 6.16 13 4.1 23 12.24 31.54 22.4 1.5 1.77 1.8 4.55 2.65 6.87 1.2 3.23 2.67 6.4 3.53 9.72.92 3.53 2.55 7.6 1.62 10.78-5.18 17.53-19.96 31.02-40.26 31.42-16.78.33-24.3-2.85-38.23-14.37-1.2.98-2.53 1.93-3.7 3.05-13.44 12.8-37.45 15.5-53.22 5.8-2.6-1.58-4.54-1.54-7.32-.33-3.38 1.48-7.2 2.6-10.85 2.65-22.15.23-44.32-.12-66.48.24-7.32.12-14.6 1.92-21.93 2.63-2.4.23-4.9-.52-7.35-.9-3.9-.58-7.77-1.77-11.65-1.76-13.47.06-27.07-.52-40.35 1.24-6.53.87-12.73 1.54-19.2.77-.87-.1-1.95.43-2.74.95-7.3 4.8-15.23 2.3-22.8 1.42-2.25-.27-4.63-4.04-5.96-6.7-2.8-5.64-4.54-11.82-7.5-17.35-1.6-2.95-4.8-5.06-7.35-7.48-1.2-1.12-2.46-2.16-3.78-3.12-5.03-3.63-9.92-7.5-15.2-10.73-4.1-2.5-6.95-.8-8.7 3.77-2.75 7.18-.55 22.14 4.68 27.2 1.74 1.7 4.25 2.56 6.13 4.12 1.83 1.5 3.73 3.2 4.85 5.22 1.37 2.5-.07 4.3-2.8 4.4-10.57.42-21.14.7-31.7.98-2.33.07-4.65.03-6.97.02-1.82 0-4.15.66-5.4-.2-8.8-6.2-19.2-3.55-28.75-5.3-3.66-.68-6.52-1.37-7.45-5.16-.97-3.96.3-6.88 4.04-9.17 6.76-4.14 8.3-8.2 5.72-15-.76-2.02-3.02-4.7-4.8-4.9-7.23-.7-14.58-1.15-21.78-.48-3.14.3-6.02 3.48-10.38 6.2 9.44 4.08 7.8 11.9 9.23 18.37 1.5 6.77-1.86 10.6-9.37 10.7-15.46.2-30.92.1-46.38.1-13.16.02-26.32-.1-39.48.06-6.97.08-13.93.56-20.9.97-3.62.22-6.63-.87-6.9-4.7-.26-3.43 1.78-5.9 5.47-6.6 2.6-.5 5.17-1.23 7.77-1.7 6.45-1.22 7.55-2.14 7.5-8.9-.05-7.62-.9-15.24-.97-22.87-.1-10.76-.32-21.56.5-32.27.6-7.67-.38-13.63-7.22-18.4-5.18-3.6-9.22-8.77-14.14-12.8-4.25-3.5-9.37-3.8-14.65-2.22-1.9.56-3.9.8-5.9.9-6.06.3-7.67 1.4-8.4 7.42-.68 5.76-1.06 11.58-1.1 17.4-.06 8.05 3 10.45 11.08 10.33 7.3-.1 12.66-2.65 16.3-9.27 1.82-3.3 4-8.5 8.5-6.86 2.4.88 4.4 6 4.6 9.33.64 11.9.5 23.88.52 35.82 0 4.1-2.94 5.05-6.43 5.4-3.62.35-5.7-.5-6.76-4.52-2.34-8.94-11.72-14.4-20.73-12.68-5.1.98-7.25 3.36-7.1 8.47.2 7.3.48 14.6 1.08 21.86.5 6.08 3.83 10.34 9.42 13 3.85 1.83 7.1 4.52 4.1 9.27-1 1.63-3.27 3.25-5.13 3.47-11.06 1.25-22.13 2.46-33.23 2.9-4.83.2-9.84-1.06-14.57-2.36-3.04-.84-4.35-3.63-1.5-6.1 3.17-2.74 6.67-5.26 10.4-7.15 3.84-1.92 5.46-4.13 5.57-8.7.52-23.27 1.66-46.5 2.3-69.76.33-11.84-.9-13.04-12-16.77-2.6-.88-5.02-2.48-7.3-4.05-3.33-2.27-2.33-4.28.74-5.87.45-.23.92-.53 1.4-.55 11.13-.43 21.86-4.45 33.48-1.9 7.9 1.74 16.5.66 24.8.38 13.18-.44 26.37-1.32 39.56-1.84 2.06-.1 4.13 1 6.23 1.13 3.22.2 6.7.8 9.66-.1 7.73-2.3 15.26-2.55 23.12-.75 3.27.75 6.86.1 10.3.1 1.64 0 3.3-.23 4.9 0 14.44 2.26 16.96 9.03 21.35 23.95.94 3.18.46 7.3-3.05 8-3.37.68-8.24.3-10.58-1.75-4.2-3.7-6.98-9.02-10.46-13.58-.76-1-1.9-1.97-3.05-2.4-7.86-2.93-16-4.6-24.36-3.47-5.22.72-8.6 4.95-8.94 9.55-.73 9.9-.32 19.88.02 29.8.04 1.2 2.5 2.48 4.05 3.34.7.38 1.92-.38 2.9-.3 11.6.8 18.36-5.1 22.02-15.58.46-1.32 1.67-2.52 2.8-3.44 3.43-2.76 6.82-1.63 6.9 2.78.24 12.77-.05 25.55-.2 38.32-.04 2.3-.64 4.6-.6 6.9.07 5.05-3.02 6.4-7.27 6.97-4.83.65-5-3.26-5.56-5.98-.66-3.2-.27-6.63-.18-9.96.1-3.42-1.4-5.5-4.8-5.73-5.3-.35-10.6-.75-15.9-.58-3.9.12-5.8 2.47-5.5 6.7.57 7.45.78 14.94 1.18 22.42.43 8.14 2.98 10.7 11.08 11.6 2.63.28 5.23 1.45 7.82 1.37 4.14-.14 8.28-.88 12.4-1.58 1.93-.34 3.74-1.48 5.68-1.72 7.97-.98 13.04-5.98 16.08-12.67 2.76-6.1 4.3-12.76 6.27-19.2 3.17-10.44 6.18-20.93 9.4-31.35 2.62-8.55 5.7-16.96 8.1-25.56 1.86-6.63 9.82-14.67 16.56-14.8 2.1-.04 5.03 2.14 6.2 4.1 2.83 4.85 5.32 10 7.13 15.3 4.12 12.1 8.3 24.2 11.45 36.56 3.48 13.6 11.3 25.2 16.3 38.05 1.3 3.32 4.6 5.86 7.92 9.92zm32.37-42.36c2.2-.42 6.37-1.5 10.63-2 4.44-.5 7.3-2.83 9.28-6.55 2.84-5.32 5.3-10.6 3.25-17-1.2-3.7-.42-8.6-2.6-11.35-3.67-4.67-8.6-8.68-13.7-11.83-6.83-4.22-15.75 1.12-16.05 9.15-.4 10.5-.56 21.03-.7 31.54-.1 5.86 2.23 8.13 9.9 8.04zm-83 4.1c6.6-.26 7.4-1.8 4.5-7.53-1.77-3.48-3.03-7.24-4.3-10.96-1.24-3.64-5.23-5.77-6.43-3.27-2.3 4.74-3.86 9.94-4.9 15.12-.26 1.37 2.2 3.92 4 4.92 2.04 1.15 4.72 1.2 7.13 1.7z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M596.5 61.98c1.7-7.16 3.5-14.3 5.1-21.5.9-4.04 1.3-8.2 2.27-12.24 1.6-6.84 3.44-13.92 10.8-16.72 2.7-1.02 6.35-.28 9.35.5 8.3 2.1 16.35 5.47 24.74 6.85 9.45 1.55 19.15 1.8 28.76 2.04 14.2.37 28.42-.32 42.57.55 6.18.37 12.53 2.8 18.2 5.56 4.6 2.25 5.43 10.2 3.6 15.86-3.77 11.74-8.9 23.16-9.22 35.84-.06 2.57-1.2 5.13-1.97 7.67-1.1 3.74-2.5 7.4-3.44 11.18-1.53 6.27-2.96 12.58-4.07 18.93-.57 3.2-1.3 6.93-.22 9.77 1.4 3.68-.07 5.54-1.82 8.26-2.07 3.2-3.57 6.9-4.63 10.6-4.1 14.28-7.95 28.64-11.9 42.97-2.6 9.52-5.64 18.95-7.72 28.58-2.22 10.33-6.87 15.2-15.92 15-6.16-.15-13.96-12.33-11.6-18.03 2.1-5.13 4-10.33 6.12-15.46 4.15-10.04 8.82-19.9 12.47-30.1 4.4-12.34 8.18-24.9 11.83-37.5 2.4-8.25 3.62-16.86 6.2-25.05 2.8-8.78 5.9-17.58 10.1-25.77 4.28-8.4 2.33-16.85 1.9-25.3-.06-1.32-3.67-3.46-5.7-3.55-12.8-.57-25.6-.77-38.4-.87-6.48-.05-12.97.63-19.45.42-4-.12-7.94-1.84-11.92-1.87-8.1-.08-14.62 3.07-19.3 10.2-4 6.1-8.6 11.86-13.53 17.23-1.53 1.67-5.23 2.63-7.44 2.04-1.86-.5-3.76-3.53-4.27-5.76-.73-3.16-.2-6.62-.2-9.94l-1.3-.34z"/></svg>
  </transition>
  <div id="content">
    <ul class="the-seven">
      <person v-for="person in fellowship" v-bind:key="person" :person="person"></person>
    </ul>
  </div>
</div>

<template id="template-person">
  <transition name="person-show">
    <li v-if="show" class="person" :id="caption" :class="{'person-expanded' : expanded, 'person-hover' : hover}">
      <div class="person-content">
        <transition name="fade">
          <div class="person-caption" v-if="!expanded">
            <h2>{{ caption }}</h2>
          </div>
        </transition>
        
        <transition name="fade">
          <div class="content" v-if="expanded">
            <div class="person-title">
              <h1 >{{ person.firstname }} {{ person.lastname }}</h1>
              <h2>{{ person.alias }}</h2>
              <p>{{ person.bio }}</p>
              <p v-if="person.bioextended">{{ person.bioextended }}</p>
            </div>
            
          </div>
        </transition>
        
          <a href="#"
             v-if="expanded"
             @click.prevent="expand(person)">X Close</a>
        
        <a href="#"
          v-if="!expanded"
          @click.prevent="expand(person)"
          @mouseenter="hoverPerson(person)"
          @mouseleave="hoverPerson(person)" v-bind="{'title' : 'More about ' + caption }"></a>
      </div>
      
      <svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 618 560" class="image">
        <defs>
          <mask :id="caption + '-mask'">
            <image width="618" height="560" v-bind="{'xlink:href' : person.mask}"></image>
          </mask>
        </defs>
        
        <image width="618" height="560" v-bind="{'mask' : 'url(#' + caption + '-mask)', 'xlink:href' : person.image}"></image>
      </svg>
    </li>
  </transition>
</template>
              
            
!

CSS

              
                $smallScreen: 550px;
$largeScreen: 1600px;

@function between($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

@mixin between($property, $to, $from, $toWidth: $smallScreen, $fromWidth: $largeScreen) {
  #{$property}: $to;

  @media (min-width: $toWidth) {
    #{$property}: between($to, $from, $smallScreen, $largeScreen);
  }

  @media (min-width: $fromWidth) {
    #{$property}: $from;
  }
}

:root {
  @include between(font-size, 15px, 24px);
}

html {
  height: 100%;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  backface-visibility: hidden;
}

body,
#app,
canvas,
#atmosphere,
#particles-js,
#content {
  display: flex;
  position: absolute;
  min-height: 100%;
  width: 100%;
}

body {
  background: #395e7f
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-bg.jpg)
    top
    center
    no-repeat 
    ;
  background-size: cover;
  background-attachment: fixed;
}

canvas {
  z-index: -1;
}

#app {
  background: #395e7f
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-bg.jpg)
    top
    center
    no-repeat 
    ;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
}

#particles-js {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: transparent;
  // z-index: 2;
}

#atmosphere {
  background: radial-gradient(
    ellipse farthest-corner at 35% 25%,
    white,
    rgba(white, 0)
  );
  opacity: .4;
  mix-blend-mode: overlay;
  animation: stormyskies 8s linear infinite;
}

@keyframes stormyskies {
  0% { opacity: .4 }
  @for $i from 1 through 19 {
    $limit: 4;
    $percent: 0% + ($i * 5);
    #{$percent} {
      opacity: random($limit) * .1;
    }
  }
  100% { opacity: .4 }
}

#logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  display: block;
  fill: white;
  width: 30vw;
  min-width: 16rem;
  height: auto;
  mix-blend-mode: soft-light;
}

#content {
  flex-direction: row;
  align-items: stretch;
}

.the-seven {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  width: 100%;
  overflow-x: hidden;
  flex-direction: row-reverse;
}

.person {
  flex-grow: 1;
  position: relative;
  transition: opacity .8s cubic-bezier(0.13, 0.88, 0.89, 1), flex .8s cubic-bezier(0.13, 0.88, 0.89, 1);
  // seemes like there's a flexbox bug when changing viewport size. This fixes it... ¯\_(ツ)_/¯
  border: 1px solid transparent;
  font-size: 1rem;
  
  &.person-hover {
    flex-grow: 1.6;
    .person-caption {
      opacity: 1;
      
      h2 {
        text-shadow: .25rem 0rem .5rem white;
      }
    }
  }
  
  a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    // opacity: 0;
  }
}

.person-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.person-caption {
  position: absolute;
  bottom: 2rem;
  display: inline-block;
  right: -1rem;
  z-index: 100;
  transition: opacity .8s cubic-bezier(0.13, 0.88, 0.89, 1);
  opacity: .8;
  
  h2 {
    font-size: 3rem;
    font-weight: normal;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 0;
    letter-spacing: -2.25rem;
    color: #fffaee;
    transition: text-shadow .8s cubic-bezier(0.13, 0.88, 0.89, 1);
    text-shadow: 0rem 0rem 0rem rgba(white,0);
  }
}

.person-show-enter-active {
  $ease: cubic-bezier(0.13, 0.88, 0.89, 1);
  transition: opacity .8s $ease, flex .8s $ease;
  height: 100vh;
}

.person-show-leave-active {
  $ease: cubic-bezier(.48, .91, .27, 1);
  transition: opacity .6s $ease, flex .6s $ease;
  height: 100vh;
}

.person-show-enter, .person-show-leave-to {
  opacity: 0;
  flex-grow: 0 !important;
}

h1,
h2,
h3 {
  font-family: 'IM Fell DW Pica SC', serif;
  color: white;
}

.person .image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  mask: linear-gradient(to top right, transparent 25% , black 50%);
  transition: all .8s ease-in-out;
  z-index: -20;
}

#Snow {
  a { height: 23rem; }
  .image {
    left: 42%;
    height: 23em;
  }
}

#Mormont {
  a { height: 24rem; }
  .image {
    left: 60%;
    height: 24em;
  }
}

#Tormund {
  a { height: 25rem; }
  .image {
    left: 65%;
    height: 25em;
  }
}

#Clegane {
  a { height: 25rem; }
  .image {
    left: 40%;
    height: 25em;
  }
}

#Dondarrion {
  a { height: 24rem; }
  .image {
    left: 68%;
    height: 24em;
  }
}

#Thoros {
  a { height: 23.5rem; }
  .image {
    left: 55%;
    height: 23.5em;
  }
}
#Gendry {
  a { height: 23rem; }
  .image {
    left: 58%;
    height: 23em;
  }
}


.person-expanded {
  min-height: 100%;
  
  .image {
    position: fixed;
    bottom: 0;
    height: 80vh!important;
    left: 100%!important;
    transform: translateX(-80%) translateZ(1px);
  }
  
  a {
    color: white;
    font-family: 'IM Fell DW Pica SC', serif;
    text-decoration: none;
    position: absolute;
    font-size: 1.5rem;
    top: 2rem;
    left: initial!important;
    right: 2rem;
    height: auto!important;
    display: inline-block;
    width: auto;
    bottom: initial!important;
    animation: name-reveal 2s ease-in-out forwards;
    opacity: 0;
    animation-delay: 1.2s;
  }
  
  &.person-hover {
    .person-caption {
      opacity: 0;
    }
  }
}

.content {
  left: 0;
  width: 70vw;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.person-title {
  min-width: 60%;
  margin-left: auto;
  padding: 2rem;
  
  h1,
  h2,
  p {
    transform: translate3d(2rem,0,0);
    animation: name-reveal 2s ease-in-out forwards;
    opacity: 0;
  }
  
  h1 {
    font-size: 4rem;
    // animation-delay: .2s;
    margin: 0;
  }
  
  h2 {
    font-size: 2rem;
    animation-delay: .3s;
    margin: 0 0 0 3rem;
  }
  
  p {
    animation-delay: 1s;
    color: white;
    width: 55vw;
    line-height: 1.6;
    font-size: 1.4rem;
    text-align: center;
    font-family: 'IM Fell English', serif;
  }
}

@keyframes name-reveal {
  0% {
    transform: translate3d(2rem,0,0);
    opacity: 0;
    filter: blur(2rem)
  }
  100% {
    transform: translate3d(0,0,0);
    opacity: 1;
    filter: blur(0rem)
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .4s ease-in-out;
  opacity: 1;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

@media (max-width: $smallScreen) {
  .the-seven {
    left: 0;
    padding-top: 10rem;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    align-content: space-between;
    overflow-x: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .person {
    font-size: .75rem;
    height: 10rem;
    border: none;
    margin-right: 50%;
    width: 50%;
    flex-grow: 0;
    
    a {
      height: 100%!important;
    }
  }
  
  .image {
    mask: linear-gradient(to top, transparent, black 50%)!important;
  }
  
  .person-caption {
    left: .5rem;
    
    h2 {
      text-orientation: initial;
      writing-mode: initial;
      letter-spacing: -.2rem;
    }
  }
  
  .person:nth-child(2n) {
    margin-right: 0;
    margin-left: 50%;
    
    .person-caption {
      left: initial;
      right: .8rem
    }
  }
  
  #logo {
    min-width: 10rem;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%)
  }
  
  .person-expanded {
    position: initial;
    width: 100%;
    
    .image {
      position: absolute;
      height: 40vh!important;
      bottom: initial;
      top: .5rem;
      left: 50%!important;
      transform: translateX(-50%);
    }
    
    .content {
      padding-top: 40vh;
      width: 100%;
    }
    
    p {
      width: 100%;
    }
  }
}
              
            
!

JS

              
                const data = [
  {
    firstname: 'Gendry',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-gendry.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-gendry_mask.jpeg',
    alias: 'Bastard of King Robert Baratheon',
    bio: "Robert Baratheon's bastard son, Gendry trained as a blacksmith in King’s Landing. Upon leaving the city to join the Night’s Watch, he met and befriended Arya Stark on the road north. The two separated when Melisandre brought Gendry back to Dragonstone as a sacrifice for Stannis Baratheon. He escaped death when Davos Seaworth set him free. Davos rediscovered Gendry back in King’s Landing, and enlisted him to join the mission beyond the Wall."
  }, 
  {
    firstname: 'Thoros',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-thoros.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-thoros_mask.jpeg',
    alias: 'of Myr',
    bio: "A native of the Free City of Myr and a Red priest for the Lord of Light Thoros was dispatched to the Seven Kingdoms to convert the Westerosi king. Fond of drink, he soon abandoned his faith and became renowned as a tourney fighter, warrior, and carouser. He joined Beric Dondarrion on his mission to arrest Gregor Clegane and became Beric's right-hand man in the Brotherhood. His faith in the Lord of Light was renewed when he was able to resurrect Beric – multiple times.He encouraged Sandor “The Hound” Clegane to travel with the Brotherhood and now heads beyond the Wall to help Jon Snow."
  },
  {
    firstname: 'Beric', lastname: 'Dondarrion',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-dondarrion.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-dondarrion_mask.jpeg',
    alias: 'The Lightning Lord',
    bio: "Lord of Blackhaven, Beric Dondarrion arrived in King’s Landing to compete in the Tournament of the Hand given in honor of Ned Stark then Hand of the King. After Gregor Clegane terrorized the Riverlands, Lord Beric was tasked by Ned to bring him justice. A follower of the Lord of Light, Beric has been brought back to life several times by a Red Priest, Thoros of Myr After hanging the men who raided Brother Ray’s community, he offered Sandor “The Hound” Clegane to travel north with the Brotherhood. The group now plans to help Jon Snow beyond the Wall."
  },
  {
    firstname: 'Sandor', lastname: 'Clegane',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-clegane.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-clegane_mask.jpeg',
    alias: 'The Hound',
    bio: "The Hound was the personal bodyguard to King Joffrey and carried out his commands, no matter how monstrous. He abandoned the king and his post when the Blackwater was set on fire in battle, and traveled alongside Arya Stark after finding her in the Riverlands. Brienne of Tarth wounded the Hound severely when she tried to fulfill her promise to reclaim Arya for Catelyn Stark. Arya left the Hound alone to die; he was discovered by Brother Ray who nursed him back to health. The Hound found a home in Brother Ray’s community and after the village was raided and Ray murdered, the Hound hunted down and killed the men responsible. During this mission, The Hound re-encountered Beric Dondarrion and is now accompanying him, Thoros, Jorah Mormont, Tormund and Jon Snow beyond the Wall in search of a wight."
  },
  {
    firstname: 'Tormund',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-tormund.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-tormund_mask.jpeg',
    alias: 'Giantsbane',
    bio: "A legendary wildling leader who supported Mance Rayder, Tormund is also known as “Giantsbane.” Swayed by John Snow's promise that the remaining wildlings would have safe passage through the Wall, he traveled with Jon to Hardhome to make their case before the Free Folk elders. The two narrowly escaped when the camp was attacked by White Walkers and the Army of the Dead, who added the wildlings slaughtered at Hardhome to its ranks. Tormund fought alongside Jon at the Battle of the Bastards, and now heads back beyond the Wall with him in search of a wight."
  },
  {
    firstname: 'Jorah', lastname: 'Mormont',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-mormont.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-mormont_mask.jpeg',
    alias: 'The Andal',
    bio: 'The son of the late Lord Commander of the Night’s Watch, Jorah originally joined Daenerys Targaryen’s company to spy on her in exchange for a pardon. He became committed to her cause and her person, but was banished when the queen learned of his betrayal. Jorah came across Tyrion Lannister in Volantis and presented him to Daenerys in an attempt to earn back her trust. After helping save her from an attack by the Sons of the Harpy, he traveled north with Daario in search of their queen, all the while hiding his infection of greyscale. Once Dany secured command of the Dothraki, Jorah revealed his disease and was sent away to find a cure.  He arrived at the Citadel where Samwell Tarly attempted a difficult and prohibited treatment for his infection. Returning to Daenerys, Jorah is on a mission with Jon Snow to capture a wight from beyond the Wall.'
  },
  {
    firstname: 'John', lastname: 'Snow',
    image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-snow.jpg',
    mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-snow_mask.jpeg',
    alias: 'King in the North',
    bio: "Son of Lyanna Stark and Rhaegar Targaryen, Jon is unaware of his true parentage, as Lyanna’s brother Ned raised Jon as his bastard son. Jon joined the Night's Watch where he served as steward to Lord Commander Mormont. After Mormont’s death, Jon was elected Lord Commander of the Watch, and made the unpopular decision to ally with the wildlings and save them from the White Walkers. For that, he was murdered at Castle Black by his own men, but to the awe of everyone, Jon was brought back to life by the Red Priestess Melisandre.",
    bioextended: "Restored as Lord Commander, Jon executed his murderers before abdicating his command and passing it on to Edd Tollett. He swore off all fighting, until a reunion with his long-lost sister Sansa persuaded him to retake Winterfell. With a rag-tag army of Northern allies and the crucial last-minute support of the Vale, Jon led the Starks to victory in the Battle of the Bastards and reclaimed their childhood home. Impressed with his leadership, the Northern houses proclaimed him King in the North. Jon met with Daenerys Targaryen in hopes of forming an alliance, and has returned to the North armed with the dragonglass Dany permitted him to mine. To convince Cersei Lannister of the looming threat, Jon plans to lead a small band of men beyond the Wall and return with a wight to prove the existence of the army of the dead."
  },
]

const EventBus = new Vue()

Vue.component('person', {
  props: ['person'],
  template: '#template-person',
  data() {
    return {
      show: true,
      expanded: false,
      hover: false
    }
  },
  computed: {
    caption() {
      if (this.person.lastname) {
        return this.person.lastname
      } else {
        return this.person.firstname
      }
    }
  },
  methods: {
    hoverPerson() {
      this.hover = !this.hover;
    },
    expand() {
      this.expanded = !this.expanded;

      if (this.expanded) {
        EventBus.$emit('item-expanded')
      } else {
        EventBus.$emit('item-collapsed')
      }
    }
  },
  created() {
    EventBus.$on('item-expanded', () => {
      if (!this.expanded) {
        this.show = false;
      }
    });
    EventBus.$on('item-collapsed', () => {
      this.show = true;
    });
  }
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      fellowship: data,
      world: 'mars',
      expanded: false
    }
  },
  created() {
    EventBus.$on('item-expanded', () => {
      if (!this.expanded) {
        this.expanded = true;
      }
    });
    EventBus.$on('item-collapsed', () => {
      this.expanded = false;
    });
  },
  mounted() {
    particlesJS("particles-js",{
      "particles": {
        "number": {
          "value": 600,
          "density": {
            "enable": true,
            "value_area": 4577.056321467182
          }
        },
        "color": {
          "value": "#fff"
        },
        "shape": {
          "type": "polygon",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": true,
          "anim": {
            "enable": true,
            "speed": 0.4,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 2,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 10,
            "size_min": 0,
            "sync": false
          }
        },
        "line_linked": {
          "enable": false,
          "distance": 500,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 2
        },
        "move": {
          "enable": true,
          "speed": 4,
          "direction": "bottom",
          "random": true,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": true,
            "rotateX": 9075.197878771136,
            "rotateY": 8443.879765465317
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": false,
            "mode": "bubble"
          },
          "onclick": {
            "enable": false,
            "mode": "repulse"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 0.5
            }
          },
          "bubble": {
            "distance": 400,
            "size": 4,
            "duration": 0.3,
            "opacity": 1,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    });
  }
})
              
            
!
999px

Console