From 018b3abcd5483a9761e13b1955ffa9be95dbb906 Mon Sep 17 00:00:00 2001 From: Luciano Lesca Date: Wed, 25 Jan 2023 13:10:45 -0300 Subject: [PATCH 1/4] feat(tic-tac-toe): change style to board fluid rezising --- tic-tac-toe/sass/main.scss | 52 +++++++++++++++++++++----------------- tic-tac-toe/styles.css | 40 +++++++++++++++++------------ tic-tac-toe/styles.css.map | 2 +- 3 files changed, 54 insertions(+), 40 deletions(-) diff --git a/tic-tac-toe/sass/main.scss b/tic-tac-toe/sass/main.scss index 833431a..9cce2e7 100644 --- a/tic-tac-toe/sass/main.scss +++ b/tic-tac-toe/sass/main.scss @@ -22,7 +22,7 @@ $raise-height: calc($lower-height * -1); $cell-size: 100%; $mark-size: 70%; -$border-width: 0.5rem; +$border-width: Min(0.75vw, 6px); $corner-elements: 1rem; @@ -151,17 +151,10 @@ dialog::backdrop { grid-template-rows: repeat(3, 1fr); & .cell { - height: $cell-size; - border: $border-width solid $color-border; + border: $border-width solid $color-border; cursor: pointer; - aspect-ratio: 1/1; - - display: flex; - justify-content: center; - align-items: center; - } - + & :nth-child(-n+3) { border-top: none; } @@ -180,25 +173,38 @@ dialog::backdrop { } .cross::before, -.circle::before { - transition: 50ms ease-out; +.circle::before { + content: ""; + display: block; + height: 100%; + // EXAMPLE TO UNDERSTAND THE SHORTHAND + /* background-image: var(--background-image); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; */ + background: no-repeat center / 80% var(--background-image); + transition: 50ms ease-out; } -.cross::before, -.board.cross-plays .cell:not(.cross):not(.circle):hover::before -{ - content: url('assets/cross.svg'); +.cross-plays, +.cross { + --background-image: url("assets/cross.svg"); } -.circle::before, -.board.circle-plays .cell:not(.cross):not(.circle):hover::before { - content: url('assets/circle.svg'); +.circle-plays, +.circle { + --background-image: url("assets/circle.svg"); } /* Marks' :hover states */ -.board.cross-plays .cell:not(.cross):not(.circle):hover::before, -.board.circle-plays .cell:not(.cross):not(.circle):hover::before { - transform:translate($raise-height, $raise-height); - filter: drop-shadow(3px 7px 0 $color-mark-hover); +.cell:not(.cross):not(.circle):hover::before { + --shadow-offset-x: min(3px, 1vw); + --shadow-offset-y: min(7px, 1.2vw); + content: ""; + display: block; + height: 100%; + background: no-repeat center / 80% var(--background-image); + transform: translate(-1vw, -1vw); + filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) 0 $color-mark-hover); } \ No newline at end of file diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css index 23279c6..f6dc791 100644 --- a/tic-tac-toe/styles.css +++ b/tic-tac-toe/styles.css @@ -129,13 +129,8 @@ dialog::backdrop { grid-template-rows: repeat(3, 1fr); } .board .cell { - height: 100%; - border: 0.5rem solid #A31ACB; + border: min(0.75vw, 6px) solid #A31ACB; cursor: pointer; - aspect-ratio: 1/1; - display: flex; - justify-content: center; - align-items: center; } .board :nth-child(-n+3) { border-top: none; @@ -152,24 +147,37 @@ dialog::backdrop { .cross::before, .circle::before { + content: ""; + display: block; + height: 100%; + /* background-image: var(--background-image); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; */ + background: no-repeat center/80% var(--background-image); transition: 50ms ease-out; } -.cross::before, -.board.cross-plays .cell:not(.cross):not(.circle):hover::before { - content: url("assets/cross.svg"); +.cross-plays, +.cross { + --background-image: url("assets/cross.svg"); } -.circle::before, -.board.circle-plays .cell:not(.cross):not(.circle):hover::before { - content: url("assets/circle.svg"); +.circle-plays, +.circle { + --background-image: url("assets/circle.svg"); } /* Marks' :hover states */ -.board.cross-plays .cell:not(.cross):not(.circle):hover::before, -.board.circle-plays .cell:not(.cross):not(.circle):hover::before { - transform: translate(-5px, -5px); - filter: drop-shadow(3px 7px 0 rgba(176, 176, 176, 0.5333333333)); +.cell:not(.cross):not(.circle):hover::before { + --shadow-offset-x: min(3px, 1vw); + --shadow-offset-y: min(7px, 1.2vw); + content: ""; + display: block; + height: 100%; + background: no-repeat center/80% var(--background-image); + transform: translate(-1vw, -1vw); + filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) 0 rgba(176, 176, 176, 0.5333333333)); } /*# sourceMappingURL=styles.css.map */ diff --git a/tic-tac-toe/styles.css.map b/tic-tac-toe/styles.css.map index 0ce7250..c51b9ff 100644 --- a/tic-tac-toe/styles.css.map +++ b/tic-tac-toe/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WArEM;EAsEN,aA3EU;EA6EV;EACA,YAhGsB;EAiGtB,eAjFc;EAkFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA7FF;;AAgGF;EACI,OA5HI;;AA+HR;EACI,OA7Hc;;;AAqI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,QApII;EAqIJ;EACA;EACA;EAEA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEI;;;AAGJ;AAAA;EAGI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAEA;AAAA;EAEI;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WArEM;EAsEN,aA3EU;EA6EV;EACA,YAhGsB;EAiGtB,eAjFc;EAkFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA7FF;;AAgGF;EACI,OA5HI;;AA+HR;EACI,OA7Hc;;;AAqI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file From 45801fb2eb1397217ef5a62ed580a747700f9e13 Mon Sep 17 00:00:00 2001 From: Luciano Lesca Date: Wed, 25 Jan 2023 13:21:38 -0300 Subject: [PATCH 2/4] feat(tic-tac-toe): remove innecesary padding. Set body's margin in zero to avoid overflow. Set container's max-width --- tic-tac-toe/sass/main.scss | 5 ++--- tic-tac-toe/styles.css | 5 ++--- tic-tac-toe/styles.css.map | 2 +- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/tic-tac-toe/sass/main.scss b/tic-tac-toe/sass/main.scss index 9cce2e7..b937b72 100644 --- a/tic-tac-toe/sass/main.scss +++ b/tic-tac-toe/sass/main.scss @@ -48,7 +48,7 @@ $md-text: 3rem; body { background-color: $color-secondary-lighter; - padding: 4rem; + margin: 0; min-height: 100vh; display: flex; @@ -85,8 +85,7 @@ button:active { padding: 2rem; border-radius: 2rem; background-color: white; - width: 80vw; - max-width: 800px; + width: min(80vw, 750px); box-shadow: 0px 2rem 0px calc($lower-height * -1) $color-secondary; display: flex; diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css index f6dc791..4c70d3e 100644 --- a/tic-tac-toe/styles.css +++ b/tic-tac-toe/styles.css @@ -42,7 +42,7 @@ body { background-color: #FF78F0; - padding: 4rem; + margin: 0; min-height: 100vh; display: flex; flex-direction: column; @@ -78,8 +78,7 @@ button:active { padding: 2rem; border-radius: 2rem; background-color: white; - width: 80vw; - max-width: 800px; + width: min(80vw, 750px); box-shadow: 0px 2rem 0px -5px #A31ACB; display: flex; flex-direction: column; diff --git a/tic-tac-toe/styles.css.map b/tic-tac-toe/styles.css.map index c51b9ff..a17c979 100644 --- a/tic-tac-toe/styles.css.map +++ b/tic-tac-toe/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WArEM;EAsEN,aA3EU;EA6EV;EACA,YAhGsB;EAiGtB,eAjFc;EAkFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA7FF;;AAgGF;EACI,OA5HI;;AA+HR;EACI,OA7Hc;;;AAqI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WApEM;EAqEN,aA1EU;EA4EV;EACA,YA/FsB;EAgGtB,eAhFc;EAiFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA5FF;;AA+FF;EACI,OA3HI;;AA8HR;EACI,OA5Hc;;;AAoI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file From 4308ef656074756602ec1c3059799ff5f9acba20 Mon Sep 17 00:00:00 2001 From: Luciano Lesca Date: Wed, 25 Jan 2023 13:27:25 -0300 Subject: [PATCH 3/4] feat(tic-tac-toe): change fluid font style to title and scores --- tic-tac-toe/sass/main.scss | 15 +++++++++++---- tic-tac-toe/styles.css | 9 ++++++--- tic-tac-toe/styles.css.map | 2 +- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/tic-tac-toe/sass/main.scss b/tic-tac-toe/sass/main.scss index b937b72..6012c96 100644 --- a/tic-tac-toe/sass/main.scss +++ b/tic-tac-toe/sass/main.scss @@ -34,6 +34,7 @@ $shadow-marks: $lower-height $lower-height 0px $color-contrast; $xl-text: 7rem; $lg-text: 4rem; $md-text: 3rem; +$sm-text: 2rem; // RESET @@ -57,7 +58,9 @@ body { } h1 { - font-size: $xl-text; + font-size: $lg-text; + // Calculated in https://royalfig.github.io/fluid-typography-calculator/ + font-size: clamp($lg-text, 2.3rem + 7.15vw, $xl-text); color: $color-primary; margin: 0; text-shadow: $shadow-text-h1; @@ -124,10 +127,14 @@ dialog::backdrop { align-items: center; flex-wrap: nowrap; - & .score { - font-size: $md-text; - } + // Calculated in https://royalfig.github.io/fluid-typography-calculator/ + font-size: $sm-text; + font-size: clamp($sm-text, 1.2rem + 2.38vw, $md-text); + & button { + font: inherit; + } + & .score-crosses { color: $color-cross; } diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css index 4c70d3e..41bf855 100644 --- a/tic-tac-toe/styles.css +++ b/tic-tac-toe/styles.css @@ -50,7 +50,8 @@ body { } h1 { - font-size: 7rem; + font-size: 4rem; + font-size: clamp(4rem, 2.3rem + 7.15vw, 7rem); color: #39B5E0; margin: 0; text-shadow: 0px 7px 0px #F5EA5A; @@ -108,9 +109,11 @@ dialog::backdrop { justify-content: space-around; align-items: center; flex-wrap: nowrap; + font-size: 2rem; + font-size: clamp(2rem, 1.2rem + 2.38vw, 3rem); } -.container .scores .score { - font-size: 3rem; +.container .scores button { + font: inherit; } .container .scores .score-crosses { color: #39B5E0; diff --git a/tic-tac-toe/styles.css.map b/tic-tac-toe/styles.css.map index a17c979..f1ffd36 100644 --- a/tic-tac-toe/styles.css.map +++ b/tic-tac-toe/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WApEM;EAqEN,aA1EU;EA4EV;EACA,YA/FsB;EAgGtB,eAhFc;EAiFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA5FF;;AA+FF;EACI,OA3HI;;AA8HR;EACI,OA5Hc;;;AAoI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADIN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAvCsB;EAwCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA4BN;EACA,OAvDY;EAwDZ;EACA,aAnCa;;;AAsCjB;EACI,WAlCM;EAmCN;EACA;EACA;EACA,eA9Cc;EA+Cd;EACA;EACA,kBAnEc;EAoEd,YAjDY;;;AAoDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WAvEM;EAwEN,aA7EU;EA+EV;EACA,YAlGsB;EAmGtB,eAnFc;EAoFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;EAGA,WA9FE;EA+FF;;AAEA;EACE;;AAGF;EACI,OAlII;;AAqIR;EACI,OAnIc;;;AA2I1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file From fb6b1465df42a6c546fd30262218b759d81f3905 Mon Sep 17 00:00:00 2001 From: Luciano Lesca Date: Wed, 25 Jan 2023 13:28:25 -0300 Subject: [PATCH 4/4] feat(tic-tac-toe): set min-width to container --- tic-tac-toe/sass/main.scss | 4 ++-- tic-tac-toe/styles.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tic-tac-toe/sass/main.scss b/tic-tac-toe/sass/main.scss index 6012c96..c554862 100644 --- a/tic-tac-toe/sass/main.scss +++ b/tic-tac-toe/sass/main.scss @@ -88,7 +88,7 @@ button:active { padding: 2rem; border-radius: 2rem; background-color: white; - width: min(80vw, 750px); + width: clamp(280px, 80vw, 750px); box-shadow: 0px 2rem 0px calc($lower-height * -1) $color-secondary; display: flex; @@ -134,7 +134,7 @@ dialog::backdrop { & button { font: inherit; } - + & .score-crosses { color: $color-cross; } diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css index 41bf855..087f132 100644 --- a/tic-tac-toe/styles.css +++ b/tic-tac-toe/styles.css @@ -79,7 +79,7 @@ button:active { padding: 2rem; border-radius: 2rem; background-color: white; - width: min(80vw, 750px); + width: clamp(280px, 80vw, 750px); box-shadow: 0px 2rem 0px -5px #A31ACB; display: flex; flex-direction: column;