forked from mattgraham/midnight
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (113 loc) · 8.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Midnight 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/respond.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div id="header">
<div class="wrapper">
<a href="https://github.com/mattgraham/midnight" class="btn">View On GitHub</a>
<ul class="nav">
<li class="download-title">Downloads</li>
<li class="downloads"><a href="https://github.com/mattgraham/midnight/zipball/master" class="btn">ZIP</a></li>
<li class="downloads"><a href="https://github.com/mattgraham/midnight/tarball/master" class="btn">TAR</a></li>
</ul>
</div>
</div><!-- end header -->
<div class="wrapper">
<section>
<div id="title">
<h1>GitHub Pages Midnight Theme</h1>
<h5>Design for the web to succeed and you too will succeed.</h5>
<hr>
<span class="credits left">Project maintained by <a href="https://github.com/mattgraham">mattgraham</a></span>
<span class="credits right">This project is released under the terms of the MIT license.</span>
</div>
<p>The GitHub 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 gh-pages branch for your site files.</p>
<h3></h3>
<p><img src="https://scontent-iad3-1.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/11261377_516833338492357_1858954166_n.jpg" 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"><html></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"header"</span><span class="nt">></span>
<span class="nt"><nav></span>
<span class="nt"><li></span>Home<span class="nt"></li></span>
<span class="nt"><li></span>About Us<span class="nt"></li></span>
<span class="nt"><li></span>Contact<span class="nt"></li></span>
<span class="nt"></nav></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></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 its 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>Who's this Matt Graham?</h2>
<p>Product designer and frontend developer at Heroku. Formerly with GitHub, Ordered List etc. Rescue diver. He can be found on <a href="http://twitter.com/#!/mattgraham">Twitter</a>, <a href="http://github.com/mattgraham">GitHub</a> and around the country for numerous events. Feel free to fork and use this team as you wish.</p>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
</body>
</html>