diff --git a/src/index.html b/src/index.html index f43eaefcd..e0615db44 100644 --- a/src/index.html +++ b/src/index.html @@ -14,38 +14,38 @@

Calendar

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index c4f659ec1..0a536637a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,43 +1,61 @@ @import './utils/variables'; -.month { +body { display: flex; - flex-wrap: wrap; - gap: 1px; - width: $width-calendar; - margin: auto; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; } -.day { - background-color: #eee; - width: $width-square; - height: $width-square; - border: 1px solid black; - box-sizing: border-box; - +.calendar { font-family: Arial, sans-serif; font-size: 30px; - text-align: center; - line-height: 100px; + display: flex; + flex-wrap: wrap; + gap: 1px; + width: $width-calendar; + margin: auto; - @for $i from 1 through $month-length { - &:nth-child(#{$i})::before { - content: '#{$i}'; + @each $name, $number in $week-day { + &--start-day-#{$name} > :first-child { + margin-left: (($number - 1) * $width-square) + ($number - 1); } } - &:first-child { - margin-left: $margin-first-day; + &--month-length-28 > :nth-last-child(-n + 3) { + display: none; } - &:nth-last-child(-n + 2) { + &--month-length-29 > :nth-last-child(-n + 2) { display: none; } - &:hover { - cursor: pointer; - background-color: #ffbfcb; - transform: translateY(-20px); - transition-duration: 0.5s; + &--month-length-30 > :nth-last-child { + display: none; + } + + &__day { + background-color: #eee; + width: $width-square; + height: $width-square; + border: 1px solid black; + box-sizing: border-box; + + text-align: center; + line-height: $width-square; + + @for $i from 1 through $month-length { + &:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + transition-duration: 0.5s; + } } } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..a7dbcca7c --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,7 @@ +.calendar { + @each $name, $number in $week-day { + &--start-day--#{name} { + margin-left: (($number - 1) * $width-square) + ($number - 1); + } + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index 0baa7862a..ce5742456 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -1,6 +1,4 @@ $width-square: 100px; $width-calendar: ($width-square * 7) + 10px; -$start-day: 7; -$margin-first-day: (($start-day - 1) * $width-square) + ($start-day - 1); -$month-length: 29; -$days-no: 31 - $month-length; +$week-day: ('mon' 1, 'tue' 2, 'wed' 3, 'thu' 4, 'fri' 5, 'sat' 6, 'sun' 7); +$month-length: 31;