style home-page-news

src/themes/dspace/app/+home-page/home-news/home-news.component.html

@@ -0,0 +1,26 @@
+<div class="background-image">
+  <div class="container">
+    <div class="jumbotron jumbotron-fluid">
+      <div class="d-flex flex-wrap">
+        <div>
+          <h1 class="display-3">DSpace 7</h1>
+          <p class="lead">DSpace is the world leading open source repository platform that enables
+            organisations to:</p>
+        </div>
+      </div>
+      <ul>
+        <li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core
+          metadata
+        </li>
+        <li>open up this content to local and global audiences, thanks to the OAI-PMH interface and
+          Google Scholar optimizations
+        </li>
+        <li>issue permanent urls and trustworthy identifiers, including optional integrations with
+          handle.net and DataCite DOI
+        </li>
+      </ul>
+      <p>Join an international community of <a href="https://wiki.duraspace.org/display/DSPACE/DSpace+Positioning" target="_blank">leading institutions using DSpace</a>.</p>
+    </div>
+  </div>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+</div>

src/themes/dspace/app/+home-page/home-news/home-news.component.scss

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  margin-top: calc(var(--ds-content-spacing) * -1);
+
+  div.background-image {
+    color: white;
+    background-color: var(--bs-info);
+    position: relative;
+    background-position-y: -200px;
+    background-image: url('/assets/dspace/images/banner.jpg');
+    background-size: cover;
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+      background-position-y: 0;
+    }
+
+    .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 {
+        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));
+      }
+
+      background-color: var(--ds-banner-text-background);
+    }
+
+
+    small.credits {
+      a {
+        color: inherit;
+      }
+
+      opacity: 0.3;
+      position: absolute;
+      right: var(--bs-spacer);
+      bottom: 0;
+    }
+  }
+
+  .jumbotron {
+    background-color: transparent;
+  }
+
+  a {
+    color: var(--ds-home-news-link-color);
+
+    @include hover {
+      color: var(--ds-home-news-link-hover-color);
+    }
+  }
+}
+
+

src/themes/dspace/app/+home-page/home-news/home-news.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { HomeNewsComponent as BaseComponent } from '../../../../../app/+home-page/home-news/home-news.component';
+
+@Component({
+  selector: 'ds-home-news',
+  styleUrls: ['./home-news.component.scss'],
+  templateUrl: './home-news.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class HomeNewsComponent extends BaseComponent {}
+

src/themes/dspace/theme.module.ts

@@ -29,6 +29,7 @@ import { StatisticsModule } from '../../app/statistics/statistics.module';
 import { StoreModule } from '@ngrx/store';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { TranslateModule } from '@ngx-translate/core';
+import { HomeNewsComponent } from './app/+home-page/home-news/home-news.component';
 import { HomePageModule } from '../../app/+home-page/home-page.module';
 import { AppModule } from '../../app/app.module';
 import { ItemPageModule } from '../../app/+item-page/item-page.module';
@@ -43,6 +44,7 @@ import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.mod
 import { NavbarComponent } from './app/navbar/navbar.component';
 
 const DECLARATIONS = [
+  HomeNewsComponent,
   NavbarComponent
 ];