css fixes

tamzinblake · Jun 26, 2011 · c03fc4d · c03fc4d
1 parent 25fb0d6
commit c03fc4d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 33 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,23 +5,12 @@
     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
     <title>GitHub Flavored Markdown - {{ page.title }}</title>
     <link href="http://developer.github.com/shared/css/documentation.css" media="screen" rel="stylesheet" type="text/css" />
-     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+     <link href="stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     <script type="text/javascript" src="http://github.github.com/github-flavored-markdown/scripts/showdown.js"></script>
-    <script type="text/javascript" src="http://github.github.com/github-flavored-markdown/scripts/preview.js"></script>
-
-    <style type=text/css>
-        ul {list-style-position: inside;} 
-        .sidebar { float:right; width: 300px;}
-        .cheatsheet {
-            width:338px;
-            height: 250px;
-            text-indent: -5000px;
-            background: url(images/gfm_hint.png) no-repeat;
-            margin-top: 40px;
-    	}
-    </style>
-
+    <script type="text/javascript" src="http://github.github.com/github-flavored-markdown/scripts/preview.js"></script>    
   </head>
+
   <body>
     <div id="not-footer">
       <div id="header-wrapper">
@@ -46,9 +35,11 @@
 
           </div>
 
-          <div class="sidebar cheatsheet">
+          <div class="sidebar">
+      	     <div class="cheatsheet">
       	     <h2>Markdown Cheat Sheet</h2>
-      	     <p>If you are in a section on the main site, like in your dashboard or issues, you can press "M" on your keyboard to view our markdown cheatsheet.</p>
+      	     <p>On Markdown-enabled portions of the site, press <strong >M</strong> on your keyboard to display a cheat sheet. </p>
+      	    </div> 
            </div>
         </div>
       </div>

diff --git a/index.md b/index.md
@@ -3,7 +3,7 @@ title: Introduction
 layout: default
 ---
 
-#It's made from love
+#Introduction to GFM
 
 GitHub uses what we're calling "GitHub Flavored Markdown" (GFM) for messages, issues, and comments. It differs from standard Markdown (SM) in a few significant ways and adds some additional functionality.
 

diff --git a/preview.md b/preview.md
@@ -3,6 +3,8 @@ title: Live Preview
 layout: default
 ---
 
+<h1>GFM Live Preview</h1>
+
 This page provides a live GFM preview, rendered client-side using javascript.
 The majority of the credit goes to the wonderful [Showdown](http://softwaremaniacs.org/playground/showdown-highlight/) script, which handles the meat of the processing.
 GFM modifications for newlines, underscore-words, autolinking and GitHub SHA1/issue link syntaxes were added.

diff --git a/stylesheets/screen.css b/stylesheets/screen.css
@@ -1,26 +1,50 @@
-.site {
-  width: 45em;
+ul {list-style-position: inside;} 
+.sidebar { float:right; width: 338px;}
+
+.cheatsheet {
+width:298px;
+margin-top: 40px;
+padding: 20px;
+border: 1px #666 solid;
+border-radius: 3px;
+-moz-border-radius: 3px;
+-webkit-border-radius: 3px;
+
+background: #EEE; 
+
+filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#aaaaaa'); 
+background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#aaaaaa));
+background: -moz-linear-gradient(top,  #EEE,  #aaaaaa); 
+}
+
+.cheatsheet h2 {
+margin-top: 0;
+color: #666;
+text-shadow: white 1px 1px 0px;
 }
 
-#content.site {
-  width: 44em;
+.cheatsheet p {
+margin-bottom: 0;
+color: #666;
 }
 
 #user_input, #html_result {
-  width: 580px;
-  height: 170px;
+width: 560px;
+height: 170px;
 }
 
 #result {
-  width: 560px;
-  min-height: 150px;
-  border: 1px solid #999;
-  margin-top: 15px;
-  padding: 10px;
+width: 560px;
+min-height: 150px;
+border: 1px solid #999;
+margin-top: 15px;
+padding: 10px;
 }
 
 .warn {
-  padding: 4px;
-  border: 2px solid #600;
-  background: #caa;
-}
+width: 560px;
+
+padding: 4px;
+border: 1px solid #600;
+background: #caa;
+