diff --git a/src/index.html b/src/index.html index c10199d38..28abd4585 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 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..d17116745 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,98 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +$day-size: 100px; +$border-width: 1px; +$gap-size: 1px; +$padding-size: 10px; +$days-per-row: 7; +$transition-duration: 0.5s; +$hover-offset: 20px; +$start-days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + +body { + display: flex; + justify-content: center; + align-items: center; + + height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + gap: $gap-size; + + padding: $padding-size; + + width: calc( + #{$day-size * $days-per-row} + #{$gap-size * ($days-per-row - 1)} + #{( + $padding-size * 2 + )} + ); + + &__day { + width: $day-size; + height: $day-size; + + background: #eee; + + border: $border-width solid black; + + position: relative; + + cursor: pointer; + + transition: + transform $transition-duration, + background-color $transition-duration; + + &::before { + content: ''; + + position: absolute; + top: 50%; + left: 50%; + + transform: translate(-50%, -50%); + + font-family: Arial, sans-serif; + font-size: 30px; + } + + &:hover { + background: #ffbfcb; + + transform: translateY(-$hover-offset); + } + } + + @for $i from 1 through 31 { + &__day:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + @each $day, $index in $start-days { + &--start-day-#{$day} &__day:first-child { + margin-left: calc(#{($day-size + $gap-size) * $index}); + } + } + + @for $length from 28 through 31 { + &--month-length-#{$length} &__day:nth-child(n + #{$length + 1}) { + display: none; + } + } +}