Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9a0fe59

Browse files
author
贺子良
committed
💫 workflow(/layout): nav
add media query for responsive css
1 parentddb2b1a commit9a0fe59

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
importCustomLinkfrom"../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
constonMouseEnterAndLeave=()=>setLogoTransform(!logoTransform);
1719

20+
constcustomeNavigate=(path)=>{
21+
setShowMenu(false);
22+
navigate(path);
23+
};
24+
25+
constonClickMenu=()=>setShowMenu(!showMenu);
26+
1827
return(
1928
<LayoutWrapper>
2029
<divclassName="layout">
2130
<divclassName=" container header">
2231
<headerclassName="header-inner">
2332
<h1
2433
className="header-logo"
25-
onClick={()=>navigate("/")}
34+
onClick={()=>customeNavigate("/")}
2635
>
2736
<aclassName="header-logo__link">
2837
<span
@@ -48,9 +57,40 @@ export default function Layout() {
4857
</span>
4958
</a>
5059
</h1>
51-
<divclassName="header-nav">
52-
<CustomLinkto="/projects">projects</CustomLink>
53-
<CustomLinkto="/work">work</CustomLink>
60+
<figure
61+
className={[
62+
"header-menu",
63+
showMenu ?"header-menu--open" :null,
64+
].join(" ")}
65+
onClick={onClickMenu}
66+
>
67+
<spanclassName="header-menu__line"></span>
68+
<spanclassName="header-menu__line"></span>
69+
<spanclassName="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
exportdefaultfunctionProjectsList(){
10+
constnavigate=useNavigate();
11+
12+
constonClickProjectItem=(pid)=>{
13+
navigate(`/projects/${pid}`);
14+
};
15+
916
return(
1017
<ProjectsListWrapper>
1118
<ProjectItemWrapperindex={0}>
12-
<divclassName="section">
19+
<divclassName="section"onClick={()=>onClickProjectItem(0)}>
1320
<figureclassName="section-image">
1421
<figureclassName="line line1"></figure>
1522
<figureclassName="line line2"></figure>
@@ -32,7 +39,53 @@ export default function ProjectsList() {
3239
</div>
3340
</ProjectItemWrapper>
3441
<ProjectItemWrapperindex={1}>
35-
<divclassName="section">
42+
<divclassName="section"onClick={()=>onClickProjectItem(1)}>
43+
<figureclassName="section-image">
44+
<figureclassName="line line1"></figure>
45+
<figureclassName="line line2"></figure>
46+
</figure>
47+
<divclassName="section-text">
48+
<h2className="section-text__title">
49+
<span>
50+
tandem exchange
51+
<figureclassName="line line3"></figure>
52+
</span>
53+
</h2>
54+
<pclassName="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+
<ProjectItemWrapperindex={2}>
65+
<divclassName="section"onClick={()=>onClickProjectItem(2)}>
66+
<figureclassName="section-image">
67+
<figureclassName="line line1"></figure>
68+
<figureclassName="line line2"></figure>
69+
</figure>
70+
<divclassName="section-text">
71+
<h2className="section-text__title">
72+
<span>
73+
tandem exchange
74+
<figureclassName="line line3"></figure>
75+
</span>
76+
</h2>
77+
<pclassName="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+
<ProjectItemWrapperindex={3}>
88+
<divclassName="section"onClick={()=>onClickProjectItem(3)}>
3689
<figureclassName="section-image">
3790
<figureclassName="line line1"></figure>
3891
<figureclassName="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
exportconstProjectsListWrapper=styled.div``;
99

1010
exportconstProjectItemWrapper=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
exportdefaultfunctionWork(){
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-
importstyledComponentsfrom"styled-components";
6-
7-
exportconstWorkWrapper=styledComponents.div`
5+
importstyledfrom"styled-components";
86

7+
exportconstWorkWrapper=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)
[8]ページ先頭
©2009-2025 Movatter.jp