From 7a7b0f87b3728f0a43cad7cd2dda9b0237b1539e Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Wed, 24 Jun 2026 17:41:30 +0300 Subject: [PATCH 1/8] add task solution --- src/index.html | 34 ++++++++++++++++- src/styles/index.scss | 86 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 119 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index c10199d38b..4bd3926652 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..643622d560 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,89 @@ +/* stylelint-disable scss/operator-no-newline-after */ +$calendar-columns: 7; +$calendar-days-count: 31; +$day-border-width: 1px; +$day-size: 100px; +$day-bg: #eee; +$day-border-color: #000; +$calendar-gap: 1px; +$calendar-padding: 10px; +$day-step: $day-size + $calendar-gap; +$weekdays: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + body { margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: $calendar-gap; + + width: $calendar-columns * $day-size + ($calendar-columns - 1) * $calendar-gap + + 2 * $calendar-padding; + padding: $calendar-padding; + + box-sizing: border-box; + + &__day { + box-sizing: border-box; + + width: $day-size; + height: $day-size; + + background-color: $day-bg; + border: $day-border-width solid $day-border-color; + + display: flex; + align-items: center; + justify-content: center; + + &::before { + font: + 30px Arial, + sans-serif; + line-height: 1; + } + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + transition: transform 0.5s; + } + } + + @for $i from 1 through $calendar-days-count { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + @each $day, $offset in $weekdays { + &--start-day--#{$day} { + .calendar__day:first-child { + margin-left: if($offset > 0, $offset * $day-step, 0); + } + } + } + + @for $length from 28 through $calendar-days-count { + &--length-#{$length} { + .calendar__day:nth-child(n + #{$length + 1}) { + display: none; + } + } + } } From d2f2424947c3e606ac4c30373ff250242e22f05d Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Wed, 24 Jun 2026 18:47:14 +0300 Subject: [PATCH 2/8] add task solution --- src/styles/index.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 643622d560..43d5a78ee7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -49,6 +49,9 @@ body { display: flex; align-items: center; justify-content: center; + transition: + transform 0.5s, + background-color 0.5s; &::before { font: @@ -80,7 +83,7 @@ body { } @for $length from 28 through $calendar-days-count { - &--length-#{$length} { + &--month-length--#{$length} { .calendar__day:nth-child(n + #{$length + 1}) { display: none; } From ac0a0368e0c96db8d3521be7a47c181db97b031f Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Wed, 24 Jun 2026 19:06:38 +0300 Subject: [PATCH 3/8] add task solution --- src/index.html | 2 +- src/styles/{index.scss => main.scss} | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) rename src/styles/{index.scss => main.scss} (91%) diff --git a/src/index.html b/src/index.html index 4bd3926652..e61119400e 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 91% rename from src/styles/index.scss rename to src/styles/main.scss index 43d5a78ee7..8f239959e4 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -31,8 +31,10 @@ body { flex-wrap: wrap; gap: $calendar-gap; - width: $calendar-columns * $day-size + ($calendar-columns - 1) * $calendar-gap + - 2 * $calendar-padding; + width: ( + $calendar-columns * $day-size + ($calendar-columns - 1) * $calendar-gap + 2 * + $calendar-padding + ); padding: $calendar-padding; box-sizing: border-box; @@ -64,7 +66,6 @@ body { cursor: pointer; background-color: #ffbfcb; transform: translateY(-20px); - transition: transform 0.5s; } } From 78fc08fb363aae66d1090ac6eff3a4c6ba8e22dd Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Wed, 24 Jun 2026 23:15:58 +0300 Subject: [PATCH 4/8] add task solution --- src/index.html | 4 +++- src/styles/main.scss | 33 +++++++++++++++++++++++++-------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index e61119400e..ffcc279adf 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,9 @@ /> -
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 8f239959e4..8f7768af48 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -30,44 +30,45 @@ body { display: flex; flex-wrap: wrap; gap: $calendar-gap; - width: ( $calendar-columns * $day-size + ($calendar-columns - 1) * $calendar-gap + 2 * $calendar-padding ); padding: $calendar-padding; - box-sizing: border-box; - &__day { box-sizing: border-box; - width: $day-size; height: $day-size; - background-color: $day-bg; border: $day-border-width solid $day-border-color; - display: flex; align-items: center; justify-content: center; transition: transform 0.5s, background-color 0.5s; - &::before { font: 30px Arial, sans-serif; line-height: 1; } - &:hover { cursor: pointer; background-color: #ffbfcb; transform: translateY(-20px); } } + &:not(.calendar--start-day--sun), + &:not(.calendar--month-length--31), + &.calendar--start-day-wed, + &.calendar--month-length-29 { + .calendar__day::before { + position: relative; + top: 1px; + } + } @for $i from 1 through $calendar-days-count { .calendar__day:nth-child(#{$i})::before { @@ -83,6 +84,14 @@ body { } } + @each $day, $offset in $weekdays { + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: if($offset > 0, $offset * $day-step, 0); + } + } + } + @for $length from 28 through $calendar-days-count { &--month-length--#{$length} { .calendar__day:nth-child(n + #{$length + 1}) { @@ -90,4 +99,12 @@ body { } } } + + @for $length from 28 through $calendar-days-count { + &--month-length-#{$length} { + .calendar__day:nth-child(n + #{$length + 1}) { + display: none; + } + } + } } From 3eab0a0d0ac74d1983ede2ed8131fb0fb3ebf89f Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Thu, 25 Jun 2026 13:00:01 +0300 Subject: [PATCH 5/8] fix --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index ffcc279adf..f74c4061c1 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@
From b7fbeec8355d074f2031e0fa8131d2d757a7ec96 Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Thu, 25 Jun 2026 13:16:16 +0300 Subject: [PATCH 6/8] fix all --- src/styles/main.scss | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 8f7768af48..6915f28493 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -77,7 +77,7 @@ body { } @each $day, $offset in $weekdays { - &--start-day--#{$day} { + &--start-day-#{$day} { .calendar__day:first-child { margin-left: if($offset > 0, $offset * $day-step, 0); } @@ -92,14 +92,6 @@ body { } } - @for $length from 28 through $calendar-days-count { - &--month-length--#{$length} { - .calendar__day:nth-child(n + #{$length + 1}) { - display: none; - } - } - } - @for $length from 28 through $calendar-days-count { &--month-length-#{$length} { .calendar__day:nth-child(n + #{$length + 1}) { From cfbbfc427b791e5d84265b97cfff42e92be5c9d4 Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Thu, 25 Jun 2026 13:41:26 +0300 Subject: [PATCH 7/8] fix --- src/index.html | 4 +--- src/styles/main.scss | 14 +++----------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/index.html b/src/index.html index f74c4061c1..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,9 +13,7 @@ /> -
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 6915f28493..037118adbc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -60,8 +60,8 @@ body { transform: translateY(-20px); } } - &:not(.calendar--start-day--sun), - &:not(.calendar--month-length--31), + &:not(.calendar--start-day-sun), + &:not(.calendar--month-length-31), &.calendar--start-day-wed, &.calendar--month-length-29 { .calendar__day::before { @@ -83,15 +83,7 @@ body { } } } - - @each $day, $offset in $weekdays { - &--start-day-#{$day} { - .calendar__day:first-child { - margin-left: if($offset > 0, $offset * $day-step, 0); - } - } - } - + @for $length from 28 through $calendar-days-count { &--month-length-#{$length} { .calendar__day:nth-child(n + #{$length + 1}) { From 8aba36fd36ace7247f3c87bb4a46725cfa155bd9 Mon Sep 17 00:00:00 2001 From: Roma Pleshenko Date: Thu, 25 Jun 2026 13:51:08 +0300 Subject: [PATCH 8/8] DONE --- src/styles/main.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 037118adbc..09140d9b9b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -60,15 +60,6 @@ body { transform: translateY(-20px); } } - &:not(.calendar--start-day-sun), - &:not(.calendar--month-length-31), - &.calendar--start-day-wed, - &.calendar--month-length-29 { - .calendar__day::before { - position: relative; - top: 1px; - } - } @for $i from 1 through $calendar-days-count { .calendar__day:nth-child(#{$i})::before { @@ -83,7 +74,7 @@ body { } } } - + @for $length from 28 through $calendar-days-count { &--month-length-#{$length} { .calendar__day:nth-child(n + #{$length + 1}) {