diff --git a/README.md b/README.md index 6a30283def..808f8fa071 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://MasyaArc.github.io/layout_calendar/) +- [TEST REPORT LINK](https://MasyaArc.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..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ 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..e0d9c3914e --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,64 @@ +@use 'sass:list'; + +$modifikator: mon, tue, wed, thu, fri, sat, sun; +$day-width: 100px; +$day-height: 100px; +$calendar-gap: 1px; + +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 0; +} + +.calendar { + width: $day-width * 7 + $calendar-gap * 6; + display: flex; + gap: $calendar-gap; + flex-wrap: wrap; + margin: auto; + + &__day { + text-align: center; + align-content: center; + background-color: #eee; + box-sizing: border-box; + margin: 0; + + width: $day-width; + height: $day-height; + border: 1px solid black; + transition-duration: 500ms; + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } + } +} + +@for $i from 1 through 31 { + .calendar .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} + +@each $day in $modifikator { + $offset: (list.index($modifikator, $day) - 1) * ($day-width + $calendar-gap); + + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: $offset; + } +}