A Pen by Giovanny.

A-Pen-by-Giovanny.markdown

A Pen by Giovanny

A Pen by Giovanny on CodePen.

License.

index.html

<section class='presentation'>
  <article class='title'>
    <header>
      <h2>Trucos y Secretos</h2>
    </header>

    <p class='description'>
      <img src='http://git-scm.com/images/logos/downloads/Git-Logo-White.png'/>
    </p>
  </article>
  <article>
    <header>
      <h2>Status</h2>
    </header>
    
    <pre>git status -sb</pre>
    <pre>## branch name<br>M bla bla bla</br>M bla bla bla
    </pre>
    <p class='description'>
      pending description
    </p>
    <footer>
      <a href="http://git-scm.com/docs/git-status" target='_blank'>git-status</a>
    </footer>
  </article>
  <article>
    <header>
      <h2>Log</h2>
    </header>
    <ul>
      <li>
        <pre>git log --oneline</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git log --graph</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git log -1 HEAD</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
    
  </article>
  <article>
    <header>
      <h2>Log</h2>
    </header>
    <ul>
      <li>
        <pre>git log --grep</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git log -S</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Add</h2>
    </header>
    <pre>git add -p</pre>
    <p class='description'>
      displays the log in one single line
    </p>
  </article>
  <article>
    <header>
      <h2>Blame</h2>
    </header>
    <ul>
      <li>
        <pre>git blame file</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git blame -C file</pre>
        <p class='description'>
          pending description
        </p>
      </li>
            <li>
        <pre>git blame file -L #l1,#l2</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Branch</h2>
    </header>
    <ul>
      <li>
        <pre>git branch --merged</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git branch --no-merged</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Checkout</h2>
    </header>
    <ul>
      <li>
        <pre>git checkout -b name</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git checkout - </pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Checkout</h2>
    </header>
    <ul>
      <li>
        <pre>git checkout $sha</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git checkout file</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Ctrl Z</h2>
    </header>
    <ul>
      <li>
        <pre>git revert -m 1 commit_hash</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git reset --hard</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Diff</h2>
    </header>
    <ul>
      <li>
        <pre>git diff head^ --word-diff</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git diff --word-diff</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Config</h2>
    </header>
    <ul>
      <li>
        <pre>git config --global help.autocorrect 1</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li>
        <pre>git config --global alias.$name command</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
  <article>
    <header>
      <h2>Bisect</h2>
    </header>
    <ul>
      <li>
        <pre>git bisect</pre>
        <p class='description'>
          ...
        </p>
      </li>
    </ul>
  </article>
  <article class='title'>
    <header>
      <h2>Github</h2>
    </header>

    <p class='description'>
      <img src=''/>
    </p>
  </article>
  <article>
    <header>
      <h2>Shortener</h2>
    </header>
    <ul>
      <li>
        <pre>curl -i http://git.io -F "url=https://github.com/..."</pre>
        <p class='description'>
          pending description
        </p>
      </li>
      <li><a href="http://git.io/nxVVig">git.io/nxVVig</a></li>
    </ul>
  </article>
    <article>
    <header>
      <h2>Shorcuts</h2>
    </header>
    <ul>
      <li><b>?</b>Mostrar ayuda</li>
      <li>
        <img src='https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1931/gs.png'/>
      </li>
    </ul>
  </article>
    <article>
    <header>
      <h2>Historial</h2>
    </header>
    <ul>
      <li>
        <a href="https://github.com/settings/security">github.com/settings/security</a>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
    <article>
    <header>
      <h2>Gist tambien son Repos</h2>
    </header>
    <ul>
      <li>
        <span>https://gist.github.com/agar3s/6675768</span>
        <pre>git clone git://gist.github.com/6675768.git</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
    <article>
    <header>
      <h2>Diferencias en im&aacute;genes</h2>
    </header>
    <ul>
      <li>
        <pre>link a cambio</pre>
        <p class='description'>
          poner un link al dif de una imagen
        </p>
      </li>
    </ul>
  </article>
    <article>
    <header>
      <h2>HUB</h2>
    </header>
    <ul>
      <li>
        <a href='http://hub.github.com/'>hub.github.com</a>
        <pre>hub clone agar3s/hangout</pre>
        <pre>hub fork agar3s/hangout</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
    <article>
    <header>
      <h2>?</h2>
    </header>
    <ul>
      <li>
        <pre>curl -i http://git.io -F "url=https://github.com/..."</pre>
        <p class='description'>
          pending description
        </p>
      </li>
    </ul>
  </article>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://tympanus.net/Development/PageTransitions/js/modernizr.custom.js"></script>

script.js

var current = 0;
var $pages = $('section.presentation article');
var isAnimating = false;
var endCurrPage = false;
var endNextPage = false;
var animEndEventNames = {
	'WebkitAnimation' : 'webkitAnimationEnd',
  'OAnimation' : 'oAnimationEnd',
	'msAnimation' : 'MSAnimationEnd',
	'animation' : 'animationend'
};
		// animation end event name
var animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
		// support css animations
var support = Modernizr.cssanimations;

$pages.eq(current).addClass('current');

if( !support ) {
	onEndAnimation( $currPage, $nextPage );
}

window.document.addEventListener('keyup',  function(e){
    var key = e.keyCode ? e.keyCode : e.which;
  if(key==37){
    previous();
  }else if(key==39){
    next();
  }
});

var next = function(e){
  if(current < $pages.length-1){
    $currPage = $pages.eq(current);
    $nextPage = $pages.eq(++current);
    $currPage.addClass('moveToLeftEasing').on(animEndEventName, function(){
	    $currPage.off(animEndEventName);
	    endCurrPage = true;
	    if(endNextPage){
		    onEndAnimation( $currPage, $nextPage );
    	}
    });
    
    $nextPage.addClass('current moveFromRight ontop').on(animEndEventName, function(){
	    $nextPage.off(animEndEventName);
	    endNextPage = true;
	    if(endCurrPage){
		    onEndAnimation( $currPage, $nextPage);
	    }
    });
  }
};

var previous = function(e){
  if(current > 0){
    $currPage = $pages.eq(current);
    $nextPage = $pages.eq(--current);
    $currPage.addClass('moveToRightEasing ontop').on(animEndEventName, function(){
	    $currPage.off(animEndEventName);
	    endCurrPage = true;
	    if(endNextPage){
		    onEndAnimation($currPage, $nextPage);
    	}
    });
    $nextPage.addClass('current moveFromLeft').on(animEndEventName, function(){
      $nextPage.off(animEndEventName);
	    endNextPage = true;
      if(endCurrPage){
		    onEndAnimation($currPage, $nextPage);
	    }
    });
  }
};

	function onEndAnimation( $outpage, $inpage ) {
		endCurrPage = false;
		endNextPage = false;
		resetPage( $outpage, $inpage );
		isAnimating = false;
	}

	function resetPage( $outpage, $inpage ) {
		$outpage.attr('class', '');
		$inpage.attr('class', 'current');
	}

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

body {
  background: #000;
  font-weight: 300;
  color: #EEE;
  font-family: 'Lato', sans-serif;
}
h2 {
  font-weight: 700;
  color: #FFF;
  font-size: 4.5em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
}
pre {
  font-family: 'Source Code Pro', sans-serif;
  font-size: 1.5em;
  color: #FFF14A;
  background: #181818;
  padding: 5px 25px;
  line-height: 1.2em;
  margin: 20px 0 10px;
  text-shadow: 0px 0px 10px rgba(255,255,255,0.4);
}
pre:before {
  content: '> ';
}
.description {
  font-size: 1.5em;
  margin:0 0 30px;
}
.description img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}
article {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
  background: #1A2527;
  
  padding: 30px 10%;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article:nth-child(1) h2{
  color: #fff;
}
article:nth-child(2n){
  background: #383542;
}
article.title {
  background: #000;
}
article footer {
  position: absolute;
  bottom: 30px;
  left: 10%;
}
article footer a {
  color: yellow;
}
article footer:before {
  color: #fff;
  content: 'fuente: ';
}
button {
  position: absolute;
  top: 0;
}
.current,
.no-js article {
	visibility: visible;
	z-index: 1;
}
.ontop {
	z-index: 999;
}
ul{
  list-style: none;
}
.scaleUp {
	-webkit-animation: scaleUp .7s ease both;
	-moz-animation: scaleUp .7s ease both;
	animation: scaleUp .7s ease both;
}
.scaleDown {
	-webkit-animation: scaleDown .7s ease both;
	-moz-animation: scaleDown .7s ease both;
	animation: scaleDown .7s ease both;
}
.moveToLeftEasing {
	-webkit-animation: moveToLeft .7s ease-in-out both;
	-moz-animation: moveToLeft .7s ease-in-out both;
	animation: moveToLeft .7s ease-in-out both;
}
.moveToRightEasing {
	-webkit-animation: moveToRight .7s ease-in-out both;
	-moz-animation: moveToRight .7s ease-in-out both;
	animation: moveToRight .7s ease-in-out both;
}
.moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	-moz-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}
.moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	-moz-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}
.moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	-moz-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}
@-webkit-keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleUp {
	from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
	from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { transform: translateX(100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
	from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight { 
	to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight { 
	to { transform: translateX(100%); }
}
@-webkit-keyframes moveToLeft {
	to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
	to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	to { transform: translateX(-100%); }
}

@-webkit-keyframes scaleDown {
	to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDown {
	to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }
}