Looking a little more like a real site

app/assets/stylesheets/application.css.scss

@@ -8,11 +8,17 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- * = stub stubs/variables_overrides.css.scss
- *= require_self
- *= require_tree .
  */
 
+
+// Fonts and other external imports
+@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
+@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
+
+// Libraries
 @import "compass";
-@import "foundation_and_overrides.scss";
-@import "foundation";
+@import "foundation_and_overrides";
+
+// Local settings (also edit foundation_and_overrides.scss to modify global variables)
+@import "sass/layout";
+@import "sass/typography";

app/assets/stylesheets/foundation_and_overrides.scss

@@ -65,7 +65,7 @@ $default-float: left;
 
 // $body-bg: #fff;
 // $body-font-color: #222;
-// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ $body-font-family: 'Cantarell', sans-serif;
 // $body-font-weight: normal;
 // $body-font-style: normal;
 
@@ -172,7 +172,7 @@ $default-float: left;
 
 // Control header font styles
 
-// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ $header-font-family: 'Fjalla One', sans-serif;
 // $header-font-weight: bold;
 // $header-font-style: normal;
 // $header-font-color: #222;
@@ -1260,7 +1260,7 @@ $default-float: left;
 
 // Height and margin
 
-// $topbar-height: 45px;
+ $topbar-height: 64px;
 // $topbar-margin-bottom: 0;
 
 // Control Input height for top bar
@@ -1269,8 +1269,8 @@ $default-float: left;
 
 // Controlling the styles for the title in the top bar
 
-// $topbar-title-weight: bold;
-// $topbar-title-font-size: em-calc(17);
+ $topbar-title-weight: normal;
+ $topbar-title-font-size: 2em;
 
 // Style the top bar dropdown elements
 
@@ -1286,8 +1286,8 @@ $default-float: left;
 // $topbar-link-color: #fff;
 // $topbar-link-color-hover: #fff;
 // $topbar-link-color-active: #fff;
-// $topbar-link-weight: bold;
-// $topbar-link-font-size: em-calc(13);
+ $topbar-link-weight: normal;
+ $topbar-link-font-size: 1.2em;
 // $topbar-link-hover-lightness: -30%; // Darken by 30%
 // $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
 // $topbar-link-bg-active: darken($topbar-bg-color, 3%);

app/assets/stylesheets/sass/_layout.scss

@@ -0,0 +1,41 @@
+/**
+
+	Layouts only
+
+*/
+
+#main-container, #footer, #nav-inner {
+	max-width: $large-screen;
+	margin: 0 auto;
+}
+
+$body-background-color: #EEE;
+$main-container-background-color: #F4F4F4;
+$content-background-color: #FFF;
+$layout-border-color: #DDD;
+
+body {
+	background-color: $body-background-color;
+}
+
+#main-container {
+	background-color: $main-container-background-color;
+	border: 1px solid $layout-border-color;
+	border-top: 0;
+}
+
+#main {
+	border-right: 1px solid $layout-border-color;
+	padding: 0;
+}
+
+article.content {
+	background-color: $content-background-color;
+	border-left: 1px solid $layout-border-color;
+}
+
+
+#article-header {
+	border-bottom: 1px solid $layout-border-color;
+	padding: 0;
+}

app/assets/stylesheets/sass/_typography.scss

@@ -0,0 +1,6 @@
+/**
+
+	Basic theme rules, html native elements only
+
+*/
+