mirror of
https://github.com/quantum5/qcal.git
synced 2025-04-24 17:51:57 -04:00
Add surrounding page
This commit is contained in:
Quantum
parent
83b99e06f7
commit
9b5ac6d53b
31
package-lock.json
generated
31
package-lock.json
generated
|
|
@ -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": {
|
"@rollup/plugin-babel": {
|
||||||
"version": "5.3.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
|
||||||
|
|
@ -2307,6 +2313,16 @@
|
||||||
"@types/node": "*"
|
"@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": {
|
"@types/connect": {
|
||||||
"version": "3.4.35",
|
"version": "3.4.35",
|
||||||
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
|
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
|
||||||
|
|
@ -2419,6 +2435,15 @@
|
||||||
"pretty-format": "^27.0.0"
|
"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": {
|
"@types/json-schema": {
|
||||||
"version": "7.0.9",
|
"version": "7.0.9",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||||
|
|
@ -2522,6 +2547,12 @@
|
||||||
"@types/node": "*"
|
"@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": {
|
"@types/sockjs": {
|
||||||
"version": "0.3.33",
|
"version": "0.3.33",
|
||||||
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
|
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
|
||||||
|
|
|
||||||
|
|
@ -42,5 +42,8 @@
|
||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bootstrap": "^5.1.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,39 +5,100 @@
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<meta name="theme-color" content="#000000"/>
|
<meta name="theme-color" content="#000000"/>
|
||||||
<meta
|
<meta name="description" content="Interactive French Republican Calendar (a.k.a. French Revolutionary Calendar)."/>
|
||||||
name="description"
|
|
||||||
content="Web site created using create-react-app"
|
|
||||||
/>
|
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
||||||
-->
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
|
||||||
<!--
|
<title>French Republican Calendar (a.k.a. French Revolutionary Calendar)</title>
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
|
||||||
-->
|
|
||||||
<title>React App</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="#">French Republican Calendar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-anchors"
|
||||||
|
aria-controls="nav-anchors" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="nav-anchors">
|
||||||
|
<ul class="nav navbar-nav mr-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#explanation">Explanation</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
<div class="main">
|
||||||
This HTML file is a template.
|
<h2 id="explanation">Explanation</h2>
|
||||||
If you open it directly in the browser, you will see an empty page.
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
You can add webfonts, meta tags, or analytics to this file.
|
<h4 class="card-title">What is this?</h4>
|
||||||
The build step will place the bundled scripts into the <body> tag.
|
<p class="lead">The <a href="https://en.wikipedia.org/wiki/French_Republican_calendar">French Republican
|
||||||
|
calendar</a> was a calendar created and implemented during the French Revolution.</p>
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
<p>It was also frequently known as the <em>French Republican Calendar</em>, but this was a misnomer: year 1
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
of the calendar started on 22 September 1792, the day after the
|
||||||
-->
|
<a href="https://en.wikipedia.org/wiki/Proclamation_of_the_abolition_of_the_monarchy">abolition of the
|
||||||
|
monarchy</a> and the founding of the <a href="https://en.wikipedia.org/wiki/French_First_Republic">French
|
||||||
|
First Republic</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">How does it work?</h4>
|
||||||
|
<p class="lead">A year consists of 12 months of 30 days each, divided into three <em>décades</em> of 10 days
|
||||||
|
each, followed by 5 complementary days (6 in leap years).</p>
|
||||||
|
<p>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 <b>never</b> drift
|
||||||
|
with respect to the seasons.</p>
|
||||||
|
<p>The 12 months are: <em>Vendémiaire</em>, <em>Brumaire</em>, <em>Frimaire</em>, <em>Nivôse</em>, <em>Pluviôse</em>,
|
||||||
|
<em>Ventôse</em>, <em>Germinal</em>, <em>Floréal</em>, <em>Prairial</em>, <em>Messidor</em>, <em>Thermidor</em>,
|
||||||
|
<em>Fructidor.</em></p>
|
||||||
|
<p>The complementary days are: <em>la Fête de la Vertu</em>, <em>la Fête du Génie</em>, <em>la Fête du
|
||||||
|
Travail</em>, <em>la Fête de l'Opinion</em>, <em>la Fête des Récompenses,</em> and <em>la Fête de la
|
||||||
|
Révolution</em> (leap years only).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">What's so special about this version?</h4>
|
||||||
|
<p class="lead">Most versions of the calendar floating around doesn't use the original definition above.</p>
|
||||||
|
<p>Most versions uses the so-called <em>Romme</em> 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 <em>Romme</em> method instead makes years 4, 6, 11 leap
|
||||||
|
years instead.</p>
|
||||||
|
<p>This version uses the original rules. The <a href="https://ssd.jpl.nasa.gov/planets/eph_export.html">JPL's
|
||||||
|
DE440 and DE441 ephemerides</a> 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
|
||||||
|
<a href="https://en.wikipedia.org/wiki/%CE%94T_(timekeeping)">ΔT</a> — 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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">What are those numbers below the Gregorian date?</h4>
|
||||||
|
<p>The five (or more) numbers separated by dots is the corresponding
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Mesoamerican_Long_Count_calendar">Mesoamerican Long Count
|
||||||
|
calendar</a> date. This is commonly known as the “Mayan calendar.” This calendar is not
|
||||||
|
available for dates before August 11, 3114 BCE (25 Thermidor -4905).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="text-muted">Copyright © 2018-<%= new Date().getFullYear() %> <a href="https://quantum5.ca">Quantum</a>.
|
||||||
|
Licensed under
|
||||||
|
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPLv3</a>. Source code available on
|
||||||
|
<a href="https://github.com/quantum5/frcal">GitHub</a>.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,18 @@
|
||||||
|
|
||||||
.Calendar-head {
|
.Calendar-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 600;
|
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 {
|
.btn {
|
||||||
margin: 0 1px;
|
margin: 0 1px;
|
||||||
|
|
@ -29,6 +39,7 @@
|
||||||
|
|
||||||
.Calendar-month-name {
|
.Calendar-month-name {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
max-width: 30rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,7 +50,6 @@
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
.Month-decade {
|
.Month-decade {
|
||||||
@include make-row();
|
@include make-row();
|
||||||
padding: 0 0.5em;
|
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
@include make-col-ready();
|
@include make-col-ready();
|
||||||
|
|
|
||||||
1
src/consts.scss
Normal file
1
src/consts.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
$calendar-width: 1600px;
|
||||||
|
|
@ -2,3 +2,70 @@
|
||||||
@import 'bootstrap/scss/variables';
|
@import 'bootstrap/scss/variables';
|
||||||
@import 'bootstrap/scss/mixins';
|
@import 'bootstrap/scss/mixins';
|
||||||
@import 'bootstrap/scss/reboot';
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
import 'bootstrap/js/dist/collapse';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue