From bd52cbe8bbc7c27307b180c2af9b843334934fb5 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 17:55:19 +0100 Subject: [PATCH 01/11] Prepare cards: Suits and colors --- src/index.pcss | 26 ++++++++++++++++++++++++++ src/index.pug | 8 +++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/index.pcss b/src/index.pcss index e69de29..6007438 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -0,0 +1,26 @@ +:root { + background: green; + font-family: Montserrat, sans-serif; + font-weight: 600; +} + +.deck { + display: flex; + flex-wrap: wrap; +} + +.card { + width: 125px; + height: 200px; + background: white; + border-radius: 10px; + padding: 16px 8px; + margin: 5px; + + font-size: 52px; +} + +[data-suit="♥"], +[data-suit="♦"] { + color: red; +} diff --git a/src/index.pug b/src/index.pug index 5dd43c3..1bf3140 100644 --- a/src/index.pug +++ b/src/index.pug @@ -7,4 +7,10 @@ html(lang="en") title CSS Grid Cards link(rel="stylesheet", href="./index.pcss") script(src="./index.js") - body \ No newline at end of file + body + .deck + for s in ['♠','♥','♦','♣'] + 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 \ No newline at end of file From 285edac6a2a54b460453688924e53ef8c9eb5636 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 17:58:15 +0100 Subject: [PATCH 02/11] Card 1 (Flexbox) --- src/index.pcss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index 6007438..9f2d847 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -24,3 +24,16 @@ [data-suit="♦"] { color: red; } + +/* Cards */ +[data-card] { + display: none; +} + +[data-card="1"] { + display: flex; + justify-content: center; + align-items: center; + font-size: 92px; +} + From b5c674025cfb51665240056754335db62929190c Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 17:58:56 +0100 Subject: [PATCH 03/11] Card 2 & 3 (Flexbox) --- src/index.pcss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index 9f2d847..8584c14 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -37,3 +37,10 @@ font-size: 92px; } +[data-card="2"], +[data-card="3"] { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} From ab48471464d0a129c0cb39b7645a482586277482 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:00:24 +0100 Subject: [PATCH 04/11] Card 4 (Grid: Rows & Columns) --- src/index.pcss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index 8584c14..1e64c77 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -44,3 +44,11 @@ justify-content: center; align-items: center; } + +[data-card="4"] { + display: grid; + grid-template-rows: 50% 50%; + grid-template-columns: 50% 50%; + justify-items: center; + align-items: center; +} From da8e700e9dad7d45471e06d76a40e17a8e69ca56 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:02:10 +0100 Subject: [PATCH 05/11] Card 5 (Grid: Areas) --- src/index.pcss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index 1e64c77..7523a12 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -52,3 +52,16 @@ justify-items: center; align-items: center; } + +[data-card="5"] { + display: grid; + grid-template-areas: "a . b" ". c ." "d . e"; + justify-items: center; + align-items: center; + + & .item:nth-child(1) { grid-area: a; } + & .item:nth-child(2) { grid-area: b; } + & .item:nth-child(3) { grid-area: c; } + & .item:nth-child(4) { grid-area: d; } + & .item:nth-child(5) { grid-area: e; } +} From 8c9f53d7483182f138d5152ea9d8d88206565836 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:04:32 +0100 Subject: [PATCH 06/11] Card 6, 7 & 8 (Grid: repeat, fr + Position) --- src/index.pcss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index 7523a12..bdda866 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -65,3 +65,30 @@ & .item:nth-child(4) { grid-area: d; } & .item:nth-child(5) { grid-area: e; } } + +[data-card="6"], +[data-card="7"], +[data-card="8"] { + display: grid; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); + justify-items: center; + align-items: center; +} + +[data-card="7"], +[data-card="8"] { + position: relative; + + & .item:nth-child(1) { + position: absolute; + top: 20%; + } +} + +[data-card="8"] { + & .item:nth-child(8) { + position: absolute; + bottom: 20%; + } +} From b4c0d48c3d09ba104f0c1fe7ee42b00e152e1c7f Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:06:42 +0100 Subject: [PATCH 07/11] Card 9 & 10 (Grid + nth-child + Position) --- src/index.pcss | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index bdda866..f7d02f9 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -92,3 +92,31 @@ bottom: 20%; } } + +[data-card="9"], +[data-card="10"] { + display: grid; + grid-template-rows: repeat(4, 25%); + grid-template-columns: 50% 50%; + justify-items: center; + align-items: center; + position: relative; + + & .item:nth-child(1) { + position: absolute; + } +} + +[data-card="10"] { + position: relative; + + & .item:nth-child(1) { + position: absolute; + top: 15%; + } + + & .item:nth-child(10) { + position: absolute; + bottom: 15%; + } +} From ec6fbee5521b8c29cea034bc2c98745103e8c291 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:15:31 +0100 Subject: [PATCH 08/11] Mirror suits (Transforms & nth-child) --- src/index.pcss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/index.pcss b/src/index.pcss index f7d02f9..c7c9e46 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -120,3 +120,16 @@ bottom: 15%; } } + +/* Mirror */ +[data-card="2"] .item:nth-child(n+2), +[data-card="3"] .item:nth-child(n+3), +[data-card="4"] .item:nth-child(n+3), +[data-card="5"] .item:nth-child(n+4), +[data-card="6"] .item:nth-child(n+5), +[data-card="7"] .item:nth-child(n+6), +[data-card="8"] .item:nth-child(n+6), +[data-card="9"] .item:nth-child(n+6), +[data-card="10"] .item:nth-child(n+6) { + transform: translateY(8px) scaleY(-1); +} From 2835df9056073117f73ef1c93a63d9a103239f67 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:17:27 +0100 Subject: [PATCH 09/11] Royal cards (Flexbox) --- src/index.pcss | 15 +++++++++++++++ src/index.pug | 5 ++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/index.pcss b/src/index.pcss index c7c9e46..af9d7f0 100644 --- a/src/index.pcss +++ b/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; + } +} diff --git a/src/index.pug b/src/index.pug index 1bf3140..727da54 100644 --- a/src/index.pug +++ b/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 \ No newline at end of file + span.item= s + for c in ['J','Q','K'] + .card(data-card=`${c}`, data-suit=`${s}`) + span.item= c+s \ No newline at end of file From a000bebd192ee663e3aeee962b8bfc8c162d4caf Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:20:35 +0100 Subject: [PATCH 10/11] Thumbs (Generated content + Position) --- src/index.pcss | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/index.pcss b/src/index.pcss index af9d7f0..2aee211 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -26,10 +26,6 @@ } /* Cards */ -[data-card] { - display: none; -} - [data-card="1"] { display: flex; justify-content: center; @@ -148,3 +144,25 @@ padding: 30px 12px; } } + +/* Thumbs */ +[data-card] { + position: relative; + + &::before, + &::after { + content: attr(data-card) attr(data-suit); + font-size: 17px; + position: absolute; + } + + &::before { + top: 4px; + left: 4px; + } + + &::after { + bottom: 4px; + right: 4px; + } +} From a6afad1ea016000735a6045bfc692c60c043cb23 Mon Sep 17 00:00:00 2001 From: ManzDev Date: Sat, 14 Jul 2018 18:22:54 +0100 Subject: [PATCH 11/11] Responsive (Media Queries) --- src/index.pcss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/index.pcss b/src/index.pcss index 2aee211..5eb8589 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -160,9 +160,30 @@ top: 4px; left: 4px; } - + &::after { bottom: 4px; right: 4px; } } + +/* Responsive cards */ +@media screen and (max-width: 800px) { + .card::after, + .item { + display: none; + } + + .card { + width: 38px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + } + + .card::before { + position: static; + font-size: 24px; + } +}