diff --git a/README.md b/README.md index 37cba2aad..c6daf9dd4 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://olga-wukelan.github.io/layout_calendar/) +- [TEST REPORT LINK](https://olga-wukelan.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 c10199d38..d1832a376 100644 --- a/src/index.html +++ b/src/index.html @@ -1,7 +1,7 @@ - + Calendar + -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 000000000..66939ab42 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,11 @@ +@import './styles/calendar'; + +body { + display: flex; + justify-content: center; + font-family: Arial, sans-serif; + margin: 0; + font-size: 30px; + align-items: center; + height: 100vh; +} diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss new file mode 100644 index 000000000..0ef9dcd0c --- /dev/null +++ b/src/styles/calendar.scss @@ -0,0 +1,57 @@ +$width-cube: 100px; +$height-cube: 100px; +$colums-in-the-row: (7 * $width-cube); +$max-days: 31; +$days-of-week: ( + mon: 1, + tue: 2, + wed: 3, + thu: 4, + fri: 5, + sat: 6, + sun: 7, +); + +@for $i from 1 through $max-days { + .calendar { + display: flex; + flex-wrap: wrap; + gap: 1px; + max-width: ($colums-in-the-row + 10px); + + &__day { + display: flex; + box-sizing: border-box; + background-color: #eee; + justify-content: center; + align-items: center; + border: 1px solid #000; + width: $width-cube; + height: $height-cube; + font-size: 30px; + transition: all 0.5s ease; + + &:nth-child(#{$i})::before { + content: '#{$i}'; + } + + &:hover { + background-color: #ffbfcb; + transform: translate(0, -20px); + cursor: pointer; + } + } + } +} + +@each $day, $value in $days-of-week { + .calendar--start-day-#{$day} :first-of-type { + margin-left: ($width-cube + 1px) * ($value - 1); + } +} + +@for $i from 28 through $max-days { + .calendar--month-length-#{$i} :nth-child(n + #{$i + 1}) { + display: none; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f1..000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -}