diff --git a/README.md b/README.md index 37cba2aad..85cc8d369 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Display a calendar in the middle of the screen (both horizontally and vertically - Set 31 days by default On hovering over a cell: + - cursor should become pointer - The hovered cell has to become pink (use `#FFBFCB`) - Move the hovered cell up by `20px` (use `transform`) @@ -27,7 +28,7 @@ On hovering over a cell: > Here are the [Layout Tasks Instruction](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github) -*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. +_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code. ![reference image](reference.png). @@ -36,13 +37,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://maksym2493.github.io/layout_calendar/) +- [TEST REPORT LINK](https://maksym2493.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 -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] Changing 'month-lengh' and 'start-day' modifier in the code element + reflects in changing calendar layout +- [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..c748f89d9 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,43 @@ Calendar + -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 000000000..42f28def0 --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,60 @@ +@use 'sass:list'; + +$gap-width: 1px; +$day-size: 100px; +$number-of-columns: 7; +$days-of-week: mon, tue, wed, thu, fri, sat, sun; + +.calendar { + padding: 10px; + display: flex; + flex-wrap: wrap; + gap: $gap-width; + width: $day-size * $number-of-columns + $gap-width * ($number-of-columns - 1); + + font-size: 30px; + font-family: Arial, Helvetica, sans-serif; + + &__day { + width: $day-size; + height: $day-size; + background-color: #eee; + + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + border: 1px solid #000; + + transition-duration: 0.5s; + + @for $i from 1 through 31 { + &:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + + transition-duration: 0.5s; + transform: translateY(-20px); + } + } + + @each $day in $days-of-week { + &--start-day-#{$day} > :first-child { + $i: list.index($days-of-week, $day) - 1; + + margin-left: ($day-size + $gap-width) * $i; + } + } + + @for $i from 28 through 31 { + &--month-length-#{$i} > :nth-child(n + #{$i + 1}) { + display: none; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..d12f60f92 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,8 @@ +body { + margin: 0; + height: 100vh; + + display: flex; + align-items: center; + justify-content: center; +} 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/style.scss b/src/styles/style.scss new file mode 100644 index 000000000..b50603bf9 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,2 @@ +@import './blocks/page'; +@import './blocks/calendar';