diff --git a/package-lock.json b/package-lock.json index 47cd4ff..653ef14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1901,6 +1901,12 @@ } } }, + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", + "dev": true + }, "@rollup/plugin-babel": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz", @@ -2307,6 +2313,16 @@ "@types/node": "*" } }, + "@types/bootstrap": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.1.9.tgz", + "integrity": "sha512-Tembe6lt7819EUzV5LSG9uuwULm4hdEGV9LZ8QBYpWc0J+a+9DdmJEwZ4FMaXGVJWwumTPSkJ8JQF0/KDAmXYg==", + "dev": true, + "requires": { + "@popperjs/core": "^2.9.2", + "@types/jquery": "*" + } + }, "@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -2419,6 +2435,15 @@ "pretty-format": "^27.0.0" } }, + "@types/jquery": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.13.tgz", + "integrity": "sha512-ZxJrup8nz/ZxcU0vantG+TPdboMhB24jad2uSap50zE7Q9rUeYlCF25kFMSmHR33qoeOgqcdHEp3roaookC0Sg==", + "dev": true, + "requires": { + "@types/sizzle": "*" + } + }, "@types/json-schema": { "version": "7.0.9", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz", @@ -2522,6 +2547,12 @@ "@types/node": "*" } }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, "@types/sockjs": { "version": "0.3.33", "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz", diff --git a/package.json b/package.json index c3b963d..3324d39 100644 --- a/package.json +++ b/package.json @@ -42,5 +42,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/bootstrap": "^5.1.9" } } diff --git a/public/index.html b/public/index.html index aa069f2..1cbfa93 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,104 @@ - - - - - - - - - - - React App - - - -
- - + + + + +
+
+

Explanation

+
+
+

What is this?

+

The French Republican + calendar was a calendar created and implemented during the French Revolution.

+

It was also frequently known as the French Republican Calendar, but this was a misnomer: year 1 + of the calendar started on 22 September 1792, the day after the + abolition of the + monarchy and the founding of the French + First Republic.

+
+
+
+
+

How does it work?

+

A year consists of 12 months of 30 days each, divided into three décades of 10 days + each, followed by 5 complementary days (6 in leap years).

+

The year starts on the day of the autumnal equinox at the Paris Observatory (longitude 2°20′14.03″ E). A + leap year follow directly from this definition: a year is a leap year when the next autumnal equinox + happens 366 days later instead of the normal 365. By this definition, the year will never drift + with respect to the seasons.

+

The 12 months are: Vendémiaire, Brumaire, Frimaire, Nivôse, Pluviôse, + Ventôse, Germinal, Floréal, Prairial, Messidor, Thermidor, + Fructidor.

+

The complementary days are: la Fête de la Vertu, la Fête du Génie, la Fête du + Travail, la Fête de l'Opinion, la Fête des Récompenses, and la Fête de la + Révolution (leap years only).

+
+
+
+
+

What's so special about this version?

+

Most versions of the calendar floating around doesn't use the original definition above.

+

Most versions uses the so-called Romme method for leap years, using the same leap year rules as + the Gregorian calendar, i.e. every year divisible by four, except century years not divisible by 400. + This method might make sense, except years 3, 7, and 11 were leap years under the original rules and + were observed as such in real life, but the Romme method instead makes years 4, 6, 11 leap + years instead.

+

This version uses the original rules. The JPL's + DE440 and DE441 ephemerides were used to calculate the exact timings of the autumnal equinoxes + between the Gregorian years 13201 BCE and 17191 CE (corresponding to the French Republican years -14991 + to 15399). The times were then converted to UT1+00:09:21, the exact local time at the Paris Observatory. + UT1 was chosen to keep track of the Earth's rotation without having to worry about the issues posed by + leap seconds in UTC. Note that due to the uncertainty over + ΔT — the difference between UT1 and + Terrestrial Time (TT) used in the ephemerides — it is theoretically possible for there to be + inaccuracies when the equinox occurs very close to midnight.

+
+
+
+
+

What are those numbers below the Gregorian date?

+

The five (or more) numbers separated by dots is the corresponding + Mesoamerican Long Count + calendar date. This is commonly known as the “Mayan calendar.” This calendar is not + available for dates before August 11, 3114 BCE (25 Thermidor -4905).

+
+
+
+ + diff --git a/src/Calendar.scss b/src/Calendar.scss index 72c2512..1dba2ff 100644 --- a/src/Calendar.scss +++ b/src/Calendar.scss @@ -11,8 +11,18 @@ .Calendar-head { display: flex; + justify-content: center; font-size: 2em; font-weight: 600; + position: sticky; + top: 0; + background: white; + margin-top: -$spacer * 4; + margin-left: -$spacer; + margin-right: -$spacer; + padding-top: $spacer * 4; + padding-left: $spacer; + padding-right: $spacer; .btn { margin: 0 1px; @@ -29,6 +39,7 @@ .Calendar-month-name { flex: 1; + max-width: 30rem; text-align: center; } @@ -39,7 +50,6 @@ @include media-breakpoint-up(md) { .Month-decade { @include make-row(); - padding: 0 0.5em; > * { @include make-col-ready(); diff --git a/src/consts.scss b/src/consts.scss new file mode 100644 index 0000000..d9940b1 --- /dev/null +++ b/src/consts.scss @@ -0,0 +1 @@ +$calendar-width: 1600px; diff --git a/src/index.scss b/src/index.scss index c0cc737..676b1cd 100644 --- a/src/index.scss +++ b/src/index.scss @@ -2,3 +2,70 @@ @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/reboot'; +@import 'bootstrap/scss/navbar'; +@import 'bootstrap/scss/transitions'; +@import 'bootstrap/scss/type'; +@import 'bootstrap/scss/card'; +@import './consts'; + +body { + padding-top: $spacer * 4; + position: relative; +} + +#root { + max-width: $calendar-width; + margin: 0 auto; +} + +nav.navbar { + background: $light; + position: fixed; + top: 0; + z-index: 1; + left: 0; + right: 0; + + .container { + width: $calendar-width; + margin: 0 auto; + padding: 0 1em; + } +} + +.main { + max-width: $calendar-width; + margin-top: $spacer; + @include make-container(); + + .card { + margin-bottom: $spacer; + } +} + +html { + scroll-padding-top: $spacer * 4; +} + +@supports not (scroll-padding-top: 80px) { + h1, h2, h3, h4, h5, h6, .footnotes li { + margin-top: -$spacer * 4; + padding-top: $spacer * 4; + } +} + +a { + text-decoration: none; +} + +.footer { + background: $light; + min-height: $spacer * 4; + padding: ($spacer * 4 - $font-size-base) / 2; + + .container { + width: $calendar-width; + margin: 0 auto; + padding: 0 1em; + } +} diff --git a/src/index.tsx b/src/index.tsx index aa79a95..ea43d74 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import 'bootstrap/js/dist/collapse'; import './index.scss'; import App from './App'; import reportWebVitals from './reportWebVitals';