diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 4f62461..b27d740 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,6 +1,11 @@
-
Welcome to the SMARTER database
+
Welcome to the SMARTER Database
+
+ The SMARTER database is a collection of data from small ruminant research projects.
+ The data is open and available to the community. See our
+ about page for more information.
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 7c9fabe..85a6d03 100644
--- a/src/app/home/home.component.scss
+++ b/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;
+}
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
index bb6a041..3e142f7 100644
--- a/src/app/home/home.component.spec.ts
+++ b/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');
});
});
diff --git a/src/styles.scss b/src/styles.scss
index a3db279..47a734e 100644
--- a/src/styles.scss
+++ b/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);