From 395a5f0f2ea00a1de4ff683c1b080e3264632502 Mon Sep 17 00:00:00 2001 From: Oleh Puzin Date: Sat, 4 Jul 2026 20:12:39 +0300 Subject: [PATCH 1/2] add solution --- src/index.html | 34 +++++++++++++++++++++++- src/styles/calendar.scss | 55 +++++++++++++++++++++++++++++++++++++++ src/styles/index.scss | 8 ++++++ src/styles/variables.scss | 13 +++++++++ 4 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 src/styles/calendar.scss create mode 100644 src/styles/variables.scss diff --git a/src/index.html b/src/index.html index c10199d38b..4fa43da9a0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss new file mode 100644 index 0000000000..5514f400ed --- /dev/null +++ b/src/styles/calendar.scss @@ -0,0 +1,55 @@ +.calendar { + width: $widthDay * 7 + $gapDay * 6; + padding: 10px; + display: flex; + flex-flow: row wrap; + gap: $gapDay; + + &__day { + position: relative; + width: $widthDay; + height: $heightDay; + border: 1px solid black; + box-sizing: border-box; + background-color: #eee; + cursor: pointer; + transition: all 0.5s ease; + + &::before { + position: absolute; + inset: 0; + font-size: 30px; + + display: flex; + align-items: center; + justify-content: center; + } + + &:hover { + background-color: #ffbfcb; + transform: translate(0, -20px); + } + + @for $monthDay from 1 through 31 { + &:nth-child(#{$monthDay}) { + &::before { + content: '#{$monthDay}'; + } + } + } + } + + @for $monthLength from 28 through 31 { + &--month-length-#{$monthLength} { + .calendar__day:nth-child(n + #{$monthLength + 1}) { + display: none; + } + } + } + + @each $day, $marginLeft in $daysWeek { + &--start-day-#{$day} &__day:first-child { + margin-left: $marginLeft; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..56b28d27cd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import './variables'; +@import './calendar'; + body { margin: 0; + min-height: 100vh; + font-family: Arial, Helvetica, sans-serif; + display: flex; + align-items: center; + justify-content: center; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..9cdbc2a01f --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,13 @@ +$widthDay: 100px; +$heightDay: $widthDay; +$gapDay: 1px; +$gap-day-width: $widthDay + $gapDay; +$daysWeek: ( + 'mon': 0, + 'tue': $gap-day-width, + 'wed': $gap-day-width * 2, + 'thu': $gap-day-width * 3, + 'fri': $gap-day-width * 4, + 'sat': $gap-day-width * 5, + 'sun': $gap-day-width * 6, +); From 39f0368f7eec7e737c8973ef55c1251439f5267f Mon Sep 17 00:00:00 2001 From: Oleh Puzin Date: Sat, 4 Jul 2026 23:20:20 +0300 Subject: [PATCH 2/2] fixing add solution --- src/index.html | 2 +- src/styles/calendar.scss | 4 ++-- src/styles/{index.scss => main.scss} | 7 ++++++- src/styles/variables.scss | 1 + 4 files changed, 10 insertions(+), 4 deletions(-) rename src/styles/{index.scss => main.scss} (81%) diff --git a/src/index.html b/src/index.html index 4fa43da9a0..63f979cea2 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss index 5514f400ed..8a57c6fb1d 100644 --- a/src/styles/calendar.scss +++ b/src/styles/calendar.scss @@ -1,6 +1,6 @@ .calendar { - width: $widthDay * 7 + $gapDay * 6; - padding: 10px; + width: 7 * $widthDay + 6 * $gapDay + 2 * $paddingCalendar; + padding: $paddingCalendar; display: flex; flex-flow: row wrap; gap: $gapDay; diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 81% rename from src/styles/index.scss rename to src/styles/main.scss index 56b28d27cd..bd98bd06b6 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -1,8 +1,13 @@ @import './variables'; @import './calendar'; -body { +* { margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { min-height: 100vh; font-family: Arial, Helvetica, sans-serif; display: flex; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9cdbc2a01f..2a6cd4d8c4 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,5 +1,6 @@ $widthDay: 100px; $heightDay: $widthDay; +$paddingCalendar: 10px; $gapDay: 1px; $gap-day-width: $widthDay + $gapDay; $daysWeek: (