From 5ec065d9cd1814e1ab970e6f242bd7f097b3c157 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 22 Aug 2024 15:49:52 -0500
Subject: [PATCH] fix: improve home, login page styles for large logo image

---
 src/wuttaweb/templates/auth/login.mako | 27 ++++++++++++++++++++++++--
 src/wuttaweb/templates/base.mako       |  4 ++++
 src/wuttaweb/templates/home.mako       | 27 ++++++++++++++++++++++++--
 src/wuttaweb/templates/page.mako       |  2 +-
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/src/wuttaweb/templates/auth/login.mako b/src/wuttaweb/templates/auth/login.mako
index 278992b..7c1d846 100644
--- a/src/wuttaweb/templates/auth/login.mako
+++ b/src/wuttaweb/templates/auth/login.mako
@@ -4,9 +4,32 @@
 
 <%def name="title()">Login</%def>
 
+<%def name="extra_styles()">
+  ${parent.extra_styles()}
+  <style>
+    .wutta-page-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+    }
+    .wutta-logo {
+        margin-top: 2rem;
+        display: flex;
+        justify-content: center;
+    }
+    .wutta-logo img {
+        max-height: 350px;
+        max-width: 800px;
+    }
+  </style>
+</%def>
+
 <%def name="page_content()">
-  <div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
-    <div>${base_meta.full_logo(image_url or None)}</div>
+  <div class="wutta-page-content">
+    <div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
     <div class="card">
       <div class="card-content">
         ${form.render_vue_tag()}
diff --git a/src/wuttaweb/templates/base.mako b/src/wuttaweb/templates/base.mako
index 6c57c46..c8557ca 100644
--- a/src/wuttaweb/templates/base.mako
+++ b/src/wuttaweb/templates/base.mako
@@ -151,6 +151,10 @@
         white-space: nowrap;
     }
 
+    .wutta-page-content-wrapper {
+        height: 100%;
+    }
+
     ##############################
     ## grids
     ##############################
diff --git a/src/wuttaweb/templates/home.mako b/src/wuttaweb/templates/home.mako
index 0af63ef..e387227 100644
--- a/src/wuttaweb/templates/home.mako
+++ b/src/wuttaweb/templates/home.mako
@@ -4,9 +4,32 @@
 
 <%def name="title()">Home</%def>
 
+<%def name="extra_styles()">
+  ${parent.extra_styles()}
+  <style>
+    .wutta-page-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+    }
+    .wutta-logo {
+        margin-top: 2rem;
+        display: flex;
+        justify-content: center;
+    }
+    .wutta-logo img {
+        max-height: 350px;
+        max-width: 800px;
+    }
+  </style>
+</%def>
+
 <%def name="page_content()">
-  <div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
-    <div>${base_meta.full_logo(image_url or None)}</div>
+  <div class="wutta-page-content">
+    <div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
     <h1 class="is-size-1">Welcome to ${app.get_title()}</h1>
   </div>
 </%def>
diff --git a/src/wuttaweb/templates/page.mako b/src/wuttaweb/templates/page.mako
index 840e918..218e9f4 100644
--- a/src/wuttaweb/templates/page.mako
+++ b/src/wuttaweb/templates/page.mako
@@ -11,7 +11,7 @@
 
 <%def name="render_vue_template_this_page()">
   <script type="text/x-template" id="this-page-template">
-    <div style="height: 100%;">
+    <div class="wutta-page-content-wrapper">
       ${self.page_content()}
     </div>
   </script>