git ssb

0+

Rômulo Alves / website



Commit 0699ec66f00b3582d31fe6e4bb8bd34beacb7d63

Browse Files

Creating header and navbar

Rômulo Alves committed on 10/27/2016, 9:57:32 AM
Parent: 6b5b84b3614cf087b2199be76f9d915b13d8ae89

Files changed

_components/common/Head.jschanged
_components/common/globalStyles.jschanged
_components/common/Anchor.jsadded
_components/index/Header.jschanged
_components/index/NavBar.jsadded
pages/index.jschanged
_components/common/Head.jsView
@@ -13,8 +13,9 @@
1313
1414 export default ({title}) => (
1515 <div>
1616 <Head>
17+ <meta charSet="utf-8" />
1718 <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
1819 <meta name="description" content="@romuloalves - Web Developer" />
1920 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2021 <link rel="icon" type="image/png" href="/static/favicon.png" />
_components/common/globalStyles.jsView
@@ -4,7 +4,8 @@
44 margin: 0;
55 padding: 0;
66 }
77 body {
8+ font-family: Menlo, Monaco, Consolas;
89 min-height: 100%;
910 }
1011 `;
_components/common/Anchor.jsView
@@ -1,0 +1,24 @@
1+// Packages
2+import React from 'react';
3+import css from 'next/css';
4+
5+const generateClassNames = (styleOne, styleTwo) => {
6+ if (styleTwo !== null && styleTwo !== undefined) {
7+ return `${styleOne} ${styleTwo}`;
8+ }
9+ return styleOne;
10+};
11+
12+export default ({href, title, children, color, hoverColor, fontSize, className}) => {
13+ const style = css({
14+ color: color || '#000',
15+ fontSize: fontSize || '10pt',
16+ ':hover': {
17+ color: hoverColor || '#81D4FA'
18+ }
19+ });
20+ const classNames = generateClassNames(style, className);
21+ return (
22+ <a href={href} title={title} className={classNames} target="_blank">{children}</a>
23+ );
24+};
_components/index/Header.jsView
@@ -1,16 +1,33 @@
11 // Packages
22 import React from 'react';
33 import css from 'next/css';
44
5+// Components
6+import Anchor from '../common/Anchor';
7+
58 export default () => (
69 <header className={headerStyle}>
7- <h1>Rômulo Alves</h1>
10+ <h1 className={titleStyle}>Rômulo Alves</h1>
11+ <h2 className={subtitleStyle}>
12+ Web Developer at <Anchor href="https://www.cwi.com.br/" title="CWI Software" color="#FFF">@cwisoftware</Anchor>
13+ </h2>
814 </header>
915 );
1016
1117 const headerStyle = css({
1218 background: '#EF5350',
13- minHeight: '50%',
14- top: 0,
15- width: '100%'
19+ color: '#FFF',
20+ left: 0,
21+ padding: '50px 0',
22+ right: 0,
23+ textAlign: 'center',
24+ top: 0
1625 });
26+
27+const titleStyle = css({
28+ fontSize: '25pt'
29+});
30+
31+const subtitleStyle = css({
32+ fontSize: '12pt'
33+});
_components/index/NavBar.jsView
@@ -1,0 +1,72 @@
1+// Packages
2+import React from 'react';
3+import css from 'next/css';
4+
5+// Components
6+import Anchor from '../common/Anchor';
7+
8+export default () => (
9+ <nav className={navbarStyle}>
10+ <ul className={listStyle}>
11+ <li className={`${listItemStyle} ${noMarginLeft}`}>
12+ <Anchor href="https://twitter.com/romuloalves" title="twitter">
13+ Twitter
14+ </Anchor>
15+ </li>
16+ <li className={listItemStyle}>
17+ <Anchor href="https://github.com/romuloalves" title="github">
18+ GitHub
19+ </Anchor>
20+ </li>
21+ <li className={listItemStyle}>
22+ <Anchor href="mailto:romuloaalv@gmail.com" title="e-mail">
23+ E-mail
24+ </Anchor>
25+ </li>
26+ <li className={`${listItemStyle} ${noMarginRight}`}>
27+ <Anchor href="https://medium.com/@romuloalves" title="medium">
28+ Medium
29+ </Anchor>
30+ </li>
31+ </ul>
32+ </nav>
33+);
34+
35+const navbarStyle = css({
36+ margin: '0 auto',
37+ padding: '30px 0',
38+ width: '420px',
39+ '@media (max-width: 500px)': {
40+ width: '300px'
41+ },
42+ '@media (max-width: 300px)': {
43+ width: 'auto'
44+ }
45+});
46+
47+const listStyle = css({
48+ overflow: 'auto'
49+});
50+
51+const listItemStyle = css({
52+ float: 'left',
53+ listStyleType: 'none',
54+ margin: '0 30px',
55+ textAlign: 'center',
56+ width: '60px',
57+ '@media (max-width: 500px)': {
58+ margin: '0 10px'
59+ },
60+ '@media (max-width: 300px)': {
61+ margin: '15px 0',
62+ width: '100%'
63+ }
64+});
65+
66+const noMarginRight = css({
67+ marginRight: '0'
68+});
69+
70+const noMarginLeft = css({
71+ marginLeft: '0'
72+});
pages/index.jsView
@@ -3,11 +3,13 @@
33
44 // Components
55 import Head from '../_components/common/Head';
66 import Header from '../_components/index/Header';
7+import NavBar from '../_components/index/NavBar';
78
89 export default () => (
910 <div>
1011 <Head />
1112 <Header />
13+ <NavBar />
1214 </div>
1315 );

Built with git-ssb-web