From 57c3f176766dfd22c6f94df10b909763ac30c184 Mon Sep 17 00:00:00 2001 From: Oksana Sidanych Date: Tue, 17 Dec 2024 23:56:29 +0200 Subject: [PATCH 1/2] add task solution --- src/index.html | 34 +++++++++++++++++++- src/styles/index.scss | 72 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 1 deletion(-) 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/index.scss b/src/styles/index.scss index 293d3b1f1..40fb71260 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,75 @@ +$cell-size: 100px; +$gap: 1px; +$days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); + +html { + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; +} + body { margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: 1px; + padding: 10px; + width: calc($cell-size * 7 + $gap * 6); + + &__day { + box-sizing: border-box; + display: flex; + width: 100px; + height: 100px; + border: 1px solid black; + background-color: #eee; + justify-content: center; + align-items: center; + transition-duration: 0.5s; + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } + } +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(n + #{$i})::before { + content: '#{$i}'; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} + +@each $day, $i in $days { + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: calc(#{$i} * $cell-size + #{$i * $gap}); + } +} + +@each $day, $i in $days { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($cell-size + $gap) * $i; + } + } } From c4314003b95feea812fada16eeab5b370e6d167e Mon Sep 17 00:00:00 2001 From: Oksana Sidanych Date: Wed, 18 Dec 2024 00:20:25 +0200 Subject: [PATCH 2/2] remove unnecessary block --- src/styles/{index.scss => main.scss} | 8 -------- 1 file changed, 8 deletions(-) rename src/styles/{index.scss => main.scss} (88%) diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 88% rename from src/styles/index.scss rename to src/styles/main.scss index 40fb71260..4b779138e 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -65,11 +65,3 @@ body { margin-left: calc(#{$i} * $cell-size + #{$i * $gap}); } } - -@each $day, $i in $days { - .calendar--start-day-#{$day} { - .calendar__day:first-child { - margin-left: ($cell-size + $gap) * $i; - } - } -}