From 3886a5325d029e552501cff32a22769ef1888a06 Mon Sep 17 00:00:00 2001 From: David Gay Date: Sun, 25 Apr 2021 12:44:03 -0400 Subject: Layout and styles --- app/javascript/stylesheets/application.css | 4 +++ app/javascript/stylesheets/core.css | 33 +++++++++++++++++++++ app/javascript/stylesheets/overrides.css | 46 ++++++++++++++++++++++++++++++ app/javascript/stylesheets/typography.css | 17 +++++++++++ 4 files changed, 100 insertions(+) create mode 100644 app/javascript/stylesheets/core.css create mode 100644 app/javascript/stylesheets/overrides.css create mode 100644 app/javascript/stylesheets/typography.css (limited to 'app/javascript') 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; +} -- cgit v1.2.3