Add some basic styling

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",

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"
   },

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;
+}

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 {
         <div className="Month-decadeHead">{decadeHeads}</div>
         <div className="Month-decades">{
             Array.from(Array(3).keys()).map(i => <div className="Month-decade">{
-                Array.from(Array(10).keys()).map(j =>
+                Array.from(Array(10).keys()).map(j => <>
-                    <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} isToday={false}/>)
+                    <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} isToday={false}/>
+                    {j === 4 && <div className="Month-decadeSplitter"/>}
+                </>)
             }</div>)
         }</div>
     </div>;

src/index.css

@@ -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;
-}

src/index.scss

@@ -0,0 +1,4 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';

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';