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..8d50b8adcb --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,70 @@ +@use './utils/variables.scss' as *; + +.page { + 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; + box-sizing: border-box; + 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: + background-color $anim-duration, + transform $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..175c0d1ded --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,22 @@ +$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: 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, +);