add print.css

css/print.css

@@ -0,0 +1,274 @@
+/*----------------------------------------  Text */
+
+body {
+    font-family: Georgia, Times New Roman, Times, serif;
+    font-weight: bold;
+    font-size: 30px;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
+
+header {
+    height: 400px;
+    border-bottom: 1px solid #698b91
+}
+
+footer {
+    display: none;
+}
+
+h1 {
+    font-size: 120px;
+    font-weight: normal;
+    margin: 0;
+    font-family: 'Sansita One', cursive;
+    line-height: 1;
+}
+
+h2 {
+    font-size: 80px;
+    font-weight: normal;
+    margin: 0;
+    font-family: 'Sansita One', cursive;
+}
+
+h3 {
+    font-size: 40px;
+    font-weight: normal;
+    margin: 0;
+    font-family: 'Sansita One', cursive;
+}
+
+p {
+    width: 95%;
+    margin: 20px auto;
+    text-shadow: 0 2px 1px #fff;
+}
+
+a, a:visited {
+    font-weight: bold;
+    font-style: italic;
+}
+
+ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 1em;
+    text-indent: -1em;
+    text-shadow: 0 2px 1px #fff;
+    line-height: 1.4;
+}
+
+ul li:before {
+    content: "\2605\a0"
+}
+
+/** coding  block */
+blockquote {
+    text-align: left;
+    margin: 10px auto;
+    background: #131420;
+    border-bottom: 2px solid #30334F;
+    border-right: 2px solid #30334F;
+    border-radius: 10px;
+    padding: 5px 20px;
+
+}
+
+code {
+    font-style: normal;
+    padding-left: 5px;
+    border-radius: 10px;
+    color: white;
+    padding: 5px 15px;
+    font-family: menlo, monospace;
+    background: #131420;
+    text-shadow: none;
+    font-size: 0.8em;
+}
+
+/*----------------------------------------  Images */
+
+.initialize {
+    background: url("../img/initialize.png") no-repeat scroll center center transparent;
+    height: 300px;
+    width: 100%;
+    position: relative;
+    z-index: 99;
+    margin-left: 10px;
+}
+
+.lines-small {
+    width: 500px;
+    height: 150px;
+    background-repeat: repeat-y;
+    background: url("../img/lines-small.png");
+    position: relative;
+}
+
+.lines-small-end {
+    width: 500px;
+    height: 500px;
+    background-repeat: repeat-y;
+    background: url("../img/lines-small.png");
+    position: absolute;
+
+}
+
+.lines-big {
+    width: 500px;
+    height: 5620px;
+    background-repeat: repeat-y;
+    background: url("../img/lines-big.png");
+    position: absolute;
+    left: 697px;
+
+}
+
+.lines-open {
+    width: 500px;
+    height: 86px;
+    background: url("../img/lines-open.png");
+}
+
+.lines-close {
+    width: 500px;
+    height: 86px;
+    background: url("../img/lines-close.png");
+}
+
+.hotfix-end, .hotfix-start, .release-end, .release-start, .feature-end, .feature-start {
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-image: url('../img/flow-sprites.png');
+    background-color: rgba(218, 218, 218, 0.78);
+    border: 2px dashed grey;
+    border-radius: 25px;
+    width: 500px;
+    height: 370px;
+    position: relative;
+    z-index: 99;
+}
+
+.feature-publish {
+    display: inline-block;
+    background-repeat: no-repeat;
+
+    background-color: rgba(218, 218, 218, 0.78);
+    border: 2px dashed grey;
+    border-radius: 25px;
+    width: 500px;
+    height: 370px;
+    position: relative;
+
+    background-image: url('../img/feature-publish.png');
+    background-position: center;
+
+}
+
+.feature-pull {
+    display: inline-block;
+    background-repeat: no-repeat;
+
+    background-color: rgba(218, 218, 218, 0.78);
+    border: 2px dashed grey;
+    border-radius: 25px;
+    width: 500px;
+    height: 370px;
+    position: relative;
+    z-index: 99;
+
+    background-image: url('../img/feature-pull.png');
+    background-position: center;
+
+}
+
+.hotfix-end {
+    background-position: 0px 0px;
+}
+
+.hotfix-start {
+    background-position: 0px -370px;
+}
+
+.release-end {
+    background-position: 0px -740px;
+}
+
+.release-start {
+    background-position: 0px -1110px;
+}
+
+.feature-end {
+    background-position: 0px -1480px;
+}
+
+.feature-start {
+    background-position: 0px -1850px;
+}
+
+/*----------------------------------------  BLOCKS */
+
+.col-1 {
+    float: left;
+    width: 600px;
+}
+
+.col-2 {
+    float: right;
+    width: 500px;
+    margin-left: 30px;
+}
+
+#main {
+    margin: 0 auto;
+    position: relative;
+    width: 1200px;
+}
+
+.scrollblock {
+    width: 100%;
+    padding-top: 100px;
+    min-height: 450px;
+    position: relative;
+}
+
+.divider, .accent {
+    text-shadow: none;
+}
+
+#title {
+    margin: auto;
+    padding-top: 40px;
+    width: 1150px;
+    position: relative;
+    z-index: 99;
+}
+
+#author {
+    width: 640px;
+    position: absolute;
+    top: 180px;
+    right: 15%;
+    font-size: 20px;
+    text-align: right;
+    font-style: italic;
+    z-index: 100;
+}
+
+.twitter-share-button {
+    display: none;
+}
+
+#desc {
+    position: absolute;
+    top: 250px;
+    width: 100%;
+}
+
+/*---------------------------------------- Github Banner */
+#banner {
+    display: none;
+}
+

css/style.css

@@ -6,11 +6,8 @@ body {
     font-weight: bold;
     font-size: 30px;
     text-align: center;
-    transition: background-color 1s linear;
+
-    -moz-transition: background-color 1s linear; /* FF3.7+ */
+    padding: 0;
-    -o-transition: background-color 1s linear; /* Opera 10.5 */
-    -webkit-transition: background-color 1s linear; /* Saf3.2+, Chrome */
-    adding: 0;
     margin: 0;
 }
 

index.html

@@ -5,8 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>git-flow cheatsheet</title>
     <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/normalize.css" type="text/css">
+    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen,print">
-    <link rel="stylesheet" href="css/style.css" type="text/css">
+    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+    <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
     <script src="js/jquery-1.7.2.min.js"></script>