git ssb

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:contact@romuloalv.es" 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
});
73