From e252878942888125cf6507a70dabf2353b08602b Mon Sep 17 00:00:00 2001 From: Yukie Kameoka Date: Tue, 7 Jul 2026 20:58:07 -0300 Subject: [PATCH 1/5] fix: adjust calendar styles --- src/index.html | 38 ++++++++++++++++++- src/styles/index.scss | 87 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index c10199d38b..261d2068bc 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 index 293d3b1f13..2722324c2a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,90 @@ +$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.3s; + + &:hover { + cursor: pointer; + background-color: $hover-color; + } + + @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; + } + } + } } From 5f50911c8cb03f0bcea92cbf379a82ddbdf0ab4f Mon Sep 17 00:00:00 2001 From: Yukie Kameoka Date: Tue, 7 Jul 2026 21:03:23 -0300 Subject: [PATCH 2/5] update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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. From d3341a53689f8f719895da04f901e2a4da6f0602 Mon Sep 17 00:00:00 2001 From: Yukie Kameoka Date: Tue, 7 Jul 2026 21:09:03 -0300 Subject: [PATCH 3/5] fix: update calendar day hover animation --- src/styles/index.scss | 5 ++- src/styles/main.scss | 90 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/styles/main.scss diff --git a/src/styles/index.scss b/src/styles/index.scss index 2722324c2a..339d015c28 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -58,11 +58,14 @@ body { font-family: Arial, sans-serif; font-size: 30px; - transition: background-color 0.3s; + transition: + background-color 0.5s, + transform 0.5s; &:hover { cursor: pointer; background-color: $hover-color; + transform: translateY(-20px); } @for $day from 1 through 31 { diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..2722324c2a --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,90 @@ +$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.3s; + + &:hover { + cursor: pointer; + background-color: $hover-color; + } + + @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; + } + } + } +} From cd024cd1329869fb3360c8e91251137d99b205e6 Mon Sep 17 00:00:00 2001 From: Yukie Kameoka Date: Tue, 7 Jul 2026 21:10:52 -0300 Subject: [PATCH 4/5] fix: update calendar day hover animation --- src/styles/main.scss | 93 +++++++++----------------------------------- 1 file changed, 18 insertions(+), 75 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 2722324c2a..c8b463a959 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,90 +1,33 @@ -$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; +&__day { + position: relative; 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; + width: $day-size; + height: $day-size; - display: flex; - justify-content: center; - align-items: center; + border: $border-size solid $border-color; - width: $day-size; - height: $day-size; + background-color: $day-color; - border: $border-size solid $border-color; + font-family: Arial, sans-serif; + font-size: 30px; - background-color: $day-color; + transition: + background-color 0.5s, + transform 0.5s; - font-family: Arial, sans-serif; - font-size: 30px; - - transition: background-color 0.3s; - - &:hover { - cursor: pointer; - background-color: $hover-color; - } - - @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; - } - } + &:hover { + cursor: pointer; + background-color: $hover-color; + transform: translateY(-20px); } - @for $days from 28 through 31 { - &--month-length-#{$days} { - .calendar__day:nth-child(n + #{$days + 1}) { - display: none; - } + @for $day from 1 through 31 { + &:nth-child(#{$day})::before { + content: '#{$day}'; } } } From 89ca9ff3e766468f04e13505d787790c4809d425 Mon Sep 17 00:00:00 2001 From: Yukie Kameoka Date: Tue, 7 Jul 2026 21:16:59 -0300 Subject: [PATCH 5/5] fix: move calendar styles to main scss --- src/index.html | 2 +- src/styles/index.scss | 93 ----------------------------------------- src/styles/main.scss | 96 +++++++++++++++++++++++++++++++++++-------- 3 files changed, 79 insertions(+), 112 deletions(-) delete mode 100644 src/styles/index.scss diff --git a/src/index.html b/src/index.html index 261d2068bc..d6a4385ba9 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,7 @@ diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 339d015c28..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,93 +0,0 @@ -$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; - } - } - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index c8b463a959..339d015c28 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,33 +1,93 @@ -&__day { - position: relative; +$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; - width: $day-size; - height: $day-size; + 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; - border: $border-size solid $border-color; + display: flex; + justify-content: center; + align-items: center; - background-color: $day-color; + width: $day-size; + height: $day-size; - font-family: Arial, sans-serif; - font-size: 30px; + border: $border-size solid $border-color; - transition: - background-color 0.5s, - transform 0.5s; + background-color: $day-color; - &:hover { - cursor: pointer; - background-color: $hover-color; - transform: translateY(-20px); + 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 $day from 1 through 31 { - &:nth-child(#{$day})::before { - content: '#{$day}'; + @for $days from 28 through 31 { + &--month-length-#{$days} { + .calendar__day:nth-child(n + #{$days + 1}) { + display: none; + } } } }