diff options
| author | David Gay <david@davidgay.org> | 2021-04-25 12:56:01 -0400 |
|---|---|---|
| committer | David Gay <david@davidgay.org> | 2021-04-25 12:56:01 -0400 |
| commit | 10f7bb7deb784be697aaff629d10b61d9cfe739d (patch) | |
| tree | d8c9ff4bac70c6cacfd43626ce6378ee4081ec3a | |
| parent | 3886a5325d029e552501cff32a22769ef1888a06 (diff) | |
Have content area fill entire screen, with sticky footer
| -rw-r--r-- | app/javascript/stylesheets/core.css | 7 | ||||
| -rw-r--r-- | app/views/application/_header.html.erb | 2 | ||||
| -rw-r--r-- | app/views/layouts/application.html.erb | 13 |
3 files changed, 8 insertions, 14 deletions
diff --git a/app/javascript/stylesheets/core.css b/app/javascript/stylesheets/core.css index 1334269..600635f 100644 --- a/app/javascript/stylesheets/core.css +++ b/app/javascript/stylesheets/core.css @@ -6,13 +6,6 @@ @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; } diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index b2b2cf8..2a8e698 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -1,4 +1,4 @@ -<header class="flex items-center justify-between px-4 py-1 bg-gray-800 text-display"> +<header class="flex flex-shrink 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> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1f70197..3fe6f28 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,11 +11,12 @@ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> - <body class="text-base text-gray-400 bg-gray-800"> - <div> + <body class="flex flex-col min-h-screen text-base text-gray-400 bg-gray-800"> <%= 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"> + + <div class="main-wrapper flex-1 bg-gray-900 rounded flex-grow"> + <div class="game-container mx-auto p-2 grid gap-2 grid-cols-12 px-2" + style="max-width: 1800px;"> <% if user_signed_in? %> <%= render "navbar" %> <% end %> @@ -37,9 +38,9 @@ <% end %> </div> </div> - <div class="bg-gray-800 p-2 text-display text-center text-xs text-gray-400"> + + <div class="flex-shrink bg-gray-800 p-2 text-display text-center text-xs text-gray-400"> Esoterra © 2020-2021 </div> - </div> </body> </html> |