Merge pull request #72 from HideyoshiNakazone/better-project-card-sizing

Better Project Card Sizing and Padding

src/app/projects/project-card/project-card.component.css

@@ -1,10 +1,14 @@
+.card {
+    width: 90%;
+}
+
 .card .inverse-card-image {
     flex-direction: row-reverse;
 }
 
 .card .card-content {
     width: 100%;
-    padding: 40px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;

src/app/projects/project-card/project-card.component.ts

@@ -77,8 +77,11 @@ export class ProjectCardComponent implements OnInit {
     }
 
     private generateChart(languages: Language[], windowWidth: number): ChartOptions {
+        const WIDTH_PROPORTION = .9*.8;
+        const DOUBLE_PADDING_WIDTH = 40;
+
         const responsiveWindowWidth = windowWidth >= 530 ?
-            300 : (windowWidth*.8 - 80);
+            300 : (windowWidth*WIDTH_PROPORTION - DOUBLE_PADDING_WIDTH);
 
         return {
             series: languages.map(value => value.percentage),