diff --git a/README.md b/README.md index 6a30283def..c0120f7118 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://IvanVarvaruk.github.io/layout_calendar/) +- [TEST REPORT LINK](https://IvanVarvaruk.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 c10199d38b..323acbc747 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 0000000000..d62871559d --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,53 @@ +.calendar { + display: flex; + flex-flow: row wrap; + gap: $gap; + width: $cell-size * 7 + $gap * 6; + + &__day { + box-sizing: border-box; + background-color: #eee; + border: 1px solid #000; + height: $cell-size; + width: $cell-size; + + transition: + background-color 0.5s, + transform 0.5s; + + font-family: Arial, Helvetica, sans-serif; + line-height: 98px; + text-align: center; + font-size: 30px; + } + + @for $i from 1 through 31 { + &__day:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + @each $name, $number in $week-days { + @if $number == 0 { + &--start-day-#{$name} &__day:first-child { + margin-left: (6 * $cell-size) + (6 * $gap); + } + } @else { + &--start-day-#{$name} &__day:first-child { + margin-left: (($number - 1) * $cell-size) + (($number - 1) * $gap); + } + } + } + + &__day:hover { + background-color: #ffbfcb; + cursor: pointer; + transform: translateY(-20px); + } + + @for $days from 28 through 31 { + &--month-length-#{$days} &__day:nth-child(n + #{$days + 1}) { + display: none; + } + } +} 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..6abc99df58 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,10 @@ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +@import 'utils/varibles'; +@import 'blocks/calendar'; diff --git a/src/styles/utils/varibles.scss b/src/styles/utils/varibles.scss new file mode 100644 index 0000000000..64caea5fc0 --- /dev/null +++ b/src/styles/utils/varibles.scss @@ -0,0 +1,11 @@ +$cell-size: 100px; +$gap: 1px; +$week-days: ( + 'sun': 0, + 'mon': 1, + 'tue': 2, + 'wed': 3, + 'thu': 4, + 'fri': 5, + 'sat': 6, +);