a little styling

app/assets/stylesheets/atoms/_base.scss

@@ -1,4 +1,16 @@
 body {
   margin: 20px auto;
-  width: 850px;
+  width: calc(100% - 20px);
+}
+
+@media screen and (min-width: 769px) {
+  body { width: 750px; }
+}
+
+@media screen and (min-width: 900px) {
+  body { width: 850px; }
+}
+
+@media screen and (min-width: 1100px) {
+  body { width: 1000px; }
 }

app/assets/stylesheets/molecules/_passwords.scss

@@ -1,5 +1,6 @@
 .passwd {
-  width: 20em;
+  min-width: 12em;
+  font-family: monospace;
 
   a,
   i {

app/assets/stylesheets/organisms/_tables.scss

@@ -1,11 +1,46 @@
 table {
+  // border-collapse: collapse;
+  border-spacing: 0;
   width: 100%;
 }
 
-th {
+th,
+td {
   text-align: left;
+  padding: 10px;
 }
 
-td {
+thead {
-  padding: 5px 0;
+  th {
+    background-color: #888;
+    border: 1px solid #888;
+    color: #f5f5f5;
+  }
+
+  th:first-of-type { border-radius: 5px 0 0 0; }
+  th:last-of-type { border-radius: 0 5px 0 0; }
+}
+
+tbody {
+  tr:nth-of-type(odd) {
+    td {
+      background-color: #f5f5f5;
+    }
+  }
+
+  td:first-of-type { border-left: 1px solid #888;}
+  td:last-of-type { border-right: 1px solid #888;}
+  tr:last-of-type {
+    td {
+      border-bottom: 1px solid #888;
+
+      &:first-of-type {
+        border-radius: 0 0 0 5px;
+      }
+
+      &:last-of-type {
+        border-radius: 0 0 5px 0;
+      }
+    }
+  }
 }

app/views/accounts/_form.html.erb

@@ -18,7 +18,7 @@
 
   <div class="field" data-id="genpass">
     <%= f.label :password %>
-    <%= f.text_field :password %>
+    <%= f.text_field :password, class: "passwd" %>
     <%= link_to 'Generate', genpass_url, remote: true %>
   </div>
 

app/views/accounts/index.html.erb

@@ -28,7 +28,11 @@
           <% end %>
           <span>********</span>
         </td>
-        <td><%= account.contact_email %></td>
+        <td>
+          <a href="mailto: <%= account.contact_email %>">
+            <%= account.contact_email %>
+          </a>
+        </td>
         <td><%= link_to 'Show', account %></td>
         <td><%= link_to 'Edit', edit_account_path(account) %></td>
       </tr>