Adjust screen width breakpoints and misc fixes

components/layouts/container.module.css

@@ -29,6 +29,6 @@
  }
 
  .ArticleContainer :global(.toc):not(.advanced-features) ~ .ContentContainer {
- padding-right: calc(226px + 2rem);
+ @apply pr-64 3xl:pr-72;
  }
 }

components/navigation/navItem.module.css

@@ -6,13 +6,20 @@
  @apply flex items-center p-2 mr-4 xl:mr-4 mb-0 rounded-md;
 }
 
+/* Design pass needed.
+Centering the text under the icons when condensed creates misalignment.
+Either complete the details for center alignment, or remove this to leave it left
+justified. The condensed menu requires hover to expand, which isn't mobile-friendly.*/
+
+/*
 .CondensedHeadingContainer {
  @apply lg:flex-wrap lg:justify-center lg:text-center lg:w-min;
 }
 
 .CondensedHeadingIconContainer {
  @apply lg:mr-0;
 }
+*/
 
 .Icon {
  @apply text-white !important;

components/utilities/breadCrumbs.module.css

@@ -17,7 +17,7 @@
 }
 
 :global(.dark) .Link {
- @apply text-gray-50 !important;
+ @apply text-gray-70 !important;
 }
 
 .Separator {

components/utilities/floatingNav.module.css

@@ -1,5 +1,5 @@
 .ListContainer {
- @apply absolute right-0 top-0 h-full w-56 z-10 hidden;
+ @apply absolute right-0 top-0 h-full w-56 z-10 hidden 3xl:w-64;
 }
 
 .List {
@@ -27,7 +27,7 @@
 
 /* Styles for the active item on the floating nav */
 .Link {
- @apply border-none inline-block pr-2 w-40 leading-4 hover:opacity-70 hover:no-underline;
+ @apply border-none inline-block pr-2 w-40 leading-4 hover:opacity-70 hover:no-underline 3xl:w-48;
  @apply text-gray-70 !important;
 }
 

components/utilities/themeToggle.js

@@ -5,6 +5,7 @@ import styles from "./themeToggle.module.css";
 const ThemeToggle = () => {
  const [activeTheme, setActiveTheme] = useState("light");
  let inactiveTheme;
+ inactiveTheme = activeTheme === "light" ? "dark" : "light";
 
  const getUserPreference = () => {
  if (window.localStorage.getItem("theme")) {
@@ -16,11 +17,7 @@ const ThemeToggle = () => {
  };
 
  const changeTailwindTheme = (theme) => {
- if (theme === "dark") {
- inactiveTheme = "light";
- } else {
- inactiveTheme = "dark";
- }
+ inactiveTheme = theme === "light" ? "dark" : "light";
  document.documentElement.classList.add(theme);
  document.documentElement.classList.remove(inactiveTheme);
  setActiveTheme(theme);

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
  lg: "1024px",
  xl: "1280px",
  "2xl": "1448px",
+ "3xl": "1600px",
  },
  fontFamily: {
  sans: [