diff --git a/.gitignore b/.gitignore index 18fa578..1880a0b 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ .bundle .DS_Store .sass-cache +views/*.css diff --git a/content/pages/index.haml b/content/pages/index.haml index f87df27..5a3d6a6 100644 --- a/content/pages/index.haml +++ b/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') diff --git a/views/colours.sass b/views/colours.sass new file mode 100644 index 0000000..f8ba731 --- /dev/null +++ b/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 diff --git a/views/home.haml b/views/home.haml new file mode 100644 index 0000000..d1b3ad6 --- /dev/null +++ b/views/home.haml @@ -0,0 +1,2 @@ +%article.home(role="main") + ~ @page.to_html(self) diff --git a/views/master.sass b/views/master.sass index 4edac4a..12e8012 100644 --- a/views/master.sass +++ b/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,8 +144,8 @@ 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 @@ -131,34 +153,61 @@ div#container 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,24 +230,6 @@ 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% @@ -206,7 +237,6 @@ article 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) diff --git a/views/mixins.sass b/views/mixins.sass index 98e70c1..96a2c73 100644 --- a/views/mixins.sass +++ b/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