diff --git a/src/index.html b/src/index.html index c10199d38..298206346 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -9,10 +10,43 @@ Calendar + -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 000000000..845f9a7cc --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,46 @@ +.calendar { + font-size: 30px; + $square-paddings: 10px; + display: flex; + flex-wrap: wrap; + gap: $square-spacing; + width: $calendar-width; + + &__day { + @include square($square-size); + + background-color: $background-color; + text-align: center; + line-height: $square-size; + cursor: pointer; + border: 1px solid black; + transition: + transform 500ms, + background-color 500ms; + + &:hover { + background-color: $background-color-hover; + transform: translateY(-20px); + } + + @for $i from 1 through 31 { + &:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + } + + &--month-length { + @for $i from 28 through 31 { + &--#{$i} :nth-child(n + #{$i + 1}) { + display: none; + } + } + } + + @each $day, $count in $start-days { + &--start-day--#{$day} :first-child { + margin-left: #{$count}; + } + } +} 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..029986902 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,6 @@ +@import './utils/reset'; +@import './utils/normalize'; +@import './utils/variables'; +@import './utils/colors'; +@import './utils/mixins'; +@import './blocks/calendar'; diff --git a/src/styles/utils/_colors.scss b/src/styles/utils/_colors.scss new file mode 100644 index 000000000..9bf53adaa --- /dev/null +++ b/src/styles/utils/_colors.scss @@ -0,0 +1,2 @@ +$background-color: #eee; +$background-color-hover: #ffbfcb; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss new file mode 100644 index 000000000..8964f1162 --- /dev/null +++ b/src/styles/utils/_mixins.scss @@ -0,0 +1,4 @@ +@mixin square($size) { + width: $size; + height: $size; +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..b8b21d379 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,3 @@ +html { + font-family: Arial, Helvetica, sans-serif; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..abe6d10c2 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,7 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 000000000..bee646685 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,13 @@ +$square-size: 100px; +$square-paddings: 10px; +$square-spacing: 1px; +$calendar-width: $square-size * 7 + $square-paddings * 2 + $square-spacing * 8; +$one-day-margin: $square-size + $square-spacing; +$start-days: // stylelint-disable-line scss/dollar-variable-colon-space-after + 'mon' 0, + 'tue' $one-day-margin, + 'wed' $one-day-margin * 2, + 'thu' $one-day-margin * 3, + 'fri' $one-day-margin * 4, + 'sat' $one-day-margin * 5, + 'sun' $one-day-margin * 6;