diff --git a/README.md b/README.md index 37cba2aad..23b886bc0 100644 --- a/README.md +++ b/README.md @@ -36,13 +36,13 @@ 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://YuliaSabitova.github.io/layout_calendar/) +- [TEST REPORT LINK](https://YuliaSabitova.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. -- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element +- [x] Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout -- [ ] Each day has no modifiers, only class (eg. calendar__day) -- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked. -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] Each day has no modifiers, only class (eg. calendar__day) +- [x] All `Typical Mistakes` from `BEM` lesson theory are checked. +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index c10199d38..fcaac07cf 100644 --- a/src/index.html +++ b/src/index.html @@ -14,5 +14,38 @@

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..13e95190f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,76 @@ +$day-size: 100px; +$day-gap: 1px; +$day-border: 1px solid #000; +$hover-color: #ffbfcb; +$day-size-gap: $day-size + $day-gap; +$calendar-width: calc(10px + $day-size + (#{$day-size-gap} * 6) + 10px); + +* { + box-sizing: border-box; +} + body { margin: 0; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + display: flex; +} + +.calendar { + display: flex; + flex-wrap: wrap; + width: $calendar-width; + gap: $day-gap; + padding: 10px; + counter-reset: day; +} + +@each $day, + $margin + in ( + mon: 0, + tue: $day-size-gap * 1, + wed: $day-size-gap * 2, + thu: $day-size-gap * 3, + fri: $day-size-gap * 4, + sat: $day-size-gap * 5, + sun: $day-size-gap * 6 + ) +{ + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: $margin; + } +} + +@for $days from 28 through 31 { + .calendar--month-length-#{$days} .calendar__day:nth-child(n + #{$days + 1}) { + display: none; + } +} + +.calendar__day { + width: $day-size; + height: $day-size; + border: $day-border; + background-color: #eee; + display: flex; + justify-content: center; + align-items: center; + transition-duration: 0.5s; + counter-increment: day; + font-family: Arial, sans-serif; + font-size: 30px; + + &::before { + content: counter(day); + } + + &:hover { + cursor: pointer; + background-color: $hover-color; + transform: translateY(-20px); + transition-duration: 0.5s; + } }