9 files changed, 184 insertions, 3 deletions
diff --git a/app/javascript/stylesheets/application.css b/app/javascript/stylesheets/application.css
index 229e18d..52559dc 100644
--- a/app/javascript/stylesheets/application.css
+++ b/app/javascript/stylesheets/application.css
@@ -3,4 +3,8 @@
 
 /* Other imports go here. */
 
+@import "overrides.css";
+@import "core.css";
+@import "typography.css";
+
 @import "tailwindcss/utilities";
diff --git a/app/javascript/stylesheets/core.css b/app/javascript/stylesheets/core.css
new file mode 100644
index 0000000..1334269
--- /dev/null
+++ b/app/javascript/stylesheets/core.css
@@ -0,0 +1,33 @@
+.table-header-padded {
+  @apply px-2 py-1;
+}
+
+.table-cell-padded {
+  @apply border px-2 py-1;
+}
+
+.main-wrapper {
+}
+
+.game-container {
+  max-width: 1800px;
+}
+
+.game-container-box {
+  @apply p-2 border-2 border-gray-800 rounded;
+}
+
+.header-title {
+  font-family: "Montaga", "Open Sans", sans-serif;
+}
+
+.side-box {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 8px;
+}
+
+#look_output {
+  @apply min-w-full my-2 overflow-auto border-2 border-gray-800 rounded;
+  height: 75px;
+}
diff --git a/app/javascript/stylesheets/overrides.css b/app/javascript/stylesheets/overrides.css
new file mode 100644
index 0000000..1b5d5de
--- /dev/null
+++ b/app/javascript/stylesheets/overrides.css
@@ -0,0 +1,46 @@
+a {
+  @apply underline transition duration-100;
+}
+a:hover {
+  @apply text-gray-500 transition duration-100;
+}
+
+table, td, th {
+  @apply border-gray-800;
+}
+
+label {
+  @apply text-gray-500 text-sm mb-2;
+}
+
+input {
+  @apply bg-gray-800 border border-black p-1;
+}
+input:focus {
+  @apply outline-none border border-gray-700;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+  @apply py-1 px-2 cursor-pointer transition duration-100;
+}
+button:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover {
+  @apply bg-gray-700 transition duration-100;
+}
+
+button:focus, [type="button"]:focus, [type="reset"]:focus, [type="submit"]:focus {
+  @apply shadow outline-none;
+}
+
+select {
+  @apply bg-gray-800 border border-black p-1;
+}
+select:focus {
+  @apply outline-none border border-gray-700;
+}
+
+textarea {
+  @apply bg-gray-800 border border-black p-1;
+}
+textarea:focus {
+  @apply outline-none border border-gray-700;
+}
diff --git a/app/javascript/stylesheets/typography.css b/app/javascript/stylesheets/typography.css
new file mode 100644
index 0000000..7bb10ea
--- /dev/null
+++ b/app/javascript/stylesheets/typography.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Montaga&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+.text-display {
+  font-family: "Montaga", "Open Sans", sans-serif;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply text-display;
+}
+
+.text-glow {
+  text-shadow: 0 0 4px;
+}
diff --git a/app/views/application/_chat.html.erb b/app/views/application/_chat.html.erb
new file mode 100644
index 0000000..868986b
--- /dev/null
+++ b/app/views/application/_chat.html.erb
@@ -0,0 +1,8 @@
+<div class="flex flex-col h-full text-sm">
+  <div id="chat_output" class="overflow-auto flex-grow">
+    Chat output will go here.
+  </div>
+  <div class="flex-none">
+    Chat input will go here.
+  </div>
+</div>
diff --git a/app/views/application/_game_info.html.erb b/app/views/application/_game_info.html.erb
new file mode 100644
index 0000000..fdbdd1b
--- /dev/null
+++ b/app/views/application/_game_info.html.erb
@@ -0,0 +1,3 @@
+<div>
+  Game info will go here.
+</div>
diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb
new file mode 100644
index 0000000..b2b2cf8
--- /dev/null
+++ b/app/views/application/_header.html.erb
@@ -0,0 +1,25 @@
+<header class="flex items-center justify-between px-4 py-1 bg-gray-800 text-display">
+  <div class="header-title text-2xl">
+    <%= link_to "Esoterra", home_index_path, class: "no-underline" %>
+  </div>
+  <div id="header_center" data-turbolinks-permanent>
+  </div>
+  <div>
+    <ul class="flex flex-row-reverse text-sm">
+      <% if user_signed_in? %>
+        <li class="mr-3">
+          <%= link_to "Logout", logout_path %>
+        </li>
+      <% else %>
+        <li class="mr-3">
+          <%= link_to "Login", login_path %>
+        </li>
+      <% end %>
+      <% if user_signed_in? %>
+        <li class="mr-3">
+          <%= link_to "Characters", "#" %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</header>
diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb
new file mode 100644
index 0000000..5d3a2cb
--- /dev/null
+++ b/app/views/application/_navbar.html.erb
@@ -0,0 +1,16 @@
+<ul class="py-2 px-2 col-span-12 text-display">
+  <% if user_signed_in? %> <%# Will replace this with `current_character` or equivalent, eventually %>
+    <li class="mr-6 inline">
+      LinkA
+    </li>
+    <li class="mr-6 inline">
+      LinkB
+    </li>
+    <li class="mr-6 inline">
+      LinkC
+    </li>
+    <li class="mr-6 inline">
+      LinkD
+    </li>
+  <% end %>
+</ul>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e7f5226..1f70197 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Esoterra</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="turbolinks-cache-control" content="no-cache">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -10,7 +11,35 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body>
-    <%= yield %>
+  <body class="text-base text-gray-400 bg-gray-800">
+  <div>
+    <%= render "header" %>
+    <div class="main-wrapper bg-gray-900 rounded">
+      <div class="game-container mx-auto p-2 grid gap-2 grid-cols-12 px-2">
+        <% if user_signed_in? %>
+          <%= render "navbar" %>
+        <% end %>
+        <div id="world_box" class="game-container-box col-span-12 sm:col-span-8">
+          <p><%= notice %></p>
+          <p><%= alert %></p>
+          <%= yield %>
+        </div>
+        <% if user_signed_in? %>
+          <div id="chat_box" class="game-container-box side-box col-span-12 sm:col-span-4"
+               data-turbolinks-permanent>
+            <%= render "chat" %>
+          </div>
+        <% else %>
+          <div id="game_info_box" class="game-container-box side-box col-span-12 sm:col-span-4"
+               data-turbolinks-permanent>
+            <%= render "game_info" %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div class="bg-gray-800 p-2 text-display text-center text-xs text-gray-400">
+      Esoterra &copy; 2020-2021
+    </div>
+  </div>
   </body>
 </html>