From 900357fea94aff1f2211f1ed5d4a0372b6f93594 Mon Sep 17 00:00:00 2001 From: Daniil Date: Mon, 29 Jun 2026 22:13:38 +0300 Subject: [PATCH 1/2] first commit --- src/index.html | 36 ++++++++++++++++++++++-- src/styles/blocks/_calendar.scss | 46 +++++++++++++++++++++++++++++++ src/styles/blocks/_variables.scss | 7 +++++ src/styles/index.scss | 3 -- src/styles/main.scss | 10 +++++++ 5 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 src/styles/blocks/_calendar.scss create mode 100644 src/styles/blocks/_variables.scss delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index c10199d38b..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/_calendar.scss b/src/styles/blocks/_calendar.scss new file mode 100644 index 0000000000..1b39d7ce3d --- /dev/null +++ b/src/styles/blocks/_calendar.scss @@ -0,0 +1,46 @@ +.calendar { + display: flex; + width: calc($dayWidth * 7 + $gap * 6 + $padding * 2); + gap: $gap; + flex-wrap: wrap; + padding: $padding; + box-sizing: border-box; + + &__day { + background-color: #eee; + width: $dayWidth; + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + transition-duration: $transitionDuration; + border: 1px solid black; + box-sizing: border-box; + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } + + @for $i from 1 through 31 { + &:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, sans-serif; + font-size: 30px; + } + } + } + + @each $day, $index in $days { + &--start-day-#{$day} &__day:first-child { + margin-left: calc($dayWidth * $index + $gap * $index); + } + } + + @for $i from 28 through 31 { + &--month-length-#{$i} &__day:nth-child(n + #{$i + 1}) { + display: none; + } + } +} diff --git a/src/styles/blocks/_variables.scss b/src/styles/blocks/_variables.scss new file mode 100644 index 0000000000..1ffc2cca4b --- /dev/null +++ b/src/styles/blocks/_variables.scss @@ -0,0 +1,7 @@ +$dayWidth: 100px; +$gap: 1px; +$padding: 10px; + +// prettier-ignore +$days: mon 0, tue 1, wed 2, thu 3, fri 4, sat 5, sun 6; +$transitionDuration: 0.5s; diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..5593c5f009 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,10 @@ +@import './blocks/variables'; +@import './blocks/calendar'; + +body { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} From c57bca1040b944096b82f572ef96f91ef5ae183f Mon Sep 17 00:00:00 2001 From: Daniil Date: Mon, 29 Jun 2026 22:21:21 +0300 Subject: [PATCH 2/2] second commit --- src/styles/blocks/_calendar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/blocks/_calendar.scss b/src/styles/blocks/_calendar.scss index 1b39d7ce3d..b5099af495 100644 --- a/src/styles/blocks/_calendar.scss +++ b/src/styles/blocks/_calendar.scss @@ -13,6 +13,7 @@ display: flex; justify-content: center; align-items: center; + transition: background-color $transitionDuration, transform $transitionDuration; transition-duration: $transitionDuration; border: 1px solid black; box-sizing: border-box;