diff --git a/src/index.html b/src/index.html index c10199d38b..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- 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 0000000000..6f7149e5f4 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,86 @@ +$day-size: 100px; +$border: 1px; +$gap: 1px; +$padding: 10px; +$font-size: 30px; +$bg: #eee; +$hover: #ffbfcb; +$col-width: $day-size; +$container-width: 7 * $col-width + 6 * $gap + 2 * $padding; +$week-days: ( + mon: 1, + tue: 2, + wed: 3, + thu: 4, + fri: 5, + sat: 6, + sun: 7, +); + +body { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: $gap; + padding: $padding; + width: $container-width; + box-sizing: border-box; + + &__day { + width: $day-size; + height: $day-size; + background: $bg; + border: $border solid #000; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + transition: + transform 0.5s, + background-color 0.5s; + + &:hover { + cursor: pointer; + background: $hover; + transform: translateY(-20px); + z-index: 1; + } + + &::before { + display: block; + pointer-events: none; + text-align: center; + box-sizing: border-box; + user-select: none; + } + } +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, sans-serif; + font-size: $font-size; + } +} + +@each $name, $pos in $week-days { + .calendar--start-day-#{$name} { + .calendar__day:nth-child(1) { + margin-left: ($pos - 1) * ($day-size + $gap); + } + } +} + +@for $len from 28 through 31 { + .calendar--month-length-#{$len} .calendar__day:nth-child(n + #{$len + 1}) { + display: none; + } +}