info-site-generator 1.0.5 → 1.0.7

package/lib/App.d.ts

@@ -0,0 +1,12 @@
+import { UserProvidedSiteData } from "../declarations";
+import "./index.css";
+import React from "react";
+/**
+ * The info site generator main component
+ * @returns A ready app based on the data provided
+ */
+declare function SiteGen({ data_provided, children, }: {
+    data_provided: UserProvidedSiteData;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export default SiteGen;

package/lib/App.js

@@ -1,32 +1,27 @@
 import { HashRouter, Routes, Route } from "react-router-dom";
-import Home from "info-site-generator/src/pages/Home.tsx";
-import defaults from "info-site-generator/src/contentDefaults.json";
-import { ThemeContext } from "info-site-generator/src/theme.ts";
-import Wrapper from "info-site-generator/src/components/Wrapper.tsx";
-import { SiteData } from "info-site-generator/declarations";
+import Home from "./pages/Home";
+import defaults from "./contentDefaults.json";
+import { ThemeContext } from "./theme";
+import Wrapper from "./components/Wrapper";
 import "./index.css";
-import Content from "info-site-generator/src/pages/Content.tsx";
-import PageGen from "info-site-generator/src/pages/Page.tsx";
-import Search from "info-site-generator/src/pages/Search.tsx";
+import Content from "./pages/Content";
+import PageGen from "./pages/Page";
+import Search from "./pages/Search";
 import React from "react";
 
 /**
- * The info site generator
- * @param {SiteData} data The data of the site in SiteData format
- * @param {React.ReactNode[]} children The children
+ * The info site generator main component
  * @returns A ready app based on the data provided
  */
 function SiteGen({
-  data,
+  data_provided,
   children
 }) {
-  // loop through the possible site data and set defaults
-  let dataSecond = data;
-  Object.keys(defaults).forEach(key => {
-    dataSecond[key] = data[key] || defaults[key];
-  });
-  let validData = dataSecond;
-  validData.pages?.forEach(page => {
+  const validData = {
+    ...defaults,
+    ...data_provided
+  };
+  Object.values(validData.pages).forEach(page => {
     page.withLink = page.withLink ?? true;
     // page.withLink = page.withLink === undefined ? false : page.withLink;
   });
@@ -56,14 +51,31 @@ function SiteGen({
         data: validData
       })
     })
-  }), children.map(page => /*#__PURE__*/React.createElement(Route, {
-    element: /*#__PURE__*/React.createElement(Wrapper, {
-      data: validData,
-      component: /*#__PURE__*/React.createElement(PageGen, {
-        page: page
+  }), React.Children.map(children, child => {
+    // Check if it's a valid React element (not a string or null)
+    if (! /*#__PURE__*/React.isValidElement(child)) return null;
+
+    // Tell TS this element has props with an 'id'
+    const pageElement = child;
+    const pageId = pageElement.props.id;
+
+    // Get the metadata from our data object
+    const pageMetadata = validData.pages[pageId];
+    if (!pageMetadata) {
+      console.warn(`No metadata found in data object for page ID: ${pageId}`);
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Route, {
+      key: pageId,
+      path: pageMetadata.slug,
+      element: /*#__PURE__*/React.createElement(Wrapper, {
+        data: validData,
+        component: /*#__PURE__*/React.createElement(PageGen, {
+          page: pageElement,
+          data: pageMetadata
+        })
       })
-    }),
-    path: page.slug
-  })))));
+    });
+  }))));
 }
 export default SiteGen;

package/lib/App.tsx

@@ -0,0 +1,95 @@
+import { HashRouter, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
+import defaults from "./contentDefaults.json";
+import { ThemeContext } from "./theme";
+import Wrapper from "./components/Wrapper";
+import { UserProvidedSiteData, ValidSiteData, Theme } from "../declarations";
+import "./index.css";
+import Content from "./pages/Content";
+import PageGen from "./pages/Page";
+import Search from "./pages/Search";
+import React from "react";
+
+/**
+ * The info site generator main component
+ * @returns A ready app based on the data provided
+ */
+function SiteGen({
+    data_provided: data,
+    children,
+}: {
+    data_provided: UserProvidedSiteData;
+    children: React.ReactNode;
+}) {
+    // loop through the possible site data and set defaults
+    let dataSecond = data;
+    const typed_defaults = defaults as unknown as ValidSiteData;
+    Object.keys(defaults).forEach((key) => {
+        dataSecond[key as keyof ValidSiteData] =
+            data[key as keyof UserProvidedSiteData] ||
+            typed_defaults[key as keyof ValidSiteData];
+    });
+    /**
+     * @type {ValidSiteData}
+     */
+    let validData = dataSecond as ValidSiteData;
+    validData.pages?.forEach((page) => {
+        page.withLink = page.withLink ?? true;
+        // page.withLink = page.withLink === undefined ? false : page.withLink;
+    });
+    return (
+        <ThemeContext.Provider
+            value={(localStorage.getItem("theme") as Theme) || "light"}
+        >
+            <HashRouter>
+                <Routes>
+                    <Route
+                        index
+                        element={
+                            <Wrapper
+                                data={validData}
+                                component={<Home data={validData} />}
+                            />
+                        }
+                    />
+                    <Route
+                        path="all-content"
+                        element={
+                            <Wrapper
+                                data={validData}
+                                component={<Content data={validData} />}
+                            />
+                        }
+                    />
+                    <Route
+                        path="search"
+                        element={
+                            <Wrapper
+                                data={validData}
+                                component={<Search data={validData} />}
+                            />
+                        }
+                    />
+                    {React.Children.map(children, (page: React.ReactNode) => (
+                        <Route
+                            element={
+                                <Wrapper
+                                    data={validData}
+                                    component={
+                                        <PageGen
+                                            page={page}
+                                            data={validData.pages[page.id]}
+                                        />
+                                    }
+                                />
+                            }
+                            path={validData.pages[page?.id].slug}
+                        />
+                    ))}
+                </Routes>
+            </HashRouter>
+        </ThemeContext.Provider>
+    );
+}
+
+export default SiteGen;

package/lib/components/ArrowBack.d.ts

@@ -0,0 +1 @@
+export default function ArrowBack(): import("react/jsx-runtime").JSX.Element;

package/lib/components/ArrowBack.js

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom";
+export default function ArrowBack() {
+  return /*#__PURE__*/React.createElement(Link, {
+    to: "/all-content"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/arrow-left.svg",
+    alt: "Back to content list",
+    width: 40,
+    height: 40
+  }));
+}

package/lib/components/Footer.d.ts

@@ -0,0 +1,4 @@
+import { ValidSiteData } from "../../declarations.d";
+export default function Footer({ data }: {
+    data: ValidSiteData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/Footer.js

@@ -0,0 +1,31 @@
+import { useCurrentTheme } from "../theme";
+export default function Footer({
+  data
+}) {
+  const [theme] = useCurrentTheme();
+  return /*#__PURE__*/React.createElement("footer", {
+    className: "bg-gray-800 text-white py-4 m-0",
+    style: theme === "light" ? {
+      backgroundColor: data.brandColor
+    } : {
+      backgroundColor: data.brandColorDark
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container mx-auto"
+  }, /*#__PURE__*/React.createElement("h3", null, data.siteTitle), /*#__PURE__*/React.createElement("p", {
+    className: "sm"
+  }, data.siteDescription), data.socialMedia && /*#__PURE__*/React.createElement("div", null, "Follow us on ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("ul", {
+    className: "d-flex flex-wrap w-100 mw-100 list-unstyled link-underline-opacity-0 link-underline-opactiy-100"
+  }, Object.entries(data.socialMedia).map(([key, value]) => /*#__PURE__*/React.createElement("li", {
+    className: "p-2 m-3",
+    key: key
+  }, value.image && value.imageDark && /*#__PURE__*/React.createElement("img", {
+    src: theme === "light" ? value.image : value.imageDark,
+    alt: key
+  }), /*#__PURE__*/React.createElement("a", {
+    href: value.href,
+    className: "p-1"
+  }, key))))), /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, "\xA9 ", new Date().getFullYear(), " All rights reserved.")));
+}

package/lib/components/Navbar.d.ts

@@ -0,0 +1,6 @@
+import { ValidSiteData } from "../../declarations";
+import "../styles/hamburgers.min.css";
+import "../styles/navbar.css";
+export default function Navbar({ data }: {
+    data: ValidSiteData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/Navbar.js

@@ -0,0 +1,70 @@
+import { oppositeTheme, useCurrentTheme } from "../theme";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/hamburgers.min.css";
+import "../styles/navbar.css";
+export default function Navbar({
+  data
+}) {
+  const [theme, setTheme] = useCurrentTheme();
+  const [active, setActive] = useState(false);
+  document.documentElement.setAttribute("data-bs-theme", theme);
+  return /*#__PURE__*/React.createElement("nav", {
+    className: `navbar border-bottom border-1 border-dark mb-2 d-flex justify-content-between align-items-center ${theme === "dark" && "navbar-dark"} `,
+    style: theme === "light" ? {
+      backgroundColor: data.brandColor
+    } : {
+      backgroundColor: data.brandColorDark
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    className: "navbar-brand px-2",
+    to: "/"
+  }, data.siteTitle), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
+    className: "p-2 border border-0 bg-transparent",
+    id: "theme-toggle",
+    type: "button",
+    onClick: () => {
+      setTheme(oppositeTheme(theme));
+    },
+    "aria-label": "Toggle theme",
+    title: "Toggle theme"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: data.brandColorIsDark || theme === "dark" ? `/${theme}-theme-white.svg` : `/${theme}-theme.svg`,
+    className: "d-inline",
+    alt: `${theme} theme`
+  }))), /*#__PURE__*/React.createElement("button", {
+    className: `hamburger hamburger--spin ${active ? "is-active" : ""}`,
+    type: "button",
+    onClick: () => setActive(!active),
+    "aria-label": "Toggle navigation",
+    title: "Toggle navigation",
+    "aria-controls": "navbarSupportedContent",
+    "aria-expanded": active,
+    "aria-haspopup": "true",
+    "data-bs-toggle": "collapse",
+    "data-bs-target": "#navbarSupportedContent"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "hamburger-box"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `hamburger-inner ${theme === "dark" && "bg-light"}`
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "collapse navbar-collapse border-top border-1 border-dark",
+    id: "navbarSupportedContent"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "navbar-nav me-auto mb-2 mb-lg-0"
+  }, Object.values(data.pages).map(page => /*#__PURE__*/React.createElement("li", {
+    className: "nav-item",
+    key: page.slug
+  }, /*#__PURE__*/React.createElement(Link, {
+    className: "nav-link",
+    to: page.slug
+  }, page.linkText || page.title))), data.customNavLinks?.map(link => /*#__PURE__*/React.createElement("li", {
+    className: "nav-item",
+    key: link.href
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "nav-link",
+    href: link.href,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, link.text))))));
+}

package/lib/components/Wrapper.d.ts

@@ -0,0 +1,5 @@
+import { ValidSiteData } from "../../declarations";
+export default function Wrapper({ data, component, }: {
+    data: ValidSiteData;
+    component: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/Wrapper.js

@@ -0,0 +1,15 @@
+import Footer from "./Footer";
+import Navbar from "./Navbar";
+export default function Wrapper({
+  data,
+  component
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Navbar, {
+    data: data
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "container",
+    id: "all-content"
+  }, component), /*#__PURE__*/React.createElement(Footer, {
+    data: data
+  }));
+}

package/lib/content.json

@@ -0,0 +1,20 @@
+{
+    "siteTitle": "My very informational Site",
+    "startUpPages": ["Custom Page"],
+    "pages": [
+        {
+            "title": "Custom Page",
+            "slug": "custom-page",
+            "description": "This is a custom page for the info site.",
+            "content": "Welcome to the custom page of the info site!"
+        }
+    ],
+    "socialMedia": {
+        "facebook": ["https://www.facebook.com"],
+        "x": ["https://x.com"],
+        "instagram": ["https://www.instagram.com"],
+        "linkedin": ["https://www.linkedin.com"],
+        "youtube": ["https://www.youtube.com"],
+        "github": ["https://github.com"]
+    }
+}

package/lib/contentDefaults.json

@@ -0,0 +1,47 @@
+{
+    "siteTitle": "Default Title",
+    "siteDescription": "Doing something is better than doing nothing.",
+    "motto": "Let's <br /> make it juicy!",
+    "keywords": ["default"],
+    "author": "Default Author",
+    "language": "en-US",
+    "themeColor": "#ffffff",
+    "brandColor": "skyblue",
+    "brandColorDark": "#00008B",
+    "brandColorIsDark": false,
+    "contactEmail": "",
+    "commonFont": "Gotu",
+    "answeredQuestions": [
+        "What is this?",
+        "How does it work?",
+        "Why should I use it?",
+        "What are the benefits?"
+    ],
+    "startUpPages": ["Dummy", "About"],
+    "pages": [
+        {
+            "title": "Dummy",
+            "slug": "dummy",
+            "description": "This is a dummy page for the default info site.",
+            "content": "Welcome to the default info site dummy!"
+        },
+        {
+            "title": "About",
+            "slug": "about",
+            "description": "Learn more about this default info site.",
+            "content": "This is the about page of the default info site."
+        },
+        {
+            "title": "Contact",
+            "slug": "contact",
+            "description": "Get in touch with us.",
+            "content": "This is the contact page of the default info site."
+        },
+        {
+            "title": "lorem-ipsum",
+            "slug": "lorem-ipsum",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+    ]
+}

package/lib/index.css

@@ -0,0 +1,25 @@
+body {
+    margin: 0;
+    font-family: "Gotu", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+        "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+html,
+body,
+#root {
+    height: 100%;
+}
+#all-content {
+    min-height: 100%;
+}
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
+}
+footer a {
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/lib/index.js

@@ -1,2 +1,3 @@
-import SiteGen from "./App.js";
-export default SiteGen;
+import SiteGen from "./src/App.js";
+
+export default SiteGen;

package/lib/pages/Content.d.ts

@@ -0,0 +1,4 @@
+import { ValidSiteData } from "../../declarations";
+export default function Content({ data }: {
+    data: ValidSiteData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/pages/Content.js

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+export default function Content({
+  data
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/React.createElement("h2", null, data.siteTitle, " content"), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, Object.values(data.pages).map((page, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: "col-md-4 mb-4 mx-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "card h-100"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "card-body"
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "card-title"
+  }, page.title), /*#__PURE__*/React.createElement("p", {
+    className: "card-text"
+  }, page.description), page.withLink && /*#__PURE__*/React.createElement(Link, {
+    to: `/${page.slug}`,
+    className: "btn btn-primary"
+  }, "Read more")))))));
+}

package/lib/pages/Home.d.ts

@@ -0,0 +1,5 @@
+import { ValidSiteData } from "../../declarations";
+import "../styles/Home.css";
+export default function Home({ data }: {
+    data: ValidSiteData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/pages/Home.js

@@ -0,0 +1,63 @@
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import "../styles/Home.css";
+export default function Home({
+  data
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("section", {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-50 d-flex flex-column justify-content-center align-items-center"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "fw-bolder center",
+    id: "hero-title",
+    dangerouslySetInnerHTML: {
+      __html: data.motto || data.siteTitle
+    }
+  }), /*#__PURE__*/React.createElement("span", null, data.siteDescription)), /*#__PURE__*/React.createElement("div", {
+    className: "w-50 p-2"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/home-image.jpg",
+    alt: "Eye-catcher",
+    className: "w-100"
+  }))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
+    className: "form-group w-50 d-inline-block me-3"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "search",
+    id: "search",
+    list: "searchdata",
+    value: searchQuery,
+    onChange: e => setSearchQuery(e.target.value),
+    className: "form-control",
+    placeholder: "Search for content"
+  })), /*#__PURE__*/React.createElement(Link, {
+    to: {
+      pathname: "/search",
+      search: `?q=${searchQuery}`
+    },
+    className: "d-inline-block"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-primary p-2"
+  }, "Search")), /*#__PURE__*/React.createElement("datalist", {
+    id: "searchdata"
+  }, Object.values(data.pages).map((page, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: page.title
+  }, page.title)))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("h2", null, "We answer these questions and more: "), /*#__PURE__*/React.createElement("ul", null, data.answeredQuestions?.map((question, index) => /*#__PURE__*/React.createElement("li", {
+    key: index
+  }, question))), /*#__PURE__*/React.createElement(Link, {
+    to: "all-content"
+  }, "Descover more content")), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("h2", null, "Dive in with those pages:"), /*#__PURE__*/React.createElement("ul", null, data.startUpPages?.map((page, index) => {
+    const pageData = Object.values(data.pages).find(p => p.title === page);
+    if (!pageData) {
+      console.warn(`Page with title "${page}" not found in data.pages`);
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement(Link, {
+      to: `/${pageData.slug}`
+    }, pageData.shortTitle || pageData.title));
+  }))));
+}

package/lib/pages/Page.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { PageData } from "../../declarations";
+export default function PageGen({ page, data, }: {
+    page: React.ReactElement;
+    data: PageData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/pages/Page.js

@@ -0,0 +1,9 @@
+import ArrowBack from "../components/ArrowBack";
+export default function PageGen({
+  page,
+  data
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "container mt-3"
+  }, /*#__PURE__*/React.createElement(ArrowBack, null), /*#__PURE__*/React.createElement("h2", null, data.title), /*#__PURE__*/React.createElement("blockquote", null, data.shortTitle || data.title, " - ", data.description), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("br", null), page || data.content);
+}

package/lib/pages/Search.d.ts

@@ -0,0 +1,4 @@
+import { ValidSiteData } from "../../declarations";
+export default function Search({ data }: {
+    data: ValidSiteData;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/pages/Search.js

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+export default function Search({
+  data
+}) {
+  const searchParams = new URLSearchParams(useLocation().search);
+  const query = searchParams.get("q") || "";
+  const [searchQuery, setSearchQuery] = useState(query);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Search"), /*#__PURE__*/React.createElement("div", {
+    className: "form-group w-50 d-inline-block me-3"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "search",
+    id: "search",
+    list: "search-data",
+    value: searchQuery,
+    onChange: e => setSearchQuery(e.target.value),
+    className: "form-control",
+    placeholder: "Search for content"
+  })), /*#__PURE__*/React.createElement(Link, {
+    to: {
+      pathname: "/search",
+      search: `?q=${searchQuery}`
+    },
+    className: "d-inline-block"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-primary p-2"
+  }, "Search")), /*#__PURE__*/React.createElement("datalist", {
+    id: "search-data"
+  }, Object.values(data.pages).map((page, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: page.title
+  }, page.title))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h2", null, "Results for \"", query, "\""), Object.values(data.pages).map((page, index) => {
+    if (page.title.toLowerCase().includes(searchQuery.toLowerCase())) return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "mb-3"
+    }, /*#__PURE__*/React.createElement("h3", null, /*#__PURE__*/React.createElement(Link, {
+      to: page.slug
+    }, page.title)), /*#__PURE__*/React.createElement("p", null, page.description));
+  }));
+}

package/lib/styles/Home.css

@@ -0,0 +1,3 @@
+#hero-title {
+    font-size: 3.5rem;
+}

package/lib/styles/hamburgers.min.css

@@ -0,0 +1,7 @@
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.hamburger.is-active:hover,.hamburger:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:#000}.hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.hamburger-inner{top:50%;display:block;margin-top:-2px}.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#000}.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}.hamburger-inner:before{top:-10px}.hamburger-inner:after{bottom:-10px}.hamburger--3dx .hamburger-box{perspective:80px}.hamburger--3dx .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx .hamburger-inner:after,.hamburger--3dx .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx.is-active .hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.hamburger--3dx.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dx-r .hamburger-box{perspective:80px}.hamburger--3dx-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r .hamburger-inner:after,.hamburger--3dx-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r.is-active .hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.hamburger--3dx-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy .hamburger-box{perspective:80px}.hamburger--3dy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy .hamburger-inner:after,.hamburger--3dy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy.is-active .hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.hamburger--3dy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy-r .hamburger-box{perspective:80px}.hamburger--3dy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r .hamburger-inner:after,.hamburger--3dy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r.is-active .hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.hamburger--3dy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy .hamburger-box{perspective:80px}.hamburger--3dxy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy .hamburger-inner:after,.hamburger--3dxy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.hamburger--3dxy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy-r .hamburger-box{perspective:80px}.hamburger--3dxy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r .hamburger-inner:after,.hamburger--3dxy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.hamburger--3dxy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--arrow.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrow.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowalt .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt.is-active .hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowalt.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)}.hamburger--arrowalt-r .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r.is-active .hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)}.hamburger--arrowalt-r.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrowturn.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn-r.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--boring .hamburger-inner,.hamburger--boring .hamburger-inner:after,.hamburger--boring .hamburger-inner:before{transition-property:none}.hamburger--boring.is-active .hamburger-inner{transform:rotate(45deg)}.hamburger--boring.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--boring.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.hamburger--collapse .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--collapse.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(-90deg)}.hamburger--collapse-r .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse-r .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.hamburger--collapse-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse-r.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(90deg)}.hamburger--elastic .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.hamburger--elastic.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.hamburger--elastic-r .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic-r .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic-r .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic-r.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.hamburger--elastic-r.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic-r.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.hamburger--emphatic{overflow:hidden}.hamburger--emphatic .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic .hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.hamburger--emphatic.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic.is-active .hamburger-inner:before{top:-80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,80px,0) rotate(45deg)}.hamburger--emphatic.is-active .hamburger-inner:after{top:-80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,80px,0) rotate(-45deg)}.hamburger--emphatic-r{overflow:hidden}.hamburger--emphatic-r .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic-r .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic-r .hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.hamburger--emphatic-r.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic-r.is-active .hamburger-inner:before{top:80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,-80px,0) rotate(-45deg)}.hamburger--emphatic-r.is-active .hamburger-inner:after{top:80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,-80px,0) rotate(45deg)}.hamburger--minus .hamburger-inner:after,.hamburger--minus .hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.hamburger--minus.is-active .hamburger-inner:after,.hamburger--minus.is-active .hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.hamburger--minus.is-active .hamburger-inner:before{top:0}.hamburger--minus.is-active .hamburger-inner:after{bottom:0}.hamburger--slider .hamburger-inner{top:2px}.hamburger--slider .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider .hamburger-inner:after{top:20px}.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--slider.is-active .hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.hamburger--slider.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.hamburger--slider-r .hamburger-inner{top:2px}.hamburger--slider-r .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider-r .hamburger-inner:after{top:20px}.hamburger--slider-r.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.hamburger--slider-r.is-active .hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.hamburger--slider-r.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.hamburger--spin .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.hamburger--spin.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--spin-r .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin-r .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin-r .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin-r.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.hamburger--spin-r.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin-r.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0s linear .13s}.hamburger--spring .hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring .hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring.is-active .hamburger-inner{transition-delay:.22s;background-color:transparent!important}.hamburger--spring.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--spring.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(-45deg)}.hamburger--spring-r .hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--spring-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.hamburger--spring-r .hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--spring-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.hamburger--spring-r.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.hamburger--stand .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(90deg);background-color:transparent!important}.hamburger--stand.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--stand-r .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand-r .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(-90deg);background-color:transparent!important}.hamburger--stand-r.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand-r.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--vortex .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex .hamburger-inner:after,.hamburger--vortex .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.hamburger--vortex.is-active .hamburger-inner:after,.hamburger--vortex.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex.is-active .hamburger-inner:after{bottom:0;transform:rotate(90deg)}.hamburger--vortex-r .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex-r .hamburger-inner:after,.hamburger--vortex-r .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex-r .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex-r .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex-r.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.hamburger--vortex-r.is-active .hamburger-inner:after,.hamburger--vortex-r.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex-r.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex-r.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)}

package/lib/styles/navbar.css

@@ -0,0 +1,21 @@
+.navbar {
+    &.navbar-dark {
+        --bs-navbar-color: rgba(255, 255, 255, 0.7);
+    }
+    .navbar-brand {
+        font-family: "Nunito", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 300;
+        font-style: normal;
+    }
+    #theme-toggle {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+    }
+    .hamburger-inner,
+    .hamburger-inner:after,
+    .hamburger-inner:before {
+        background-color: var(--bs-body-color) !important;
+    }
+}

package/lib/theme.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Theme } from "../declarations.d";
+export declare const ThemeContext: import("react").Context<Theme>;
+export declare const oppositeTheme: (theme: Theme) => "light" | "dark";
+export declare const useCurrentTheme: () => [Theme, Function];

package/lib/theme.js

@@ -0,0 +1,14 @@
+import { createContext, useContext, useState } from "react";
+export const ThemeContext = /*#__PURE__*/createContext("light");
+export const oppositeTheme = theme => {
+  return theme === "light" ? "dark" : "light";
+};
+export const useCurrentTheme = () => {
+  const theme = useContext(ThemeContext);
+  const [themeState, setThemeState] = useState(theme);
+  const setTheme = new_theme => {
+    localStorage.setItem("theme", new_theme);
+    setThemeState(new_theme);
+  };
+  return [themeState, setTheme];
+};

package/package.json

@@ -1,21 +1,16 @@
 {
     "name": "info-site-generator",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "main": "lib/index.js",
     "author": "Enderfarmer",
     "license": "MIT",
-    "types": "declarations.d.ts",
     "repository": "Enderfarmer/info-site-template",
     "private": false,
-    "dependencies": {
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0",
-        "react-router-dom": "^7.6.2",
-        "react-scripts": "5.0.1"
-    },
+    "types": "lib/index.d.ts",
     "scripts": {
-        "start": "react-scripts start",
-        "build": "babel src -d lib"
+        "build": "npm run build:js && npm run build:types",
+        "build:js": "babel src -d lib --extensions \".ts,.tsx\" --copy-files",
+        "build:types": "tsc"
     },
     "files": [
         "lib"
@@ -41,6 +36,13 @@
     "devDependencies": {
         "@babel/cli": "^7.28.3",
         "@babel/core": "^7.28.5",
-        "@babel/preset-react": "^7.28.5"
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
     }
 }