changed jumbotron back to gradient

PEDSnet · Jun 13, 2024 · 427056f · 427056f
1 parent 5c21143
commit 427056f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/src/themes/dspace-simple/app/home-page/home-news/home-news.component.html b/src/themes/dspace-simple/app/home-page/home-news/home-news.component.html
@@ -6,7 +6,7 @@
     <!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
   </picture>
   <div class="container">
-    <div class="jumbotron jumbotron-fluid text-white shadow-lg p-5">
+    <div class="jumbotron jumbotron-fluid">
       <div>
         <h1 class="display-3">PEDSnet Variable Dictionary</h1>
         <p class="lead">Explore a wealth of clinical, environmental, and health data from over 13 million children. Discover variables and codesets used in previous studies to inspire your research.</p>

diff --git a/src/themes/dspace-simple/app/home-page/home-news/home-news.component.scss b/src/themes/dspace-simple/app/home-page/home-news/home-news.component.scss
@@ -2,7 +2,7 @@
   display: block;
 
   div.background-image-container {
-    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
     position: relative;
 
     .background-image > img {
@@ -17,31 +17,33 @@
       object-position: bottom;
     }
 
-    // .container {
-    //   position: relative;
-    //   text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    .container {
+      position: relative;
+      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
 
-    //   &:before, &:after {
-    //     content: '';
-    //     display: block;
-    //     width: var(--ds-banner-background-gradient-width);
-    //     height: 100%;
-    //     top: 0;
-    //     position: absolute;
-    //   }
+      &:before, &:after {
+        content: '';
+        display: block;
+        width: var(--ds-banner-background-gradient-width);
+        height: 100%;
+        top: 0;
+        position: absolute;
+      }
+
+      &:before {
+        background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
+        left: calc(-1 * var(--ds-banner-background-gradient-width));
+
+      }
 
-    //   &:before {
-    //     background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
-    //     left: calc(-1 * var(--ds-banner-background-gradient-width));
-    //   }
+      &:after {
+        background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
+        right: calc(-1 * var(--ds-banner-background-gradient-width));
+      }
 
-    //   &:after {
-    //     background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
-    //     right: calc(-1 * var(--ds-banner-background-gradient-width));
-    //   }
+      background-color: var(--ds-banner-text-background);
+    }
 
-    //   background-color: rgba(0, 0, 0, 0.6);
-    // }
 
     small.credits {
       a {
@@ -56,19 +58,7 @@
   }
 
   .jumbotron {
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
-  }
-
-  .btn-subtle {
-    color: #ffffff;
-    background-color: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-  }
-
-  .btn-subtle:hover, .btn-subtle:focus {
-    background-color: rgba(255, 255, 255, 0.3);
-    border-color: rgba(255, 255, 255, 0.5);
+    background-color: transparent;
   }
 
   a {
@@ -79,3 +69,24 @@
     }
   }
 }
+
+
+  // .btn-subtle {
+  //   color: #ffffff;
+  //   background-color: rgba(255, 255, 255, 0.2);
+  //   border: 1px solid rgba(255, 255, 255, 0.3);
+  // }
+
+  // .btn-subtle:hover, .btn-subtle:focus {
+  //   background-color: rgba(255, 255, 255, 0.3);
+  //   border-color: rgba(255, 255, 255, 0.5);
+  // }
+
+  // a {
+  //   color: var(--ds-home-news-link-color);
+
+    // @include hover {
+    //   color: var(--ds-home-news-link-hover-color);
+//     }
+//   }
+// }