First pass styling improvements

app/assets/stylesheets/colors.css

@@ -1,4 +1,10 @@
 :root {
+  --background-color: #111;
+  --main-background-color:
+  --header-color: #15345b;
+  --header-text-color: #fff;
+  --header-height: 150px;
+
   --inset-bg-color: #eee;
 
   --border-radius: .5em;

app/assets/stylesheets/layout.css

@@ -4,14 +4,18 @@
 
 body {
   font-size: 1.1em;
-  margin: 0 auto;
+  background-color: var(--background-color);
-  max-width: 80em;
+  min-width: 30em;
-  padding: 1em;
 }
 
 main {
+  background: linear-gradient(180deg, rgba(227,220,190,1) 0%, rgba(255,248,238,1) 100%);
+  max-width: 80vw;
   display: flex;
   flex-direction: column;
+  padding: 1em;
+  margin: 0 auto;
+  min-height: calc(100vh - var(--header-height));
 }
 
 aside.flash {
@@ -38,6 +42,35 @@ h1, h2 {
   text-align: center;
 }
 
+header {
+  background: linear-gradient(180deg, rgba(34,45,113,1) 0%, rgba(22,90,157,1) 100%);
+  position: relative;
+  padding: 0 50px;
+  margin-right: 2em;
+  height: var(--header-height);
+}
+
+/* Angled banner end */
+header:before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: calc(var(--header-height) / 2) solid transparent;
+  border-bottom: calc(var(--header-height) / 2) solid transparent;
+  border-right: calc(var(--header-height) / 2) solid var(--background-color);
+  position: absolute;
+  right:0;
+}
+
+header h1 {
+  padding: .5em 0;
+}
+
+header h1 a:link, header h1 a:visited {
+  color: var(--header-text-color);
+  text-decoration: none;
+}
+
 header nav {
   ul {
     display: flex;

app/controllers/tables_controller.rb

@@ -4,7 +4,7 @@ class TablesController < ApplicationController
   before_action :set_table, only: [ :show, :edit, :update, :destroy ]
 
   def index
-    @owned_tables = Current.user.owned_tables
+    @tables = Current.user.tables
   end
 
   def show

app/views/layouts/application.html.erb

@@ -31,8 +31,8 @@
         </ul>
       </nav>
     </header>
-    <%= render partial: "shared/flash_messages" %>
     <main>
+      <%= render partial: "shared/flash_messages" %>
       <%= yield(:submenu) if content_for?(:submenu) %>
       <%= yield %>
     </main>

app/views/tables/_table.html.erb

@@ -2,4 +2,7 @@
 
 <div id="<%= dom_id(table) %>" class="table">
   <h4><%= link_to table.name, table %></h4>
+  <% if table.owner == Current.user %>
+    OWNER
+  <% end %>
 </div>

app/views/tables/index.html.erb

@@ -1,10 +1,11 @@
 <% content_for :title, t(".tables") %>
 
+<h2><%= t(".tables") %></h2>
+
 <%= link_to t(".new_table"), new_table_path %>
 
-<h2>Tables you own</h2>
+<% if @tables.any? %>
-<% if @owned_tables.any? %>
+  <%= render @tables %>
-  <%= render @owned_tables %>
 <% else %>
-  <p>You do not own any tables.</p>
+  <p><%= t(".no_tables") %></p>
 <% end %>

config/locales/en.yml

@@ -99,6 +99,7 @@ en:
     index:
       new_table: Create a table
       tables: Tables
+      no_tables: You are currently not at any tables. Why not create one?
     show:
       edit_table: Edit table
       game_system: Game system