🎁 Splash page styling and layout

app/assets/stylesheets/hyku.scss

@@ -44,45 +44,6 @@
     }
 }
 
-#banner.jumbotron {
-    background: image_url("white-cloud-background.jpg") no-repeat;
-    background-position: center;
-    height: 220px;
-    background-color: $gray-lighter;
-    border: 0;
-    font-family: $primary-font-family;
-    margin-bottom: 0;
-    text-align: center;
-
-    h1 {
-        color: $jumbotron-heading-color;
-        font-size: $jumbotron-heading-font-size;
-        font-weight: 700;
-        letter-spacing: 0.075em;
-        text-transform: uppercase;
-    }
-
-    p {
-        color: $jumbotron-sub-heading-color;
-        font-size: 1.6em;
-        margin-bottom: 20px;
-    }
-
-    // TODO: Do we need this style or could we fallback on btn-primary
-    .btn-sign-up {
-        @include button-variant(
-            $classic-white,
-            $jumbotron-button-background-color,
-            $jumbotron-button-background-color
-        );
-        border-radius: 3px;
-        font-size: 0.7em;
-        margin-top: 15px;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-}
-
 // active hightlight on sort/per page on catalog page
 .dropdown-item:active,
 .dropdown-item.active {
@@ -127,35 +88,6 @@ footer.navbar {
     }
 }
 
-.product-features {
-    background: $features-section-background-color;
-    border-top: 1px solid $features-section-border-color;
-    font-family: $primary-font-family;
-    padding: 20px 0 50px;
-
-    .grid-row {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .grid-item {
-        padding-left: 40px;
-        padding-right: 40px;
-        text-align: center;
-        width: 33.33%;
-    }
-
-    .heading {
-        color: $gray;
-        font-size: 1.4em;
-    }
-
-    p {
-        font-size: 1em;
-        line-height: 1.5em;
-    }
-}
-
 .graph-container {
     height: 300px; // height must be specified or flot.js raises an error.
     width: 60%; // height must be specified or flot.js raises an error.
@@ -425,26 +357,13 @@ a.btn.btn-secondary.restore-default-color.with-color-hint {
 }
 
 @media (max-width: 992px) {
-    .product-features {
-        .grid-item {
-            width: 50%;
-        }
-    }
 
     // makes hamburger menu visible for mobile
     .navbar-toggler-icon {
         display: inline-block !important;
     }
 }
 
-@media (max-width: 768px) {
-    .product-features {
-        .grid-item {
-            width: 100%;
-        }
-    }
-}
-
 // make sure that URLs and titles don't go outside the container on all work-show pages
 .work-show ul.tabular li {
     overflow-wrap: anywhere;

app/assets/stylesheets/hyku/splash.scss

@@ -0,0 +1,80 @@
+// Splash Landing Page Styles
+
+body.splash.splash-index.public-facing {
+  /// --- Container Layout (Homepage Only) --- ///
+  #content-wrapper.container {
+    margin: 3rem auto;
+
+    .splash-logo {
+      max-width: 200px;
+    }
+
+    #banner.jumbotron {
+      background: image_url("white-cloud-background.jpg") no-repeat;
+      background-position: center;
+      margin-bottom: 0;
+      text-align: center;
+      border-radius: 0.3rem 0.3rem 0 0 !important; // override bootstrap default
+      position: relative; // ensure the button is centered horizontally between the jumbotron and the product-features section
+      padding-bottom: 45px;
+
+      h1 {
+        color: $jumbotron-heading-color;
+        font-size: $jumbotron-heading-font-size;
+        font-weight: 700;
+        letter-spacing: 0.075em;
+        text-transform: uppercase;
+      }
+
+      p {
+        color: $jumbotron-sub-heading-color;
+        font-size: 1.6em;
+        margin-bottom: 20px;
+      }
+
+      .button-wrapper {
+        // ensure the button is centered horizontally between the jumbotron and the product-features section
+        position: absolute;
+        left: 0;
+        right: 0;
+        transform: translateY(50%);
+      }
+
+      .btn-sign-up {
+        // bootstrap mixin
+        @include button-variant(
+          // background color
+          $classic-white,
+          // border color
+          $jumbotron-button-background-color,
+          // hover background color
+          $jumbotron-button-background-color
+        );
+        border-radius: 3px;
+        font-size: 0.7em;
+        // margin-top: 15px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
+    .product-features {
+      background: $features-section-background-color;
+      border-radius: 0 0 0.3rem 0.3rem;
+      border-top: 1px solid $features-section-border-color;
+      padding: 50px 20px;
+
+      .heading {
+        color: $gray;
+        font-size: 1.4em;
+        text-align: center;
+      }
+
+      p {
+        font-size: 1em;
+        line-height: 1.5em;
+        padding: 0 20px;
+      }
+    }
+  }
+}

app/assets/stylesheets/hyrax.scss

@@ -3,7 +3,7 @@
  *= require select2
  *= require_self
 */
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat&display=swap");
 @import "variables";
 @import "bootstrap-default-overrides";
 @import "bootstrap";
@@ -20,6 +20,7 @@
 @import "viewer";
 
 @import "themes/*";
+@import "hyku/*";
 
 // for catalog search result snippets
 .highlight {
@@ -48,4 +49,3 @@
 a {
   overflow-wrap: anywhere;
 }
-

app/views/splash/index.html.erb

@@ -2,9 +2,11 @@
 <% content_for(:container_class) { 'row' } %>
 <section id="banner" class="jumbotron">
   <div class="container">
-    <h1><%= application_name %></h1>
+    <h1>
+      <img src="<%= image_path('logo-hyku.png') %>" alt="<%= application_name %>" class="splash-logo" />
+    </h1>
     <p><%= t('application.tagline') %></p>
-    <p>
+    <p class="button-wrapper">
       <% if !admin_only_tenant_creation? || can?(:manage, Account) %>
         <%= link_to t('hyku.splash.account_signup'), account_sign_up_path, class: 'btn btn-lg btn-sign-up' %>
       <% elsif !user_signed_in? %>