Merge pull request #7 from supportingami/style/card-sizes

style: card sizes

Author: chrismclarke

src/app/app.scss

@@ -14,7 +14,7 @@ h1 {
 }
 
 .main-content {
-  max-width: 1080px;
+  max-width: 1200px;
   flex: 1;
   margin: auto;
   width: 100%;

src/app/components/playing-card/playing-card.component.scss

@@ -1,13 +1,14 @@
 :host {
   display: block;
 }
-
-$cardHeight: 420px;
-$cardWidth: calc($cardHeight/3 * 2);
+// png 2230 x 3300
+$cardWidth: 370px;
+$cardHeight: calc($cardWidth * 1.5);
 
 .playing-card {
   cursor: pointer;
   width: $cardWidth;
+  max-width: 100vw;
   height: $cardHeight;
   // background: white;
   border: 2px solid #ccc;
@@ -42,7 +43,7 @@ $cardWidth: calc($cardHeight/3 * 2);
 }
 
 .card-statement {
-  overflow: auto;
+  @apply overflow-auto px-1 sm:px-4;
 }
 
 .playing-card[data-suit="heart"],

src/app/pages/home/home.page.scss

@@ -11,7 +11,8 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 240px;
+  max-width: 370px;
+  margin-bottom: 8px;
 }
 
 app-playing-card {