From 12a41f26445c647a7694f994e6e136474e4bc3c9 Mon Sep 17 00:00:00 2001 From: renatoveludo Date: Sat, 30 Nov 2024 15:27:45 -0300 Subject: [PATCH] add task solution --- src/index.html | 34 ++++++++++- src/styles/blocks/calendar.scss | 62 ++++++++++++++++++++ src/styles/blocks/page.css | 7 +++ src/styles/blocks/page.css.map | 1 + src/styles/blocks/page.scss | 7 +++ src/styles/index.css | 92 ++++++++++++++++++++++++++++++ src/styles/index.css.map | 1 + src/styles/index.scss | 6 +- src/styles/utils/variables.css | 1 + src/styles/utils/variables.css.map | 1 + src/styles/utils/variables.scss | 5 ++ 11 files changed, 213 insertions(+), 4 deletions(-) create mode 100644 src/styles/blocks/calendar.scss create mode 100644 src/styles/blocks/page.css create mode 100644 src/styles/blocks/page.css.map create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map create mode 100644 src/styles/utils/variables.css create mode 100644 src/styles/utils/variables.css.map create mode 100644 src/styles/utils/variables.scss diff --git a/src/index.html b/src/index.html index c10199d38..2c793f8dd 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 000000000..5d554c769 --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,62 @@ +.calendar { + display: flex; + flex-wrap: wrap; + gap: $gap; + width: calc(7 * $cell-size + 6 * $gap); + padding: $calendar-padding; + + &__day { + position: relative; + width: $cell-size; + height: $cell-size; + background-color: #eee; + border: $cell-border solid black; + text-align: center; + box-sizing: border-box; + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + transition: + transform 0.5s, + background-color 0.5s; + } + + &::before { + content: counter(day); + counter-increment: day; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: Arial, sans-serif; + font-size: $font-size; + } + } + + counter-reset: day; + + @for $i from 28 through 31 { + &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } + } + + @each $day, + $margin + in ( + mon: 0, + tue: calc($cell-size + $gap), + wed: calc(2 * ($cell-size + $gap)), + thu: calc(3 * ($cell-size + $gap)), + fri: calc(4 * ($cell-size + $gap)), + sat: calc(5 * ($cell-size + $gap)), + sun: calc(6 * ($cell-size + $gap)) + ) + { + &--start-day-#{$day} .calendar__day:first-child { + margin-left: $margin; + } + } +} diff --git a/src/styles/blocks/page.css b/src/styles/blocks/page.css new file mode 100644 index 000000000..3a34693bb --- /dev/null +++ b/src/styles/blocks/page.css @@ -0,0 +1,7 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} /*# sourceMappingURL=page.css.map */ diff --git a/src/styles/blocks/page.css.map b/src/styles/blocks/page.css.map new file mode 100644 index 000000000..e9f6345e3 --- /dev/null +++ b/src/styles/blocks/page.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["page.scss","page.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACCF","file":"page.css"} \ No newline at end of file diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..4dcbaa5ab --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,7 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 000000000..b8f497210 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,92 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: 1px; + width: 706px; + padding: 10px; + counter-reset: day; +} + +.calendar__day { + position: relative; + width: 100px; + height: 100px; + background-color: #eee; + border: 1px solid black; + text-align: center; + box-sizing: border-box; +} + +.calendar__day:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + transition: + transform 0.5s, + background-color 0.5s; +} + +.calendar__day::before { + content: counter(day); + counter-increment: day; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar--month-length-28 .calendar__day:nth-child(n + 29) { + display: none; +} + +.calendar--month-length-29 .calendar__day:nth-child(n + 30) { + display: none; +} + +.calendar--month-length-30 .calendar__day:nth-child(n + 31) { + display: none; +} + +.calendar--month-length-31 .calendar__day:nth-child(n + 32) { + display: none; +} + +.calendar--start-day-sun .calendar__day:first-child { + margin-left: calc(6 * (100px + 1px)); +} + +.calendar--start-day-mon .calendar__day:first-child { + margin-left: 0; +} + +.calendar--start-day-tue .calendar__day:first-child { + margin-left: calc(1 * (100px + 1px)); +} + +.calendar--start-day-wed .calendar__day:first-child { + margin-left: calc(2 * (100px + 1px)); +} + +.calendar--start-day-thu .calendar__day:first-child { + margin-left: calc(3 * (100px + 1px)); +} + +.calendar--start-day-fri .calendar__day:first-child { + margin-left: calc(4 * (100px + 1px)); +} + +.calendar--start-day-sat .calendar__day:first-child { + margin-left: calc(5 * (100px + 1px)); +} + +/*# sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 000000000..4245ff105 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["blocks/page.scss","index.css","blocks/calendar.scss","utils/variables.scss"],"names":[],"mappings":"AAAA;EACE,SAAA;ACCF;;ACFA;EACE,aAAA;EACA,eAAA;EACA,QCDI;EDEJ,YAAA;EACA,aCDiB;EDgCjB,kBAAA;ADzBF;ACJE;EACE,kBAAA;EACA,YCTQ;EDUR,aCVQ;EDWR,sBAAA;EACA,uBAAA;EACA,kBAAA;ADMJ;ACJI;EACE,eAAA;EACA,yBAAA;EACA,4BAAA;EACA,iDACE;ADKR;ACDI;EACE,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,8BAAA;EACA,eC7BM;AFgCZ;ACII;EACE,aAAA;ADFN;ACCI;EACE,aAAA;ADCN;ACFI;EACE,aAAA;ADIN;ACLI;EACE,aAAA;ADON;ACSI;EACE,cAXG;ADIT;ACMI;EACE,kBAXG;ADOT;ACGI;EACE,kBAXG;ADUT;ACAI;EACE,kBAXG;ADaT;ACHI;EACE,kBAXG;ADgBT;ACNI;EACE,kBAXG;ADmBT;ACTI;EACE,kBAXG;ADsBT","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..d75e17483 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,3 @@ -body { - margin: 0; -} +@import './utils/variables'; +@import './blocks/page'; +@import './blocks/calendar'; diff --git a/src/styles/utils/variables.css b/src/styles/utils/variables.css new file mode 100644 index 000000000..51e714bf8 --- /dev/null +++ b/src/styles/utils/variables.css @@ -0,0 +1 @@ +/*# sourceMappingURL=variables.css.map */ diff --git a/src/styles/utils/variables.css.map b/src/styles/utils/variables.css.map new file mode 100644 index 000000000..639caba5b --- /dev/null +++ b/src/styles/utils/variables.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"variables.css"} \ No newline at end of file diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..0affc55b2 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,5 @@ +$cell-size: 100px; +$cell-border: 1px; +$gap: 1px; +$font-size: 30px; +$calendar-padding: 10px;