Permalink
Browse files

Improve mobile experience.

Used media queries to modify the layout of home and docs pages on small
screened devices. Also switched the grid from 10 to 12 columns.
  • Loading branch information...
1 parent f007b31 commit f0fbed82235e5065ce02ed4c7516e58a7b02131a @gma committed Jun 10, 2011
@@ -2,21 +2,5 @@ Template: wide
%heading
%h1 Documentation
-%p.documentation-overview
- We recommend familiarising yourself by working through
- %em
- = succeed "," do
- %a(href="/docs/quick-start") Quick start
- followed by a quick skim of the
- %em
- %a(href="/docs/creating-content") Writing content
- and
- %em
- %a(href="/docs/config") Configuration
- sections.
-%nav.documentation.group
- - 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/config'), :root => '/docs/config', :class => 'config')
- - display_menu(Nesta::Menu.for_path('/docs/design'), :root => '/docs/design', :class => 'design')
- - display_menu(Nesta::Menu.for_path('/docs/deployment'), :root => '/docs/deployment', :class => 'deployment')
+= haml(:docs_overview, :layout => false)
+= haml(:docs_index, :layout => false)
View
@@ -5,11 +5,9 @@ Template: home
%heading
%h1 Home
:markdown
- A Ruby CMS for *developers* and *designers*.
- With simple code that's easy to follow, Nesta is easily
- extended using the [Sinatra][frank] web framework.
-
- [frank]: http://www.sinatrarb.com
+ A Ruby CMS for *developers* and *designers*.
+ With simple code that's easy to follow, Nesta is easily
+ extended using the Sinatra web framework.
%section.overview
%heading
@@ -26,7 +24,7 @@ Template: home
[md]: http://effectif.com/nesta/markdown-cheat-sheet
[textile]: http://textism.com/tools/textile/ "Textism: Tools: Textile"
-
+
%section.features
%heading
%h1 Features
@@ -44,13 +42,13 @@ Template: home
:markdown
$ gem install nesta
$ gem install bundler
- $ nesta new mysite.com --git
+ $ nesta new mysite.com
$ cd mysite.com
$ bundle
$ nesta demo:content
$ shotgun config.ru
- Then go to [http://localhost:9393](http://localhost:9393)...
+ Then visit [http://localhost:9393](http://localhost:9393)...
%section.articles
%heading
@@ -79,23 +77,8 @@ Template: home
but after I wrapped my head around what Nesta can do, I was a
total convert.
-%section.doc-list.group
+%section.group
%heading
%h1 Documentation
- %p.overview
- We recommend familiarising yourself by working through
- %em
- %a(href="/docs/quick-start") Quick start
- followed by a quick skim of
- %em
- %a(href="/docs/creating-content") Writing content
- and then
- %em
- = succeed "." do
- %a(href="/docs/config") Configuration
- %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/config'), :root => '/docs/config', :class => 'config')
- - display_menu(Nesta::Menu.for_path('/docs/design'), :root => '/docs/design', :class => 'design')
- - display_menu(Nesta::Menu.for_path('/docs/deployment'), :root => '/docs/deployment', :class => 'deployment')
+ = haml(:docs_overview, :layout => false)
+ = haml(:docs_index, :layout => false)
View
@@ -1,3 +1,4 @@
- if ! @menu_items.empty?
- %nav.categories
- - display_menu(Nesta::Menu.for_path('/docs'), :class => "menu", :levels => 3)
+ %heading
+ %h1 Documentation menu
+ = haml(:docs_index, :layout => false)
View
@@ -0,0 +1,6 @@
+%nav.documentation.group
+ - 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/config'), :root => '/docs/config', :class => 'config')
+ - display_menu(Nesta::Menu.for_path('/docs/design'), :root => '/docs/design', :class => 'design')
+ - display_menu(Nesta::Menu.for_path('/docs/deployment'), :root => '/docs/deployment', :class => 'deployment')
View
@@ -0,0 +1,11 @@
+%p.documentation-overview
+ We recommend familiarising yourself by working through
+ %em
+ %a(href="/docs/quick-start") Quick start
+ followed by a quick skim of
+ %em
+ %a(href="/docs/creating-content") Writing content
+ and then
+ %em
+ = succeed "." do
+ %a(href="/docs/config") Configuration
View
@@ -7,6 +7,7 @@
- if @keywords
%meta(name="keywords" content=@keywords)
%meta(name="google-site-verification" content="sWW-3YouEAsiQ8rAwQ9-GLUp9xFnEkDKvOh7esIah8Y")
+ %meta(name="viewport" content="initial-scale=1.0, width=device-width")
%title= @title
<!--[if ! lte IE 6]><!-->
%link(href="/css/master.css" media="screen" rel="stylesheet")
View
@@ -0,0 +1,118 @@
+$columns: 12
+
+$container-width: 54em
+$gutter: 2.107em // from modularscale.com with 16px/864px
+$unit: ($container-width - ($gutter * ($columns - 1))) / $columns
+
+@function grid-width($cols)
+ @return ($cols * $unit) + (($cols - 1) * $gutter)
+
+@function grid-left($cols)
+ @return ($cols - 1) * ($unit + $gutter)
+
+$content-width: grid-width(7)
+$sidebar-width: grid-width(4)
+$sidebar-left: grid-left(9)
+
+@media screen and (min-width: 30em)
+ header[role=banner]
+ nav.primary
+ ul.menu
+ padding: $base-vertical-margin 0
+ li
+ &:nth-child(even)
+ float: left
+ width: grid-width(1)
+ margin-right: $gutter
+ &:last-child
+ margin-right: 0
+
+@media screen and (min-width: 40em)
+ div#content
+ max-width: 40em
+
+@media screen and (min-width: 820px)
+ header[role=banner]
+ hgroup
+ position: absolute
+ left: $sidebar-left
+ top: 0
+ nav.primary
+ line-height: $vertical-rhythm * 3
+ ul li
+ margin-right: $gutter
+ p.links
+ left: $sidebar-left + 8em
+
+ div#container
+ width: $container-width
+
+ div#content
+ width: $content-width
+ float: left
+ padding: 1px 0
+
+ ol, ul
+ margin-left: 0
+
+ div#sidebar
+ width: $sidebar-width
+ margin-left: $sidebar-left
+ padding: ($base-vertical-margin * 3) 0 $base-vertical-margin
+
+ heading h1
+ display: none
+
+ nav.documentation
+ float: none
+ width: auto
+ ul
+ float: none
+ width: auto
+ & > ul
+ margin-left: 0
+
+ article.home
+ section
+ clear: both
+
+ &.intro
+ p
+ @include adjust-font-size($h3-scale, 1, 1, 4/3)
+
+ &.overview
+ clear: both
+ float: left
+ width: $content-width
+
+ &.features,
+ &.users
+ clear: right
+ float: right
+ width: $sidebar-width
+
+ &.getting-started
+ float: left
+ width: grid-width(4)
+
+ &.articles
+ clear: none
+ float: left
+ width: grid-width(4)
+ margin-left: $gutter
+
+ p.documentation-overview
+ float: left
+ width: grid-width(3) - 0.1em
+ nav.documentation
+ float: right
+ width: grid-width(8)
+ ul
+ float: left
+ width: grid-width(4)
+ &.quick-start
+ float: none
+ &.config,
+ &.deployment
+ margin-left: $gutter
+ width: grid-width(4) - 0.1em
Oops, something went wrong.

0 comments on commit f0fbed8

Please sign in to comment.