Royal cards (Flexbox)

Author: ManzDev

src/index.pcss

@@ -133,3 +133,18 @@
 [data-card="10"] .item:nth-child(n+6) {
   transform: translateY(8px) scaleY(-1);
 }
+
+/* Royal */
+[data-card="J"],
+[data-card="Q"],
+[data-card="K"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & .item {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 30px 12px;
+  }
+}

src/index.pug

@@ -13,4 +13,7 @@ html(lang="en")
         for c in [1,2,3,4,5,6,7,8,9,10]
           .card(data-card=`${c}`, data-suit=`${s}`)
             for i in [...Array(c).keys()]
-              span.item= s
+              span.item= s
+        for c in ['J','Q','K']
+          .card(data-card=`${c}`, data-suit=`${s}`)
+            span.item= c+s