cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              <main id="container">
  <!--   Nav bar to collapse/expand -->
  <nav :class="navBar">
    <div class="logo">
    </div>
    <ul>
      <li>Great Hall</li>
      <li>Wizard Chess</li>
      <li>Hand of Glory</li>
      <li>Headless Hunt</li>
    </ul>
    <i class="material-icons menu-icon">menu</i>
  </nav>
  <!--   Dummy article for context -->
  <div class="wrapper">
    <article>
      <h2>Expecto Patronum Ipsum</h2>
      <p>Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.</p>
      <div class="img float-left"></div>
      <p>Prefect’s bathroom Trelawney veela squashy armchairs, SPEW: Gamp’s Elemental Law of Transfiguration. Magic Nagini bezoar, Hippogriffs Headless Hunt giant squid petrified. Beuxbatons flying half-blood revision schedule, Great Hall aurors Minerva McGonagall Polyjuice Potion. Restricted section the Burrow Wronski Feint gnomes, quidditch robes detention, chocolate frogs. Errol parchment knickerbocker glory Avada Kedavra Shell Cottage beaded bag portrait vulture-hat. Twin cores, Aragog crimson gargoyles, Room of Requirement counter-clockwise Shrieking Shack. Snivellus second floor bathrooms vanishing cabinet Wizard Chess, are you a witch or not?</p>
      <p>Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them. Bee in your bonnet Hand of Glory elder wand, spectacles House Cup Bertie Bott’s Every Flavor Beans Impedimenta. Stunning spells tap-dancing spider Slytherin’s Heir mewing kittens Remus Lupin. Palominos scarlet train black robes, Metamorphimagus Niffler dead easy second bedroom. Padma and Parvati Sorting Hat Minister of Magic blue turban remember my last.</p>
    </article>
    <article>
      <h2>Honey Dukes Butterbeer</h2>
      <p>Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.</p>
      <div class="img float-right"></div>
      <p>Red hair crookshanks bludger Marauder’s Map Prongs sunshine daisies butter mellow Ludo Bagman. Beaters gobbledegook N.E.W.T., Honeydukes eriseD inferi Wormtail. Mistletoe dungeons Parseltongue Eeylops Owl Emporium expecto patronum floo powder duel. Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. Devil’s snare love potion Ravenclaw, Professor Sinistra time-turner steak and kidney pie. Cabbage Daily Prophet letters from no one Dervish and Banges leg.</p>
      <p>Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with flat side of silver dagger, releases juice better than cutting. Full moon Whomping Willow three turns should do it lemon drops. Locomotor trunks owl treats that will be 50 points, Mr. Potter. Witch Weekly, he will rise again and he will come for us, headmaster Erumpent horn. Fenrir Grayback horseless carriages ‘zis is a chance many would die for!</p>
    </article>
    <article>
      <h2>Priori Incantatum</h2>
      <div class="img float-left"></div>
      <p>Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them. Bee in your bonnet Hand of Glory elder wand, spectacles House Cup Bertie Bott’s Every Flavor Beans Impedimenta. Stunning spells tap-dancing spider Slytherin’s Heir mewing kittens Remus Lupin. Palominos scarlet train black robes, Metamorphimagus Niffler dead easy second bedroom. Padma and Parvati Sorting Hat Minister of Magic blue turban remember my last.</p>
      <p>Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost Hermione spell bezoar Scabbers. Peruvian-Night-Powder werewolf, Dobby pear-tickle half-moon-glasses, Knight-Bus. Padfoot snargaluff seeker: Hagrid broomstick mischief managed. Snitch Fluffy rock-cake, 9 ¾ dress robes I must not tell lies. Mudbloods yew pumpkin juice phials Ravenclaw’s Diadem 10 galleons Thieves Downfall. Ministry-of-Magic mimubulus mimbletonia Pigwidgeon knut phoenix feather other minister Azkaban. Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden forest grindylows wool socks.</p>
      <div class="img float-right"></div>
      <p>Red hair crookshanks bludger Marauder’s Map Prongs sunshine daisies butter mellow Ludo Bagman. Beaters gobbledegook N.E.W.T., Honeydukes eriseD inferi Wormtail. Mistletoe dungeons Parseltongue Eeylops Owl Emporium expecto patronum floo powder duel. Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. Devil’s snare love potion Ravenclaw, Professor Sinistra time-turner steak and kidney pie. Cabbage Daily Prophet letters from no one Dervish and Banges leg.</p>
    </article>
  </div>
</main>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Droid+Serif:700|Lato');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
$color-primary: #574B90;
$color-primary-dark: #303A52;
$color-accent: #9E579D;
$color-text-primary: #2c3e50;
$color-grey: #D3D4D8;
$color-white: snow;
$navBar-height: 73px;

article {
  margin: 2em 0;
  max-width: 960px;
  width: 80%;

  h2 {
    font-family: 'Droid Serif', serif;
    font-size: 2.5em;
    line-height: 1.5em;
  }

  p {
    initial-letter: 2;
    line-height: 2em;
    margin-top: 1em;
    text-indent: 2em;
  }
}

body {
  background-color: $color-white;
  color: $color-text-primary; 
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  //height: 300vh;
}

// Nav bar
nav {
  align-items: center;
  background-color: $color-primary-dark;
  border-bottom: 2px solid $color-accent;
  display: flex;
  justify-content: space-between;
  position: fixed; // critical style
  top: 0; // critical style
  width: 100%; // critical style
  height: $navBar-height; // critical style
}

// Nav links
ul {
  color: $color-accent;
  display: flex;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;

  li {
    cursor: pointer;
    margin-right: 2em;
    transition: color .5s ease;
    
    &:hover {
      color: $color-primary; 
    }
  }
}

// App container
.container {
  display: flex;
  justify-content: center;
}

// Article image placeholder
.img {
  background: $color-grey;
  margin-top: 1em;
  width: 300px * 1.61;
  height: 300px;
}

// Nav bar logo placeholder
.logo {
  background: $color-primary;
  border-radius: 100%;
  cursor: pointer;
  margin-left: 2em;
  transition: background .5s ease;
  width: 50px;
  height: 50px;
  
  &:hover {
    background: $color-accent;
  }
}

// Navicon Styling
.menu-icon {
  color: $color-accent;
  cursor: pointer;
  display: none;
  font-size: 3em;
  margin-right: .75em;
  transition: color .5s ease;
  
  &:hover {
    color: $color-primary;
  }
}

// Float helpers for article images
.float-left {
  float: left;
  margin-right: 1em;
}

.float-right {
  float: right;
  margin-left: 1em;
}

// Article wrapper
.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 75px * 1.25;
  //width: 100%;
}

@media (max-width: 1024px) {
  body {
    font-size: 1em;
  }
  
  ul {
    display: none;
  }
  
  .img {
    width: 150px * 1.61;
    height: 150px;
  }
  
  .menu-icon {
    display: block;
    margin-right: .5em;
  }
}

// ======================================
//       CRITICAL ANIMATION STYLES
// ======================================

// Collapse nav bar on scroll down
.collapse {
  animation: collapse .5s ease forwards;
}

// Open nav bar on scroll up
.open {
  animation: open .5s ease forwards;
}

@keyframes collapse {
  from {
    opacity: 1;
    top: 0;
  }
  to {
    opacity: 0;
    top: -$navBar-height;
  }
}

@keyframes open {
  from {
    opacity: 0;
    top: -$navBar-height;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
            
          
!
            
              new Vue({
  el: '#container',
  data: {
    // Classes assigned to nav on scroll
    navBar: {
      collapse: false,
      open: false,
    },
    scrollState: 0, // Used to keep track of scroll position
  },
  methods: {
    scrollDetect(home, down, up) {
      // Current scroll position
      const currentScroll = this.scrollTop();
      if (this.scrollTop() === 0) {
        home();
      } else if (currentScroll > (this.scrollState)) {
        down();
      } else {
        up();
      }
      // Set previous scroll position
      this.scrollState = this.scrollTop();
    },
    // Returns current scroll position
    scrollTop() {
      return window.scrollY;
    },
    // Called when scroll is in initial position
    scrollHome() {
    },
    // Called when scrolled down
    scrollDown() {
      this.navBar.collapse = true;
      this.navBar.open = false;
    },
    // Called when scolled up
    scrollUp() {
      this.navBar.collapse = false;
      this.navBar.open = true;
    },
  },
  created() {
    window.addEventListener('scroll', () => {
      this.scrollDetect(this.scrollHome, this.scrollDown, this.scrollUp);
    })
  }
})

            
          
!
999px
Loading ..................

Console