diff --git a/src/index.html b/src/index.html index c10199d38b..bf509b25c1 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,46 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..09358d0387 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,7 @@ body { margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..a1f2d1917f --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,94 @@ +$day-bg: #eee; +$hover-bg: #ffbfcb; +$box-size: 100px; +$border: 1px; +$bd-color: #000; +$font-family: Arial, sans-serif; +$font-size: 30px; +$gap: 1px; +$columns: 7; +$padding: 10px; +$transition: 0.5s; +$start-days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: $gap; + padding: $padding; + width: ($box-size * $columns) + ($gap * ($columns - 1)) + ($padding * 2); + + &__day { + display: flex; + justify-content: center; + align-items: center; + + font-family: $font-family; + font-size: $font-size; + + box-sizing: border-box; + width: $box-size; + height: $box-size; + gap: $gap; + + background-color: $day-bg; + border: $border solid $bd-color; + + position: relative; + transition: + background-color 0.5s, + $transition; + + &::before { + position: absolute; + } + + &:hover { + cursor: pointer; + background-color: $hover-bg; + transform: translateY(-20px); + } + } +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } +} + +@each $day, $numday in $start-days { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($box-size + $gap) * $numday; + } + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} { + .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } + } +}