add action button at the bottom

add font size and family variables

app/db/src/app/app.component.ts

@@ -12,10 +12,16 @@ import { MatSidenav } from '@angular/material/sidenav';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements AfterViewInit {
-  public savedPages$ = this.appService.select((state) => state.savedPages);
+  savedPages$ = this.appService.select((state) => state.savedPages);
-  public mainPages$ = this.appService.select((state) => state.mainPages);
+  mainPages$ = this.appService.select((state) => state.mainPages);
+  fontSize$ = this.appService.select(
+    (state) => state.displaySettings.fontSize + 'pt'
+  );
+  fontFamily$ = this.appService.select(
+    (state) => state.displaySettings.fontFamily
+  );
 
-  public isHandset$: Observable<boolean> = this.breakpointObserver
+  isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
     .pipe(
       map((result) => result.matches),
@@ -30,6 +36,12 @@ export class AppComponent implements AfterViewInit {
     private breakpointObserver: BreakpointObserver
   ) {
     this.appService.getSavedPages();
+    this.fontSize$.subscribe((size) => {
+      document.documentElement.style.setProperty('--font-size', size);
+    });
+    this.fontFamily$.subscribe((family) => {
+      document.documentElement.style.setProperty('--font-family', family);
+    });
   }
 
   ngAfterViewInit(): void {

app/db/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { SearchPage } from './search/components/search-page/search.page';
-import { PassageComponent } from './search/components/passage/passage';
+import { PassageComponent } from './search/components/passage/passage.component';
 
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';

app/db/src/app/search/components/passage/passage.component.html

@@ -0,0 +1,85 @@
+<div class="card-title passage-title">
+  <mat-icon aria-hidden="false" aria-label="Bible Passage Icon"
+    >menu_book</mat-icon
+  >
+  <span *ngIf="ref">{{ ref }}</span>
+  <button
+    mat-icon-button
+    class="card-close-button"
+    aria-label="Remove the passage card from the list"
+    (click)="close($event)"
+  >
+    <mat-icon>cancel</mat-icon>
+  </button>
+</div>
+<div class="card-content" *ngIf="cardItem">
+  <div class="chapter-text" *ngFor="let ch of cardItem.data.cs">
+    <h2 class="paragraph-heading">Chapter {{ ch.ch }}</h2>
+    <ng-container *ngFor="let para of ch.paras">
+      <h3
+        class="paragraph-heading"
+        *ngIf="(showParagraphHeadings$ | async) && hasHeader(para.p)"
+      >
+        {{ para.p.h }}
+      </h3>
+
+      <p [ngClass]="{ 'as-inline': !(showParagraphs$ | async) }">
+        <ng-container *ngFor="let vs of para.vss">
+          <strong class="verse-number" *ngIf="showVerseNumbers$ | async"
+            >{{ vs.v }}.</strong
+          >
+          <ng-container *ngFor="let w of vs.w">
+            <ng-container *ngIf="!isPunct(w.t)"> </ng-container
+            ><a *ngIf="w.s != null" (click)="openStrongs(w.s)">{{ w.t }}</a
+            ><ng-container *ngIf="w.s == null">{{
+              w.t
+            }}</ng-container> </ng-container
+          ><br *ngIf="showVersesOnNewLine$ | async" />
+        </ng-container>
+      </p>
+    </ng-container>
+  </div>
+</div>
+<div class="card-actions">
+  <span class="card-actions-left">
+    <button
+      mat-icon-button
+      aria-label="Remove the passage card from the list"
+      (click)="close($event)"
+    >
+      <mat-icon>cancel</mat-icon>
+    </button>
+  </span>
+  <span class="card-actions-right">
+    <button
+      mat-icon-button
+      aria-label="Go to Previous Chapter"
+      (click)="prev()"
+    >
+      <mat-icon>fast_rewind</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      aria-label="Expand context by 3 verses"
+      (click)="expand()"
+    >
+      <mat-icon>settings_ethernet</mat-icon>
+    </button>
+    <button mat-icon-button aria-label="Go to Next Chapter" (click)="next()">
+      <mat-icon>fast_forward</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="moreMenu"
+      aria-label="Example icon-button with a menu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #moreMenu="matMenu">
+      <button mat-menu-item (click)="copy()">
+        <mat-icon>content_copy</mat-icon>
+        <span>Copy Passage</span>
+      </button>
+    </mat-menu>
+  </span>
+</div>

app/db/src/app/search/components/passage/passage.component.scss

@@ -2,16 +2,19 @@
   background-color: var(--passage-color-primary);
 }
 
-.as-paragraph {
+.card-close-button {
-  display: block;
+  color: var(--passage-color-accent);
-  margin-bottom: 1rem;
+}
+
+.card-actions {
+  color: var(--passage-color-primary);
+}
+
+.as-inline {
+  display: inline;
 }
 
 .paragraph-heading {
   font-family: var(--passage-heading-font-family);
   font-weight: 600;
 }
-
-.card-close-button {
-  color: var(--passage-color-accent);
-}

app/db/src/app/search/components/passage/passage.component.ts

@@ -6,8 +6,8 @@ import { Paragraph } from '../../../models/app-state';
 
 @Component({
   selector: 'app-passage',
-  templateUrl: 'passage.html',
+  templateUrl: 'passage.component.html',
-  styleUrls: ['./passage.scss'],
+  styleUrls: ['./passage.component.scss'],
   preserveWhitespaces: true,
 })
 export class PassageComponent extends CardComponent implements OnInit {
@@ -42,6 +42,8 @@ export class PassageComponent extends CardComponent implements OnInit {
     // cardContextMenu(this.profileService, this._actionSheet, this._pagesSvc, this._alertCtrl, this.cardItem);
   }
 
+  copy() {}
+
   next() {
     const lastVerseForEnd = this.ref.Section.end.book.chapters[
       parseInt(this.ref.Section.end.chapter, 10)

app/db/src/app/search/components/passage/passage.html

@@ -1,41 +0,0 @@
-<div class="card-title passage-title">
-  <mat-icon aria-hidden="false" aria-label="Bible Passage Icon"
-    >menu_book</mat-icon
-  >
-  <span *ngIf="ref">{{ ref }}</span>
-  <button
-    mat-icon
-    class="card-close-button"
-    aria-label="Remove the passage card from the list"
-    (click)="close($event)"
-  >
-    <mat-icon>cancel</mat-icon>
-  </button>
-</div>
-<div class="card-content" *ngIf="cardItem">
-  <div class="passage-text" *ngFor="let ch of cardItem.data.cs">
-    <h2>Chapter {{ ch.ch }}</h2>
-    <ng-template ngFor let-para [ngForOf]="ch.paras">
-      <span [ngClass]="{'as-paragraph': (showParagraphs$ | async)}">
-        <h3
-          class="paragraph-heading"
-          *ngIf="(showParagraphHeadings$ | async) && hasHeader(para.p)"
-        >
-          {{ para.p.h }}
-        </h3>
-        <ng-template ngFor let-vs [ngForOf]="para.vss">
-          <strong class="verse-number" *ngIf="(showVerseNumbers$ | async)"
-            >{{ vs.v }}.</strong
-          >
-          <ng-template ngFor let-w [ngForOf]="vs.w">
-            <ng-template [ngIf]="!isPunct(w.t)"> </ng-template
-            ><a *ngIf="w.s != null" (click)="openStrongs(w.s)">{{ w.t }}</a
-            ><ng-template [ngIf]="w.s == null"
-              >{{ w.t }}</ng-template
-            > </ng-template
-          ><br *ngIf="(showVersesOnNewLine$ | async)" />
-        </ng-template>
-      </span>
-    </ng-template>
-  </div>
-</div>

app/db/src/app/search/components/search-page/search.page.html

@@ -23,10 +23,9 @@
     </mat-autocomplete>
   </div>
 </mat-toolbar>
-
+<div class="search-content">
-<ng-template [ngIf]="(cards$ | async).length > 0" [ngIfElse]="nocards">
+  <ng-template [ngIf]="(cards$ | async).length > 0" [ngIfElse]="nocards">
-  <div *ngFor="let item of cards$ | async">
+    <mat-card *ngFor="let item of cards$ | async">
-    <mat-card>
       <app-passage
         *ngIf="isPassage(item)"
         [cardItem]="item"
@@ -34,8 +33,8 @@
         (onItemClicked)="getItemsNextToCard($event)"
       ></app-passage>
     </mat-card>
-  </div>
+  </ng-template>
-</ng-template>
+  <ng-template #nocards>
-<ng-template #nocards>
+    <span>&nbsp;</span>
-  <span>&nbsp;</span>
+  </ng-template>
-</ng-template>
+</div>

app/db/src/app/search/components/search-page/search.page.scss

@@ -1,15 +1,8 @@
-.full-width {
-  width: 100%;
-}
-
 mat-card {
-  max-width: 400px;
+  max-width: 800px;
-  margin: 1em auto;
+  margin: 1.5rem auto;
   padding: 0;
 }
-mat-toolbar {
-  padding-left: 12px;
-}
 
 .search-bar {
   width: 100%;
@@ -24,7 +17,7 @@ mat-toolbar {
   border-radius: 0.2rem;
   height: auto;
   font-size: 1.2rem;
-  font-family: var(--font-family);
+  font-family: "Roboto Condensed";
   line-height: 2.2rem;
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
@@ -32,6 +25,11 @@ mat-toolbar {
     0 1px 5px 0 rgba(0, 0, 0, 0.12);
   touch-action: manipulation;
 }
+
+.search-bar-input:focus {
+  outline: 0;
+}
+
 .searchbar-search-icon {
   position: absolute;
   background-repeat: no-repeat;
@@ -42,3 +40,7 @@ mat-toolbar {
   width: 21px;
   height: 21px;
 }
+
+.search-content {
+  height: calc(100vh - 4rem);
+}

app/db/src/app/search/components/search-page/search.page.ts

@@ -37,9 +37,9 @@ export class SearchPage implements OnInit {
       map((value) => this.getSearchItems(value))
     );
 
-    this.appService.state$.subscribe((state) => {
+    // this.appService.state$.subscribe((state) => {
-      console.log(state);
+    //   console.log(state);
-    });
+    // });
   }
 
   //#region Search

app/db/src/app/services/app.service.ts

@@ -32,7 +32,7 @@ const initialState: AppState = {
     showStrongsAsModal: false,
     appendCardToBottom: true,
     insertCardNextToItem: true,
-    fontSize: 11,
+    fontSize: 12,
     fontFamily: 'PT Serif',
     showVersesOnNewLine: false,
     showVerseNumbers: false,
@@ -66,6 +66,14 @@ type AppAction =
   | {
       type: 'UPDATE_PARAGRAPHS';
       paragraphs: HashTable<Paragraph>;
+    }
+  | {
+      type: 'UPDATE_FONT_SIZE';
+      size: number;
+    }
+  | {
+      type: 'UPDATE_FONT_FAMILY';
+      family: string;
     };
 
 function reducer(state: AppState, action: AppAction): AppState {
@@ -113,6 +121,25 @@ function reducer(state: AppState, action: AppAction): AppState {
         paragraphs: action.paragraphs,
       };
     }
+
+    case 'UPDATE_FONT_SIZE': {
+      return {
+        ...state,
+        displaySettings: {
+          ...state.displaySettings,
+          fontSize: action.size,
+        },
+      };
+    }
+    case 'UPDATE_FONT_FAMILY': {
+      return {
+        ...state,
+        displaySettings: {
+          ...state.displaySettings,
+          fontFamily: action.family,
+        },
+      };
+    }
   }
 }
 

app/db/src/styles.scss

@@ -1,7 +1,10 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import "~@angular/material/theming";
+
 // Plus imports for other components in your app.
+@import "./styles/app.scss";
+@import "./styles/fonts.scss";
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -35,241 +38,3 @@ $db-theme: mat-light-theme(
 @include angular-material-theme($db-theme);
 
 /* You can add global styles to this file, and also import other style files */
-
-html,
-body {
-  --font-family: Roboto, Helvetica, Arial, sans-serif;
-  --primary-color: #333;
-
-  --card-font: Roboto, Helvetica, Arial, sans-serif;
-  --card-border-radius: 0.2em;
-  --card-title: #fff;
-  --card-color: #000;
-
-  --passage-color-primary: rgb(25, 68, 109);
-  --passage-color-accent: rgb(122, 166, 206);
-  --passage-heading-font-family: "Roboto Condensed";
-
-  height: 100%;
-  margin: 0;
-  font-family: var(--font-family);
-  font-size: 11pt;
-}
-
-.card-title {
-  font-size: 1.5rem;
-  font-family: "Roboto Condensed";
-  color: var(--card-title);
-  padding: 1rem;
-  border-top-left-radius: var(--card-border-radius);
-  border-top-right-radius: var(--card-border-radius);
-
-  > mat-icon {
-    font-size: 1.8rem;
-  }
-
-  span {
-    line-height: 100%;
-    vertical-align: text-top;
-    padding-left: 1rem;
-  }
-}
-
-.card-content {
-  padding: 1rem;
-  color: var(--card-color);
-}
-
-.card-close-button {
-  background-color: transparent;
-  border: 0;
-  float: right;
-  margin-top: -0.2rem;
-  cursor: pointer;
-  mat-icon {
-    font-size: 2.3rem;
-  }
-}
-
-mat-toolbar {
-  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
-}
-a {
-  cursor: pointer;
-  border-bottom: 1px dotted #bbb;
-}
-
-@font-face {
-  font-family: "Merriweather";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/merriweather-v19-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Merriweather Regular"), local("Merriweather-Regular"),
-    url("./assets/fonts/merriweather-v19-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/merriweather-v19-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/merriweather-v19-latin-regular.woff") format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/merriweather-v19-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/merriweather-v19-latin-regular.svg#Merriweather")
-      format("svg");
-  /* Legacy iOS */
-}
-
-/* pt-sans-regular - latin */
-@font-face {
-  font-family: "PT Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/pt-sans-v9-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("PT Sans"), local("PTSans-Regular"),
-    url("./assets/fonts/pt-sans-v9-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/pt-sans-v9-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/pt-sans-v9-latin-regular.woff") format("woff"),
-    /* Modern Browsers */ url("./assets/fonts/pt-sans-v9-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/pt-sans-v9-latin-regular.svg#PTSans") format("svg");
-  /* Legacy iOS */
-}
-
-@font-face {
-  font-family: "PT Serif";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/pt-serif-v9-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("PT Serif"), local("PTSerif-Regular"),
-    url("./assets/fonts/pt-serif-v9-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/pt-serif-v9-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/pt-serif-v9-latin-regular.woff") format("woff"),
-    /* Modern Browsers */ url("./assets/fonts/pt-serif-v9-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/pt-serif-v9-latin-regular.svg#PTSerif") format("svg");
-  /* Legacy iOS */
-}
-
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"),
-    url("./assets/fonts/open-sans-v15-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/open-sans-v15-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v15-latin-regular.woff") format("woff"),
-    /* Modern Browsers */ url("./assets/fonts/open-sans-v15-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/open-sans-v15-latin-regular.svg#OpenSans")
-      format("svg");
-  /* Legacy iOS */
-}
-
-/* roboto-regular - latin */
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/roboto-v18-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Roboto"), local("Roboto-Regular"),
-    url("./assets/fonts/roboto-v18-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/roboto-v18-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/roboto-v18-latin-regular.woff") format("woff"),
-    /* Modern Browsers */ url("./assets/fonts/roboto-v18-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/roboto-v18-latin-regular.svg#Roboto") format("svg");
-  /* Legacy iOS */
-}
-
-/* roboto-500 - latin */
-@font-face {
-  font-family: "Roboto Bold";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./assets/fonts/roboto-v18-latin-500.eot");
-  /* IE9 Compat Modes */
-  src: local("Roboto Medium"), local("Roboto-Medium"),
-    url("./assets/fonts/roboto-v18-latin-500.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/roboto-v18-latin-500.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */ url("./assets/fonts/roboto-v18-latin-500.woff")
-      format("woff"),
-    /* Modern Browsers */ url("./assets/fonts/roboto-v18-latin-500.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/roboto-v18-latin-500.svg#Roboto") format("svg");
-  /* Legacy iOS */
-}
-
-/* roboto-condensed-regular - latin */
-@font-face {
-  font-family: "Roboto Condensed";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/roboto-condensed-v16-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"),
-    url("./assets/fonts/roboto-condensed-v16-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/roboto-condensed-v16-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/roboto-condensed-v16-latin-regular.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/roboto-condensed-v16-latin-regular.ttf")
-      format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed")
-      format("svg");
-  /* Legacy iOS */
-}
-
-/* inconsolata-regular - latin */
-@font-face {
-  font-family: "Inconsolata";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/inconsolata-v16-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Inconsolata Regular"), local("Inconsolata-Regular"),
-    url("./assets/fonts/inconsolata-v16-latin-regular.eot?#iefix")
-      format("embedded-opentype"),
-    /* IE6-IE8 */ url("./assets/fonts/inconsolata-v16-latin-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/inconsolata-v16-latin-regular.woff") format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/inconsolata-v16-latin-regular.ttf") format("truetype"),
-    /* Safari, Android, iOS */
-      url("./assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata")
-      format("svg");
-  /* Legacy iOS */
-}

app/db/src/styles/app.scss

@@ -0,0 +1,111 @@
+html {
+  --font-family: Roboto, Helvetica, Arial, sans-serif;
+  --font-size: 12pt;
+  --primary-color: #333;
+
+  --card-font: Roboto, Helvetica, Arial, sans-serif;
+  --card-border-radius: 0.2em;
+  --card-title: #fff;
+  --card-color: #000;
+  --card-actions-background-color: whitesmoke;
+
+  --passage-color-primary: rgb(25, 68, 109);
+  --passage-color-accent: rgb(122, 166, 206);
+  --passage-heading-font-family: "Roboto Condensed";
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  font-family: "Roboto Condensed";
+  font-size: var(--font-size);
+}
+
+.card-title {
+  font-size: 1.5rem;
+  font-family: "Roboto Condensed";
+  color: var(--card-title);
+  padding: 1rem;
+  border-top-left-radius: var(--card-border-radius);
+  border-top-right-radius: var(--card-border-radius);
+
+  > mat-icon {
+    font-size: 1.8rem;
+  }
+
+  span {
+    line-height: 100%;
+    vertical-align: text-top;
+    padding-left: 1rem;
+  }
+}
+
+.card-content {
+  padding: 1rem;
+  color: var(--card-color);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  line-height: calc(var(--font-size) + 0.5rem);
+}
+
+.card-close-button {
+  float: right;
+  margin-right: 0.8rem !important;
+  mat-icon {
+    font-size: 2.3rem;
+    line-height: 1rem !important;
+  }
+}
+
+.card-actions {
+  clear: both;
+  width: 100%;
+  height: 3.5rem;
+  color: var(--card-color);
+  background-color: var(--card-actions-background-color);
+  border-bottom-left-radius: var(--card-border-radius);
+  border-bottom-right-radius: var(--card-border-radius);
+  mat-icon {
+    font-size: 1.7rem;
+    line-height: 2.4rem !important;
+  }
+}
+
+.card-actions-right {
+  float: right;
+  margin-right: 0.5rem;
+}
+
+.card-actions-left {
+  float: left;
+  margin-left: 0.5rem;
+}
+
+mat-toolbar {
+  padding-left: 12px;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
+}
+
+a {
+  cursor: pointer;
+  border-bottom: 1px dotted #bbb;
+}
+
+.full-width {
+  width: 100%;
+}
+
+mat-h2,
+.mat-title,
+.mat-typography h2 {
+  font-size: calc(var(--font-size) * 1.7) !important;
+  line-height: calc(var(--font-size) * 1.9) !important;
+}
+.mat-h3,
+.mat-subheading-2,
+.mat-typography h3 {
+  font-size: calc(var(--font-size) * 1.2) !important;
+  line-height: calc(var(--font-size) * 1.4) !important;
+}

app/db/src/styles/fonts.scss

@@ -0,0 +1,174 @@
+@font-face {
+  font-family: "Merriweather";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/merriweather-v19-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Merriweather Regular"), local("Merriweather-Regular"),
+    url("../assets/fonts/merriweather-v19-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/merriweather-v19-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/merriweather-v19-latin-regular.woff") format("woff"),
+    /* Modern Browsers */
+      url("../assets/fonts/merriweather-v19-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/merriweather-v19-latin-regular.svg#Merriweather")
+      format("svg");
+  /* Legacy iOS */
+}
+
+/* pt-sans-regular - latin */
+@font-face {
+  font-family: "PT Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/pt-sans-v9-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("PT Sans"), local("PTSans-Regular"),
+    url("../assets/fonts/pt-sans-v9-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/pt-sans-v9-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/pt-sans-v9-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../assets/fonts/pt-sans-v9-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/pt-sans-v9-latin-regular.svg#PTSans") format("svg");
+  /* Legacy iOS */
+}
+
+@font-face {
+  font-family: "PT Serif";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/pt-serif-v9-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("PT Serif"), local("PTSerif-Regular"),
+    url("../assets/fonts/pt-serif-v9-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/pt-serif-v9-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/pt-serif-v9-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../assets/fonts/pt-serif-v9-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/pt-serif-v9-latin-regular.svg#PTSerif") format("svg");
+  /* Legacy iOS */
+}
+
+/* open-sans-regular - latin */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/open-sans-v15-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Open Sans Regular"), local("OpenSans-Regular"),
+    url("../assets/fonts/open-sans-v15-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/open-sans-v15-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/open-sans-v15-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../assets/fonts/open-sans-v15-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/open-sans-v15-latin-regular.svg#OpenSans")
+      format("svg");
+  /* Legacy iOS */
+}
+
+/* roboto-regular - latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/roboto-v18-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Roboto"), local("Roboto-Regular"),
+    url("../assets/fonts/roboto-v18-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/roboto-v18-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/roboto-v18-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../assets/fonts/roboto-v18-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/roboto-v18-latin-regular.svg#Roboto") format("svg");
+  /* Legacy iOS */
+}
+
+/* roboto-500 - latin */
+@font-face {
+  font-family: "Roboto Bold";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../assets/fonts/roboto-v18-latin-500.eot");
+  /* IE9 Compat Modes */
+  src: local("Roboto Medium"), local("Roboto-Medium"),
+    url("../assets/fonts/roboto-v18-latin-500.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/roboto-v18-latin-500.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("../assets/fonts/roboto-v18-latin-500.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../assets/fonts/roboto-v18-latin-500.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/roboto-v18-latin-500.svg#Roboto") format("svg");
+  /* Legacy iOS */
+}
+
+/* roboto-condensed-regular - latin */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/roboto-condensed-v16-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"),
+    url("../assets/fonts/roboto-condensed-v16-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("../assets/fonts/roboto-condensed-v16-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/roboto-condensed-v16-latin-regular.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("../assets/fonts/roboto-condensed-v16-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed")
+      format("svg");
+  /* Legacy iOS */
+}
+
+/* inconsolata-regular - latin */
+@font-face {
+  font-family: "Inconsolata";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/inconsolata-v16-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Inconsolata Regular"), local("Inconsolata-Regular"),
+    url("../assets/fonts/inconsolata-v16-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../assets/fonts/inconsolata-v16-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../assets/fonts/inconsolata-v16-latin-regular.woff") format("woff"),
+    /* Modern Browsers */
+      url("../assets/fonts/inconsolata-v16-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata")
+      format("svg");
+  /* Legacy iOS */
+}