sketch7 link target blank + projects colors hover changes

Author: stephenlautier

package.json

@@ -10,9 +10,9 @@
 "build:prod": "ng build --prod",
 "test": "ng test",
 "lint": "ng lint",
- "e2e": "ng e2e",
- "serve:prod": "cd ./dist && http-server",
- "clean": "rimraf dist",
+"e2e": "ng e2e",
+"serve:prod": "cd ./dist && http-server",
+"clean": "rimraf dist",
 "regenerate": "ng new angular-labs --style scss --routing --service-worker"
 },
 "private": true,

src/app/app.component.html

@@ -9,7 +9,9 @@
 <i class="fa fa-heart"
  aria-hidden="true"></i>️ by
 <strong>
-<a href="https://github.com/sketch7">sketch7</a>
+<a target="_blank"
+ rel="noopener"
+ href="https://github.com/sketch7">sketch7</a>
 </strong> 2017.</p>
 </div>
 </footer>

src/app/areas/projects/project.component.html

@@ -1,5 +1,5 @@
-<div class="project-container">
-<span class="project-tag project-tag--{{project.tag}} badge">{{project.tag}}</span>
+<div class="project-container project-tag--{{project.tag}}">
+<span class="project-tag badge">{{project.tag}}</span>
 <i class="project-icon fa fa-th-large fa-5x"
  aria-hidden="true"></i>️
 

src/app/areas/projects/project.component.scss

@@ -26,8 +26,33 @@ $project-description-color: $text-semi-diffuse-color !default;
 }
 
 &-icon {
-transition: 0.2s ease-in-out;
-color: $project-icon-hover-color;
+transition: 0.3s ease-in-out;
+}
+
+&-tag {
+&--csharp {
+.project-icon {
+color: $electric-violet;
+}
+}
+
+&--angular {
+.project-icon {
+color: $crimson;
+}
+}
+
+&--aurelia {
+.project-icon {
+color: $cerise;
+}
+}
+
+&--javascript {
+.project-icon {
+color: $amber;
+}
+}
 }
 }
 }
@@ -67,20 +92,28 @@ $project-description-color: $text-semi-diffuse-color !default;
 top: 0.25em;
 
 &--csharp {
-background: $electric-violet;
+.project-tag {
+background: $electric-violet;
+}
 }
 
 &--angular {
-background: $crimson;
+.project-tag {
+background: $crimson;
+}
 }
 
 &--aurelia {
-background: $cerise;
+.project-tag {
+background: $cerise;
+}
 }
 
 &--javascript {
-color: $black;
-background: $amber;
+.project-tag {
+color: $black;
+background: $amber;
+}
 }
 }
 }

src/app/areas/projects/projects.component.html

@@ -1,12 +1,19 @@
 <h1>Projects</h1>
-<p>Open source projects developed by <a href="https://github.com/sketch7">sketch7</a>.</p>
+<p>
+Open source projects developed by
+<a href="https://github.com/sketch7"
+ target="_blank"
+ rel="noopener">
+sketch7
+</a>
+.
+</p>
 
 <ul class="projects-container">
 <li *ngFor="let project of projects">
 
 <a target="_blank"
  rel="noopener"
- [title]="project.title"
  [href]="project.url">
 <app-project [project]="project"></app-project>
 </a>