diff --git a/package-lock.json b/package-lock.json index ed2e61e..47cd4ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3451,6 +3451,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5937,6 +5942,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==" }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -9832,6 +9842,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.49.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", + "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.4.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.4.0.tgz", diff --git a/package.json b/package.json index 46bc1bc..c3b963d 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,12 @@ "@types/node": "^16.11.24", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", + "bootstrap": "^5.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", + "sass": "^1.49.7", + "sass-loader": "^12.4.0", "typescript": "^4.5.5", "web-vitals": "^2.1.4" }, diff --git a/src/Calendar.scss b/src/Calendar.scss new file mode 100644 index 0000000..b6a096f --- /dev/null +++ b/src/Calendar.scss @@ -0,0 +1,59 @@ +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/containers'; + +.Month { + @include make-container(); +} + +.Month-decadeHead { + display: none; +} + +@include media-breakpoint-up(md) { + .Month-decade { + @include make-row(); + + > * { + @include make-col-ready(); + } + } +} + +.Month-decadeSplitter { + width: 100%; +} + +@include media-breakpoint-up(xl) { + .Month-decadeSplitter { + display: none; + } + + .Month-decadeHead { + display: block; + @include make-row(); + } +} + +.Day, .DecadeName { + margin: 0.5em; + @include make-col($columns: 10); +} + +.Day { + padding: 0.5em; + border: 1px solid black; + border-radius: $border-radius; +} + +.DecadeName { + text-align: center; + font-weight: 600; + font-size: 1.2em; +} + +.Day-name { + font-size: 2em; + font-weight: 600; +} diff --git a/src/Calendar.tsx b/src/Calendar.tsx index 03951e6..394f648 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import './Calendar.scss'; import {Day, decadeNames, frJDN, jdnGregorian, jdnLongCount, Month} from './dates'; type MonthProps = { @@ -43,8 +44,10 @@ function NormalMonth({year, month}: MonthProps): JSX.Element {
{decadeHeads}
{ Array.from(Array(3).keys()).map(i =>
{ - Array.from(Array(10).keys()).map(j => - ) + Array.from(Array(10).keys()).map(j => <> + + {j === 4 &&
} + ) }
) }
; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..c0cc737 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,4 @@ +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/reboot'; diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..aa79a95 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './index.scss'; import App from './App'; import reportWebVitals from './reportWebVitals';