diff --git a/src/Calendar.scss b/src/Calendar.scss index 1dba2ff..304f61c 100644 --- a/src/Calendar.scss +++ b/src/Calendar.scss @@ -4,6 +4,7 @@ @import 'bootstrap/scss/forms'; @import 'bootstrap/scss/grid'; @import 'bootstrap/scss/buttons'; +@import './consts'; .Calendar { @include make-container(); @@ -49,7 +50,7 @@ @include media-breakpoint-up(md) { .Month-decade { - @include make-row(); + @include make-row($gutter: 0); > * { @include make-col-ready(); @@ -68,7 +69,7 @@ .Month-decadeHead { display: block; - @include make-row(); + @include make-row($gutter: 0); } .Day-decade { @@ -76,17 +77,22 @@ } } +.Day, .DecadeName, .ComplementaryDay-fake { + margin: $calendar-gutter; + @include make-col($columns: 10); +} + @include media-breakpoint-up(lg) { .ComplementaryDays { - @include make-row(); + @include make-row($gutter: 0); > * { @include make-col-ready(); } } - .ComplementaryDay { - @include make-col($columns: 2); + .ComplementaryDay, .ComplementaryDay-fake { + @include make-col(); } .ComplementaryDays-splitter { @@ -94,9 +100,17 @@ } } -.Day, .DecadeName { - margin: 0.5em; - @include make-col($columns: 10); +.Month, .ComplementaryDays { + margin-left: -$calendar-gutter; + margin-right: -$calendar-gutter; +} + +.ComplementaryDay { + margin-top: $calendar-gutter; +} + +.ComplementaryDay-fake { + padding: 0.5em; } .Day { diff --git a/src/Calendar.tsx b/src/Calendar.tsx index 35757bc..5dd6e33 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -68,9 +68,11 @@ function ComplementaryDay({year, month, day, todayJDN}: DateProps & { todayJDN: } function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element { + const leap = frIsLeap(year); return
{ - Array.from(Array(frIsLeap(year) ? 6 : 5).keys()).map(i => <> - + Array.from(Array(6).keys()).map(i => <> + {(i < 5 || leap) && } + {i === 5 && !leap &&
} {i % 2 === 1 &&
} ) }
; diff --git a/src/consts.scss b/src/consts.scss index d9940b1..fe8c232 100644 --- a/src/consts.scss +++ b/src/consts.scss @@ -1 +1,2 @@ $calendar-width: 1600px; +$calendar-gutter: 0.5rem;