Design update, phase one to make a responsive solution

.gitignore

@@ -9,3 +9,4 @@ public/system
 .rvmrc
 .project
 .buildpath
+.DS_Store

app/helpers/application_helper.rb

@@ -68,7 +68,7 @@ def login_menu_item
   end
 
   def sponsor(name, logo, url)
-    link_to image_tag( 'logos/' + logo, :alt => name), url, :tabindex =>  -1
+    link_to image_tag( 'logos/' + logo, :alt => name), url, :tabindex =>  -1, :class => 'sponsor-link'
   end
 
   def feed_link(title, url)
@@ -107,10 +107,8 @@ def twitter_url
   end
 
   def help_tooltip(&block)
-    ('<div class="tooltip"><img src="/images/help.png" alt="Mer informasjon" />' +
-    '<div class="box help"><div class="inner"><div class="content">' +
-    capture(&block) +
-    '</div></div></div></div>').html_safe
+    ('<a class="tooltip-link" data-tooltip="' +
+    capture(&block).strip! + '">?</a>').html_safe
   end
 
   def self.early_bird_end_date

app/views/layouts/_sponsors.html.erb

@@ -1,38 +1,45 @@
-<div id="logos">
-  <div id="small_logos">
-    <%= sponsor 'Acando', 'acando.gif', 'http://acando.no' %>
-    <%= sponsor 'Accenture', 'accenture.png', 'http://accenture.no' %>
-    <%= sponsor 'Agile42', 'agile42.png', 'http://www.agile42.no' %>
-    <%= sponsor 'BEKK', 'bekk.gif', 'http://www.bekk.no' %>
-    <%= sponsor 'Bouvet', 'bouvet.gif', 'http://www.bouvet.no' %>
-    <%= sponsor 'Itera', 'itera.png', 'http://www.iteraconsulting.no' %>
-    <%= sponsor 'Kantega', 'kantega.png', 'http://www.kantega.no' %>
-    <%= sponsor 'Skalar', 'skalar.png', 'http://www.skalar.no' %>
-    <%= sponsor 'Statens pensjonskasse', 'spk.png', 'http://www.spk.no' %>
-    <%= sponsor 'Steria', 'steria.gif', 'http://www.steria.no' %>
-    <%= sponsor 'Nets', 'nets.gif', 'http://www.nets.no' %>
-    <%= sponsor 'Miles', 'miles.gif', 'http://www.miles.no' %>
-    <%= sponsor 'Zenior', 'zenior.png', 'http://zenior.no' %>
-    <%= sponsor 'Webstep', 'webstep.png', 'http://webstep.no' %>
-    <%= sponsor 'Computas', 'computas.png', 'http://computas.no' %>
-    <%= sponsor 'Cisco', 'cisco.png', 'http://www.cisco.com/web/NO/solutions/tele_index.html' %>
-    <%= sponsor 'Iterate', 'iterate.png', 'http://iterate.no' %>
-    <%= sponsor 'Finn', 'finn.png', 'http://finn.no' %>
-    <%= sponsor 'Metier', 'ITPP.png', 'http://www.smidigeprosjekter.no' %>
-    <%= sponsor 'Capgemini', 'capgemini.gif', 'http://www.no.capgemini.com/' %>
-    <%= sponsor 'Logica', 'logica.gif', 'http://logica.no/' %>
-    <%= sponsor 'Yahoo', 'yahoo.png', 'http://jobs.yahoo.no/' %>
-    <%= sponsor 'Conduct', 'conduct.png', 'http://conduct.no/' %>
-    <%= sponsor 'Skandiabanken', 'skandiabanken2.png', 'http://skandiabanken.no/' %>
-    <%= sponsor 'Arktekk', 'arktekk.png', 'http://arktekk.no/' %>
-    <%= sponsor 'Statkraft', 'statkraft.jpg', 'http://statkraft.no/' %>
-    <%= sponsor 'EDB Ergo Group', 'EDBErgoGroup_logo.png', 'http://www.edbergogroup.com/' %>
-    <%= sponsor 'Sherpa Consulting', 'sherpatypo_utag_rgb.png', 'http://www.sherpaconsulting.no/' %>
-    <%= sponsor 'Conax', 'conax.gif', 'http://www.conax.no/' %>
-    <%= sponsor 'Kodemaker', 'kodemaker.png', 'http://www.kodemaker.no/' %>
-  </div>
-  <div id="biglogos">
-    <%= sponsor 'Statens landbruksforvaltning', 'slf.png', 'http://www.slf.dep.no/' %>
-  </div>
-</div>
+<% sponsors = [
+    ['Acando', 'acando.gif', 'http://acando.no'],
+    ['Accenture', 'accenture.png', 'http://accenture.no'],
+    ['Agile42', 'agile42.png', 'http://www.agile42.no'],
+    ['BEKK', 'bekk.gif', 'http://www.bekk.no'],
+    ['Bouvet', 'bouvet.gif', 'http://www.bouvet.no'],
+    ['Itera', 'itera.png', 'http://www.iteraconsulting.no'],
+    ['Kantega', 'kantega.png', 'http://www.kantega.no'],
+    ['Skalar', 'skalar.png', 'http://www.skalar.no'],
+    ['Statens pensjonskasse', 'spk.png', 'http://www.spk.no'],
+    ['Steria', 'steria.gif', 'http://www.steria.no'],
+    ['Nets', 'nets.gif', 'http://www.nets.no'],
+    ['Miles', 'miles.gif', 'http://www.miles.no'],
+    ['Zenior', 'zenior.png', 'http://zenior.no'],
+    ['Webstep', 'webstep.png', 'http://webstep.no'],
+    ['Computas', 'computas.png', 'http://computas.no'],
+    ['Cisco', 'cisco.png', 'http://www.cisco.com/web/NO/solutions/tele_index.html'],
+    ['Iterate', 'iterate.png', 'http://iterate.no'],
+    ['Finn', 'finn.png', 'http://finn.no'],
+    ['Metier', 'ITPP.png', 'http://www.smidigeprosjekter.no'],
+    ['Capgemini', 'capgemini.gif', 'http://www.no.capgemini.com/'],
+    ['Logica', 'logica.gif', 'http://logica.no/'],
+    ['Yahoo', 'yahoo.png', 'http://jobs.yahoo.no/'],
+    ['Conduct', 'conduct.png', 'http://conduct.no/'],
+    ['Skandiabanken', 'skandiabanken2.png', 'http://skandiabanken.no/'],
+    ['Arktekk', 'arktekk.png', 'http://arktekk.no/'],
+    ['Statkraft', 'statkraft.jpg', 'http://statkraft.no/'],
+    ['EDB Ergo Group', 'EDBErgoGroup_logo.png', 'http://www.edbergogroup.com/'],
+    ['Sherpa Consulting', 'sherpatypo_utag_rgb.png', 'http://www.sherpaconsulting.no/'],
+    ['Conax', 'conax.gif', 'http://www.conax.no/'],
+    ['Kodemaker', 'kodemaker.png', 'http://www.kodemaker.no/'],
+    ['Statens landbruksforvaltning', 'slf.png', 'http://www.slf.dep.no/']
+] %>
 
+<% 
+sponsor_count = sponsors.size
+%>
+<ul class="sponsors clearfix">
+<%
+sponsors.sort_by{rand}.each_with_index do |sponsor, pos| %>
+    <li>
+        <%= sponsor sponsor[0], sponsor[1], sponsor[2] %>
+    </li>
+<% end %>
+</ul>

app/views/layouts/application.html.erb

@@ -1,63 +1,93 @@
 <!DOCTYPE html>
 <html lang="no">
-
-<head>
+  <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-	<title>
+  	<title>
   	  <%= content_for?(:title) ? yield(:title) : "Smidig 2012: 05. - 06. november på Radisson SAS Plaza Hotel Oslo" %>
     </title>
 
-    <%= stylesheet_link_tag 'screen', :media => "screen,projection,tv" %>
-    <%= stylesheet_link_tag 'fonts' %>
-    <%= stylesheet_link_tag 'menu' %>
+    <!--[if lte IE 9]>
+      <link rel="stylesheet" href="<%= stylesheet_link_tag 'ie_1140' %>" type="text/css" media="screen" />
+    <![endif]-->
+
+    <%= stylesheet_link_tag '1140' %>
+    <%= stylesheet_link_tag 'media-queries' %>
+    <%= stylesheet_link_tag 'styles' %>
     <%= stylesheet_link_tag 'tooltip' %>
-    <%= stylesheet_link_tag 'style2012' %>
-
-<!--[if IE]>
-	<style type="text/css">
-        html, body { width:expression(document.body.clientWidth < 960? "960px": "auto" ); }
-    </style>
-<![endif]-->
-  <%= javascript_include_tag 'jquery-1.4.2.min' %>
-  <%= javascript_include_tag 'application' %>
-  <%= javascript_include_tag 'jquery.shuffle' %>
-
-  <%= auto_discovery_link_tag :rss, {:controller => 'talks', :format => :rss}, {:title => "Alle lyntaler"} %>
-  <%= auto_discovery_link_tag :rss, {:controller => 'talks', :topic_id => @topic, :format => :rss}, {:title => "Lyntaler for #{@topic.title}"} if @topic %>
-  <%= auto_discovery_link_tag :rss, {:controller => 'comments', :talk_id => @talk, :format => :rss}, {:title => "Kommentarer for #{@talk.title}"} if @talk %>
-</head>
-
-<body>
-    <% #=render :partial => 'layouts/sponsors' %>
-
-<div id="wrapper">
-
-    <div id="main">
-	   <%#= render :partial => 'layouts/menu' %>
-        <% unless flash.empty? %>
-          <div id="notifications">
-            <p style="color: green"><%= flash[:notice] %></p>
-            <p style="color: orange"><%= flash[:warn] %></p>
-            <p style="color: red"><%= flash[:error] %></p>
-          </div>
-        <% end %>
-		<div id="header">
-		  <h1><%= link_to "Smidig 2012", root_url %></h1>
-		  <h2 class="page_title"><%= yield :title %></h2>
-		</div>
 
-        <%= yield %>
+    <%= javascript_include_tag 'jquery-1.7.2.min' %>
+    <%= javascript_include_tag 'jquery.simpletip-1.3.1.min' %>
+    <%= javascript_include_tag 'css3-mediaqueries' %>
+    <%= javascript_include_tag 'application' %>    
 
+    <%= auto_discovery_link_tag :rss, {:controller => 'talks', :format => :rss}, {:title => "Alle lyntaler"} %>
+    <%= auto_discovery_link_tag :rss, {:controller => 'talks', :topic_id => @topic, :format => :rss}, {:title => "Lyntaler for #{@topic.title}"} if @topic %>
+    <%= auto_discovery_link_tag :rss, {:controller => 'comments', :talk_id => @talk, :format => :rss}, {:title => "Kommentarer for #{@talk.title}"} if @talk %>
+  </head>
+
+  <body>
+
+
+  <div class="row main">
+    <div class="eightcol">
+      <div class="content">
+        <%= yield %>
+      </div>
     </div>
+    <aside class="fourcol last">
+      <%= render :partial => 'layouts/sponsors' %>
+    </aside>
+  </div>
 
-</div>
+<!--
+    <div class="container">
 
-<div id="footer">
-    <!--<div id="socialcluster"><a class="epost" href="mailto:[email protected]">Send oss en epost.</a><a class="facebook" href="http://www.facebook.com/pages/Smidig-konferansen/102562453136427">Besøk oss på Facebook.</a><a class="twitter" href="http://twitter.com/#!/smidig">Følg oss på Twitter.</a><a class="linkedin" href="http://www.linkedin.com/groups?mostPopular=&amp;gid=963587">Besøk vår gruppe på LinkedIn.</a></div>-->
-</div>
+      
+      <header class="row" id="header">
+        <h1><%= link_to "Smidig 2012", root_url %></h1>
+      </header>
 
-<%= render :partial => 'layouts/analytics' %>
+      <nav class="row" id="nav">
+        <%#= render :partial => 'layouts/menu' %>
+      </nav>
+
+      <% unless flash.empty? %>
+        <div class="container" id="notifications">
+          <% if flash[:notice] %>
+            <p class="notice"><%= flash[:notice] %></p>
+          <% end %>
+          <% if flash[:warn] %>
+            <p class="warn"><%= flash[:warn] %></p>
+          <% end %>
+          <% if flash[:error] %>
+            <p class="error"><%= flash[:error] %></p>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="row">
+            
+      </div>
+
+        <div class="fourcol">
+          <%= yield %>
+        </div>
+        <div class="fourcol">
+          <%= yield %>
+        </div>
+        <div class="fourcol last" id="aside">
+          <%= render :partial => 'layouts/sponsors' %>
+        </div>
+      </section>
+
+      <footer class="row" id="footer">
+
+      </footer>
+    </div>
+-->
+    <%= render :partial => 'layouts/analytics' %>
 
-</body>
+  </body>
 </html>

app/views/layouts/plain.html.erb

@@ -1,56 +1,74 @@
 <!DOCTYPE html>
 <html lang="no">
 
-<head>
+  <head>
     <meta charset="utf-8" />
 
-	<title>
-  	  <%= content_for?(:title) ? yield(:title) : "Smidig 2012: 05. - 06. november på Radisson SAS Plaza Hotel Oslo" %>
+    <title>
+      <%= content_for?(:title) ? yield(:title) : "Smidig 2012: 05. - 06. november på Radisson SAS Plaza Hotel Oslo" %>
     </title>
 
+    <!--[if lte IE 9]>
+      <link rel="stylesheet" href="<%= stylesheet_link_tag 'ie_1140' %>" type="text/css" media="screen" />
+    <![endif]-->
+
+    <%= stylesheet_link_tag '1140' %>
     <%= stylesheet_link_tag 'screen', :media => "screen,projection,tv" %>
     <%= stylesheet_link_tag 'fonts' %>
-    <%= stylesheet_link_tag 'menu' %>
-    <%= stylesheet_link_tag 'tooltip' %>
-    <%= stylesheet_link_tag 'style2012' %>
-
-
+
+    <%= javascript_include_tag 'jquery-1.4.2.min' %>
+    <%= javascript_include_tag 'application' %>
+
+    <%= auto_discovery_link_tag :rss, {:controller => 'talks', :format => :rss}, {:title => "Alle lyntaler"} %>
+    <%= auto_discovery_link_tag :rss, {:controller => 'talks', :topic_id => @topic, :format => :rss}, {:title => "Lyntaler for #{@topic.title}"} if @topic %>
+    <%= auto_discovery_link_tag :rss, {:controller => 'comments', :talk_id => @talk, :format => :rss}, {:title => "Kommentarer for #{@talk.title}"} if @talk %>
+  </head>
 
-  <!-- JavaScript -->
-  <%= javascript_include_tag 'jquery-1.4.2.min' %>
-  <%= javascript_include_tag 'application' %>
-  <%= javascript_include_tag 'jquery.shuffle' %>
+  <body>
 
-  <%= auto_discovery_link_tag :rss, {:controller => 'talks', :format => :rss}, {:title => "Alle lyntaler"} %>
-  <%= auto_discovery_link_tag :rss, {:controller => 'talks', :topic_id => @topic, :format => :rss}, {:title => "Lyntaler for #{@topic.title}"} if @topic %>
-  <%= auto_discovery_link_tag :rss, {:controller => 'comments', :talk_id => @talk, :format => :rss}, {:title => "Kommentarer for #{@talk.title}"} if @talk %>
-</head>
+    <section>
+      <header class="container" id="header">
+        <div class="twelvecol last">
+          <h1><%= link_to "Smidig 2012", root_url %></h1>
+        </div>
+      </header>
 
-<body>
-<% #= render :partial => 'layouts/sponsors' %>
+      <nav class="container" id="nav">
+        <%#= render :partial => 'layouts/menu' %>
+      </nav>
 
-<div id="wrapper">
+      <% unless flash.empty? %>
+        <div class="container" id="notifications">
+          <% if flash[:notice] %>
+            <p class="notice"><%= flash[:notice] %></p>
+          <% end %>
+          <% if flash[:warn] %>
+            <p class="warn"><%= flash[:warn] %></p>
+          <% end %>
+          <% if flash[:error] %>
+            <p class="error"><%= flash[:error] %></p>
+          <% end %>
+        </div>
+      <% end %>
 
-    <div id="main">
-    <%#= render :partial => 'layouts/menu' %>
-        <% unless flash.empty? %>
-          <div id="notifications">
-            <p style="color: green"><%= flash[:notice] %></p>
-            <p style="color: orange"><%= flash[:warn] %></p>
-            <p style="color: red"><%= flash[:error] %></p>
-          </div>
-        <% end %>
-        <%= yield %>
-    
-    </div>
+      <section class="container" id="content">
+        <div class="row">
+          <article class="eightcol">
+            <%= yield %>
+          </article>
+          <aside class="fourcol last" id="aside">
+            <% #= render :partial => 'layouts/sponsors' %>
+          </aside>
+        </div>
+      </section>
 
-</div>
+      <footer id="footer">
+          <!--<div id="socialcluster"><a class="epost" href="mailto:[email protected]">Send oss en epost.</a><a class="facebook" href="http://www.facebook.com/pages/Smidig-konferansen/102562453136427">Besøk oss på Facebook.</a><a class="twitter" href="http://twitter.com/#!/smidig">Følg oss på Twitter.</a><a class="linkedin" href="http://www.linkedin.com/groups?mostPopular=&amp;gid=963587">Besøk vår gruppe på LinkedIn.</a></div>-->
+      </footer>
 
-<div id="footer">
-    <!--<div id="socialcluster"><a class="epost" href="mailto:[email protected]">Send oss en epost.</a><a class="facebook" href="http://www.facebook.com/pages/Smidig-konferansen/102562453136427">Besøk oss på Facebook.</a><a class="twitter" href="http://twitter.com/#!/smidig">Følg oss på Twitter.</a><a class="linkedin" href="http://www.linkedin.com/groups?mostPopular=&amp;gid=963587">Besøk vår gruppe på LinkedIn.</a></div>-->
-</div>
+    </section>
 
-<%= render :partial => 'layouts/analytics' %>
+    <%= render :partial => 'layouts/analytics' %>
 
-</body>
+  </body>
 </html>

app/views/password_resets/new.html.erb

@@ -1,6 +1,5 @@
 <% content_for :title, "Endre ditt passord" %>
 <h2 class="page_title">Endre ditt passord?</h2>
-
 <p>
   For å endre ditt passord, må du angi din epost
   adresse, slik at vi kan sende deg en bekreftelsesmail.
@@ -14,7 +13,7 @@
     <%= text_field_tag :email, @email %>
   </p>
 	<p>
-		<%= submit_tag "Send link for å endre passord" %>
+		<%= submit_tag "Send link for å endre passord", :class => 'button' %>
 	</p>		  
 <% end %>
 

app/views/shared/_error_messages.html.erb

@@ -1,6 +1,8 @@
 <% if target && target.errors.any? %>  
-<div id="errorExplanation">  
-  <h2><%=t("activerecord.errors.template.header", :count => target.errors.count, :model => target.class.model_name.human.downcase )%></h2>  
+<div class="error-explanation">  
+  <h3>
+  	<%=t("activerecord.errors.template.header", :count => target.errors.count, :model => target.class.model_name.human.downcase )%>
+  </h3>
   <ul>  
   <% target.errors.full_messages.each do |msg| %>  
     <li><%= msg %></li>