feat: added support enormous screens

added aria label to roadmap, updated roadmap.svg

components/HomeHeroBubble.tsx

@@ -5,14 +5,14 @@ import { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 
 export function HomeHeroBubble() {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(ScreenContext);
   const dispatch = useDispatch();
 
   return (
     <div
       style={{
         marginTop:
-          isMobile || isTablet ? '33px' : isHuge ? '16rem' : 'min(50vh, 20rem)',
+          (isMobile || isTablet) ? '33px' : (isHuge || isEnormous) ? '16rem' : 'min(50vh, 20rem)',
       }}
       onClick={() => dispatch(expandSideMenu())}
       className={classNames(

components/cards/CardGrid.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export function CardGrid({ rows, children }: Props) {
-  const { isDesktop, isHuge } = useContext(ScreenContext);
+  const { isDesktop, isHuge, isEnormous } = useContext(ScreenContext);
 
   const [ref, { width }] = useMeasure();
   const widthOfCardPx = 200;
@@ -22,7 +22,7 @@ export function CardGrid({ rows, children }: Props) {
   const numPaddingCards =
     Math.ceil(children.length / grouping) * grouping - children.length;
 
-  const spacing = isHuge ? 3 : isDesktop ? 6 : 4;
+  const spacing = (isHuge || isEnormous) ? 3 : isDesktop ? 6 : 4;
   const spacingY = `space-y-${spacing}`;
   const spacingX = `space-x-${spacing}`;
 

components/navigation/SideMenuInner.tsx

@@ -24,7 +24,7 @@ import { useRouter } from 'next/router';
 import { v4 as uuid } from 'uuid';
 
 export function SideMenuInner() {
-  const { isHuge, isDesktop } = useContext(ScreenContext);
+  const { isDesktop } = useContext(ScreenContext);
   const { pages } = useSelector((state: IState) => state.navigation);
   const dispatch = useDispatch();
   const router = useRouter();

components/navigation/SideMenuRow.tsx

@@ -16,7 +16,9 @@ interface SideMenuRowProps {
 }
 
 export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(
+    ScreenContext,
+  );
   const isCollapsible = isTablet || isMobile;
   const dispatch = useDispatch();
 
@@ -41,7 +43,7 @@ export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
       }}
       className={classNames(
         'flex flex-1 space-x-6 justify-between text-primary items-center cursor-pointer border-b border-black py-4 hover:bg-secondary duration-300 whitespace-nowrap',
-        isHuge ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
+        (isHuge || isEnormous) ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
         isActive ? 'bg-secondary' : 'bg-transparent',
         item.shouldHide ? 'hidden' : '',
       )}

components/navigation/SideMenuSideBar.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export function SideMenuSideBar({ mode }: Props) {
-  const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isHuge, isEnormous } = useContext(ScreenContext);
   const { sideMenuExpanded: expanded, pageType, postTitle } = useSelector(
     (state: IState) => state.navigation,
   );

constants/ui.ts

@@ -2,6 +2,8 @@ const UI = {
   MOBILE_BREAKPOINT: 500,
   TABLET_BREAKPOINT: 850,
   DESKTOP_BREAKPOINT: 1100,
+  MONITOR_BREAKPOINT: 1920,
+  
   MAX_CONTENT_WIDTH: 1100,
   MAX_ARTICLE_WIDTH: 900,
   PAGE_CONTAINED_PADDING_VW: 5,

contexts/screen.tsx

@@ -6,6 +6,7 @@ interface IScreen {
   isTablet: boolean;
   isDesktop: boolean;
   isHuge: boolean;
+  isEnormous: boolean;
   width: number;
 }
 
@@ -14,6 +15,7 @@ export const ScreenContext = React.createContext({
   isTablet: false,
   isDesktop: false,
   isHuge: false,
+  isEnormous: false,
   width: 0,
 });
 

hooks/screen.ts

@@ -12,19 +12,23 @@ export function useScreenSize() {
   const [isTablet, setIsTablet] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);
   const [isHuge, setIsHuge] = useState(false);
+  const [isEnormous, setIsEnormous] = useState(false);
 
   useEffect(() => {
     const _isMobile = width <= UI.MOBILE_BREAKPOINT;
     const _isTablet =
       width > UI.MOBILE_BREAKPOINT && width <= UI.TABLET_BREAKPOINT;
     const _isDesktop = width > UI.TABLET_BREAKPOINT;
-    const _isHuge = width > UI.DESKTOP_BREAKPOINT;
+    const _isHuge =
+      width >= UI.DESKTOP_BREAKPOINT && width < UI.MONITOR_BREAKPOINT;
+    const _isEnormous = width >= UI.MONITOR_BREAKPOINT;
 
     if (isMobile !== _isMobile) setIsMobile(_isMobile);
     if (isTablet !== _isTablet) setIsTablet(_isTablet);
     if (isDesktop !== _isDesktop) setIsDesktop(_isDesktop);
     if (isHuge !== _isHuge) setIsHuge(_isHuge);
-  }, [isMobile, isTablet, isDesktop, isHuge, width]);
+    if (isEnormous !== _isEnormous) setIsEnormous(_isEnormous);
+  }, [isMobile, isTablet, isDesktop, isHuge, isEnormous, width]);
 
-  return { isMobile, isTablet, isDesktop, isHuge, width };
+  return { isMobile, isTablet, isDesktop, isHuge, isEnormous, width };
 }

pages/404.tsx

@@ -7,14 +7,17 @@ import { ScreenContext } from '@/contexts/screen';
 import classNames from 'classnames';
 
 export default function Custom404(): ReactElement {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(
+    ScreenContext,
+  );
 
   const wrapperStyles = {
     width: '100%',
     maxWidth: '760px',
     margin: isDesktop ? '50px auto 100px' : '-10px auto',
-    paddingLeft: isHuge ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
-    paddingRight: isHuge ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
+    paddingLeft:
+      (isHuge || isEnormous) ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
+    paddingRight: (isHuge || isEnormous) ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
     paddingBottom: !isDesktop ? '33px' : '0px',
   };
 

pages/roadmap.tsx

@@ -27,6 +27,7 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
     >
       <canvas
         id={'#roadmap-image'}
+        aria-label={"Oxen's roadmap for the future shown as a progress tree"}
         className={classNames('cursor-move')}
         // upscaled for better text rendering
         // mobile and tablets have smaller upscale limit