Layout and styles

4 files changed, 100 insertions, 0 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;
+}