From e99046d5ef7293ab19127611270b70a67e38669d Mon Sep 17 00:00:00 2001 From: Alex <95381107+kripikripi@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:02:01 +0300 Subject: [PATCH] solution --- src/index.html | 92 ++++++++++++++++++++++--------------------- src/styles/index.scss | 38 ++++++++++++++---- 2 files changed, 79 insertions(+), 51 deletions(-) diff --git a/src/index.html b/src/index.html index 75dc871326..bff6adc633 100644 --- a/src/index.html +++ b/src/index.html @@ -1,47 +1,51 @@ + + + + Calendar + + - - - - Calendar - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - \ No newline at end of file + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/src/styles/index.scss b/src/styles/index.scss index 75972cf8f9..435220c39f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,29 +1,44 @@ $calendar-day-size: 100px; $calendar-day-border: 1px solid black; $calendar-day-color: #eee; +$gap-size: 1px; +$padding-size: 10px; +$start-day: ( + mon 0, + tue ($calendar-day-size + $gap-size), + wed ($calendar-day-size + $gap-size) * 2, + thu ($calendar-day-size + $gap-size) * 3, + fri ($calendar-day-size + $gap-size) * 4, + sat ($calendar-day-size + $gap-size) * 5, + sun ($calendar-day-size + $gap-size) * 6 +); + body { margin: 0; font-family: Arial, Helvetica, sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; } .calendar { - padding: 10px; - height: calc($calendar-day-size * 7); - width: calc($calendar-day-size * 7); + padding: $padding-size; + width: calc($calendar-day-size * 7 + $gap-size * 6); display: flex; flex-wrap: wrap; - align-content: flex-start; - gap: 1px; + gap: $gap-size; &__day { width: $calendar-day-size; height: $calendar-day-size; box-sizing: border-box; background-color: $calendar-day-color; - border: 1px solid black; - gap: 1px; + border: $calendar-day-border; + gap: $gap-size; display: flex; justify-content: center; align-items: center; + @for $i from 1 through 31 { &:nth-child(#{$i}) { &::before { @@ -40,9 +55,18 @@ body { transition: 0.5s; } } + @for $i from 28 through 31 { &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { display: none; } } + + @each $day, $margin-left in $start-day { + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: $margin-left; + } + } + } }