diff --git a/README.md b/README.md index 6a30283def..354f5d51ce 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://yukie-kameoka.github.io/layout_calendar/) +- [TEST REPORT LINK](https://yukie-kameoka.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..d6a4385ba9 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,46 @@ content="width=device-width, initial-scale=1.0" /> 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..339d015c28 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,93 @@ +$day-size: 100px; +$gap: 1px; +$padding: 10px; +$border-size: 1px; +$columns: 7; +$day-color: #eee; +$border-color: #000; +$hover-color: #ffbfcb; +$week-days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + + display: flex; + justify-content: center; + align-items: center; + + height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + + gap: $gap; + padding: $padding; + + width: calc( + #{$columns * $day-size} + #{($columns - 1) * $gap} + #{$padding * 2} + ); + + &__day { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + + width: $day-size; + height: $day-size; + + border: $border-size solid $border-color; + + background-color: $day-color; + + font-family: Arial, sans-serif; + font-size: 30px; + + transition: + background-color 0.5s, + transform 0.5s; + + &:hover { + cursor: pointer; + background-color: $hover-color; + transform: translateY(-20px); + } + + @for $day from 1 through 31 { + &:nth-child(#{$day})::before { + content: '#{$day}'; + } + } + } + + @each $name, $offset in $week-days { + &--start-day-#{$name} { + .calendar__day:first-child { + margin-left: ($day-size + $gap) * $offset; + } + } + } + + @for $days from 28 through 31 { + &--month-length-#{$days} { + .calendar__day:nth-child(n + #{$days + 1}) { + display: none; + } + } + } +}