💄 work on home page

src/app/home/home.component.html

@@ -1,6 +1,11 @@
 <div class="home" fxLayout="column" fxLayoutAlign="center center">
   <div fxFlex="50%" fxFlexAlign="center">
     <img class="responsive" src="assets/Sm_compl_3.png" alt="SMAll Ruminants breeding for Efficiency and Resilience">
-    <h1 class="mat-display-1">Welcome to the SMARTER database</h1>
+    <h1>Welcome to the SMARTER Database</h1>
+    <p>
+      The SMARTER database is a collection of data from small ruminant research projects.<br>
+      The data is open and available to the community. See our
+      <a routerLink="/about">about</a> page for more information.
+    </p>
   </div>
 </div>

src/app/home/home.component.scss

@@ -8,3 +8,15 @@
   width: 85%;
   height: auto;
 }
+
+h1 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin: 1rem;
+}
+
+p {
+  text-align: center;
+  margin: 1rem;
+  padding-top: 1rem;
+}

src/app/home/home.component.spec.ts

@@ -27,6 +27,6 @@ describe('HomeComponent', () => {
     const fixture = TestBed.createComponent(HomeComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to the SMARTER database');
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to the SMARTER Database');
   });
 });

src/styles.scss

@@ -10,6 +10,18 @@ $my-accent: mat.define-palette(mat.$orange-palette, A200, A100, A400);
 // The "warn" palette is optional and defaults to red if not specified.
 $my-warn: mat.define-palette(mat.$red-palette);
 
+// define the light theme
+$my-theme: mat.define-light-theme((
+  color: (
+    primary: $my-primary,
+    accent: $my-accent,
+    warn: $my-warn,
+  )
+));
+
+// includes styles for all components in the library
+@include mat.all-component-themes($my-theme);
+
 // A mixin to deal with mat-row hover
 // https://github.com/angular/components/issues/8204
 @mixin mat-table-hover($is-dark) {
@@ -27,18 +39,6 @@ $my-warn: mat.define-palette(mat.$red-palette);
   }
 }
 
-// define the light theme
-$my-theme: mat.define-light-theme((
-  color: (
-    primary: $my-primary,
-    accent: $my-accent,
-    warn: $my-warn,
-  )
-));
-
-// includes styles for all components in the library
-@include mat.all-component-themes($my-theme);
-
 // include custom mixins
 @include mat-table-hover(false);