From 46e3766cd33f4d9ca67c46fe5c6623b59861155e Mon Sep 17 00:00:00 2001 From: Lera Date: Tue, 5 Nov 2024 22:45:45 +0100 Subject: [PATCH 1/2] add task solution --- README.md | 4 +-- src/index.html | 34 ++++++++++++++++++++++- src/styles/index.scss | 63 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 37cba2aadd..ee7b782fe3 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,8 @@ 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://leraMeleshchenko.github.io/layout_calendar/) +- [TEST REPORT LINK](https://leraMeleshchenko.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. diff --git a/src/index.html b/src/index.html index c10199d38b..2c793f8ddd 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..508a02a7b1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,66 @@ body { margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +$day-size: 100px; +$gap: 1px; + +.calendar { + max-width: calc($day-size * 7 + $gap * 6); + display: flex; + flex-wrap: wrap; + gap: $gap; + padding: 10px; + &__day { + background-color: #eee; + position: relative; + box-sizing: border-box; + width: $day-size; + height: $day-size; + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + background-color: #ffbfcb; + transform: translateY(-20px); + cursor: pointer; + transition-duration: 0.5s; + } + } +} + +@for $i from 1 to 32 { + .calendar :nth-child(#{$i}):after { + content: '#{$i}'; + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + } +} + +$days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + +@each $day, $index in $days { + .calendar--start-day-#{$day} :first-child { + margin-left: ($day-size + $gap) * $index; + } +} + +@for $i from 28 to 31 { + .calendar--month-length-#{$i} :nth-child(n + #{$i + 1}) { + display: none; + } } From 3bb205d7132ca8db05f2b41d06af7041e51f182f Mon Sep 17 00:00:00 2001 From: Lera Date: Tue, 5 Nov 2024 22:55:54 +0100 Subject: [PATCH 2/2] update task solution --- src/index.html | 2 +- src/styles/{index.scss => main.scss} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/styles/{index.scss => main.scss} (96%) diff --git a/src/index.html b/src/index.html index 2c793f8ddd..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 96% rename from src/styles/index.scss rename to src/styles/main.scss index 508a02a7b1..3f1d7d8b77 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -36,7 +36,7 @@ $gap: 1px; } @for $i from 1 to 32 { - .calendar :nth-child(#{$i}):after { + .calendar :nth-child(#{$i})::before { content: '#{$i}'; font-family: Arial, Helvetica, sans-serif; font-size: 30px;