COZ PUNK PAGE

COZ-PUNK-PAGE.markdown

COZ PUNK PAGE

A Pen by Max Rubenacker on CodePen.

License.

index.html

<div class="causely-punk">

  <div class="causely-shim"></div>

  <iframe src="http://s.codepen.io/somethingformed/debug/zxZqPe" class="causely-modal" sandbox="allow-top-navigation"></iframe>

</div>

punk-page.markdown

punk-page

A Pen by Max Rubenacker on CodePen.

License.

style.less

@shadow: rgba(0,0,0,0.5);

.causely-punk {
  * { // reset
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1;
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    //transition: all 120ms ease-in-out;
    -webkit-font-smoothing: antialiased;
  }
  .causely-shim {
    background-color: @shadow;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 999;
  }
  .causely-modal { // 0 to 559px
    background-color: white;
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    overflow: auto;
    z-index: 1000;
    @media (min-width: 35rem) { // 560px to 1199px
      box-shadow: 0em 0.2em 1.8rem @shadow;
      height: 32rem;
      width: 40rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-style: flat;
      overflow: hidden;
    }
    @media (min-width: 75rem) { // 1200px+
      height: 22rem;
      width: 70rem;

      max-height: 50rem;
      max-width: 70rem;
    }
  }
}