From a3d8127aeeed65a57cf9e5282ea683cbb95479f0 Mon Sep 17 00:00:00 2001 From: Kostya Oliinyk Date: Fri, 20 Dec 2024 01:29:08 +0200 Subject: [PATCH] add solution --- src/index.html | 38 ++++++++++++++++++++-- src/styles/index.scss | 3 -- src/styles/main.scss | 74 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 5 deletions(-) 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 c10199d38..30c6600a5 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,44 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f1..000000000 --- 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 000000000..fb6743627 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,74 @@ +$block: 100px; +$gap: 1px; +$days: 31; + +body { + margin: 0; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calendar { + flex-wrap: wrap; + gap: $gap; + max-width: 706px; + padding: 0 10px; + display: flex; + + &:nth-child(7n + 10) { + margin-top: 0; + } +} + +.calendar .calendar__day { + width: $block; + height: $block; + border: 1px solid #000; + background-color: #eee; + text-align: center; + cursor: pointer; + justify-content: center; + align-items: center; + transition-property: background-color, transform; + transition-duration: 0.5s; + display: flex; + box-sizing: border-box; + + &:hover { + transform: translateY(-20px); + background-color: #ffbfcb; + } +} + +@for $number from 1 through 31 { + .calendar__day:nth-child(#{$number})::before { + content: '#{$number}'; + } +} + +$days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); + +@each $day, $number in $days { + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: #{(($block + $gap) * $number)}; + } +} + +@for $number from 28 through 31 { + .calendar--month-length-31 .calendar__day:nth-child(n + #{$number + 1}) { + display: none; + } +}