diff --git a/src/app/app.component.html b/src/app/app.component.html
index f8c0f5d..e226809 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-
+
- https://github.com/d3/d3-interpolate
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7675907..7f88b02 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,21 @@
canvas {
+ position: absolute;
width: 100%;
height: 100%;
+ top: 0;
+ left: 0;
+}
+
+ul {
+ display: flex;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ justify-content: center;
+ margin: 0;
+ padding: 3rem;
+ background: rgba(0,0,0,0.1);
+
+ list-style-type: none;
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..921becd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,10 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { CanvasDirective } from './canvas/canvas.directive';
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ CanvasDirective
],
imports: [
BrowserModule
diff --git a/src/app/canvas/canvas.directive.spec.ts b/src/app/canvas/canvas.directive.spec.ts
new file mode 100644
index 0000000..d5fe8a5
--- /dev/null
+++ b/src/app/canvas/canvas.directive.spec.ts
@@ -0,0 +1,8 @@
+import { CanvasDirective } from './canvas.directive';
+
+describe('CanvasDirective', () => {
+ it('should create an instance', () => {
+ const directive = new CanvasDirective();
+ expect(directive).toBeTruthy();
+ });
+});
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
new file mode 100644
index 0000000..faee0c3
--- /dev/null
+++ b/src/app/canvas/canvas.directive.ts
@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+ selector: '[appCanvas]'
+})
+export class CanvasDirective {
+
+ constructor() { }
+
+}