Properly style flashes; add sections.

app/assets/stylesheets/_header.css

@@ -1,3 +1,5 @@
+/* -------------------------------- Header --------------------------------- */
+
 header {
     display: table;
     width: 100%;
@@ -46,6 +48,19 @@ header nav li:not(:first-child) {
     padding-left: 1em;
 }
 
+/* --------------------------------- Flash --------------------------------- */
+
 div.flash {
-    /**/
+    margin: 1em 0;
+    padding: 0.5em;
+}
+
+div.flash.alert {
+    background-color: #FFEEEE;
+    border: 1px solid #FFCCCC;
+}
+
+div.flash.notice {
+    background-color: #FFFDDD;
+    border: 1px solid #EEEE00;
 }

app/views/admin/index.html.erb

@@ -2,16 +2,27 @@
 
 <h1>Admin Settings</h1>
 
-<%= form_tag do %>
-  <table>
-    <% Calefaction::Settings::SETTINGS.each do |s| %>
+<section id="general">
+  <h2>General</h2>
+  <%= form_tag do %>
+    <table>
+      <% Calefaction::Settings::SETTINGS.each do |s| %>
+        <tr>
+          <td><%= label_tag("settings[#{s[:key]}]", s[:label]) %></td>
+          <td><%= setting_tag s %></td>
+        </tr>
+      <% end %>
       <tr>
-        <td><%= label_tag("settings[#{s[:key]}]", s[:label]) %></td>
-        <td><%= setting_tag s %></td>
+        <td colspan="2"><%= submit_tag('Update') %></td>
       </tr>
-    <% end %>
-    <tr>
-      <td colspan="2"><%= submit_tag('Update') %></td>
-    </tr>
-  </table>
-<% end %>
+    </table>
+  <% end %>
+</section>
+
+<section id="tools">
+  <h2>Tools</h2>
+</section>
+
+<section id="users">
+  <h2>Users</h2>
+</section>

app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title><%= get_title(yield(:title)) %></title>
     <%= stylesheet_link_tag    'application', media: 'all' %>

app/views/shared/_header.html.erb

@@ -13,6 +13,6 @@
     </ul>
   </nav>
 </header>
-<% flash.each do |name, msg| %>
-  <div class="flash"><%= name %>: <%= msg %></div>
+<% flash.each do |type, message| %>
+  <div class="flash <%= type %>"><%= message %></div>
 <% end %>