Made website more responsive

CodeEditApp · Sep 26, 2022 · 6411320 · 6411320
1 parent 5b4ac65
commit 6411320
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 108 deletions.
diff --git a/components/common/Footer.jsx b/components/common/Footer.jsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import React from 'react';
 import styled from 'styled-components'
 import ColorSchemeToggle from './ColorSchemeToggle';
+import { mediaQueries } from '@/styles/breakpoints';
 
 const FooterWrap = styled.footer`
   font-size: 12px;
@@ -38,14 +39,18 @@ const MiniFooterTop = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  
   border-color: var(--separator-color);
   a {
     color: var(--glyph-blue);
     :hover {
       text-decoration: underline;
     }
   }
+  @media ${mediaQueries.sm} {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 5px;
+  }
 }
 `
 const LegalCopyright = styled.div`
@@ -59,10 +64,8 @@ const LegalLinks = styled.div`
     display: inline-block;
     margin-top: 5px;
     white-space: nowrap;
-
     color: var(--glyph-gray-secondary-alt);
     border-color: var(--fill-gray-tertiary);
-
     :last-child {
       border: 0;
       margin-right: 0;
@@ -81,6 +84,9 @@ const MiniFooterBottom = styled.div`
       text-decoration: underline;
     }
   }
+  @media ${mediaQueries.sm} {
+    flex-direction: column;
+  }
 `
 
 function Footer() {

diff --git a/components/common/Header.jsx b/components/common/Header.jsx
@@ -96,9 +96,7 @@ const MenuItem = styled.li`
     ${({ $current }) => $current ? `
       && a {
         color: var(--foreground-color) !important;
-        opacity: 0.5;import { Container } from '@/components/common/Container';
-import { mediaQueries } from '../../styles/mediaQueries';
-
+        opacity: 0.5;
       }
     ` : ``}
 `;
@@ -135,6 +133,7 @@ function Header() {
               <MenuItems>
                 {navigation.map(item => {
                   const isExternal = item.href.match(/(https?:\/\/[\w\d.-]+)/gi);
+                  console.log(asPath === item.href, asPath, item.href)
 
                   return (
                     <MenuItem key={item.href} $current={asPath === item.href} {...(isExternal ? { target: "_blank" } : {})}>

diff --git a/components/common/Site.jsx b/components/common/Site.jsx
@@ -13,11 +13,24 @@ export const useSite = () => useContext(SiteContext);
 
 
 const Site = ({ children }) => {
-  const { colorScheme, setColorScheme } = useColorScheme();
+  const {
+    colorSchemeSetting,
+    colorScheme,
+    getColorSchemeSetting,
+    setColorScheme,
+    getSystemColorScheme
+  } = useColorScheme();
   const windowDimensions = useWindowDimensions();
 
   return (
-    <SiteContextProvider value={{ colorScheme, setColorScheme, windowDimensions }}>
+    <SiteContextProvider value={{
+      colorSchemeSetting,
+      colorScheme,
+      getColorSchemeSetting,
+      setColorScheme,
+      getSystemColorScheme,
+      windowDimensions
+    }}>
       <ThemeProvider theme={theme}>
         {children}
       </ThemeProvider>

diff --git a/components/pages/home/HardwareLockup.jsx b/components/pages/home/HardwareLockup.jsx
@@ -1,102 +1,61 @@
+import Image from 'next/image';
 import styled from 'styled-components';
+import { useSite } from '@/components/common/Site';
 
 const HardwareLockupWrap = styled.div`
   display: flex;
   align-items: flex-start;
   justify-content: center;
   position: relative;
-  margin-top: 100px;
+  aspect-ratio: 1204/736;
+  width: auto;
   @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
     mask-size: contain;
     mask-position: center;
     mask-repeat: no-repeat;
     mask-image: url(/m1_laptop_hw_shape_mask_large.png);
   }
-
   @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
     @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
         mask-image: url(/m1_laptop_hw_shape_mask_large_2x.png);
     }
   }
 `
-
-const HardwareImage = styled.picture`
+const HardwareImage = styled.div`
   display: block;
-  width: var(--p-width);
-  height: var(--p-height);
-  --p-width: 1204px;
-  --p-height: 736px;
+  aspect-ratio: 1204/736;
 `
-
-const HardwareLockupFigure = styled.figure`
-  position: absolute;
-  top: 17px;
-`
-
 const HardwareLockupMedia = styled.div`
   display: block;
-  width: var(--p-width);
-  height: var(--p-height);
-  --p-width: 984px;
-  --p-height: 636px;
-
+  aspect-ratio: 984/636;
+  position: absolute;
+  top: 2.3%;
+  left: 9.3%;
+  right: 9.3%;
   @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
     mask-size: contain;
     mask-position: center;
     mask-repeat: no-repeat;
     mask-image: url(/m1_laptop_hw_mask_large.png);
   }
-
   @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
     @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
         mask-image: url(/m1_laptop_hw_mask_large_2x.png);
     }
   }
 `
 
-const FallbackImage = styled.picture`
-  display: block;
-  width: var(--p-width);
-  height: var(--p-height);
-  --p-width: 984px;
-  --p-height: 636px;
-`
-
 const HardwareLockup = (props) => {
+  const { colorScheme = "light" } = useSite();
+
   return (
     <HardwareLockupWrap {...props}>
       <HardwareImage>
-        <source srcSet="/m1_laptop_hw_dark_small.jpg, /m1_laptop_hw_dark_small_2x.jpg 2x" media="(max-width:734px)" />
-        <source srcSet="/m1_laptop_hw_dark_medium.jpg, /m1_laptop_hw_dark_medium_2x.jpg 2x" media="(max-width:1068px)" />
-        <source srcSet="/m1_laptop_hw_dark_large.jpg, /m1_laptop_hw_dark_large_2x.jpg 2x" media="(min-width:0px)" />
-        <img src="/m1_laptop_hw_dark_large.jpg" alt="hardware image" />
+        <Image src={`/m1_laptop_hw_${colorScheme}_large_2x.jpg`} alt="hardware image" width="1204" height="736" />
       </HardwareImage>
-      <noscript>
-        <HardwareImage>
-          <source srcSet="/m1_laptop_hw_dark_small.jpg, /m1_laptop_hw_dark_small_2x.jpg 2x" media="(max-width:734px)" />
-          <source srcSet="/m1_laptop_hw_dark_medium.jpg, /m1_laptop_hw_dark_medium_2x.jpg 2x" media="(max-width:1068px)" />
-          <source srcSet="/m1_laptop_hw_dark_large.jpg, /m1_laptop_hw_dark_large_2x.jpg 2x" media="(min-width:0px)" />
-          <img src="/m1_laptop_hw_dark_large.jpg" alt="hardware image" />
-        </HardwareImage>
-      </noscript>
-      <HardwareLockupFigure>
-        <HardwareLockupMedia>
-          <FallbackImage>
-            <source srcSet="/screen_processing_small.jpg, /screen_processing_small_2x.jpg 2x" media="(max-width:734px)" />
-            <source srcSet="/screen_processing_medium.jpg, /screen_processing_medium_2x.jpg 2x" media="(max-width:1068px)" />
-            <source srcSet="/screen_processing_large.jpg, /screen_processing_large_2x.jpg 2x" media="(min-width:0px)" />
-            <img src="/screen_processing_large.jpg" alt="image" />
-          </FallbackImage>
-          <noscript>
-            <FallbackImage>
-              <source srcSet="/screen_processing_small.jpg, /screen_processing_small_2x.jpg 2x" media="(max-width:734px)" />
-              <source srcSet="/screen_processing_medium.jpg, /screen_processing_medium_2x.jpg 2x" media="(max-width:1068px)" />
-              <source srcSet="/screen_processing_large.jpg, /screen_processing_large_2x.jpg 2x" media="(min-width:0px)" />
-              <img src="/screen_processing_large.jpg" alt="image" />
-            </FallbackImage>
-          </noscript>
-        </HardwareLockupMedia>
-      </HardwareLockupFigure>
+      <HardwareLockupMedia>
+        <Image src={`/screen_macos_desktop_${colorScheme}_large_2x.jpg`} alt="image" width="984" height="636" />
+      </HardwareLockupMedia>
     </HardwareLockupWrap>
   )
 }

diff --git a/components/pages/home/HeroImage.jsx b/components/pages/home/HeroImage.jsx
@@ -1,8 +1,8 @@
 import styled, { css, keyframes } from "styled-components"
 import Image from "next/image";
-import { Parallax } from 'react-parallax';
 import HardwareLockup from "./HardwareLockup";
-
+import { useSite } from '@/components/common/Site';
+import { mediaQueries } from '@/styles/breakpoints';
 
 const slideIn = keyframes`
   from {
@@ -42,9 +42,12 @@ const SceneWrap = styled.div`
 `;
 const ImageWrap = styled.div`
   position: relative;
-  width: 988px;
+  max-width: 988px;
   margin: 0 auto;
   z-index: 1;
+  @media ${mediaQueries.md} {
+    width: 82%;
+  }
 `;
 const BlurBackground = styled.div`
   backdrop-filter: blur(15px);
@@ -55,7 +58,6 @@ const BlurBackground = styled.div`
   left: 3%;
   border-radius: 1%;
 `;
-
 const colorFlairPiece = css`
   position: absolute;
   top: 0;
@@ -111,25 +113,36 @@ const ColorFlair3 = styled(ColorFlair)`
     animation-duration: 5000ms;
   }
 `;
+const StyledHardwareLockup = styled(HardwareLockup)`
+  margin-top: -45%;
+  margin-left: -100px;
+  margin-right: -100px;
+  @media ${mediaQueries.md} {
+    margin-top: -37%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+`
 
 const HeroImage = ({ percentage }) => {
+  const { colorScheme = "light" } = useSite();
   const adjustedPercentage = (Math.min(Math.max(percentage, 1), 1.2) - 1) * 5;
 
   return (
     <SceneWrap>
       <ColorFlair1 />
       <ColorFlair2 />
       <ColorFlair3 />
-      <ImageWrap style={{ transform: `translateY(${adjustedPercentage * 20}%) scale(${1 + (1 - adjustedPercentage) * .1})` }}>
+      <ImageWrap style={{ transform: `translateY(${adjustedPercentage * 12.5}%) scale(${1 + (1 - adjustedPercentage) * .1})` }}>
         <BlurBackground />
         <Image
           width={987.275}
           height={580.75}
-          src="/codeedit-window.png"
+          src={`/codeedit-window-${colorScheme}.png`}
           alt="CodeEdit screenshot"
         /> 
       </ImageWrap>
-      <HardwareLockup style={{ transform: `translateY(-${adjustedPercentage * 15}%)  scale(${1 + (1 - adjustedPercentage) * -.1})`, marginTop: '-33.33%' }} />
+      <StyledHardwareLockup style={{ transform: `translateY(-${adjustedPercentage * 15}%)  scale(${1 + (1 - adjustedPercentage) * -.1})` }} />
     </SceneWrap>
   )
 }

diff --git a/components/pages/home/sections/HeroSection.jsx b/components/pages/home/sections/HeroSection.jsx
@@ -18,10 +18,7 @@ const HeroSection = () => {
       style={{ overflow: 'visible' }}
       renderLayer={(percentage) => {
         return (
-          <Section contained gutterY>
-            <Row align="center">
-              <Column></Column>
-            </Row>
+          <Section contained gutterTop>
             <Row align="center">
               <Column width={{ md: 12, lg: 8 }}>
                 <Stack gap={2}>
@@ -50,7 +47,7 @@ const HeroSection = () => {
               </Column>
             </Row>
             <Row align="center">
-              <Column>
+              <Column style={{ width: '100%'}}>
                 <HeroImage percentage={percentage} />
               </Column>
             </Row>

diff --git a/data/navigation.js b/data/navigation.js
@@ -4,19 +4,19 @@ const navigation = [
     label: 'CodeEdit',
   },
   {
-    href: 'whats-new',
+    href: '/whats-new',
     label: 'What’s Included',
   },
+  // {
+  //   href: '/resources',
+  //   label: 'Resources',
+  // },
   {
-    href: 'resources',
-    label: 'Resources',
-  },
-  {
-    href: 'developer',
+    href: '/developer',
     label: 'Developer',
   },
   {
-    href: 'extensions',
+    href: '/extensions',
     label: 'Extensions',
   },
   {