Skip to content

Commit 9a0fe59

Browse files
author
贺子良
committed
💫 workflow(/layout): nav
add media query for responsive css
1 parent ddb2b1a commit 9a0fe59

File tree

7 files changed

+238
-21
lines changed

7 files changed

+238
-21
lines changed

‎src/App.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
div,
1111
span,
1212
a {
13-
outline: 1px solid #00cec9;
13+
/*outline: 1px solid #00cec9;*/
1414
}
1515

1616
a,

‎src/layout/index.jsx‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
import { LayoutWrapper } from "./styles";
66
import { useNavigate, Outlet, useLocation } from "react-router";
7-
import { Link } from "react-router-dom";
7+
import { Link, NavLink } from "react-router-dom";
88
import { useEffect, useState } from "react";
99
import CustomLink from "../components/CustomeLink";
1010

@@ -13,16 +13,25 @@ export default function Layout() {
1313

1414
const [logoTransform, setLogoTransform] = useState(false);
1515

16+
const [showMenu, setShowMenu] = useState(false);
17+
1618
const onMouseEnterAndLeave = () => setLogoTransform(!logoTransform);
1719

20+
const customeNavigate = (path) => {
21+
setShowMenu(false);
22+
navigate(path);
23+
};
24+
25+
const onClickMenu = () => setShowMenu(!showMenu);
26+
1827
return (
1928
<LayoutWrapper>
2029
<div className="layout">
2130
<div className=" container header">
2231
<header className="header-inner">
2332
<h1
2433
className="header-logo"
25-
onClick={() => navigate("/")}
34+
onClick={() => customeNavigate("/")}
2635
>
2736
<a className="header-logo__link">
2837
<span
@@ -48,9 +57,40 @@ export default function Layout() {
4857
</span>
4958
</a>
5059
</h1>
51-
<div className="header-nav">
52-
<CustomLink to="/projects">projects</CustomLink>
53-
<CustomLink to="/work">work</CustomLink>
60+
<figure
61+
className={[
62+
"header-menu",
63+
showMenu ? "header-menu--open" : null,
64+
].join(" ")}
65+
onClick={onClickMenu}
66+
>
67+
<span className="header-menu__line"></span>
68+
<span className="header-menu__line"></span>
69+
<span className="header-menu__line"></span>
70+
</figure>
71+
<div
72+
className="header-nav"
73+
style={
74+
showMenu
75+
? {
76+
opacity: 1,
77+
PointerEvents: "none",
78+
}
79+
: null
80+
}
81+
>
82+
<CustomLink
83+
to="/projects"
84+
onClick={() => setShowMenu(false)}
85+
>
86+
projects
87+
</CustomLink>
88+
<CustomLink
89+
to="/work"
90+
onClick={() => setShowMenu(false)}
91+
>
92+
work
93+
</CustomLink>
5494
</div>
5595
</header>
5696
</div>

‎src/layout/styles.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,13 @@ export const LayoutWrapper = styled.div`
5858
}
5959
}
6060
}
61+
.header-menu {
62+
display: none;
63+
}
6164
.header-nav {
6265
flex: 0 0 auto;
6366
font-family: Andale Mono;
67+
font-weight: 300;
6468
transition: all 0.25s;
6569
6670
> a {
@@ -118,5 +122,97 @@ export const LayoutWrapper = styled.div`
118122
}
119123
}
120124
}
125+
126+
/* media query */
127+
@media screen and (max-width: 768px) {
128+
.header {
129+
position: sticky;
130+
top: 0;
131+
margin-top: 0;
132+
padding: 0;
133+
z-index: 5;
134+
}
135+
.header-inner {
136+
padding: 12px 24px;
137+
-webkit-box-shadow: 0 0 5px #cbcbcb;
138+
box-shadow: 0 0 5px #cbcbcb;
139+
.header-logo {
140+
}
141+
.header-menu {
142+
position: relative;
143+
display: -webkit-box;
144+
display: -ms-flexbox;
145+
display: flex;
146+
flex-direction: column;
147+
align-self: center;
148+
width: 18px;
149+
z-index: 10;
150+
cursor: pointer;
151+
152+
.header-menu__line:first-child {
153+
transform-origin: top left;
154+
}
155+
.header-menu__line:nth-child(3) {
156+
transform-origin: bottom left;
157+
}
158+
.header-menu__line:not(:last-child) {
159+
margin-bottom: 4px;
160+
}
161+
162+
.header-menu__line {
163+
height: 2px;
164+
background: #666;
165+
transition: all 0.25s;
166+
}
167+
}
168+
169+
.header-menu--open .header-menu__line {
170+
background-color: #f5a623 !important;
171+
}
172+
.header-menu--open .header-menu__line:first-child {
173+
transform: translateX(3px) rotate(45deg);
174+
}
175+
.header-menu--open .header-menu__line:nth-child(2) {
176+
opacity: 0;
177+
}
178+
.header-menu--open .header-menu__line:nth-child(3) {
179+
transform: translateX(3px) rotate(-45deg);
180+
}
181+
182+
.header-nav {
183+
opacity: 0;
184+
position: fixed;
185+
display: flex;
186+
flex-direction: column;
187+
align-items: center;
188+
justify-content: center;
189+
top: 0;
190+
left: 0;
191+
width: 100%;
192+
height: 100vh;
193+
z-index: 5;
194+
background: #fff;
195+
> a:not(:last-child) {
196+
margin-bottom: 40px;
197+
}
198+
}
199+
}
200+
.footer {
201+
display: block;
202+
text-align: center;
203+
204+
.footer-left {
205+
margin-bottom: 16px;
206+
}
207+
.footer-nav {
208+
.footer-nav__link {
209+
margin-bottom: 8px;
210+
}
211+
.footer-nav__link:first-of-type {
212+
margin-left: 0;
213+
}
214+
}
215+
}
216+
}
121217
}
122218
`;

‎src/pages/projects/list/index.jsx‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@
44
*/
55
import { ProjectsListWrapper, ProjectItemWrapper } from "./styles";
66
import { Link } from "react-router-dom";
7+
import { useNavigate } from "react-router";
78

89
export default function ProjectsList() {
10+
const navigate = useNavigate();
11+
12+
const onClickProjectItem = (pid) => {
13+
navigate(`/projects/${pid}`);
14+
};
15+
916
return (
1017
<ProjectsListWrapper>
1118
<ProjectItemWrapper index={0}>
12-
<div className="section">
19+
<div className="section" onClick={() => onClickProjectItem(0)}>
1320
<figure className="section-image">
1421
<figure className="line line1"></figure>
1522
<figure className="line line2"></figure>
@@ -32,7 +39,53 @@ export default function ProjectsList() {
3239
</div>
3340
</ProjectItemWrapper>
3441
<ProjectItemWrapper index={1}>
35-
<div className="section">
42+
<div className="section" onClick={() => onClickProjectItem(1)}>
43+
<figure className="section-image">
44+
<figure className="line line1"></figure>
45+
<figure className="line line2"></figure>
46+
</figure>
47+
<div className="section-text">
48+
<h2 className="section-text__title">
49+
<span>
50+
tandem exchange
51+
<figure className="line line3"></figure>
52+
</span>
53+
</h2>
54+
<p className="section-text__description">
55+
A few years back, my brother was living in Berlin
56+
and learning German. After trying a bunch of
57+
different language learning tools and systems, he
58+
found that while traditional approaches like
59+
textbooks and tools like Rosetta Stone are good for…
60+
</p>
61+
</div>
62+
</div>
63+
</ProjectItemWrapper>
64+
<ProjectItemWrapper index={2}>
65+
<div className="section" onClick={() => onClickProjectItem(2)}>
66+
<figure className="section-image">
67+
<figure className="line line1"></figure>
68+
<figure className="line line2"></figure>
69+
</figure>
70+
<div className="section-text">
71+
<h2 className="section-text__title">
72+
<span>
73+
tandem exchange
74+
<figure className="line line3"></figure>
75+
</span>
76+
</h2>
77+
<p className="section-text__description">
78+
A few years back, my brother was living in Berlin
79+
and learning German. After trying a bunch of
80+
different language learning tools and systems, he
81+
found that while traditional approaches like
82+
textbooks and tools like Rosetta Stone are good for…
83+
</p>
84+
</div>
85+
</div>
86+
</ProjectItemWrapper>
87+
<ProjectItemWrapper index={3}>
88+
<div className="section" onClick={() => onClickProjectItem(3)}>
3689
<figure className="section-image">
3790
<figure className="line line1"></figure>
3891
<figure className="line line2"></figure>

‎src/pages/projects/list/styles.js‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import p1 from "../../../assets/images/p-1.jpg";
88
export const ProjectsListWrapper = styled.div``;
99

1010
export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
11-
isOdd: index % 2 === 0,
11+
isEven: index % 2 === 0,
1212
}))`
1313
.section {
1414
display: flex;
1515
margin-bottom: 36px;
1616
text-decoration: none;
1717
color: inherit;
18+
cursor: pointer;
1819
1920
.line {
2021
position: absolute;
@@ -24,30 +25,32 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
2425
2526
.line1 {
2627
top: -8px;
27-
left: -8px;
28+
right: ${({ isEven }) => (isEven ? "auto" : "-8px")};
29+
left: ${({ isEven }) => (isEven ? "-8px" : "auto")};
2830
width: 100px;
2931
height: 1px;
3032
}
3133
.line2 {
3234
top: -8px;
33-
left: -8px;
35+
right: ${({ isEven }) => (isEven ? "auto" : "-8px")};
36+
left: ${({ isEven }) => (isEven ? "-8px" : "auto")};
3437
width: 1px;
3538
height: 50px;
3639
}
3740
3841
.line3 {
3942
bottom: -5px;
40-
left: ${({ isOdd }) => (isOdd ? "-5px" : "0px")};
41-
right: ${({ isOdd }) => (isOdd ? "0px" : "-5px")};
43+
left: ${({ isEven }) => (isEven ? "auto" : "5px")};
44+
right: ${({ isEven }) => (isEven ? "5px" : "auto")};
4245
width: 50px;
4346
height: 1px;
4447
}
4548
4649
.section-image {
4750
margin-left: 0px;
48-
margin-right: ${({ isOdd }) => (isOdd ? "16px" : "0px")};
49-
margin-left: ${({ isOdd }) => (isOdd ? "0px" : "16px")};
50-
order: ${({ isOdd }) => (isOdd ? 0 : 1)};
51+
margin-right: ${({ isEven }) => (isEven ? "16px" : "0px")};
52+
margin-left: ${({ isEven }) => (isEven ? "0px" : "16px")};
53+
order: ${({ isEven }) => (isEven ? 0 : 1)};
5154
filter: none;
5255
background-color: rgb(243, 243, 243);
5356
background-image: url(${p1});
@@ -63,7 +66,7 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
6366
}
6467
6568
.section-text {
66-
text-align: ${({ isOdd }) => (isOdd ? "left" : "right")};
69+
text-align: ${({ isEven }) => (isEven ? "left" : "right")};
6770
.section-text__title {
6871
margin-bottom: 12px;
6972
font-size: 20px;
@@ -97,4 +100,24 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
97100
width: 60px;
98101
}
99102
}
103+
104+
@media screen and (max-width: 768px) {
105+
.section {
106+
display: block;
107+
108+
.section-image {
109+
width: 100%;
110+
max-width: none;
111+
height: 200px;
112+
margin-left: 0 !important;
113+
margin-right: 0 !important;
114+
}
115+
.section-text {
116+
text-align: left !important;
117+
.section-text__title {
118+
margin-top: 16px;
119+
}
120+
}
121+
}
122+
}
100123
`;

‎src/pages/work/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { WorkWrapper } from "./styles";
77
export default function Work() {
88
return (
99
<WorkWrapper>
10-
<h1>work</h1>
10+
<p>fontend engineer</p>
1111
</WorkWrapper>
1212
);
1313
}

‎src/pages/work/styles.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
* @Date: 2022-02-25
33
* @Description:
44
*/
5-
import styledComponents from "styled-components";
6-
7-
export const WorkWrapper = styledComponents.div`
5+
import styled from "styled-components";
86

7+
export const WorkWrapper = styled.div`
8+
/*font-family: "Misans Normal";*/
9+
font-size: 16px;
10+
font-weight: 400;
911
12+
.f3 {
13+
font-family: "微软雅黑";
14+
}
1015
`;

0 commit comments

Comments
 (0)