Permalink
Browse files

Add grid and some code samples

  • Loading branch information...
1 parent 87783ea commit 4cb365971cd35355101924c460d9aed2d9124ff5 Tom Dale committed Apr 6, 2012
Showing with 69 additions and 6 deletions.
  1. +6 −0 config.rb
  2. +24 −1 source/about.html.erb
  3. BIN source/images/grid.png
  4. +1 −1 source/layout.erb
  5. +38 −4 source/stylesheets/site.css.scss
View
6 config.rb
@@ -82,6 +82,12 @@ def table_of_contents
markdown.render(chapters.join(''))
end
+
+ def highlight(language, class_name, &block)
+ concat %Q{<div class="highlight #{class_name}">}
+ concat Pygments.highlight capture(&block), :lexer => language
+ concat %Q{</div>}
+ end
end
class HighlightedHTML < Redcarpet::Render::HTML
View
25 source/about.html.erb
@@ -1,3 +1,7 @@
+---
+title: "About"
+---
+
<img class="about-header-text" src="images/about_header_text.png" alt="A framework for creating ambitious web applications.">
<div id="download">
<div id="download-ember">
@@ -16,4 +20,23 @@
</a>
</div>
</div>
-
+
+<div class="about-section">
+ <h2>Getting Started with Ember.js is Easy</h2>
+
+ <% highlight :html, :left do %>
+ test<h1>
+ <% end %>
+
+ <% highlight :javascript, :right do %>
+ MyApp.president = Ember.Object.create({
+ firstName: "Barack",
+ lastName: "Obama",
+
+ fullName: function() {
+ return this.get('firstName') + " " + this.get('lastName');
+ }.property('firstName', 'lastName')
+ });
+ <% end %>
+</div>
+
View
BIN source/images/grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 source/layout.erb
@@ -35,7 +35,7 @@
<div id="github">
<a href="https://github.com/emberjs/ember.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
</div>
- <div id="content-wrapper">
+ <div id="content-wrapper" class="grid">
<% if content_for?(:sidebar) %>
<div id="sidebar">
<%= yield_content :sidebar %>
View
42 source/stylesheets/site.css.scss
@@ -8,11 +8,14 @@ that should be displayed in a monospace font. */
$code_background: #f2f2f2;
/* Calculated page dimensions. */
-$page_width: 960px;
+$page_width: 940px;
$content_width: $page_width / 1.4;
$sidebar_width: $page_width - $content_width;
$padding: 20px;
+$col_width: 40px;
+$col_spacing: 20px;
+
/* Calculate typography sizes. */
$ratio: 1.4;
$extra_small_font: 12px;
@@ -110,8 +113,12 @@ body {
#content-wrapper {
width: $page_width;
margin: 0 auto 40px auto;
- padding: 20px;
+ padding: 20px 0px;
position: relative;
+
+ &.grid {
+ background-image: url(/images/grid.png);
+ }
}
#content {
@@ -186,7 +193,7 @@ body {
}
#download {
- width: 460px;
+ width: 465px;
height: 125px;
margin: 0 auto;
font-size: $extra_small_font;
@@ -204,7 +211,7 @@ body {
}
#download-starter-kit {
- right: 0;
+ left: 240px;
}
.info {
@@ -222,6 +229,33 @@ body {
}
}
+.about-section {
+ margin: 90px 0;
+
+ h2 {
+ width: 100%;
+ text-align: center;
+ font-size: 18px;
+ color: black;
+ text-transform: uppercase;
+ font-family: "MavenProBold";
+ }
+
+ .highlight {
+ float: left;
+ width: $col_width * 7 + $col_spacing * 6;
+
+ &.right {
+ margin-left: $col_width * 2 + $col_spacing * 3;
+ }
+
+ &.right:after {
+ content: "";
+ break: both;
+ }
+ }
+}
+
/**
Typography styles.
**/

0 comments on commit 4cb3659

Please sign in to comment.