Theme Upload

mattgraham · Apr 4, 2012 · e576ce5 · e576ce5
1 parent 253b641
commit e576ce5
Show file tree

Hide file tree

Showing 38 changed files with 4,579 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+.sass-cache
diff --git a/README b/README
@@ -0,0 +1,7 @@
+# Leap Day
+
+Open source content for Leap Day theme. Theme was first designed / developed for GitHub Pages and is availalbe for download, forking and using anywhere else on the web. Like the theme share it with the twitterverse. 
+
+The Leap Day Pages demo is [here](http://mattgraham.github.com/Leap-Day) 
+
+Theme by [Matt Graham](http://madebygraham.com), twitter [@michigangraham](http://twitter.com/#!/michigangraham)
diff --git a/fonts/copse-regular-webfont.eot b/fonts/copse-regular-webfont.eot
diff --git a/fonts/copse-regular-webfont.svg b/fonts/copse-regular-webfont.svg
diff --git a/fonts/copse-regular-webfont.ttf b/fonts/copse-regular-webfont.ttf
diff --git a/fonts/copse-regular-webfont.woff b/fonts/copse-regular-webfont.woff
diff --git a/fonts/quattrocentosans-bold-webfont.eot b/fonts/quattrocentosans-bold-webfont.eot
diff --git a/fonts/quattrocentosans-bold-webfont.svg b/fonts/quattrocentosans-bold-webfont.svg
diff --git a/fonts/quattrocentosans-bold-webfont.ttf b/fonts/quattrocentosans-bold-webfont.ttf
diff --git a/fonts/quattrocentosans-bold-webfont.woff b/fonts/quattrocentosans-bold-webfont.woff
diff --git a/fonts/quattrocentosans-bolditalic-webfont.eot b/fonts/quattrocentosans-bolditalic-webfont.eot
diff --git a/fonts/quattrocentosans-bolditalic-webfont.svg b/fonts/quattrocentosans-bolditalic-webfont.svg
diff --git a/fonts/quattrocentosans-bolditalic-webfont.ttf b/fonts/quattrocentosans-bolditalic-webfont.ttf
diff --git a/fonts/quattrocentosans-bolditalic-webfont.woff b/fonts/quattrocentosans-bolditalic-webfont.woff
diff --git a/fonts/quattrocentosans-italic-webfont.eot b/fonts/quattrocentosans-italic-webfont.eot
diff --git a/fonts/quattrocentosans-italic-webfont.svg b/fonts/quattrocentosans-italic-webfont.svg
diff --git a/fonts/quattrocentosans-italic-webfont.ttf b/fonts/quattrocentosans-italic-webfont.ttf
diff --git a/fonts/quattrocentosans-italic-webfont.woff b/fonts/quattrocentosans-italic-webfont.woff
diff --git a/fonts/quattrocentosans-regular-webfont.eot b/fonts/quattrocentosans-regular-webfont.eot
diff --git a/fonts/quattrocentosans-regular-webfont.svg b/fonts/quattrocentosans-regular-webfont.svg
diff --git a/fonts/quattrocentosans-regular-webfont.ttf b/fonts/quattrocentosans-regular-webfont.ttf
diff --git a/fonts/quattrocentosans-regular-webfont.woff b/fonts/quattrocentosans-regular-webfont.woff
diff --git a/images/background.png b/images/background.png
diff --git a/images/body-background.png b/images/body-background.png
diff --git a/images/bullet.png b/images/bullet.png
diff --git a/images/hr.gif b/images/hr.gif
diff --git a/images/octocat-logo.png b/images/octocat-logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,149 @@
+
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>Testing the Amazing Pages by mattgraham</title>
+    <link rel="stylesheet" href="stylesheets/styles.css">
+    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="javascripts/main.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+  </head>
+  <body>
+
+      <header>
+        <h1>Testing GitHub Pages</h1>
+        <p>Design for the web to succeed and you too will succeed. </p>
+      </header>
+
+      <div id="banner">
+        <span id="logo"></span>
+
+        <a href="https://github.com/mattgraham/SCSS--Clean-Button" class="button fork"><strong>Fork On GitHub</strong></a>
+        <div class="downloads">
+          <span>Downloads:</span>
+          <ul>
+            <li><a href="https://github.com/mattgraham/SCSS--Clean-Button/zipball/master" class="button">ZIP</a></li>
+            <li><a href="https://github.com/mattgraham/SCSS--Clean-Button/tarball/master" class="button">TAR</a></li>
+          </ul>
+        </div>
+
+      </div><!-- end banner -->
+
+    <div class="wrapper">
+      <nav>
+        <ul></ul>
+      </nav>
+
+      <section>
+        <h1>Welcome to Pages</h1>
+        <p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
+
+        <h3>Generic, well taken photo.</h3>
+        <p><img src="http://f.cl.ly/items/1f3f0U0A3x0P1Z022y1Q/532999_10150681079447771_501672770_9454022_1744955305_n.jpeg" alt="New Haven South Beach by Matt Graham"></p>
+
+        <pre><code>$ cd your_repo_root/repo_name
+        $ git fetch origin
+        $ git checkout gh-pages
+        </code></pre>
+
+        <p>As we do, we're open sourcing the front end code for the new GitHub pages themes. This is just one of the many beautiful themes that can used to dynamically turn your static repo into a beautiful marketing site.  </p>
+
+        <h2>Designer Templates</h2>
+        <p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your page content will be preserved if it remained in markdown format.</p>
+
+        <ul>
+          <li>Hack by <a href="https://github.com/bleikamp">Ben Bleikamp</a> </li>
+          <li>Merlot by <a href="https://github.com/cameronmcefee">Cameron McEfee</a></li>
+          <li>Slate by <a href="https://github.com/jsncostello">Jason Costello</a></li>
+          <li>Time Machine by <a href="https://github.com/jonrohan">Jon Rohan</a></li>
+          <li>Leap Day by <a href="https://github.com/mattgraham">Matt Graham</a></li>
+          <li>Midnight by <a href="https://github.com/mattgraham">Matt Graham</a></li>
+          <li>Minimal by <a href="https://github.com/orderedlist">Steve Smith</a></li>
+          <li>Modernist by <a href="https://github.com/orderedlist">Steve Smith</a></li>
+        </ul>
+
+        <p>For more info on GitHub Pages, check out <a href="http://pages.github.com/">pages.github.com</a>. For help, check the <a href="http://help.github.com/pages">GitHub Pages documentation</a>.</p>
+
+        <h2>What will code look like?</h2>
+        <p>Your code should be beautiful, or at least that's what the designers think. </p>
+
+        <div class="highlight">
+        <pre><span class="nb">require</span> <span class="s1">'adapter/memory'</span>
+        <span class="nb">require</span> <span class="s1">'toystore'</span>
+
+        <span class="k">class</span> <span class="nc">User</span>
+          <span class="kp">include</span> <span class="no">Toy</span><span class="o">::</span><span class="no">Store</span>
+          <span class="n">adapter</span> <span class="ss">:memory</span><span class="p">,</span> <span class="p">{}</span>
+
+        <span class="n">attribute</span> <span class="ss">:name</span><span class="p">,</span> <span class="nb">String</span>
+        <span class="k">end</span>
+        </pre>
+        </div>
+
+
+        <p>So, this is what HTML Code looks like</p>
+
+        <div class="highlight">
+          <pre><span class="nt">&lt;html&gt;</span>
+             <span class="nt">&lt;body&gt;</span>
+                <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"header"</span><span class="nt">&gt;</span>
+                    <span class="nt">&lt;nav&gt;</span>
+                       <span class="nt">&lt;li&gt;</span>Home<span class="nt">&lt;/li&gt;</span> 
+                       <span class="nt">&lt;li&gt;</span>About Us<span class="nt">&lt;/li&gt;</span>
+                       <span class="nt">&lt;li&gt;</span>Contact<span class="nt">&lt;/li&gt;</span>
+                    <span class="nt">&lt;/nav&gt;</span>
+                <span class="nt">&lt;/div&gt;</span>
+             <span class="nt">&lt;/body&gt;</span>
+            <span class="nt">&lt;/html&gt;</span>
+          </pre>
+        </div>
+
+
+        <p>And, then maybe some CSS</p>
+
+        <div class="highlight">
+        <pre><span class="nt">body</span> <span class="p">{</span>
+          <span class="k">font</span><span class="o">:</span><span class="m">14px</span><span class="o">/</span><span class="m">22px</span> <span class="s1">'Quattrocento Sans'</span><span class="o">,</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Helvetica</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span>
+          <span class="k">color</span><span class="o">:</span><span class="m">#666</span><span class="p">;</span>
+          <span class="k">font-weight</span><span class="o">:</span><span class="m">300</span><span class="p">;</span>
+          <span class="k">margin</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
+          <span class="k">padding</span><span class="o">:</span><span class="m">0px</span> <span class="m">0</span> <span class="m">20px</span> <span class="m">0px</span><span class="p">;</span>
+          <span class="k">background</span><span class="o">:</span> <span class="sx">url(../images/body-background.png)</span> <span class="m">#eae6d1</span><span class="p">;</span>
+        <span class="p">}</span>
+
+        <span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span>
+          <span class="k">color</span><span class="o">:</span><span class="m">#333</span><span class="p">;</span>
+          <span class="k">margin</span><span class="o">:</span><span class="m">0</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span>
+        <span class="p">}</span>
+
+        <span class="nt">p</span><span class="o">,</span> <span class="nt">ul</span><span class="o">,</span> <span class="nt">ol</span><span class="o">,</span> <span class="nt">table</span><span class="o">,</span> <span class="nt">pre</span><span class="o">,</span> <span class="nt">dl</span> <span class="p">{</span>
+          <span class="k">margin</span><span class="o">:</span><span class="m">0</span> <span class="m">0</span> <span class="m">20px</span><span class="p">;</span>
+        <span class="p">}</span>
+        </pre>
+        </div>
+
+
+        <p>Inline code would look a little different. <code>We want you to see</code> where it is, but it's going to be a little less noticeable. It might also be as simple as <code>:hover</code> and as unique as <code>:first-child</code>. It is up to you. </p>
+
+        <h2>Sub-Nav Questions</h2>
+        <p>The sub-navigation is automatically generated using a little JS based on the H1 and H2 tags in your markdown file. The goal was to make it a quick <code>and exciting</code> way to write a markdown file and create an amazing pages site.  </p>
+
+        <h2>Who's this Matt Graham?</h2>
+        <p>He's a designer / frontend dev for GitHub, who would like to think his code is worked through and thought through well. He's part of the Ordered List crew that merged with GitHub in December of 2011. He can be found on <a href="http://twitter.com/#!/michigangraham">Twitter</a>, <a href="http://dribbble.com/mattgraham">Dribbble</a>, <a href="http://github.com/mattgraham">GitHub</a> and around the country for numerous events. Enjoyed the theme? Share it with the twitterverse.</p>
+      </section>
+
+      <footer>
+        <p>Project maintained by <a href="https://github.com/mattgraham">mattgraham</a></p>
+        <p><span class="small">Hosted on GitHub Pages &mdash; Theme by <a href="http://twitter.com/#!/michigangraham">mattgraham</a></span></p>
+      </footer>
+    </div>
+    <!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
+  </body>
+</html>
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -0,0 +1,53 @@
+var sectionHeight = function() {
+  var total    = $(window).height(),
+      $section = $('section').css('height','auto');
+
+  if ($section.outerHeight(true) < total) {
+    var margin = $section.outerHeight(true) - $section.height();
+    $section.height(total - margin - 20);
+  } else {
+    $section.css('height','auto');
+  }
+}
+
+$(window).resize(sectionHeight);
+
+$(document).ready(function(){
+  $("section h1, section h2").each(function(){
+    $("nav ul").append("<li class='tag-" + this.nodeName.toLowerCase() + "'><a href='#" + $(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,'') + "'>" + $(this).text() + "</a></li>");
+    $(this).attr("id",$(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,''));
+    $("nav ul li:first-child a").parent().addClass("active");
+  });
+
+  $("nav ul li a").live("click",function(event) {
+    $("body").animate({scrollTop:$($(this).attr("href")).offset().top-190},400);
+    $("nav ul li a").parent().removeClass("active");
+    $(this).parent().addClass("active");
+    event.preventDefault();    
+  });
+
+  sectionHeight();
+
+  $('img').load(sectionHeight);
+});
+
+fixScale = function(doc) {
+
+  var addEvent = 'addEventListener',
+      type = 'gesturestart',
+      qsa = 'querySelectorAll',
+      scales = [1, 1],
+      meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
+
+  function fix() {
+    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
+    doc.removeEventListener(type, fix, true);
+  }
+
+  if ((meta = meta[meta.length - 1]) && addEvent in doc) {
+    fix();
+    scales = [.25, 1.6];
+    doc[addEvent](type, fix, true);
+  }
+
+};
diff --git a/page.mustache b/page.mustache
@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>{{ project_title }} by {{ owner_name }}</title>
+    <link rel="stylesheet" href="{{asset_path_prefix}}stylesheets/styles.css">
+    <link rel="stylesheet" href="{{asset_path_prefix}}stylesheets/pygment_trac.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="{{asset_path_prefix}}javascripts/main.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+  </head>
+  <body>
+
+      <header>
+        <h1>{{ project_title }}</h1>
+        <p>{{ project_tagline }}</p>
+      </header>
+
+      <div id="banner">
+        <span id="logo"></span>
+
+        <a href="{{ repository_url }}" class="button fork"><strong>Fork On GitHub</strong></a>
+        <div class="downloads">
+          <span>Downloads:</span>
+          <ul>
+            <li><a href="{{ zip_url }}" class="button">ZIP</a></li>
+            <li><a href="{{ tar_url }}" class="button">TAR</a></li>
+          </ul>
+        </div>
+
+      </div><!-- end banner -->
+
+    <div class="wrapper">
+      <nav>
+        <ul></ul>
+      </nav>
+      <section>
+        {{{ main_content }}}
+      </section>
+      <footer>
+        <p>Project maintained by <a href="{{ owner_url }}">{{ owner_name }}</a></p>
+        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="http://twitter.com/#!/michigangraham">mattgraham</a></small></p>
+      </footer>
+    </div>
+    <!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
+  </body>
+</html>
diff --git a/stylesheets/config.rb b/stylesheets/config.rb
@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = ""
+css_dir = ""
+sass_dir = "/"
+images_dir = "../images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+preferred_syntax = :scss
+
+line_comments = false # by Compass.app