- |
+ |
{
};
return (
-
-
-
- | Start reckoning from |
-
-
- | Year: |
-
-
- |
-
-
- |
-
- |
-
-
- |
-
-
-
+ <>
+
+ Start reckoning from
+
+
+
+
+
+
+
);
};
diff --git a/src/examples/simulation/TolkienCalendars.tsx b/src/examples/simulation/TolkienCalendars.tsx
index 4820290..92ddad7 100644
--- a/src/examples/simulation/TolkienCalendars.tsx
+++ b/src/examples/simulation/TolkienCalendars.tsx
@@ -5,6 +5,9 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
+import MenuItem from "@mui/material/MenuItem";
+import { ThemeProvider } from "@mui/material/styles";
+
import { datesMatch } from "../../Utils";
import "../../ui/tolkien-calendars.css";
@@ -20,7 +23,8 @@ import {
findPreviousEventIndex,
} from "./DatesOfInterest";
-import { CalendarCellStyle, DatePicker } from "../Common";
+import { CalendarCellStyle, DatePicker, OutlinedSelect } from "../Common";
+import theme from "../theme";
import "../examples.css";
const blankEvent = ;
@@ -230,11 +234,13 @@ export const SimulatedTolkienCalendars = (
};
const eventOpts = DatesOfInterest.map((event, i) => (
-
+
));
if (selectedEvent === -1) {
@@ -257,9 +263,9 @@ export const SimulatedTolkienCalendars = (
}
const syncOptions = syncSchemes.map(function (sync, i) {
return (
-
+
);
});
@@ -268,24 +274,26 @@ export const SimulatedTolkienCalendars = (
|
- Synchronize
-
+
|
|
- Dates of Interest:
-
+
|
@@ -303,7 +311,7 @@ export const SimulatedTolkienCalendars = (
startDate={shireStartDate}
onCalendarStartChange={onShireStartDateChange}
date={currentDate}
- className="shire-calendar"
+ className="shire-calendar shire-calendar-styled-example"
/>
|
@@ -311,7 +319,7 @@ export const SimulatedTolkienCalendars = (
startDate={gondorStartDate}
onCalendarStartChange={onGondorStartDateChange}
date={currentDate}
- className="shire-calendar gondor-calendar"
+ className="shire-calendar gondor-calendar shire-calendar-styled-example"
/>
|
@@ -321,7 +329,7 @@ export const SimulatedTolkienCalendars = (
startDate={rivendellStartDate}
onCalendarStartChange={onRivendellStartDateChange}
date={currentDate}
- className="shire-calendar rivendell-calendar"
+ className="shire-calendar rivendell-calendar shire-calendar-styled-example"
/>
@@ -330,6 +338,12 @@ export const SimulatedTolkienCalendars = (
);
};
+export const StyledSimulations = (props: SimulatedTolkienCalendarsProps) => (
+
+
+
+);
+
const meta = {
title: "Shire Reckoning / Middle-earth Simulation",
@@ -337,9 +351,9 @@ const meta = {
options: { showPanel: false },
},
- component: SimulatedTolkienCalendars,
- excludeStories: ["SimulatedTolkienCalendars"],
-} satisfies Meta;
+ component: StyledSimulations,
+ excludeStories: ["SimulatedTolkienCalendars", "StyledSimulations"],
+} satisfies Meta;
export default meta;
type Story = StoryObj;
diff --git a/src/examples/theme.ts b/src/examples/theme.ts
new file mode 100644
index 0000000..5839a22
--- /dev/null
+++ b/src/examples/theme.ts
@@ -0,0 +1,30 @@
+import {
+ blue,
+ blueGrey,
+ cyan,
+ deepOrange,
+ green,
+ red,
+} from "@mui/material/colors";
+import { createTheme } from "@mui/material/styles";
+
+const baseFonts = ["Libre Baskerville", "Georgia", "serif"];
+
+const theme = createTheme({
+ typography: {
+ fontFamily: baseFonts.join(","),
+ },
+ palette: {
+ primary: { main: blue[800] },
+ secondary: { main: blueGrey[700] },
+ success: { main: green[600] },
+ error: { main: red[900] },
+ warning: { main: deepOrange[800] },
+ info: cyan,
+ },
+});
+
+const scriptFontFamily = ["Fondamento", ...baseFonts].join(",");
+
+export default theme;
+export { scriptFontFamily };
diff --git a/stylesheets/gh-pages-adjust.css b/stylesheets/gh-pages-adjust.css
index 6f133db..fe72121 100644
--- a/stylesheets/gh-pages-adjust.css
+++ b/stylesheets/gh-pages-adjust.css
@@ -19,7 +19,9 @@ th, td {
.main-content > table tr:nth-child(2n) {
background-color: gainsboro;
}
+.weekday-header { background-color: whitesmoke; }
.shire-calendar {
+ background-color: whitesmoke;
border-collapse: separate;
}
.shire-calendar td {
@@ -47,3 +49,18 @@ th, td {
.align-shire-calendar {
padding-top: 186rem;
}
+.shire-sync-select, .rivendell-sync-select {
+ width: 34rem;
+}
+.shire-calendar-styled-example {
+ margin: 0;
+}
+.shire-calendar-styled-example .shire-calendar-wrapper-cell {
+ padding: 0;
+}
+.shire-calendar-styled-example .month-name-display {
+ font-size: 0.75rem;
+}
+.shire-calendar-styled-example .intercalary-overlithe-day {
+ font-size: 0.75rem;
+}
|