diff --git a/README.md b/README.md index 37cba2aad..975000bb1 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_calendar/) -- [TEST REPORT LINK](https://.github.io/layout_calendar/report/html_report/) +- [DEMO LINK](https://Igor-Pysak.github.io/layout_calendar/) +- [TEST REPORT LINK](https://Igor-Pysak.github.io/layout_calendar/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index c10199d38..2c793f8dd 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss new file mode 100644 index 000000000..553fe23f7 --- /dev/null +++ b/src/styles/calendar.scss @@ -0,0 +1,58 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + width: calc($day-size * 7 + $gap-size * 6); + display: flex; + flex-wrap: wrap; + column-count: 7; + gap: $gap-size; + padding: 10px; + + &__day { + cursor: pointer; + box-sizing: border-box; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: #eee; + border: 1px solid black; + height: $day-size; + width: $day-size; + transition: 0.5s; + } + + &__day:hover { + background-color: #ffbfcb; + transform: translate(0, -20px); + } + + @for $i from 1 through 31 { + &__day:nth-child(#{$i})::before { + content: '#{$i}'; + position: absolute; + text-align: center; + font-size: 30px; + color: black; + } + } + + @each $day, $day-position in $week-days { + &--start-day-#{$day} > &__day:first-child { + margin-left: calc(($day-size + $gap-size) * $day-position); + } + } + + @for $number from 28 through 31 { + &--month-length-#{$number} :nth-child(n + #{$number + 1}) { + display: none; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..88664386c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,2 @@ -body { - margin: 0; -} +@import './variables'; +@import './calendar'; diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 000000000..f58281cbb --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,11 @@ +$week-days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); +$day-size: 100px; +$gap-size: 1px;