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..095bfa139c --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,68 @@ +@import './variables'; + +body { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calendar { + display: flex; + gap: $gap; + flex-wrap: wrap; + + box-sizing: border-box; + + padding: $day-padding; + + width: $columns * $day-size + calc(7 - 1) * $gap + (2 * $day-padding); + + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + + &__day { + height: $day-size; + width: $day-size; + + padding: $day-padding; + + box-sizing: border-box; + border: $border; + background-color: $day-background-color; + + display: flex; + align-items: center; + justify-content: center; + + transition-duration: 0.5s; + + &:hover { + cursor: pointer; + background-color: $hover-day-color; + transform: translateY(-20px); + } + } + + @each $margin, $day in $start-days { + &--start-day-#{$day} &__day:first-child { + margin-left: $margin; + } + } + + @for $day from 1 through $days-in-month { + & &__day:nth-child(#{$day}) { + &::before { + content: '#{$day}'; + } + } + } + + @for $length from 28 through 31 { + &--month-length-#{$length} &__day:nth-child(n + #{$length + 1}) { + display: none; + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..168fbbf5ad --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,17 @@ +$gap: 1px; +$border: 1px solid black; +$day-background-color: #eee; +$day-size: 100px; +$columns: 7; +$day-padding: 10px; +$days-in-month: 31; +$hover-day-color: #ffbfcb; +$start-days: ( + 0 'mon', + ($day-size + $gap) 'tue', + (($day-size + $gap) * 2) 'wed', + (($day-size + $gap) * 3) 'thu', + (($day-size + $gap) * 4) 'fri', + (($day-size + $gap) * 5) 'sat', + (($day-size + $gap) * 6) 'sun' +);