From 69d6757ebea500231aa21bc447a0e6e7f00deebc Mon Sep 17 00:00:00 2001 From: Sumar Illya Date: Fri, 10 Jul 2026 20:59:38 +0300 Subject: [PATCH 1/4] Tasks solved --- README.md | 11 +++--- src/index.html | 45 ++++++++++++++++++++-- src/styles/index.scss | 3 -- src/styles/main.scss | 67 +++++++++++++++++++++++++++++++++ src/styles/utils/variables.scss | 21 +++++++++++ 5 files changed, 135 insertions(+), 12 deletions(-) delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/utils/variables.scss diff --git a/README.md b/README.md index 6a30283def..87ba613560 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 in your HTML 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 Instructions](https://mate-academy.github.io/layout_task-guideline) -*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://GrizlixXx.github.io/layout_calendar/) +- [TEST REPORT LINK](https://GrizlixXx.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) + 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) diff --git a/src/index.html b/src/index.html index c10199d38b..9c4ca4f422 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,9 @@ + - + Calendar - -

Calendar

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- 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 0000000000..7e6433aaf8 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,67 @@ +@use './utils/variables.scss' as *; + +.page__body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #f5f5f5; +} + +.calendar { + display: flex; + flex-wrap: wrap; + width: $calendar-width; + padding: $calendar-padding; + gap: $calendar-gap; + + @for $length from 28 through 31 { + &--month-length-#{$length} { + .calendar__day:nth-child(n + #{$length + 1}) { + display: none; + } + } + } + + @each $day, $offset in $week-days { + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: calc(#{$offset} * (#{$day-size} + #{$calendar-gap})); + } + } + } + + &__day { + display: flex; + justify-content: center; + align-items: center; + + box-sizing: border-box; + border: $day-border; + background-color: $day-bg-color; + width: $day-size; + height: $day-size; + + cursor: pointer; + transition-duration: $anim-duration; + + &::before { + font-family: $font-family; + font-size: $font-size; + } + + &:hover { + background-color: $day-hover-color; + transform: $day-hover-transform; + } + + @for $i from 1 through 31 { + &:nth-child(#{$i}) { + &::before { + content: '#{$i}'; + } + } + } + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..d86c2329f5 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,21 @@ +$day-size: 100px; +$day-bg-color: #eee; +$day-border: 1px solid #000; +$font-family: Arial, sans-serif; +$font-size: 30px; +$calendar-gap: 1px; +$calendar-padding: 10px; +$day-hover-color: #ffbfcb; +$day-hover-transform: translateY(-20px); +$anim-duration: 0.5s; +$calendar-width: (7 * $day-size) + 6 * $calendar-gap; +$day-size: 100px; +$week-days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); From 3a8bbcac2a4dbb6ae6692699dca191f8844a5c72 Mon Sep 17 00:00:00 2001 From: Sumar Illya Date: Fri, 10 Jul 2026 21:24:19 +0300 Subject: [PATCH 2/4] Tasks solved, requesting changes changed --- src/styles/main.scss | 5 ++++- src/styles/utils/variables.scss | 19 ++++++++++--------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 7e6433aaf8..6a233f23df 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -13,6 +13,7 @@ display: flex; flex-wrap: wrap; width: $calendar-width; + box-sizing: border-box; padding: $calendar-padding; gap: $calendar-gap; @@ -44,7 +45,9 @@ height: $day-size; cursor: pointer; - transition-duration: $anim-duration; + transition: + background-color $anim-duration, + transform $anim-duration; &::before { font-family: $font-family; diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index d86c2329f5..4647b2bcf4 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -8,14 +8,15 @@ $calendar-padding: 10px; $day-hover-color: #ffbfcb; $day-hover-transform: translateY(-20px); $anim-duration: 0.5s; -$calendar-width: (7 * $day-size) + 6 * $calendar-gap; -$day-size: 100px; +$calendar-width: calc( + 7 * #{$day-size} + 6 * #{$calendar-gap} + 2 * #{$calendar-padding} +); $week-days: ( - mon: 0, - tue: 1, - wed: 2, - thu: 3, - fri: 4, - sat: 5, - sun: 6, + sun: 0, + mon: 1, + tue: 2, + wed: 3, + thu: 4, + fri: 5, + sat: 6, ); From 7654843742d71477aa0b2f308fb1f9e7ac6d2158 Mon Sep 17 00:00:00 2001 From: Sumar Illya Date: Fri, 10 Jul 2026 21:29:02 +0300 Subject: [PATCH 3/4] Tasks solved, requesting changes changed --- src/styles/utils/variables.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index 4647b2bcf4..175c0d1ded 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -12,11 +12,11 @@ $calendar-width: calc( 7 * #{$day-size} + 6 * #{$calendar-gap} + 2 * #{$calendar-padding} ); $week-days: ( - sun: 0, - mon: 1, - tue: 2, - wed: 3, - thu: 4, - fri: 5, - sat: 6, + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, ); From b7d47efd85a1c7cbefb053cc31c0a660f3abea9b Mon Sep 17 00:00:00 2001 From: Sumar Illya Date: Fri, 10 Jul 2026 21:57:11 +0300 Subject: [PATCH 4/4] Tasks solved, requesting changes changed --- src/styles/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 6a233f23df..8d50b8adcb 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,6 @@ @use './utils/variables.scss' as *; -.page__body { +.page { margin: 0; min-height: 100vh; display: flex;