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..7ab7f9f64 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,80 @@ +$cell-size: 100px; +$border: 1px solid black; +$day-color: #eee; +$hover-color: #ffbfcb; +$font-size: 30px; +$animation-duration: 0.5s; +$days-of-week: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); +$gap: 1px; +$font-family: Arial, sans-serif; + body { margin: 0; } + +html { + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + display: flex; + flex-wrap: wrap; + width: calc((7 * #{$cell-size}) + 6px); + padding: 10px; + gap: $gap; + counter-reset: day-counter 0; + &__day { + width: $cell-size; + height: $cell-size; + justify-content: center; + align-items: center; + font-family: $font-family; + font-size: $font-size; + background-color: $day-color; + border: $border; + display: flex; + box-sizing: border-box; + &::before { + counter-increment: day-counter; + content: counter(day-counter); + } + &:hover { + cursor: pointer; + background-color: $hover-color; + transform: translateY(-20px); + transition: all $animation-duration; + } + } + + @each $day, $index in $days-of-week { + &--start-day-#{$day} .calendar__day:nth-child(1) { + margin-left: calc(#{$index} * (#{$cell-size} + 1px)); + } + } + + @for $i from 28 through 31 { + &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } + } +} + +@each $day, $index in $days-of-week { + .calendar--start-day--#{$day} { + .calendar__day:first-child { + margin-left: ($cell-size + $gap) * $index; + } + } +}