Skip to content

Commit 0413acf

Browse files
austincondiffaustincondiff
authored
Added download page. Improved responsiveness (#77)
* Added download page. Improved responsiveness * Fixed build error
1 parent 7069d61 commit 0413acf

24 files changed

+418
-99
lines changed

‎components/common/Button.jsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Button = styled.a`
1111
line-height: 1.17648;
1212
font-weight: 400;
1313
letter-spacing: -.022em;
14-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
14+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
1515
min-width: 28px;
1616
padding-left: 16px;
1717
padding-right: 16px;
@@ -23,18 +23,23 @@ const Button = styled.a`
2323
border: 0;
2424
outline: 0;
2525
26-
${({ compact }) => compact ? `
26+
${({ size }) => size === "sm" ? `
2727
font-size: 12px;
2828
line-height: 1.33337;
2929
font-weight: 400;
3030
letter-spacing: -.01em;
31-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
3231
min-width: 23px;
3332
padding-left: 11px;
3433
padding-right: 11px;
3534
padding-top: 4px;
3635
padding-bottom: 4px;
3736
border-radius: 12px;
37+
` : size === "lg" ? `
38+
padding-left: 21px;
39+
padding-right: 21px;
40+
padding-top: 11px;
41+
padding-bottom: 11px;
42+
border-radius: 21px;
3843
` : ``}
3944
svg {
4045
width: 1em;

‎components/common/ColorSchemeToggle.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const ColorSchemeToggleWrap = styled.div`
1212
line-height: 1.33337;
1313
font-weight: 400;
1414
letter-spacing: -.01em;
15-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
15+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
1616
border: 1px solid var(--toggle-color-fill);
1717
border-radius: var(--toggle-border-radius-outer, 2px);
1818
display: inline-flex;

‎components/common/Footer.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const FooterWrap = styled.footer`
1111
line-height: 1.33337;
1212
font-weight: 400;
1313
letter-spacing: -.01em;
14-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
14+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
1515
overflow: hidden;
1616
position: relative;
1717
z-index: 1;

‎components/common/Header.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Title = styled.h2`
5757
line-height: 1.14286;
5858
font-weight: 600;
5959
letter-spacing: -0.033em;
60-
font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
60+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
6161
cursor: default;
6262
display: block;
6363
margin: 0;
@@ -103,7 +103,7 @@ const Menu = styled.div`
103103
line-height: 1;
104104
font-weight: 400;
105105
letter-spacing: -.01em;
106-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
106+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
107107
display: flex;
108108
align-items: center;
109109
gap: 24px;
@@ -348,7 +348,7 @@ const MenuChevron = styled.span`
348348
`;
349349

350350
function Header() {
351-
const { asPath } = useRouter();
351+
const router = useRouter();
352352
const [isOpen, setIsOpen] = useState();
353353
const menuRef = useRef();
354354

@@ -397,7 +397,7 @@ function Header() {
397397

398398
return (
399399
<MenuItem key={href} {...(isExternal ? { target: "_blank" } : {})}>
400-
<MenuLink onClick={() => setIsOpen(false)} href={href} $current={asPath === href || (href !== "/" && asPath.startsWith(href))}>
400+
<MenuLink onClick={() => setIsOpen(false)} href={href} $current={router.asPath === href || (href !== "/" && router.asPath.startsWith(href))}>
401401
{item.title}
402402
{isExternal && <StyledExternalLink size={11} />}
403403
</MenuLink>
@@ -413,7 +413,7 @@ function Header() {
413413
</MenuToggle>
414414
</Action>
415415
<Action>
416-
<Button href="https://github.com/CodeEditApp/CodeEdit/releases/latest" target="_blank" compact>Download</Button>
416+
<Button size="sm" onClick={() => router.push("/download")}>Download</Button>
417417
</Action>
418418
</Actions>
419419
</Menu>

‎components/common/IconButton.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Button = styled.a`
99
line-height: 1.17648;
1010
font-weight: 400;
1111
letter-spacing: -.022em;
12-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
12+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
1313
min-width: 28px;
1414
padding: 4px;
1515
border-radius: 18px;
@@ -31,7 +31,7 @@ const Button = styled.a`
3131
line-height: 1.33337;
3232
font-weight: 400;
3333
letter-spacing: -.01em;
34-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
34+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
3535
min-width: 23px;
3636
padding: 0;
3737
border-radius: 12px;

‎components/common/Ribbon.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const RibbonContent = styled.div`
3232
line-height: 1.42859;
3333
font-weight: 400;
3434
letter-spacing: -.016em;
35-
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
35+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
3636
`;
3737

3838
function Ribbon({ children, onClick, ...props }) {

‎components/common/layout/Container.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ const Container = styled.div`
1313
padding-left: calc(max(${gutter}px, env(safe-area-inset-left)));
1414
padding-right: calc(max(${gutter}px, env(safe-area-inset-right)));
1515
position: relative;
16+
@media ${mediaQueries.md} {
17+
margin-left: auto;
18+
margin-right: auto;
19+
width: 692px;
20+
}
1621
@media ${mediaQueries.sm} {
22+
max-width: 366px;
1723
width: calc(100% - ${smallGutter}px * 2);
1824
padding: 0 ${smallGutter}px;
1925
padding-left: calc(max(${smallGutter}px, env(safe-area-inset-left)));

‎components/pages/blog/index.js

+66
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ const TileItem = styled.li`
4343
&.item-portrait-secondary {
4444
& ~ .tile-item {
4545
margin-top: 36px;
46+
@media ${mediaQueries.md} {
47+
margin-top: 22px;
48+
}
4649
}
4750
}
4851
}
@@ -117,10 +120,22 @@ const TileWrap = styled(Link)`
117120
&.tile-2up {
118121
flex-direction: column;
119122
width: 472px;
123+
@media ${mediaQueries.md} {
124+
width: 333px;
125+
}
126+
@media ${mediaQueries.sm} {
127+
width: 100%;
128+
}
120129
}
121130
&.tile-3up {
122131
flex-direction: column;
123132
width: 303px;
133+
@media ${mediaQueries.md} {
134+
width: 333px;
135+
}
136+
@media ${mediaQueries.sm} {
137+
width: 100%;
138+
}
124139
}
125140
`;
126141
const TileMedia = styled.div`
@@ -136,6 +151,13 @@ const TileMedia = styled.div`
136151
min-height: 362px;
137152
flex-basis: 643px;
138153
flex-shrink: 1;
154+
@media ${mediaQueries.md} {
155+
width: 100%;
156+
height: auto;
157+
min-height: 255px;
158+
flex-basis: 453px;
159+
flex-shrink: 1;
160+
}
139161
@media ${mediaQueries.sm} {
140162
flex-basis: auto;
141163
min-height: 0;
@@ -149,6 +171,13 @@ const TileMedia = styled.div`
149171
min-height: auto;
150172
flex-basis: auto;
151173
flex-shrink: 1;
174+
@media ${mediaQueries.md} {
175+
width: 100%;
176+
height: 187px;
177+
min-height: auto;
178+
flex-basis: auto;
179+
flex-shrink: 1;
180+
}
152181
}
153182
154183
.tile-3up & {
@@ -186,6 +215,9 @@ const TileDescription = styled.div`
186215
padding: 32px;
187216
justify-content: space-between;
188217
flex-basis: 0;
218+
@media ${mediaQueries.md} {
219+
padding: 24px;
220+
}
189221
@media ${mediaQueries.sm} {
190222
padding: 24px;
191223
}
@@ -195,6 +227,9 @@ const TileDescription = styled.div`
195227
padding: 32px;
196228
justify-content: space-between;
197229
flex-basis: auto;
230+
@media ${mediaQueries.md} {
231+
padding: 24px;
232+
}
198233
@media ${mediaQueries.sm} {
199234
padding: 19px;
200235
}
@@ -223,9 +258,15 @@ const TileCategory = styled.div`
223258
224259
.tile-1up & {
225260
margin-bottom: 8px;
261+
@media ${mediaQueries.md} {
262+
margin-bottom: 8px;
263+
}
226264
}
227265
.tile-2up & {
228266
margin-bottom: 8px;
267+
@media ${mediaQueries.md} {
268+
margin-bottom: 8px;
269+
}
229270
}
230271
.tile-3up & {
231272
margin-bottom: 8px;
@@ -250,6 +291,14 @@ const TileHeadline = styled.div`
250291
-webkit-box-orient: vertical;
251292
display: -webkit-box;
252293
overflow: hidden;
294+
@media ${mediaQueries.md} {
295+
font-size: 21px;
296+
line-height: 1.19048;
297+
font-weight: 700;
298+
letter-spacing: 0.011em;
299+
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue',
300+
'Helvetica', 'Arial', sans-serif;
301+
}
253302
@media ${mediaQueries.sm} {
254303
font-size: 24px;
255304
}
@@ -266,6 +315,14 @@ const TileHeadline = styled.div`
266315
-webkit-box-orient: vertical;
267316
display: -webkit-box;
268317
overflow: hidden;
318+
@media ${mediaQueries.md} {
319+
font-size: 19px;
320+
line-height: 1.21053;
321+
font-weight: 700;
322+
letter-spacing: 0.012em;
323+
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue',
324+
'Helvetica', 'Arial', sans-serif;
325+
}
269326
}
270327
271328
.tile-3up & {
@@ -295,12 +352,21 @@ const TileTimestamp = styled.div`
295352
296353
.tile-quick-read.tile-1up & {
297354
margin-top: 16px;
355+
@media ${mediaQueries.md} {
356+
margin-top: 12px;
357+
}
298358
}
299359
.tile-1up & {
300360
margin-top: 12px;
361+
@media ${mediaQueries.md} {
362+
margin-top: 12px;
363+
}
301364
}
302365
.tile-2up & {
303366
margin-top: 12px;
367+
@media ${mediaQueries.md} {
368+
margin-top: 8px;
369+
}
304370
}
305371
.tile-3up & {
306372
margin-top: 8px;

‎components/pages/blog/post/ArticleHeader.jsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import Image from "next/image";
22
import ShareSheet from "./ShareSheet";
33
import styled from "styled-components";
4+
import config from '@/data/config';
45

56
const ArticleHeaderWrap = styled.div`
67
.category.component {
78
margin-top: 0;
89
margin-bottom: 20px;
910
}
1011
12+
.category-eyebrow__category {
13+
text-transform: uppercase;
14+
}
15+
1116
.category-eyebrow__category,
1217
.category-eyebrow__date {
1318
display: block;
@@ -128,8 +133,8 @@ const ArticleHeader = ({ frontmatter, author }) => {
128133
<div className="category component">
129134
<div className="component-content">
130135
<div className="category-eyebrow">
131-
<span className="category-eyebrow__category category_update">
132-
UPDATE
136+
<span className="category-eyebrow__category">
137+
{config.categories[frontmatter.category ?? "updates"]?.title ?? config.categories.updates.title}
133138
</span>
134139
<span className="category-eyebrow__date">
135140
{formatDate(frontmatter.date)}

0 commit comments

Comments
 (0)