From 43f4a40568f1cbe4599a71f11b8504342f38e43d Mon Sep 17 00:00:00 2001 From: Daryna Date: Tue, 30 Jun 2026 16:53:13 +0300 Subject: [PATCH 1/3] add task solution --- src/index.html | 36 +++++++++++++++++++++++-- src/styles/main.scss | 62 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index c10199d38b..07f4b1f494 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..d54136456d --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,62 @@ +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: 1px; + width: calc(100px * 7 + 1px * 6); +} + +.calendar__day { + box-sizing: border-box; + width: 100px; + height: 100px; + border: 1px solid #000; + background-color: #eee; + + display: flex; + justify-content: center; + align-items: center; + transition-duration: 0.5s; + + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); +} + +.calendar--start-day-sun .calendar__day:first-child { + margin-left: calc((100px + 1px) * 6); +} + +.calendar--start-day-wed .calendar__day:first-child { + margin-left: calc((100px + 1px) * 2); +} + +@for $day from 1 through 31 { + .calendar__day:nth-child(#{$day})::before { + content: '#{$day}'; + } +} + +.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; +} From ffe609dbd006df6be32955d1d8725a378440431d Mon Sep 17 00:00:00 2001 From: Daryna Date: Tue, 30 Jun 2026 17:49:44 +0300 Subject: [PATCH 2/3] fix problem --- src/styles/main.scss | 85 ++++++++++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 34 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index d54136456d..294e261312 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,15 @@ +$day-size: 100px; +$gap: 1px; +$calendar-padding: 10px; +$columns: 7; +$hover-color: #ffbfcb; +$day-color: #eee; +$border-color: #000; +$days-width: $day-size * $columns; +$gaps-width: $gap * ($columns - 1); +$padding-width: $calendar-padding * 2; +$calendar-width: $days-width + $gaps-width + $padding-width; + body { margin: 0; min-height: 100vh; @@ -9,54 +21,59 @@ body { .calendar { display: flex; flex-wrap: wrap; - gap: 1px; - width: calc(100px * 7 + 1px * 6); + gap: $gap; + width: $calendar-width; + padding: 0 $calendar-padding; } .calendar__day { box-sizing: border-box; - width: 100px; - height: 100px; - border: 1px solid #000; - background-color: #eee; - - display: flex; - justify-content: center; - align-items: center; - transition-duration: 0.5s; - - font-family: Arial, sans-serif; - font-size: 30px; -} + width: $day-size; + height: $day-size; + border: 1px solid $border-color; + background-color: $day-color; + transition: + background-color 0.5s, + transform 0.5s; -.calendar__day:hover { - cursor: pointer; - background-color: #ffbfcb; - transform: translateY(-20px); -} - -.calendar--start-day-sun .calendar__day:first-child { - margin-left: calc((100px + 1px) * 6); -} - -.calendar--start-day-wed .calendar__day:first-child { - margin-left: calc((100px + 1px) * 2); + &:hover { + cursor: pointer; + background-color: $hover-color; + transform: translateY(-20px); + } } @for $day from 1 through 31 { .calendar__day:nth-child(#{$day})::before { content: '#{$day}'; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + font-family: Arial, sans-serif; + font-size: 30px; } } -.calendar--month-length-28 .calendar__day:nth-child(n + 29) { - display: none; -} +$start-days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); -.calendar--month-length-29 .calendar__day:nth-child(n + 30) { - display: none; +@each $day, $offset in $start-days { + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: calc((#{$day-size} + #{$gap}) * #{$offset}); + } } -.calendar--month-length-30 .calendar__day:nth-child(n + 31) { - display: none; +@for $month-length from 28 through 31 { + .calendar--month-length-#{$month-length} + .calendar__day:nth-child(n + #{$month-length + 1}) { + display: none; + } } From 669603ab7e687969a7d36ff27b2dd92598b1f16b Mon Sep 17 00:00:00 2001 From: Daryna Date: Thu, 2 Jul 2026 20:10:16 +0300 Subject: [PATCH 3/3] add final fixed --- src/styles/main.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 294e261312..c6c3ea8ccc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -5,6 +5,7 @@ $columns: 7; $hover-color: #ffbfcb; $day-color: #eee; $border-color: #000; +$hover-shift: 20px; $days-width: $day-size * $columns; $gaps-width: $gap * ($columns - 1); $padding-width: $calendar-padding * 2; @@ -19,6 +20,7 @@ body { } .calendar { + box-sizing: border-box; display: flex; flex-wrap: wrap; gap: $gap; @@ -39,7 +41,7 @@ body { &:hover { cursor: pointer; background-color: $hover-color; - transform: translateY(-20px); + transform: translateY(-$hover-shift); } }