@@ -10,90 +10,110 @@ const Contacts = ({ isDetailPage = false }) => {
1010 const configs = useConfigs ( )
1111 const isDark = useMemo ( ( ) => theme . type === 'dark' , [ theme . type ] )
1212 const switchTheme = ( ) => configs . onChange ( theme . type === 'dark' )
13-
13+
1414 const themeTitle = Configs . isCN ( ) ? '切换主题' : 'Switch themes'
1515 const linkProps = {
1616 rel : 'noreferrer' ,
1717 target : '_blank' ,
1818 }
19-
19+
2020 return (
2121 < >
2222 < div className = "contacts" >
23- { isDetailPage && < Divider y = { .5 } /> }
23+ { isDetailPage && < Divider y = { 0 .5} /> }
2424 < div className = "between" >
2525 < div className = "socials" >
26- { Configs . email && < Link aria-label = "email" href = { Configs . email } { ...linkProps } > Email</ Link > }
27- { Configs . github && < Link aria-label = "github" href = { Configs . github } { ...linkProps } > Github</ Link > }
28- { Configs . twitter && < Link aria-label = "twitter" href = { Configs . twitter } { ...linkProps } > Twitter</ Link > }
26+ { Configs . email && (
27+ < Link aria-label = "email" href = { Configs . email } { ...linkProps } >
28+ Email
29+ </ Link >
30+ ) }
31+ { Configs . github && (
32+ < Link aria-label = "github" href = { Configs . github } { ...linkProps } >
33+ Github
34+ </ Link >
35+ ) }
36+ { Configs . twitter && (
37+ < Link aria-label = "twitter" href = { Configs . twitter } { ...linkProps } >
38+ Twitter
39+ </ Link >
40+ ) }
2941 </ div >
3042 < div >
31- { isDark && < span title = { themeTitle } > < SunIcon onClick = { switchTheme } size = { 16 } /> </ span > }
32- { ! isDark && < span title = { themeTitle } > < MoonIcon onClick = { switchTheme } size = { 16 } /> </ span > }
43+ { isDark && (
44+ < span title = { themeTitle } >
45+ < SunIcon onClick = { switchTheme } size = { 16 } />
46+ </ span >
47+ ) }
48+ { ! isDark && (
49+ < span title = { themeTitle } >
50+ < MoonIcon onClick = { switchTheme } size = { 16 } />
51+ </ span >
52+ ) }
3353 </ div >
3454 </ div >
35-
55+
3656 < style jsx > { `
37- .contacts {
38- width: ${ Configs . layouts . pageWidth }
39- padding: 0 ${ theme . layout . gapQuarter }
40- position: absolute;
41- z-index: 1;
42- bottom: 3.5rem;
43- left: 50%;
44- transform: translateX(-50%);
45- color: ${ theme . palette . accents_6 }
46- }
47-
48- .between {
49- display: flex;
50- justify-content: space-between;
51- align-items: center;
52- }
53-
54- .contacts :global(svg) {
55- cursor: pointer;
56- margin: ${ theme . layout . gapQuarter } ${ theme . layout . gapHalf }
57- position: relative;
58- color: inherit;
59- z-index: 2;
60- }
61-
62- .contacts :global(a) {
63- color: inherit;
64- }
65-
66- .socials :global(a) {
67- margin-right: .5rem;
68- font-size: .75rem;
69- text-transform: uppercase;
70- }
71-
72- .contacts span {
73- color: inherit;
74- display: inline-flex;
75- justify-content: center;
76- align-items: center;
77- }
78-
79- .contacts span:hover {
80- color: ${ theme . palette . accents_4 }
81- }
82-
83- .contacts :global(a:hover) {
84- color: ${ theme . palette . accents_4 }
85- text-decoration: underline dashed;
86- cursor: ne-resize;
87- transition: all 150ms ease;
88- }
89-
90- @media only screen and (max-width: ${ theme . layout . breakpointMobile }
9157 .contacts {
58+ width: ${ Configs . layouts . pageWidth }
59+ padding: 0 ${ theme . layout . gapQuarter }
9260 position: absolute;
93- width: ${ Configs . layouts . pageWidthMobile }
61+ z-index: 1;
62+ bottom: 3.5rem;
63+ left: 50%;
64+ transform: translateX(-50%);
65+ color: ${ theme . palette . accents_6 }
66+ }
67+
68+ .between {
69+ display: flex;
70+ justify-content: space-between;
71+ align-items: center;
72+ }
73+
74+ .contacts :global(svg) {
75+ cursor: pointer;
76+ margin: ${ theme . layout . gapQuarter } ${ theme . layout . gapHalf }
77+ position: relative;
78+ color: inherit;
79+ z-index: 2;
80+ }
81+
82+ .contacts :global(a) {
83+ color: inherit;
84+ }
85+
86+ .socials :global(a) {
87+ margin-right: 0.5rem;
88+ font-size: 0.75rem;
89+ text-transform: uppercase;
90+ }
91+
92+ .contacts span {
93+ color: inherit;
94+ display: inline-flex;
95+ justify-content: center;
96+ align-items: center;
97+ }
98+
99+ .contacts span:hover {
100+ color: ${ theme . palette . accents_4 }
101+ }
102+
103+ .contacts :global(a:hover) {
104+ color: ${ theme . palette . accents_4 }
105+ text-decoration: underline dashed;
106+ cursor: ne-resize;
107+ transition: all 150ms ease;
108+ }
109+
110+ @media only screen and (max-width: ${ theme . layout . breakpointMobile }
111+ .contacts {
112+ position: absolute;
113+ width: ${ Configs . layouts . pageWidthMobile }
114+ }
94115 }
95- }
96- ` } </ style >
116+ ` } </ style >
97117 </ div >
98118 < Spacer y = { 3.5 } />
99119 </ >
0 commit comments