A Pen by Kaushalya Mandaliya.

CodePen-Shelling.markdown

CodePen Shelling

Github like CodePen-Shelling. (Maybe a feature-request :p).

A Pen by Kaushalya Mandaliya on CodePen.

License.

index.html

<div class="box">
  <div class="instruction">Quick Instructions</div>
  <div class="line">
    <div class="tild">~</div>
    <div class="doller">$</div>
    <div class="content">gem install CodePen</div>
  </div>
  <div class="line">
    <div class="tild">~</div>
    <div class="doller">$</div>
    <div class="content">CodePen new cool-pen</div>
  </div>
  <div class="line">
    <div class="tild">~</div>
    <div class="doller">$</div>
    <div class="content">set preprocessor jade, sass, coffeescript</div>
  </div>
  <div class="line">
    # Enjoy Codepen-Shelling :)
  </div>
</div>

script.js

/*----
--  Inspired By Jekyll Blog/Site : http://jekyllrb.com/
--  Would love to see For CodePen :D
--  2013 by Kaushalya Mandaliya | @kmandalwala | http://seebeetee.com
----*/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

$kmwaw-color-1: #252527;
$kmwaw-color-2: #bebebe;
$kmwaw-color-3: aqua;
$kmwaw-color-4: darken(orange, 10%);
$kmwaw-color-5: lighten(yellow, 34%);

$kmwaw-unit-1: 11em;
$kmwaw-unit-2: 30em;
$kmwaw-unit-3: 1.1em;
$kmwaw-unit-4: 0.3em;
$kmwaw-unit-5: 0.05em;

body {
  background: $kmwaw-color-1;
}



.box {
  background: lighten($kmwaw-color-1, 2%);
  border: 0.1em solid $kmwaw-color-2; // Comment if you want to apply `box-shadow` (which is commented right now)
  bottom: 0;
  font-family: 'Open sans', sans-serif;
  font-size: $kmwaw-unit-3;
  height: $kmwaw-unit-1;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; 
  width: $kmwaw-unit-2;
  
  @media all and (max-width: $kmwaw-unit-2 + 3em) {
    width: 100%;
    height: 100%;
  }
  
  //@include section
  
  @include border-radius($kmwaw-unit-4);
  // @include box-shadow(0 0 0.1em $kmwaw-color-2);
  
  .instruction {
    background: $kmwaw-color-2;
    color: rgba(black, $kmwaw-unit-4 * 2 + 0.2em);
    font-weight: bold;
    margin-bottom: $kmwaw-unit-3 + 0.1em;
    padding: $kmwaw-unit-4 + 0.1em;
    text-align: center;    
    text-shadow: $kmwaw-unit-5 $kmwaw-unit-5 #fff;
    
    //@include section
    
    @include box-shadow($kmwaw-unit-4 - 0.1em 0 $kmwaw-unit-4 #000);
  }
  
  
  .line {
    font-family: Consolas, "Courier New", Courier, "Liberation Mono", monospace;
    padding: $kmwaw-unit-5 * 2 $kmwaw-unit-5 * 14;
    color: rgba($kmwaw-color-2, 0.4);
    
    div {
      display: inline-block;
    }
    
    .tild {
      color: $kmwaw-color-3;
    }
    
    .doller {
      color: $kmwaw-color-4;
    }
    
    .content {
      color: $kmwaw-color-5;
    }
  }
}