Dropbar

In this example below you will see how to do a Dropbar with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jxnblk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jxnblk ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dropbar</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .nav-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  min-height: 3rem;
  line-height: 3rem;
}

.tappable {
  line-height: 3rem;
}

.menu a {
  display: block;
  font-weight: bold;
}

.dropbar {
  position: relative;
  min-height: 3rem;
}

.dropbar-drawer {
  padding-top: 3rem;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: top, padding-top, max-height .3s linear;
}
.dropbar-drawer.is-open, .dropbar-drawer:target {
  max-height: 1024px;
}

.dropbar-menu {
  max-height: 0;
  overflow: hidden;
  padding-right: 2rem;
  padding-left: 2rem;
  position: absolute;
  right: 0;
  margin-right: 1rem;
  transition: max-height .3s ease;
  border-radius: 0 0 .25rem .25rem;
}
.dropbar-menu.is-open, .dropbar-menu:hover {
  top: 0;
  padding-top: 3rem;
  max-height: 256px;
}

.dropdown {
  position: relative;
}
.dropdown a {
  display: block;
  whitespace: no-wrap;
  padding-right: 1rem;
  padding-left: 1rem;
}
.dropdown .dropdown-toggle {
  position: relative;
  z-index: 1;
}
.dropdown .dropdown-menu {
  position: absolute;
  top: 0;
  list-style: none;
  padding-top: 3rem;
  padding-left: 0;
  min-width: 8rem;
  max-height: 0;
  overflow: hidden;
}
.dropdown:hover .dropdown-menu {
  max-height: 512px;
}
.dropdown.dropdown-right {
  float: right;
}
.dropdown.dropdown-right .dropdown-menu {
  right: 0;
}

.wrap {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  overflow: hidden;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
  float: left;
  width: 100%;
}
.grid-1 > .grid-1:last-child, .grid-2 > .grid-1:last-child, .grid-3 > .grid-1:last-child, .grid-4 > .grid-1:last-child, .grid-5 > .grid-1:last-child, .grid-6 > .grid-1:last-child, .grid-7 > .grid-1:last-child, .grid-8 > .grid-1:last-child, .grid-9 > .grid-1:last-child, .grid-10 > .grid-1:last-child, .grid-11 > .grid-1:last-child, .grid-12 > .grid-1:last-child, .grid-1 > .grid-2:last-child, .grid-2 > .grid-2:last-child, .grid-3 > .grid-2:last-child, .grid-4 > .grid-2:last-child, .grid-5 > .grid-2:last-child, .grid-6 > .grid-2:last-child, .grid-7 > .grid-2:last-child, .grid-8 > .grid-2:last-child, .grid-9 > .grid-2:last-child, .grid-10 > .grid-2:last-child, .grid-11 > .grid-2:last-child, .grid-12 > .grid-2:last-child, .grid-1 > .grid-3:last-child, .grid-2 > .grid-3:last-child, .grid-3 > .grid-3:last-child, .grid-4 > .grid-3:last-child, .grid-5 > .grid-3:last-child, .grid-6 > .grid-3:last-child, .grid-7 > .grid-3:last-child, .grid-8 > .grid-3:last-child, .grid-9 > .grid-3:last-child, .grid-10 > .grid-3:last-child, .grid-11 > .grid-3:last-child, .grid-12 > .grid-3:last-child, .grid-1 > .grid-4:last-child, .grid-2 > .grid-4:last-child, .grid-3 > .grid-4:last-child, .grid-4 > .grid-4:last-child, .grid-5 > .grid-4:last-child, .grid-6 > .grid-4:last-child, .grid-7 > .grid-4:last-child, .grid-8 > .grid-4:last-child, .grid-9 > .grid-4:last-child, .grid-10 > .grid-4:last-child, .grid-11 > .grid-4:last-child, .grid-12 > .grid-4:last-child, .grid-1 > .grid-5:last-child, .grid-2 > .grid-5:last-child, .grid-3 > .grid-5:last-child, .grid-4 > .grid-5:last-child, .grid-5 > .grid-5:last-child, .grid-6 > .grid-5:last-child, .grid-7 > .grid-5:last-child, .grid-8 > .grid-5:last-child, .grid-9 > .grid-5:last-child, .grid-10 > .grid-5:last-child, .grid-11 > .grid-5:last-child, .grid-12 > .grid-5:last-child, .grid-1 > .grid-6:last-child, .grid-2 > .grid-6:last-child, .grid-3 > .grid-6:last-child, .grid-4 > .grid-6:last-child, .grid-5 > .grid-6:last-child, .grid-6 > .grid-6:last-child, .grid-7 > .grid-6:last-child, .grid-8 > .grid-6:last-child, .grid-9 > .grid-6:last-child, .grid-10 > .grid-6:last-child, .grid-11 > .grid-6:last-child, .grid-12 > .grid-6:last-child, .grid-1 > .grid-7:last-child, .grid-2 > .grid-7:last-child, .grid-3 > .grid-7:last-child, .grid-4 > .grid-7:last-child, .grid-5 > .grid-7:last-child, .grid-6 > .grid-7:last-child, .grid-7 > .grid-7:last-child, .grid-8 > .grid-7:last-child, .grid-9 > .grid-7:last-child, .grid-10 > .grid-7:last-child, .grid-11 > .grid-7:last-child, .grid-12 > .grid-7:last-child, .grid-1 > .grid-8:last-child, .grid-2 > .grid-8:last-child, .grid-3 > .grid-8:last-child, .grid-4 > .grid-8:last-child, .grid-5 > .grid-8:last-child, .grid-6 > .grid-8:last-child, .grid-7 > .grid-8:last-child, .grid-8 > .grid-8:last-child, .grid-9 > .grid-8:last-child, .grid-10 > .grid-8:last-child, .grid-11 > .grid-8:last-child, .grid-12 > .grid-8:last-child, .grid-1 > .grid-9:last-child, .grid-2 > .grid-9:last-child, .grid-3 > .grid-9:last-child, .grid-4 > .grid-9:last-child, .grid-5 > .grid-9:last-child, .grid-6 > .grid-9:last-child, .grid-7 > .grid-9:last-child, .grid-8 > .grid-9:last-child, .grid-9 > .grid-9:last-child, .grid-10 > .grid-9:last-child, .grid-11 > .grid-9:last-child, .grid-12 > .grid-9:last-child, .grid-1 > .grid-10:last-child, .grid-2 > .grid-10:last-child, .grid-3 > .grid-10:last-child, .grid-4 > .grid-10:last-child, .grid-5 > .grid-10:last-child, .grid-6 > .grid-10:last-child, .grid-7 > .grid-10:last-child, .grid-8 > .grid-10:last-child, .grid-9 > .grid-10:last-child, .grid-10 > .grid-10:last-child, .grid-11 > .grid-10:last-child, .grid-12 > .grid-10:last-child, .grid-1 > .grid-11:last-child, .grid-2 > .grid-11:last-child, .grid-3 > .grid-11:last-child, .grid-4 > .grid-11:last-child, .grid-5 > .grid-11:last-child, .grid-6 > .grid-11:last-child, .grid-7 > .grid-11:last-child, .grid-8 > .grid-11:last-child, .grid-9 > .grid-11:last-child, .grid-10 > .grid-11:last-child, .grid-11 > .grid-11:last-child, .grid-12 > .grid-11:last-child, .grid-1 > .grid-12:last-child, .grid-2 > .grid-12:last-child, .grid-3 > .grid-12:last-child, .grid-4 > .grid-12:last-child, .grid-5 > .grid-12:last-child, .grid-6 > .grid-12:last-child, .grid-7 > .grid-12:last-child, .grid-8 > .grid-12:last-child, .grid-9 > .grid-12:last-child, .grid-10 > .grid-12:last-child, .grid-11 > .grid-12:last-child, .grid-12 > .grid-12:last-child {
  margin-right: 0;
}

@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-1 {
    width: 5.8333333333%;
    margin-right: 2.5%;
  }

  .push-1 {
    margin-left: 8.3333333333%;
  }

  .pull-1 {
    margin-right: 8.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-2 {
    width: 14.1666666667%;
    margin-right: 2.5%;
  }

  .push-2 {
    margin-left: 16.6666666667%;
  }

  .pull-2 {
    margin-right: 16.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-3 {
    width: 22.5%;
    margin-right: 2.5%;
  }

  .push-3 {
    margin-left: 25%;
  }

  .pull-3 {
    margin-right: 25%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-4 {
    width: 30.8333333333%;
    margin-right: 2.5%;
  }

  .push-4 {
    margin-left: 33.3333333333%;
  }

  .pull-4 {
    margin-right: 33.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-5 {
    width: 39.1666666667%;
    margin-right: 2.5%;
  }

  .push-5 {
    margin-left: 41.6666666667%;
  }

  .pull-5 {
    margin-right: 41.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-6 {
    width: 47.5%;
    margin-right: 2.5%;
  }

  .push-6 {
    margin-left: 50%;
  }

  .pull-6 {
    margin-right: 50%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-7 {
    width: 55.8333333333%;
    margin-right: 2.5%;
  }

  .push-7 {
    margin-left: 58.3333333333%;
  }

  .pull-7 {
    margin-right: 58.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-8 {
    width: 64.1666666667%;
    margin-right: 2.5%;
  }

  .push-8 {
    margin-left: 66.6666666667%;
  }

  .pull-8 {
    margin-right: 66.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-9 {
    width: 72.5%;
    margin-right: 2.5%;
  }

  .push-9 {
    margin-left: 75%;
  }

  .pull-9 {
    margin-right: 75%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-10 {
    width: 80.8333333333%;
    margin-right: 2.5%;
  }

  .push-10 {
    margin-left: 83.3333333333%;
  }

  .pull-10 {
    margin-right: 83.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-11 {
    width: 89.1666666667%;
    margin-right: 2.5%;
  }

  .push-11 {
    margin-left: 91.6666666667%;
  }

  .pull-11 {
    margin-right: 91.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-12 {
    width: 97.5%;
    margin-right: 2.5%;
  }

  .push-12 {
    margin-left: 100%;
  }

  .pull-12 {
    margin-right: 100%;
  }
}
.clearfix {
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  float: right;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.hide {
  display: none;
}

.p1 {
  padding: 1rem;
}

.px1 {
  padding-right: 1rem;
  padding-left: 1rem;
}

.py1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.mr1 {
  margin-right: 1rem;
}

.mb1 {
  margin-bottom: 1rem;
}

.ul {
  list-style: none;
  padding-left: 0;
}
.ul li {
  margin-bottom: .5em;
}

.ul-inline li {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0;
}

.input {
  box-sizing: border-box;
  padding: .25rem .75rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: .25rem;
  border: 1px solid #aaa;
}
.input:focus {
  outline: none;
  border: 1px solid #0cf;
  box-shadow: 0 0 0.5rem rgba(0, 204, 255, 0.8);
}

img {
  max-width: 100%;
}

.tiles img {
  width: 100%;
}

@keyframes open-close {
  0% {
    max-height: 0;
  }
  50% {
    max-height: 1024px;
  }
  100% {
    max-height: 0;
  }
}
.open-close {
  animation: open-close 1.5s ease-in-out;
}

body, h1, h2, h3, h4, h5, h6, ul, ol, p {
  margin: 0;
}

.massive {
  font-size: 4rem;
}
@media (min-width: 640px) {
  .massive {
    font-size: 6rem;
  }
}

h1, .h1 {
  font-size: 3rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, h4, h5, h6, p, .p, .h3 {
  font-size: 1.25rem;
}

.small {
  font-size: .75rem;
}

.helvetica {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.375;
  color: #444;
}

.regular {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

a {
  color: #0cf;
  text-decoration: none;
}
a:hover {
  color: #00a3cc;
}

.blue {
  color: #0cf;
}

.gray {
  color: #444;
}

.light-gray {
  color: #999;
}

.outline, .outline * {
  outline: 1px solid rgba(0, 204, 255, 0.5);
}

.rounded-bottom {
  border-radius: 0 0 .25rem .25rem;
}

.theme-dark {
  color: #fff;
  background-color: #1c2226;
}
.theme-dark .menu a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.link-dark {
  color: #007a99;
}

.blue {
  color: #0cf;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <body class="helvetica">
  
  <header class="dropbar">
    
    <nav class="nav-bar theme-dark">
      <h1 class="left h3"><a href="#" class="h3 block px1">Dropbar</a></h1>
      <a href="#menu" class="left px1">Menu</a>
      <div class="right">
        <!--<a href="#me" class="px1">Me</a>-->
        <div class="dropdown dropdown-right theme-dark">
          <a href="#" class="dropdown-toggle">Me</a>
          <ul class="dropdown-menu menu theme-dark rounded-bottom">
            <li><a href="#">Profile</a></li>
            <li><a href="#">My Stuff</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Sign Out</a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    <div id="menu" class="dropbar-drawer theme-dark open-close">
      <div class="px1">
        <div class="container">
          
          <div class="grid-12 py1">
            <input type="text" placeholder="Search"  class="input search grid-6" />
          </div>
          
          <div class="grid-4">
            <h2 class="p light-gray mb1">Featured</h2>
            <ul class="ul menu mb1 p">
              <li><a href="#">New</a></li>
              <li><a href="#">Popular</a></li>
              <li><a href="#">Nearby</a></li>
              <li><a href="#">Specials</a></li>
            </ul>
          </div>
          
          <div class="grid-4">
            <h2 class="p light-gray mb1">Categories</h2>
            <ul class="ul menu">
              <li><a href="#">Dropbars</a></li>
              <li><a href="#">Cranksets</a></li>
              <li><a href="#">Cogs</a></li>
              <li><a href="#">Chains</a></li>
              <li><a href="#">Wheels</a></li>
              <li><a href="#">More categories...</a></li>
            </ul>
          </div>
          
          <div class="grid-4">
            <h2 class="p light-gray mb1">Tags</h2>
            <ul class="grid-6 ul menu mb1">
              <li><a href="#">#Fixed</a></li>
              <li><a href="#">#Road</a></li>
              <li><a href="#">#BMX</a></li>
              <li><a href="#">#Touring</a></li>
              <li><a href="#">#Commuter</a></li>
              <li><a href="#">More tags...</a></li>
            </ul>   
          </div>
         
          <div class="grid-12">
            <ul class="ul ul-inline tappable menu small">
              <li><a href="#" class="link-dark">Help</a></li>
              <li><a href="#" class="link-dark">Contact</a></li>
              <li><a href="#" class="link-dark">Terms of Use</a></li>
              <li><a href="#" class="link-dark">Privacy Policy</a></li>
              <li class="link-dark">Made with love by Jxnblk</li>
            </ul>
          </div>
          
        </div>
      </div>
    </div><!-- .dropbar-drawer -->
    
    <!--<div id="me" class="dropbar-menu theme-dark">
      <ul class="ul menu tappable">
        <li><a href="#">Profile</a></li>
        <li><a href="#">My Stuff</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#" class="">Sign Out</a></li>
      </ul>
    </div>-->

  </header>

  <main class="wrap px1 py2">
    
    <h1 class="massive">Dropbar</h1>
    <p>A responsive, responsive disclosure based navigation pattern that is hopefully way better than Hamburgers and Basements</p>
    
    <div class="py2 tiles">
      <div class="container">
        <div class="grid-12 mb1">
          <h2 class="inline-block mr1">New</h2>
          <a href="#">View all</a>
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
      </div>
    </div>
    
    <div class="py2 tiles">
      <div class="container">
        <div class="grid-12 mb1">
          <h2 class="inline-block mr1">Popular</h2>
          <a href="#">View all</a>
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-4 mb1">
          <img src="//placehold.it/256" />
        </div>
      </div>
    </div>
    
    <div class="py2 tiles">
      <div class="container">
        <div class="grid-12 mb1">
          <h2 class="inline-block mr1">Nearby</h2>
          <a href="#">View all</a>
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
        <div class="grid-3 mb1">
          <img src="//placehold.it/256" />
        </div>
      </div>
    </div>
    
    <!--<div class="py2 tiles">
      <div class="container">
        <h2 class="mb1">Categories</h2>
        <ul class="grid-4 ul mb1 h3 bold">
          <li><a href="#">Dropbars</a></li>
          <li><a href="#">Cranksets</a></li>
          <li><a href="#">Cogs</a></li>
          <li><a href="#">Chains</a></li>
          <li><a href="#">Wheels</a></li>
          <li><a href="#">More categories...</a></li>
        </ul>
      </div>
    </div>-->
    
    
  </main>
  
  <footer class="footer">
    <div class="wrap px1">
      <ul class="ul ul-inline small bold tappable">
        <li><a href="#menu" class="light-gray">Menu</a></li>
        <li><a href="#" class="light-gray">Top</a></li>
      </ul>
    </div>
  </footer>
  
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jxnblk/dropbar-HvwEF */
.nav-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  min-height: 3rem;
  line-height: 3rem;
}

.tappable {
  line-height: 3rem;
}

.menu a {
  display: block;
  font-weight: bold;
}

.dropbar {
  position: relative;
  min-height: 3rem;
}

.dropbar-drawer {
  padding-top: 3rem;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: top, padding-top, max-height .3s linear;
}
.dropbar-drawer.is-open, .dropbar-drawer:target {
  max-height: 1024px;
}

.dropbar-menu {
  max-height: 0;
  overflow: hidden;
  padding-right: 2rem;
  padding-left: 2rem;
  position: absolute;
  right: 0;
  margin-right: 1rem;
  transition: max-height .3s ease;
  border-radius: 0 0 .25rem .25rem;
}
.dropbar-menu.is-open, .dropbar-menu:hover {
  top: 0;
  padding-top: 3rem;
  max-height: 256px;
}

.dropdown {
  position: relative;
}
.dropdown a {
  display: block;
  whitespace: no-wrap;
  padding-right: 1rem;
  padding-left: 1rem;
}
.dropdown .dropdown-toggle {
  position: relative;
  z-index: 1;
}
.dropdown .dropdown-menu {
  position: absolute;
  top: 0;
  list-style: none;
  padding-top: 3rem;
  padding-left: 0;
  min-width: 8rem;
  max-height: 0;
  overflow: hidden;
}
.dropdown:hover .dropdown-menu {
  max-height: 512px;
}
.dropdown.dropdown-right {
  float: right;
}
.dropdown.dropdown-right .dropdown-menu {
  right: 0;
}

.wrap {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  overflow: hidden;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
  float: left;
  width: 100%;
}
.grid-1 > .grid-1:last-child, .grid-2 > .grid-1:last-child, .grid-3 > .grid-1:last-child, .grid-4 > .grid-1:last-child, .grid-5 > .grid-1:last-child, .grid-6 > .grid-1:last-child, .grid-7 > .grid-1:last-child, .grid-8 > .grid-1:last-child, .grid-9 > .grid-1:last-child, .grid-10 > .grid-1:last-child, .grid-11 > .grid-1:last-child, .grid-12 > .grid-1:last-child, .grid-1 > .grid-2:last-child, .grid-2 > .grid-2:last-child, .grid-3 > .grid-2:last-child, .grid-4 > .grid-2:last-child, .grid-5 > .grid-2:last-child, .grid-6 > .grid-2:last-child, .grid-7 > .grid-2:last-child, .grid-8 > .grid-2:last-child, .grid-9 > .grid-2:last-child, .grid-10 > .grid-2:last-child, .grid-11 > .grid-2:last-child, .grid-12 > .grid-2:last-child, .grid-1 > .grid-3:last-child, .grid-2 > .grid-3:last-child, .grid-3 > .grid-3:last-child, .grid-4 > .grid-3:last-child, .grid-5 > .grid-3:last-child, .grid-6 > .grid-3:last-child, .grid-7 > .grid-3:last-child, .grid-8 > .grid-3:last-child, .grid-9 > .grid-3:last-child, .grid-10 > .grid-3:last-child, .grid-11 > .grid-3:last-child, .grid-12 > .grid-3:last-child, .grid-1 > .grid-4:last-child, .grid-2 > .grid-4:last-child, .grid-3 > .grid-4:last-child, .grid-4 > .grid-4:last-child, .grid-5 > .grid-4:last-child, .grid-6 > .grid-4:last-child, .grid-7 > .grid-4:last-child, .grid-8 > .grid-4:last-child, .grid-9 > .grid-4:last-child, .grid-10 > .grid-4:last-child, .grid-11 > .grid-4:last-child, .grid-12 > .grid-4:last-child, .grid-1 > .grid-5:last-child, .grid-2 > .grid-5:last-child, .grid-3 > .grid-5:last-child, .grid-4 > .grid-5:last-child, .grid-5 > .grid-5:last-child, .grid-6 > .grid-5:last-child, .grid-7 > .grid-5:last-child, .grid-8 > .grid-5:last-child, .grid-9 > .grid-5:last-child, .grid-10 > .grid-5:last-child, .grid-11 > .grid-5:last-child, .grid-12 > .grid-5:last-child, .grid-1 > .grid-6:last-child, .grid-2 > .grid-6:last-child, .grid-3 > .grid-6:last-child, .grid-4 > .grid-6:last-child, .grid-5 > .grid-6:last-child, .grid-6 > .grid-6:last-child, .grid-7 > .grid-6:last-child, .grid-8 > .grid-6:last-child, .grid-9 > .grid-6:last-child, .grid-10 > .grid-6:last-child, .grid-11 > .grid-6:last-child, .grid-12 > .grid-6:last-child, .grid-1 > .grid-7:last-child, .grid-2 > .grid-7:last-child, .grid-3 > .grid-7:last-child, .grid-4 > .grid-7:last-child, .grid-5 > .grid-7:last-child, .grid-6 > .grid-7:last-child, .grid-7 > .grid-7:last-child, .grid-8 > .grid-7:last-child, .grid-9 > .grid-7:last-child, .grid-10 > .grid-7:last-child, .grid-11 > .grid-7:last-child, .grid-12 > .grid-7:last-child, .grid-1 > .grid-8:last-child, .grid-2 > .grid-8:last-child, .grid-3 > .grid-8:last-child, .grid-4 > .grid-8:last-child, .grid-5 > .grid-8:last-child, .grid-6 > .grid-8:last-child, .grid-7 > .grid-8:last-child, .grid-8 > .grid-8:last-child, .grid-9 > .grid-8:last-child, .grid-10 > .grid-8:last-child, .grid-11 > .grid-8:last-child, .grid-12 > .grid-8:last-child, .grid-1 > .grid-9:last-child, .grid-2 > .grid-9:last-child, .grid-3 > .grid-9:last-child, .grid-4 > .grid-9:last-child, .grid-5 > .grid-9:last-child, .grid-6 > .grid-9:last-child, .grid-7 > .grid-9:last-child, .grid-8 > .grid-9:last-child, .grid-9 > .grid-9:last-child, .grid-10 > .grid-9:last-child, .grid-11 > .grid-9:last-child, .grid-12 > .grid-9:last-child, .grid-1 > .grid-10:last-child, .grid-2 > .grid-10:last-child, .grid-3 > .grid-10:last-child, .grid-4 > .grid-10:last-child, .grid-5 > .grid-10:last-child, .grid-6 > .grid-10:last-child, .grid-7 > .grid-10:last-child, .grid-8 > .grid-10:last-child, .grid-9 > .grid-10:last-child, .grid-10 > .grid-10:last-child, .grid-11 > .grid-10:last-child, .grid-12 > .grid-10:last-child, .grid-1 > .grid-11:last-child, .grid-2 > .grid-11:last-child, .grid-3 > .grid-11:last-child, .grid-4 > .grid-11:last-child, .grid-5 > .grid-11:last-child, .grid-6 > .grid-11:last-child, .grid-7 > .grid-11:last-child, .grid-8 > .grid-11:last-child, .grid-9 > .grid-11:last-child, .grid-10 > .grid-11:last-child, .grid-11 > .grid-11:last-child, .grid-12 > .grid-11:last-child, .grid-1 > .grid-12:last-child, .grid-2 > .grid-12:last-child, .grid-3 > .grid-12:last-child, .grid-4 > .grid-12:last-child, .grid-5 > .grid-12:last-child, .grid-6 > .grid-12:last-child, .grid-7 > .grid-12:last-child, .grid-8 > .grid-12:last-child, .grid-9 > .grid-12:last-child, .grid-10 > .grid-12:last-child, .grid-11 > .grid-12:last-child, .grid-12 > .grid-12:last-child {
  margin-right: 0;
}

@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-1 {
    width: 5.8333333333%;
    margin-right: 2.5%;
  }

  .push-1 {
    margin-left: 8.3333333333%;
  }

  .pull-1 {
    margin-right: 8.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-2 {
    width: 14.1666666667%;
    margin-right: 2.5%;
  }

  .push-2 {
    margin-left: 16.6666666667%;
  }

  .pull-2 {
    margin-right: 16.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-3 {
    width: 22.5%;
    margin-right: 2.5%;
  }

  .push-3 {
    margin-left: 25%;
  }

  .pull-3 {
    margin-right: 25%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-4 {
    width: 30.8333333333%;
    margin-right: 2.5%;
  }

  .push-4 {
    margin-left: 33.3333333333%;
  }

  .pull-4 {
    margin-right: 33.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-5 {
    width: 39.1666666667%;
    margin-right: 2.5%;
  }

  .push-5 {
    margin-left: 41.6666666667%;
  }

  .pull-5 {
    margin-right: 41.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-6 {
    width: 47.5%;
    margin-right: 2.5%;
  }

  .push-6 {
    margin-left: 50%;
  }

  .pull-6 {
    margin-right: 50%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-7 {
    width: 55.8333333333%;
    margin-right: 2.5%;
  }

  .push-7 {
    margin-left: 58.3333333333%;
  }

  .pull-7 {
    margin-right: 58.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-8 {
    width: 64.1666666667%;
    margin-right: 2.5%;
  }

  .push-8 {
    margin-left: 66.6666666667%;
  }

  .pull-8 {
    margin-right: 66.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-9 {
    width: 72.5%;
    margin-right: 2.5%;
  }

  .push-9 {
    margin-left: 75%;
  }

  .pull-9 {
    margin-right: 75%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-10 {
    width: 80.8333333333%;
    margin-right: 2.5%;
  }

  .push-10 {
    margin-left: 83.3333333333%;
  }

  .pull-10 {
    margin-right: 83.3333333333%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-11 {
    width: 89.1666666667%;
    margin-right: 2.5%;
  }

  .push-11 {
    margin-left: 91.6666666667%;
  }

  .pull-11 {
    margin-right: 91.6666666667%;
  }
}
@media (min-width: 512px) {
  .container {
    margin-right: -2.5%;
    margin-left: -2.5%;
    padding-left: 2.5%;
  }

  .grid-12 {
    width: 97.5%;
    margin-right: 2.5%;
  }

  .push-12 {
    margin-left: 100%;
  }

  .pull-12 {
    margin-right: 100%;
  }
}
.clearfix {
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  float: right;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.hide {
  display: none;
}

.p1 {
  padding: 1rem;
}

.px1 {
  padding-right: 1rem;
  padding-left: 1rem;
}

.py1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.mr1 {
  margin-right: 1rem;
}

.mb1 {
  margin-bottom: 1rem;
}

.ul {
  list-style: none;
  padding-left: 0;
}
.ul li {
  margin-bottom: .5em;
}

.ul-inline li {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0;
}

.input {
  box-sizing: border-box;
  padding: .25rem .75rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: .25rem;
  border: 1px solid #aaa;
}
.input:focus {
  outline: none;
  border: 1px solid #0cf;
  box-shadow: 0 0 0.5rem rgba(0, 204, 255, 0.8);
}

img {
  max-width: 100%;
}

.tiles img {
  width: 100%;
}

@keyframes open-close {
  0% {
    max-height: 0;
  }
  50% {
    max-height: 1024px;
  }
  100% {
    max-height: 0;
  }
}
.open-close {
  animation: open-close 1.5s ease-in-out;
}

body, h1, h2, h3, h4, h5, h6, ul, ol, p {
  margin: 0;
}

.massive {
  font-size: 4rem;
}
@media (min-width: 640px) {
  .massive {
    font-size: 6rem;
  }
}

h1, .h1 {
  font-size: 3rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, h4, h5, h6, p, .p, .h3 {
  font-size: 1.25rem;
}

.small {
  font-size: .75rem;
}

.helvetica {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.375;
  color: #444;
}

.regular {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

a {
  color: #0cf;
  text-decoration: none;
}
a:hover {
  color: #00a3cc;
}

.blue {
  color: #0cf;
}

.gray {
  color: #444;
}

.light-gray {
  color: #999;
}

.outline, .outline * {
  outline: 1px solid rgba(0, 204, 255, 0.5);
}

.rounded-bottom {
  border-radius: 0 0 .25rem .25rem;
}

.theme-dark {
  color: #fff;
  background-color: #1c2226;
}
.theme-dark .menu a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.link-dark {
  color: #007a99;
}

.blue {
  color: #0cf;
}

Comments