Skip to content
This repository has been archived by the owner on Aug 1, 2020. It is now read-only.

Responsive header #14

Merged
merged 2 commits into from
Jul 30, 2019
Merged

Responsive header #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
997e189
added close icon
jayfallon Jul 30, 2019
f078602
fixed back to top issue
jayfallon Jul 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Footer = props => (
</li>
</ul>
<p className="footer__link--top">
<Link href="#pageTop"><a title="hello">Back to top</a></Link>
<a title="hello" href="#pageTop">Back to top</a>
</p>
</nav>

Expand Down
2 changes: 1 addition & 1 deletion components/Header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import DrawerToggleButton from './drawerToggle'

const Header = (props) => (

<HeaderStyles id="pageTop">
<HeaderStyles>
<section className="header__content">
<h1>
<Link href="/"><a title="Link to home page">Jay Fallon</a></Link>
Expand Down
2 changes: 1 addition & 1 deletion components/Meta/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Meta = () => (
<meta charSet="utf-8" />
<link rel="shortcut icon" href="/static/favicon.png" />
<link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
<title>Jay Fallon - UX Designer &amp; Engineer</title>
<title>Jay Fallon - Digital Designer, Developer & Data Nerd</title>
</Head>
);

Expand Down
1 change: 1 addition & 0 deletions components/Page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class Page extends Component {
<SideDrawer show={this.state.sideDrawerOpen} hide={this.drawerCloseClickHandler}/>
<a href="#main__content" className="main__content--link">Skip to main content</a>
<Header drawerClickHandler={this.drawerToggleClickHandler}/>
<a name="pageTop" id="pageTop"/>
<main id="main__content" role="main">
{this.props.children}
</main>
Expand Down
1 change: 0 additions & 1 deletion components/Resume/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ const Resume = props => (
{resumeData.map((elem, i) => (
<article key={i}>
<>

<h3>{elem.sectionTitle}</h3>

{
Expand Down
1 change: 1 addition & 0 deletions components/SideDrawer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const SideDrawer = props => {
<Link href="/static/resume/jayfallon-resume-2019.pdf"><a target="_blank" title="Download Jay's resume">Download Resume</a></Link>
</li>
</ul>
<div className="sideDrawer__close"><i class="fal fa-times"></i></div>
</SideDrawerStyles>
)
}
Expand Down
14 changes: 12 additions & 2 deletions components/SideDrawer/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import styled from 'styled-components'

const SideDrawerStyles = styled.nav`
padding-top: 4rem;
transform: translateX(-100%);
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-out;
&.open {
transform: translateX(0);
}
z-index: 300;
width: 100%;
height: 100%;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 4rem 2rem;
display: flex;
justify-content: space-between;
ul {
padding-top: 4rem;

}
li {
padding-bottom: 2rem;
Expand All @@ -26,6 +30,12 @@ const SideDrawerStyles = styled.nav`
font-weight: bold;
text-decoration: none;
}

div.sideDrawer__close {
margin-right: 2rem;
cursor: pointer;
font-size: 3rem;
}
`

export default SideDrawerStyles
1 change: 1 addition & 0 deletions pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ export default class MyDocument extends Document {
rel="apple-touch-startup-image"
/>
<link rel="stylesheet" href="https://use.typekit.net/dwo1agu.css" />
<script src="https://kit.fontawesome.com/6fe37eaa4f.js"></script>
</Head>
<body>
<Main />
Expand Down