Skip to content
Browse files

Did some work on the home page.

  • Loading branch information...
1 parent bf1835b commit 829ee505fde543f24637dae9925a1f45d0e842a0 @gma committed Feb 4, 2011
Showing with 157 additions and 58 deletions.
  1. +1 −0 .gitignore
  2. +54 −1 content/pages/index.haml
  3. +10 −0 views/colours.sass
  4. +2 −0 views/home.haml
  5. +88 −55 views/master.sass
  6. +2 −2 views/mixins.sass
View
1 .gitignore
@@ -3,3 +3,4 @@
.bundle
.DS_Store
.sass-cache
+views/*.css
View
55 content/pages/index.haml
@@ -1 +1,54 @@
-%p Nesta is the shizzle yo.
+Title: Nesta CMS
+Template: home
+
+%section.intro
+ %heading
+ %h1 Home
+ :markdown
+ Nesta is a Ruby CMS that's well suited to developers and designers.
+ With code that is simple and easy to understand, Nesta can be extended
+ using the full power of the [Sinatra][frank] web framework.
+
+ [frank]: http://www.sinatrarb.com
+
+%section.overview
+ %heading
+ %h1 Why use Nesta?
+ :markdown
+ Do you prefer writing and testing HTML and CSS in a text editor,
+ rather than a browser window? Are you happy writing copy in
+ [Markdown][md] or [Textile][textile]? If so, this might be for you.
+
+ There's no database to configure – everything is stored in
+ text files. You can review your changes on a local copy of your web
+ site, and copy the files to your server when you're ready to publish
+ (most people use Git).
+
+ [md]: http://effectif.com/nesta/markdown-cheat-sheet
+ [textile]: http://textism.com/tools/textile/ "Textism: Tools: Textile"
+
+%section.features
+ %heading
+ %h1 Features
+ :markdown
+ - Suitable for any type of web site, including blogs.
+ - Semantic **HTML5**, clean **typography**.
+ - Easily **re-styled** or **extended**.
+ - **Free hosting** on Heroku.
+ - Support for Google Analytics, Atom feeds, comments (via Disqus),
+ XML sitemaps…
+
+%section.quick-start
+ %heading
+ %h1 Quick start
+ %p Insert gem and shotgun commands here.
+
+%section.doc-list.group
+ %heading
+ %h1 Documentation
+ %nav
+ - display_menu(Nesta::Menu.for_path('/docs/quick-start'), :root => '/docs/quick-start', :class => 'quick-start')
+ - display_menu(Nesta::Menu.for_path('/docs/creating-content'), :root => '/docs/creating-content', :class => 'creating-content')
+ - display_menu(Nesta::Menu.for_path('/docs/design'), :root => '/docs/design', :class => 'design')
+ - display_menu(Nesta::Menu.for_path('/docs/config'), :root => '/docs/config', :class => 'config')
+ - display_menu(Nesta::Menu.for_path('/docs/deployment'), :root => '/docs/deployment', :class => 'deployment')
View
10 views/colours.sass
@@ -0,0 +1,10 @@
+$base-color: #313126
+$background-color: #fff
+$tint: #F9F7EF
+$border-color: #D7C28B
+$link-color: #D85700
+$visited-link-color: darken($link-color, 5%)
+$hover-link-color: lighten($link-color, 15%)
+$active-link-color: darken($link-color, 20%)
+$nav-link-color: desaturate(lighten($link-color, 25%), 35%)
+$meta-color: #87877D
View
2 views/home.haml
@@ -0,0 +1,2 @@
+%article.home(role="main")
+ ~ @page.to_html(self)
View
143 views/master.sass
@@ -1,19 +1,16 @@
@import "mixins.sass"
+@import "colours.sass"
// Variables
-$content-width: 37em
+$golden: 1.618
-$base-color: #262626
-$background-color: #fff
-$tint: #f1f1f3
-$border-color: #99d
-$link-color: #507EA9
-$visited-link-color: darken($link-color, 15%)
-$hover-link-color: lighten($link-color, 15%)
-$active-link-color: darken($link-color, 50%)
-$nav-link-color: desaturate($link-color, 55%)
-$meta-color: #999
+$gutter: 2.618em // from modularscale.com with 16px/798px
+$container-width: 54em
+$content-width: $container-width / $golden - ($gutter / 2)
+$sidebar-width: $container-width - $content-width - ($gutter / 2)
+
+$banner-h1-scale: 3.27
$border-style: 1px dashed $border-color
@@ -26,13 +23,13 @@ $border-style: 1px dashed $border-color
// Typography
@mixin heading-font
- font-family: "ff-meta-web-pro-1", "ff-meta-web-pro-2", Helvetica, sans-serif
+ font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, serif
@mixin body-font
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, serif
-@mixin text-shadow
- text-shadow: 0 1px 2px #ccc, 1px 3px 5px #d6d6d6
+@mixin text-shadow($color: #DCDBD1)
+ text-shadow: 0 2px 5px $color
body
font-size: $base-font * 1.05
@@ -46,20 +43,20 @@ header[role=banner]
margin: 0
line-height: 1.2em
h1
- font-size: 327%
+ font-size: 100% * $banner-h1-scale
font-weight: 700
+ font-style: italic
letter-spacing: -1px
@include text-shadow
h2
+ display: none
color: $meta-color
- font-size: 1em
+ font-size: 1em * $base-scale
font-weight: 400
h1, h2, h3, #sidebar
@include heading-font
-h1
- font-weight: 700
-h2, h3
+h1, h2, h3
font-weight: 400
h4, h5, h6
@@ -107,11 +104,36 @@ nav.breadcrumb
// Layout
+div#container
+ position: relative
+
+header[role=banner]
+ hgroup
+ position: absolute
+ left: $content-width + $gutter
+ top: $vertical-rhythm / 2
+ nav.primary
+ line-height: ($banner-h1-scale * $h4-scale) + ($vertical-rhythm / 2)
+ ul
+ list-style: none
+ li
+ display: inline
+ margin-right: 1.5em
+
+ @adjust-font-size($base-scale)
+ font-weight: 700
+
+ &:last-child
+ margin-right: 0
+
+ a
+ text-decoration: none
+
article, aside, footer, header, nav, section
display: block
div#container
- width: 54em
+ width: $container-width
margin: 0 auto
padding: 1em 1em 0 1em
@@ -122,43 +144,70 @@ div#container
padding: 1px 0
div#sidebar
- width: 12em
- margin-left: 40em
+ width: $sidebar-width
+ margin-left: $content-width + $gutter
padding: ($base-vertical-margin * 3) 1em $base-vertical-margin 1em
footer.branding
clear: both
color: $meta-color
@include adjust-font-size($base-scale)
p
- width: $content-width
+ width: $container-width
margin: 0
padding: 1em 0
-// The visuals
+// Home page layout
+article.home
+ section
+ clear: both
+
+ h1
+ @include adjust-font-size($h2-scale, 1.6, 0.4)
+
+ &.intro
+ heading
+ display: none
+ p
+ @include adjust-font-size($h3-scale, 1, 1, 4/3)
+ color: $meta-color
+ text-align: center
+
+ &.overview
+ clear: both
+ float: left
+ width: $content-width
-@mixin pale-background
- background-color: $tint
- background-color: rgba(255, 255, 255, 0.5)
+ &.features
+ clear: right
+ float: right
+ width: $sidebar-width
+
+ ul
+ margin-left: 1.5em
+
+ &.doc-list
+ @include adjust-font-size($base-scale)
+ nav
+ ul
+ float: left
+ width: (($container-width / 5) - $gutter) / $base-scale
+ margin-right: $gutter
+ &:last-child
+ margin-right: 0
+
+// The visuals
a
- border-bottom: 1px dotted $link-color
- text-decoration: none
color: $link-color
@include transition(color 0.25s 0 ease)
&:visited
color: $visited-link-color
- border-bottom-color: $visited-link-color
&:hover
color: $hover-link-color
- border-bottom-color: $hover-link-color
&:active
color: $active-link-color
- border-bottom-color: $active-link-color
-#sidebar
- @include pale-background
-
nav.breadcrumb
ul
margin: 0
@@ -181,32 +230,13 @@ article p.meta
a:hover
color: $hover-link-color
-nav.categories,
-div.feed,
-article p.meta
- a
- border-bottom-color: $background-color
-
-article p.meta
- a
- @include transition(border-bottom-color 0.5s 0 ease)
- a:hover
- border-bottom-color: $hover-link-color
-
-article h1 a
- border-bottom: none
-
-body
- background: $background-color url(/images/background.png)
-
article
img
max-width: 100%
margin-bottom: $base-vertical-margin
code,
pre
- @include pale-background
code
background: none
code
@@ -243,7 +273,6 @@ section.articles
position: relative
margin: $base-vertical-margin 0
padding: $base-vertical-margin / 2 1em
- @include pale-background
list-style: none
article
ol li
@@ -258,13 +287,17 @@ section.articles
article
h1
+ font-weight: normal
text-shadow: none
+ a
+ text-decoration: none
p.read_more
@include adjust-font-size(1, 0, 0)
margin-top: -$base-vertical-margin
footer
border-top: none
+// Side bar
nav.categories
h1
@include adjust-font-size(1, 2, 0)
View
4 views/mixins.sass
@@ -14,12 +14,12 @@ $base-font: $base-scale * 1em
$vertical-rhythm: 1.75em
$base-vertical-margin: 1.75em
-@mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1)
+@mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1, $cadence: 1)
$average-margin: $base-vertical-margin / $scale
margin-top: $average-margin * $top-weight
margin-bottom: $average-margin * $bottom-weight
- $line-height: $vertical-rhythm / $scale
+ $line-height: $vertical-rhythm / $scale * $cadence
@if $line-height < 1
line-height: $line-height * 2
@else

0 comments on commit 829ee50

Please sign in to comment.
Something went wrong with that request. Please try again.