mirror of
https://github.com/quantum5/qcal.git
synced 2025-04-24 09:41: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": {
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -42,5 +42,8 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bootstrap": "^5.1.9"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<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" />
|
||||
<!--
|
||||
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.
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="theme-color" content="#000000"/>
|
||||
<meta name="description" content="Interactive French Republican Calendar (a.k.a. French Revolutionary Calendar)."/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
|
||||
<title>French Republican Calendar (a.k.a. French Revolutionary Calendar)</title>
|
||||
</head>
|
||||
<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>
|
||||
|
||||
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>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
<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>
|
||||
<div id="root"></div>
|
||||
<div class="main">
|
||||
<h2 id="explanation">Explanation</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">What is this?</h4>
|
||||
<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>
|
||||
<p>It was also frequently known as the <em>French Republican Calendar</em>, but this was a misnomer: year 1
|
||||
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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
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/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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue