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

Commitddb2b1a

Browse files
author
贺子良
committed
💫 workflow(/projects): basical layout
1 parent9f9a293 commitddb2b1a

File tree

19 files changed

+458
-163
lines changed

19 files changed

+458
-163
lines changed

‎src/App.css

Lines changed: 96 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,104 @@
1-
.App {
2-
text-align: center;
1+
@font-face {
2+
font-family:"Andale Mono";
3+
src:url("./assets/fonts/AndaleMono.otf");
4+
}
5+
@font-face {
6+
font-family:"Archivo Black";
7+
src:url("./assets/fonts/ArchivoBlack.woff2");
38
}
49

510
div,
611
span,
712
a {
8-
/*outline: 1px solid #00cec9;*/
9-
}
10-
.App-logo {
11-
height:40vmin;
12-
pointer-events: none;
13-
}
14-
15-
@media (prefers-reduced-motion: no-preference) {
16-
.App-logo {
17-
animation: App-logo-spin infinite20s linear;
18-
}
19-
}
20-
21-
.App-header {
22-
background-color:#282c34;
23-
min-height:100vh;
24-
display: flex;
25-
flex-direction: column;
26-
align-items: center;
27-
justify-content: center;
28-
font-size:calc(10px+2vmin);
29-
color: white;
30-
}
31-
32-
.App-link {
33-
color:#61dafb;
13+
outline:1px solid#00cec9;
3414
}
3515

36-
@keyframes App-logo-spin {
37-
from {
38-
transform:rotate(0deg);
39-
}
40-
to {
41-
transform:rotate(360deg);
42-
}
16+
a,
17+
abbr,
18+
acronym,
19+
address,
20+
applet,
21+
article,
22+
aside,
23+
audio,
24+
b,
25+
big,
26+
blockquote,
27+
body,
28+
canvas,
29+
caption,
30+
center,
31+
cite,
32+
code,
33+
dd,
34+
del,
35+
details,
36+
dfn,
37+
div,
38+
dl,
39+
dt,
40+
em,
41+
embed,
42+
fieldset,
43+
figcaption,
44+
figure,
45+
footer,
46+
form,
47+
h1,
48+
h2,
49+
h3,
50+
h4,
51+
h5,
52+
h6,
53+
header,
54+
hgroup,
55+
html,
56+
i,
57+
iframe,
58+
img,
59+
ins,
60+
kbd,
61+
label,
62+
legend,
63+
li,
64+
main,
65+
mark,
66+
menu,
67+
nav,
68+
object,
69+
ol,
70+
output,
71+
p,
72+
pre,
73+
q,
74+
ruby,
75+
s,
76+
samp,
77+
section,
78+
small,
79+
span,
80+
strike,
81+
strong,
82+
sub,
83+
summary,
84+
sup,
85+
table,
86+
tbody,
87+
td,
88+
tfoot,
89+
th,
90+
thead,
91+
time,
92+
tr,
93+
tt,
94+
u,
95+
ul,
96+
var,
97+
video {
98+
margin:0;
99+
padding:0;
100+
border:0;
101+
font-size:100%;
102+
font: inherit;
103+
vertical-align: baseline;
43104
}

‎src/App.jsrenamed to‎src/App.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import "./App.css";
44
importLayoutfrom"./layout";
55
importHomefrom"./pages/home";
66
importProjectsfrom"./pages/projects";
7+
importProjectsListfrom"./pages/projects/list";
8+
importProjectsDetailfrom"./pages/projects/detail";
79
importWorkfrom"./pages/work";
810
importNoMatchfrom"./pages/nomatch";
911

@@ -12,7 +14,10 @@ function App() {
1214
<Routes>
1315
<Routepath="/"element={<Layout/>}>
1416
<Routeindexelement={<Home/>}/>
15-
<Routepath="projects"element={<Projects/>}/>
17+
<Routepath="projects"element={<Projects/>}>
18+
<Routeindexelement={<ProjectsList/>}/>
19+
<Routepath=":pid"element={<ProjectsDetail/>}/>
20+
</Route>
1621
<Routepath="work"element={<Work/>}/>
1722

1823
{/* Using path="*"" means "match anything", so this route

‎src/assets/fonts/AndaleMono.otf

101 KB
Binary file not shown.

‎src/assets/fonts/ArchivoBlack.woff2

18.2 KB
Binary file not shown.

‎src/assets/images/p-1.jpg

27.1 KB
Loading

‎src/components/CustomeLink.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
*@Date: 2022-02-26
3+
*@Description:
4+
*/
5+
import{Link,useMatch,useResolvedPath}from"react-router-dom";
6+
7+
exportdefaultfunctionCustomLink({ children, to, ...props}){
8+
letresolved=useResolvedPath(to);
9+
letmatch=useMatch({path:resolved.pathname,end:false});
10+
11+
return(
12+
<Link
13+
style={{filter:match ?"none" :"blur(1.5px)",color:"inherit"}}
14+
to={to}
15+
{...props}
16+
>
17+
{children}
18+
</Link>
19+
);
20+
}

‎src/layout/index.js

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎src/layout/index.jsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
*@Date: 2022-02-25
3+
*@Description:
4+
*/
5+
import{LayoutWrapper}from"./styles";
6+
import{useNavigate,Outlet,useLocation}from"react-router";
7+
import{Link}from"react-router-dom";
8+
import{useEffect,useState}from"react";
9+
importCustomLinkfrom"../components/CustomeLink";
10+
11+
exportdefaultfunctionLayout(){
12+
constnavigate=useNavigate();
13+
14+
const[logoTransform,setLogoTransform]=useState(false);
15+
16+
constonMouseEnterAndLeave=()=>setLogoTransform(!logoTransform);
17+
18+
return(
19+
<LayoutWrapper>
20+
<divclassName="layout">
21+
<divclassName=" container header">
22+
<headerclassName="header-inner">
23+
<h1
24+
className="header-logo"
25+
onClick={()=>navigate("/")}
26+
>
27+
<aclassName="header-logo__link">
28+
<span
29+
className={[
30+
"ziliang",
31+
logoTransform ?"active" :null,
32+
].join(" ")}
33+
onMouseEnter={onMouseEnterAndLeave}
34+
onMouseLeave={onMouseEnterAndLeave}
35+
>
36+
ZILIANG
37+
</span>
38+
39+
<span
40+
className={[
41+
"he",
42+
!logoTransform ?"active" :null,
43+
].join(" ")}
44+
onMouseEnter={onMouseEnterAndLeave}
45+
onMouseLeave={onMouseEnterAndLeave}
46+
>
47+
HE
48+
</span>
49+
</a>
50+
</h1>
51+
<divclassName="header-nav">
52+
<CustomLinkto="/projects">projects</CustomLink>
53+
<CustomLinkto="/work">work</CustomLink>
54+
</div>
55+
</header>
56+
</div>
57+
<divclassName=" container main">
58+
<Outlet/>
59+
</div>
60+
<divclassName=" container footer">
61+
<divclassName="footer-left">
62+
<divclassName="footer__copyright">
63+
{"@coderzi"}{"2022"}
64+
</div>
65+
</div>
66+
<divclassName="footer-nav">
67+
<aclassName="footer-nav__link">contact</a>
68+
<aclassName="footer-nav__link">github</a>
69+
<aclassName="footer-nav__link">dribbble</a>
70+
<aclassName="footer-nav__link">stack overflow</a>
71+
</div>
72+
</div>
73+
</div>
74+
</LayoutWrapper>
75+
);
76+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp