Skip to content

Instantly share code, notes, and snippets.

@michaelgruber
Forked from theconektd/github.css
Last active August 29, 2015 13:56
Show Gist options
  • Select an option

  • Save michaelgruber/9007295 to your computer and use it in GitHub Desktop.

Select an option

Save michaelgruber/9007295 to your computer and use it in GitHub Desktop.
@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);
//
// FONTS
//
$serif: 'Lora', serif;
$mono: Menlo, Consolas, "Liberation Mono", Courier, monospace;
//
// COLORS
//
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
//
// MIXINS
//
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
//
// GLOBAL RESET
//
* {
margin: 0;
padding: 0;
}
//
// GENERAL
//
html {
font-size: 62.5%; /* Sets up base 10 for font size */
}
body {
@include font-size(1.6);
font-family: $serif;
line-height: 1.6;
padding-top: 1em;
padding-bottom: 1em;
background-color: $base3;
padding: 3em;
color: $base01;
}
body > *:first-child { margin-top: 0 !important; }
body > *:last-child { margin-bottom: 0 !important; }
a, a:hover, a:visited {
color: $base01;
border-bottom: 0.2em solid $base2;
text-decoration: none;
}
a:hover {
color: $blue;
border-bottom: 0.2em solid $blue;
}
h1, h2, h3, h4, h5, h6 {
margin: 2em 0 1em;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative;
}
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { @include font-size(2.8); }
h2 {
@include font-size(2.4);
border-bottom: 0.1em solid $base2;
}
h3 { @include font-size(1.8); }
h4 { @include font-size(1.6); }
h5 { @include font-size(1.4); }
h6 {
color: $base0;
@include font-size(1.4);
}
p, blockquote, ul, ol, dl, li, table, pre { margin: 1.5em 0; }
hr {
background: none;
border: 0;
border-bottom: 0.4em solid $base2;
}
body > h2:first-child {
margin-top: 0;
padding-top: 0;
}
body > h1:first-child {
margin-top: 0;
padding-top: 0;
}
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0;
}
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0; }
ul, ol { padding-left: 3em; }
ul :first-child, ol :first-child { margin-top: 0; }
ul :last-child, ol :last-child { margin-bottom: 0; }
dl { padding: 0; }
dl dt {
@include font-size(1.4);
font-weight: bold;
font-style: italic;
padding: 0;
margin: 1.5em 0 0.5em;
}
dl dt:first-child { padding: 0; }
dl dt > :first-child { margin-top: 0; }
dl dt > :last-child { margin-bottom: 0; }
dl dd {
margin: 0 0 1.5em;
padding: 0 1.5em;
}
dl dd > :first-child { margin-top: 0; }
dl dd > :last-child { margin-bottom: 0; }
blockquote {
border-left: 0.4em solid $base2;
padding: 0 1.5em;
color: $base0;
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }
table {
border-collapse: collapse;
padding: 0;
}
table tr {
border-top: 0.1em dotted $base1;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) { background-color: $base2; }
table tr th {
font-weight: bold;
border: 0.1em dotted $base1;
text-align: left;
margin: 0;
padding: 0.6em 1.3em;
}
table tr td {
border: 0.1em dotted $base1;
text-align: left;
margin: 0;
padding: 0.6em 1.3em;
}
table tr th :first-child, table tr td :first-child { margin-top: 0; }
table tr th :last-child, table tr td :last-child { margin-bottom: 0; }
img { max-width: 100%; }
pre {
font-family: $mono;
background-color: $base2;
color: $base01;
overflow: auto;
padding: 0.6em 1em;
code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
code, tt {
background-color: transparent;
border: none;
}
}
code, tt {
font-family: $mono;
margin: 0 0.2em;
padding: 0 0.5em;
white-space: nowrap;
background-color: $base2;
color: $base01;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gruber Flavored Markdown</title>
<link rel="stylesheet" href="./grubermd.css">
</head>
<body>
<!-- GENERATED WITH MARKED 2-->
<h1 id="githubflavoredmarkdown">Gruber Flavored Markdown</h1>
<p><em>View the <a href="http://github.github.com/github-flavored-markdown/sample_content.html">source of this content</a>.</em> </p>
<p>Let&#8217;s get the whole &#8220;linebreak&#8221; thing out of the way. The next paragraph contains two phrases separated by a single newline character: </p>
<p>Roses are red<br/>
Violets are blue </p>
<hr />
<p>The next paragraph has the same phrases, but now they are separated by two spaces and a newline character: </p>
<p>Roses are red<br/>
Violets are blue </p>
<p>Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing. </p>
<h2 id="abitofthegithubspice">A bit of the GitHub spice</h2>
<p>In addition to the changes in the previous section, certain references are auto-linked: </p>
<ul>
<li>SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2</li>
<li>User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2</li>
<li>User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2</li>
<li>#Num: #1</li>
<li>User/#Num: mojombo#1</li>
<li>User/Project#Num: mojombo/god#1</li>
</ul>
<p>These are dangerous goodies though, and we need to make sure email addresses don&#8217;t get mangled: </p>
<p>My email addy is tom@github.com. </p>
<h2 id="mathishardletsgoshopping">Math is hard, let&#8217;s go shopping</h2>
<p>In first grade I learned that 5 &gt; 3 and 2 &lt; 7. Maybe some arrows. 1 -&gt; 2 -&gt; 3. 9 &lt;- 8 &lt;- 7. </p>
<p>Triangles man! a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> </p>
<h2 id="wealllikemakinglists">We all like making lists</h2>
<p>The above header should be an H2 tag. Now, for a list of fruits: </p>
<ul>
<li>Red Apples</li>
<li>Purple Grapes</li>
<li>Green Kiwifruits</li>
</ul>
<p>Let&#8217;s get crazy: </p>
<ol>
<li><p>This is a list item with two paragraphs. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
mi posuere lectus.</p>
<p>Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit. </p></li>
<li><p>Suspendisse id sem consectetuer libero luctus adipiscing. </p></li>
</ol>
<p>What about some code <strong>in</strong> a list? That&#8217;s insane, right? </p>
<ol>
<li><p>In Ruby you can map like this:</p>
<pre><code>['a', 'b'].map { |x| x.uppercase }
</code></pre></li>
<li><p>In Rails, you can do a shortcut:</p>
<pre><code>['a', 'b'].map(&amp;:uppercase)
</code></pre></li>
</ol>
<p>Some people seem to like definition lists</p>
<dl>
<dt>Lower cost</dt>
<dd>The new version of this product costs significantly less than the previous one!</dd>
<dt>Easier to use</dt>
<dd>We&#8217;ve changed the product so that it&#8217;s much easier to use!</dd>
</dl>
<h2 id="iamarobot">I am a robot</h2>
<p>Maybe you want to print <code>robot</code> to the console 1000 times. Why not?</p>
<pre><code>def robot_invasion
puts(&quot;robot &quot; * 1000)
end
</code></pre>
<p>You see, that was formatted as code because it&#8217;s been indented by four spaces. </p>
<p>How about we throw some angle braces and ampersands in there?</p>
<pre><code>&lt;div class=&quot;footer&quot;&gt;
&amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>
<h2 id="setinstone">Set in stone</h2>
<p>Preformatted blocks are useful for ASCII art:</p>
<pre>
,-.
, ,-. ,-.<br/>
/ \ ( )-( )<br/>
\ | ,.&gt;-( )-&lt;
|,&#8217; ( )-( )
Y <strong><em><code>-'</code>-&#8217;
|/<strong>/ `-&#8217;
|
|
| -hrr-<br/>
</strong><em>|</em></em></strong>_________
</pre>
<h2 id="playingtheblamegame">Playing the blame game</h2>
<p>If you need to blame someone, the best way to do so is by quoting them: </p>
<blockquote>
<p>I, at any rate, am convinced that He does not throw dice. </p>
</blockquote>
<p>Or perhaps someone a little less eloquent: </p>
<blockquote>
<p>I wish you&#8217;d have given me this written question ahead of time so I<br/>
could plan for it&#8230; I&#8217;m sure something will pop into my head here in<br/>
the midst of this press conference, with all the pressure of trying to<br/>
come up with answer, but it hadn&#8217;t yet&#8230; </p>
<p>I don&#8217;t want to sound like<br/>
I have made no mistakes. I&#8217;m confident I have. I just haven&#8217;t - you<br/>
just put me under the spot here, and maybe I&#8217;m not as quick on my feet<br/>
as I should be in coming up with one. </p>
</blockquote>
<h2 id="tablefortwo">Table for two</h2>
<table>
<tr>
<th>ID</th><th>Name</th><th>Rank</th>
</tr>
<tr>
<td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
</tr>
<tr>
<td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
</tr>
</table>
<h2 id="crazylinkingaction">Crazy linking action</h2>
<p>I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from<br/>
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" title="MSN Search">MSN</a>. </p>
</body>
</html>

GitHub Flavored Markdown

View the source of this content.

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red Violets are blue


The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice

In addition to the changes in the previous section, certain references are auto-linked:

  • SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
  • User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
  • User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
  • #Num: #1
  • User/#Num: mojombo#1
  • User/Project#Num: mojombo/god#1

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists

The above header should be an H2 tag. Now, for a list of fruits:

  • Red Apples
  • Purple Grapes
  • Green Kiwifruits

Let's get crazy:

  1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

  2. Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code in a list? That's insane, right?

  1. In Ruby you can map like this:

     ['a', 'b'].map { |x| x.uppercase }
    
  2. In Rails, you can do a shortcut:

     ['a', 'b'].map(&:uppercase)
    

Some people seem to like definition lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!

I am a robot

Maybe you want to print robot to the console 1000 times. Why not?

def robot_invasion
  puts("robot " * 1000)
end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Set in stone

Preformatted blocks are useful for ASCII art:

             ,-. 
    ,     ,-.   ,-. 
   / \   (   )-(   ) 
   \ |  ,.>-(   )-< 
    \|,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 

Playing the blame game

If you need to blame someone, the best way to do so is by quoting them:

I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

I wish you'd have given me this written question ahead of time so I could plan for it... I'm sure something will pop into my head here in the midst of this press conference, with all the pressure of trying to come up with answer, but it hadn't yet...

I don't want to sound like I have made no mistakes. I'm confident I have. I just haven't - you just put me under the spot here, and maybe I'm not as quick on my feet as I should be in coming up with one.

Table for two

IDNameRank
1Tom Preston-WernerAwesome
2Albert EinsteinNearly as awesome

Crazy linking action

I get 10 times more traffic from [Google] 1 than from [Yahoo] 2 or [MSN] 3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment