Use embedded SVG for cards

1 files changed, 38 insertions, 71 deletions

diff --git a/webapp/src/default.css b/webapp/src/default.css
index 397d94a..aedfe14 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -27,9 +27,9 @@ body {
                          "north north north sidebar"
                          "west center east sidebar"
                          "south south south sidebar";
-    grid-template-rows: 5vw 10vw minmax(200px, 1fr) 10vw;
-    grid-template-columns: 10vw 1fr 10vw 20vw;
-    width: 100%;
+    grid-template-rows: 5vh auto auto auto;
+    grid-template-columns: 10vw minmax(0, 1fr) 10vw 20vw;
+    width: 100vw;
     height: 100vh;
 }
 
@@ -43,42 +43,36 @@ body {
     padding-right: 0.5em;
 }
 
-.playing-center-layout {
-    display: grid;
-    grid-template-areas: "current-trick";
-    grid-template-rows: 1fr;
-    grid-template-columns: 3fr 1fr;
-}
-
-.current-trick {
-    grid-area: current-trick;
-}
-
 .trick-layout {
     display: grid;
     grid-template-areas: ". top ."
-                         "left . right"
+                         "left top right"
+                         "left bottom right"
                          ". bottom .";
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: 1fr auto 1fr;
 }
 
 .trick-layout .top {
     grid-area: top;
+    place-self: center end;
 }
 .trick-layout .left {
     grid-area: left;
+    place-self: center end;
 }
 .trick-layout .right {
     grid-area: right;
+    place-self: center start;
 }
 .trick-layout .bottom {
     grid-area: bottom;
+    place-self: center start;
 }
 
 .main-page {
     margin: 0 auto;
-    max-width: 30em;
+    max-width: 50em;
     font-size: 150%;
     min-height: 80vh;
 }
@@ -97,7 +91,7 @@ body {
 }
 
 .footer {
-    max-width: 30em;
+    max-width: 50em;
     font-size: 150%;
     margin: 0 auto;
 }
@@ -144,67 +138,29 @@ button:hover, a:hover {
 }
 .center {
     grid-area: center;
-    display: grid;
-    justify-content: center;
-    align-content: center;
-}
-
-.hand {
     display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.hand .card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-}
-
-.card:hover {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
+    flex-direction: column;
+    height: 75vh;
+    place-content: center center;
 }
 
-.card {
-    min-width: 30px;
-    min-height: 20px;
-    border-radius: 5px;
-    border: 2px solid #444;
-    transition: 0.1s;
-    font-family: Arial, sans-serif;
-    font-size: 2vw;
-    padding: 4px;
-    background-color: #fcfcf0;
-    color: #000;
-    line-height: 85%;
+.center .card {
+    height: 15vh;
 }
 
-.card div {
-    text-align: center;
+.sidebar .card {
+    height: 5vh;
 }
 
-.card .suit-spade {
-    color: #000;
-}
-.card .suit-heart {
-    color: #d00;
-}
-.card .suit-diamond {
-    color: #d00;
-}
-.card .suit-club {
-    color: #000;
+.hand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
 }
 
-.card .suit-spade:after {
-    content: "♠"
-}
-.card .suit-heart:after {
-    content: "♥"
-}
-.card .suit-diamond:after {
-    content: "♦"
-}
-.card .suit-club:after {
-    content: "♣"
+.hand .card:hover {
+    box-shadow: 0.1em -0.1em 0.3em rgba(0,0,0,0.5);
 }
 
 .bidding-table {
@@ -314,3 +270,14 @@ button:hover, a:hover {
 .bidding-box .suit-notrump:after {
     content: "NT"
 }
+
+.svg-container {
+    min-width: 0;
+    min-height: 0;
+    height: inherit;
+}
+.svg-element {
+    width: 100%;
+    height: inherit;
+    overflow: hidden;
+}