Skip to content

Commit 6411320

Browse files
austincondiffaustincondiff
committed
Made website more responsive
1 parent 5b4ac65 commit 6411320

File tree

13 files changed

+118
-108
lines changed

13 files changed

+118
-108
lines changed

‎components/common/Footer.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Link from 'next/link';
22
import React from 'react';
33
import styled from 'styled-components'
44
import ColorSchemeToggle from './ColorSchemeToggle';
5+
import { mediaQueries } from '@/styles/breakpoints';
56

67
const FooterWrap = styled.footer`
78
font-size: 12px;
@@ -38,14 +39,18 @@ const MiniFooterTop = styled.div`
3839
display: flex;
3940
align-items: flex-end;
4041
justify-content: space-between;
41-
4242
border-color: var(--separator-color);
4343
a {
4444
color: var(--glyph-blue);
4545
:hover {
4646
text-decoration: underline;
4747
}
4848
}
49+
@media ${mediaQueries.sm} {
50+
align-items: flex-start;
51+
flex-direction: column;
52+
gap: 5px;
53+
}
4954
}
5055
`
5156
const LegalCopyright = styled.div`
@@ -59,10 +64,8 @@ const LegalLinks = styled.div`
5964
display: inline-block;
6065
margin-top: 5px;
6166
white-space: nowrap;
62-
6367
color: var(--glyph-gray-secondary-alt);
6468
border-color: var(--fill-gray-tertiary);
65-
6669
:last-child {
6770
border: 0;
6871
margin-right: 0;
@@ -81,6 +84,9 @@ const MiniFooterBottom = styled.div`
8184
text-decoration: underline;
8285
}
8386
}
87+
@media ${mediaQueries.sm} {
88+
flex-direction: column;
89+
}
8490
`
8591

8692
function Footer() {

‎components/common/Header.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,7 @@ const MenuItem = styled.li`
9696
${({ $current }) => $current ? `
9797
&& a {
9898
color: var(--foreground-color) !important;
99-
opacity: 0.5;import { Container } from '@/components/common/Container';
100-
import { mediaQueries } from '../../styles/mediaQueries';
101-
99+
opacity: 0.5;
102100
}
103101
` : ``}
104102
`;
@@ -135,6 +133,7 @@ function Header() {
135133
<MenuItems>
136134
{navigation.map(item => {
137135
const isExternal = item.href.match(/(https?:\/\/[\w\d.-]+)/gi);
136+
console.log(asPath === item.href, asPath, item.href)
138137

139138
return (
140139
<MenuItem key={item.href} $current={asPath === item.href} {...(isExternal ? { target: "_blank" } : {})}>

‎components/common/Site.jsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,24 @@ export const useSite = () => useContext(SiteContext);
1313

1414

1515
const Site = ({ children }) => {
16-
const { colorScheme, setColorScheme } = useColorScheme();
16+
const {
17+
colorSchemeSetting,
18+
colorScheme,
19+
getColorSchemeSetting,
20+
setColorScheme,
21+
getSystemColorScheme
22+
} = useColorScheme();
1723
const windowDimensions = useWindowDimensions();
1824

1925
return (
20-
<SiteContextProvider value={{ colorScheme, setColorScheme, windowDimensions }}>
26+
<SiteContextProvider value={{
27+
colorSchemeSetting,
28+
colorScheme,
29+
getColorSchemeSetting,
30+
setColorScheme,
31+
getSystemColorScheme,
32+
windowDimensions
33+
}}>
2134
<ThemeProvider theme={theme}>
2235
{children}
2336
</ThemeProvider>

‎components/pages/home/HardwareLockup.jsx‎

Lines changed: 17 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,61 @@
1+
import Image from 'next/image';
12
import styled from 'styled-components';
3+
import { useSite } from '@/components/common/Site';
24

35
const HardwareLockupWrap = styled.div`
46
display: flex;
57
align-items: flex-start;
68
justify-content: center;
79
position: relative;
8-
margin-top: 100px;
10+
aspect-ratio: 1204/736;
11+
width: auto;
912
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
1013
mask-size: contain;
1114
mask-position: center;
1215
mask-repeat: no-repeat;
1316
mask-image: url(/m1_laptop_hw_shape_mask_large.png);
1417
}
15-
1618
@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) {
1719
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
1820
mask-image: url(/m1_laptop_hw_shape_mask_large_2x.png);
1921
}
2022
}
2123
`
22-
23-
const HardwareImage = styled.picture`
24+
const HardwareImage = styled.div`
2425
display: block;
25-
width: var(--p-width);
26-
height: var(--p-height);
27-
--p-width: 1204px;
28-
--p-height: 736px;
26+
aspect-ratio: 1204/736;
2927
`
30-
31-
const HardwareLockupFigure = styled.figure`
32-
position: absolute;
33-
top: 17px;
34-
`
35-
3628
const HardwareLockupMedia = styled.div`
3729
display: block;
38-
width: var(--p-width);
39-
height: var(--p-height);
40-
--p-width: 984px;
41-
--p-height: 636px;
42-
30+
aspect-ratio: 984/636;
31+
position: absolute;
32+
top: 2.3%;
33+
left: 9.3%;
34+
right: 9.3%;
4335
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
4436
mask-size: contain;
4537
mask-position: center;
4638
mask-repeat: no-repeat;
4739
mask-image: url(/m1_laptop_hw_mask_large.png);
4840
}
49-
5041
@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) {
5142
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
5243
mask-image: url(/m1_laptop_hw_mask_large_2x.png);
5344
}
5445
}
5546
`
5647

57-
const FallbackImage = styled.picture`
58-
display: block;
59-
width: var(--p-width);
60-
height: var(--p-height);
61-
--p-width: 984px;
62-
--p-height: 636px;
63-
`
64-
6548
const HardwareLockup = (props) => {
49+
const { colorScheme = "light" } = useSite();
50+
6651
return (
6752
<HardwareLockupWrap {...props}>
6853
<HardwareImage>
69-
<source srcSet="/m1_laptop_hw_dark_small.jpg, /m1_laptop_hw_dark_small_2x.jpg 2x" media="(max-width:734px)" />
70-
<source srcSet="/m1_laptop_hw_dark_medium.jpg, /m1_laptop_hw_dark_medium_2x.jpg 2x" media="(max-width:1068px)" />
71-
<source srcSet="/m1_laptop_hw_dark_large.jpg, /m1_laptop_hw_dark_large_2x.jpg 2x" media="(min-width:0px)" />
72-
<img src="/m1_laptop_hw_dark_large.jpg" alt="hardware image" />
54+
<Image src={`/m1_laptop_hw_${colorScheme}_large_2x.jpg`} alt="hardware image" width="1204" height="736" />
7355
</HardwareImage>
74-
<noscript>
75-
<HardwareImage>
76-
<source srcSet="/m1_laptop_hw_dark_small.jpg, /m1_laptop_hw_dark_small_2x.jpg 2x" media="(max-width:734px)" />
77-
<source srcSet="/m1_laptop_hw_dark_medium.jpg, /m1_laptop_hw_dark_medium_2x.jpg 2x" media="(max-width:1068px)" />
78-
<source srcSet="/m1_laptop_hw_dark_large.jpg, /m1_laptop_hw_dark_large_2x.jpg 2x" media="(min-width:0px)" />
79-
<img src="/m1_laptop_hw_dark_large.jpg" alt="hardware image" />
80-
</HardwareImage>
81-
</noscript>
82-
<HardwareLockupFigure>
83-
<HardwareLockupMedia>
84-
<FallbackImage>
85-
<source srcSet="/screen_processing_small.jpg, /screen_processing_small_2x.jpg 2x" media="(max-width:734px)" />
86-
<source srcSet="/screen_processing_medium.jpg, /screen_processing_medium_2x.jpg 2x" media="(max-width:1068px)" />
87-
<source srcSet="/screen_processing_large.jpg, /screen_processing_large_2x.jpg 2x" media="(min-width:0px)" />
88-
<img src="/screen_processing_large.jpg" alt="image" />
89-
</FallbackImage>
90-
<noscript>
91-
<FallbackImage>
92-
<source srcSet="/screen_processing_small.jpg, /screen_processing_small_2x.jpg 2x" media="(max-width:734px)" />
93-
<source srcSet="/screen_processing_medium.jpg, /screen_processing_medium_2x.jpg 2x" media="(max-width:1068px)" />
94-
<source srcSet="/screen_processing_large.jpg, /screen_processing_large_2x.jpg 2x" media="(min-width:0px)" />
95-
<img src="/screen_processing_large.jpg" alt="image" />
96-
</FallbackImage>
97-
</noscript>
98-
</HardwareLockupMedia>
99-
</HardwareLockupFigure>
56+
<HardwareLockupMedia>
57+
<Image src={`/screen_macos_desktop_${colorScheme}_large_2x.jpg`} alt="image" width="984" height="636" />
58+
</HardwareLockupMedia>
10059
</HardwareLockupWrap>
10160
)
10261
}

‎components/pages/home/HeroImage.jsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import styled, { css, keyframes } from "styled-components"
22
import Image from "next/image";
3-
import { Parallax } from 'react-parallax';
43
import HardwareLockup from "./HardwareLockup";
5-
4+
import { useSite } from '@/components/common/Site';
5+
import { mediaQueries } from '@/styles/breakpoints';
66

77
const slideIn = keyframes`
88
from {
@@ -42,9 +42,12 @@ const SceneWrap = styled.div`
4242
`;
4343
const ImageWrap = styled.div`
4444
position: relative;
45-
width: 988px;
45+
max-width: 988px;
4646
margin: 0 auto;
4747
z-index: 1;
48+
@media ${mediaQueries.md} {
49+
width: 82%;
50+
}
4851
`;
4952
const BlurBackground = styled.div`
5053
backdrop-filter: blur(15px);
@@ -55,7 +58,6 @@ const BlurBackground = styled.div`
5558
left: 3%;
5659
border-radius: 1%;
5760
`;
58-
5961
const colorFlairPiece = css`
6062
position: absolute;
6163
top: 0;
@@ -111,25 +113,36 @@ const ColorFlair3 = styled(ColorFlair)`
111113
animation-duration: 5000ms;
112114
}
113115
`;
116+
const StyledHardwareLockup = styled(HardwareLockup)`
117+
margin-top: -45%;
118+
margin-left: -100px;
119+
margin-right: -100px;
120+
@media ${mediaQueries.md} {
121+
margin-top: -37%;
122+
margin-left: 0;
123+
margin-right: 0;
124+
}
125+
`
114126

115127
const HeroImage = ({ percentage }) => {
128+
const { colorScheme = "light" } = useSite();
116129
const adjustedPercentage = (Math.min(Math.max(percentage, 1), 1.2) - 1) * 5;
117130

118131
return (
119132
<SceneWrap>
120133
<ColorFlair1 />
121134
<ColorFlair2 />
122135
<ColorFlair3 />
123-
<ImageWrap style={{ transform: `translateY(${adjustedPercentage * 20}%) scale(${1 + (1 - adjustedPercentage) * .1})` }}>
136+
<ImageWrap style={{ transform: `translateY(${adjustedPercentage * 12.5}%) scale(${1 + (1 - adjustedPercentage) * .1})` }}>
124137
<BlurBackground />
125138
<Image
126139
width={987.275}
127140
height={580.75}
128-
src="/codeedit-window.png"
141+
src={`/codeedit-window-${colorScheme}.png`}
129142
alt="CodeEdit screenshot"
130143
/>
131144
</ImageWrap>
132-
<HardwareLockup style={{ transform: `translateY(-${adjustedPercentage * 15}%) scale(${1 + (1 - adjustedPercentage) * -.1})`, marginTop: '-33.33%' }} />
145+
<StyledHardwareLockup style={{ transform: `translateY(-${adjustedPercentage * 15}%) scale(${1 + (1 - adjustedPercentage) * -.1})` }} />
133146
</SceneWrap>
134147
)
135148
}

‎components/pages/home/sections/HeroSection.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,7 @@ const HeroSection = () => {
1818
style={{ overflow: 'visible' }}
1919
renderLayer={(percentage) => {
2020
return (
21-
<Section contained gutterY>
22-
<Row align="center">
23-
<Column></Column>
24-
</Row>
21+
<Section contained gutterTop>
2522
<Row align="center">
2623
<Column width={{ md: 12, lg: 8 }}>
2724
<Stack gap={2}>
@@ -50,7 +47,7 @@ const HeroSection = () => {
5047
</Column>
5148
</Row>
5249
<Row align="center">
53-
<Column>
50+
<Column style={{ width: '100%'}}>
5451
<HeroImage percentage={percentage} />
5552
</Column>
5653
</Row>

‎data/navigation.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ const navigation = [
44
label: 'CodeEdit',
55
},
66
{
7-
href: 'whats-new',
7+
href: '/whats-new',
88
label: 'What’s Included',
99
},
10+
// {
11+
// href: '/resources',
12+
// label: 'Resources',
13+
// },
1014
{
11-
href: 'resources',
12-
label: 'Resources',
13-
},
14-
{
15-
href: 'developer',
15+
href: '/developer',
1616
label: 'Developer',
1717
},
1818
{
19-
href: 'extensions',
19+
href: '/extensions',
2020
label: 'Extensions',
2121
},
2222
{

0 commit comments

Comments
 (0)