From 09b5fe3b69c5082afe0129d451bd1afdd3577227 Mon Sep 17 00:00:00 2001 From: jameygleason Date: Thu, 20 Sep 2018 08:03:07 -0400 Subject: Stepped Solutions --- stepped-solutions/07/frontend/components/Header.js | 50 ++++++++++++++++++++-- stepped-solutions/07/frontend/components/Page.js | 34 ++++++++++++--- 2 files changed, 76 insertions(+), 8 deletions(-) diff --git a/stepped-solutions/07/frontend/components/Header.js b/stepped-solutions/07/frontend/components/Header.js index 51de94c..5a11aa4 100755 --- a/stepped-solutions/07/frontend/components/Header.js +++ b/stepped-solutions/07/frontend/components/Header.js @@ -1,16 +1,60 @@ +import Link from 'next/link'; +import styled from 'styled-components'; import Nav from './Nav'; +const Logo = styled.h1` + font-size: 4rem; + margin-left: 2rem; + position: relative; + z-index: 2; + transform: skew(-7deg); + a { + padding: 0.5rem 1rem; + background: ${props => props.theme.red}; + color: white; + text-transform: uppercase; + text-decoration: none; + } + @media (max-width: 1300px) { + margin: 0; + text-align: center; + } +`; + +const StyledHeader = styled.header` + .bar { + border-bottom: 10px solid ${props => props.theme.black}; + display: grid; + grid-template-columns: auto 1fr; + justify-content: space-between; + align-items: stretch; + @media (max-width: 1300px) { + grid-template-columns: 1fr; + justify-content: center; + } + } + .sub-bar { + display: grid; + grid-template-columns: 1fr auto; + border-bottom: 1px solid ${props => props.theme.lightgrey}; + } +`; + const Header = () => ( -
+
- Sick Fits + + + Sick Fits + +

Search

Cart
-
+ ); export default Header; diff --git a/stepped-solutions/07/frontend/components/Page.js b/stepped-solutions/07/frontend/components/Page.js index 11bb409..a8aefa4 100755 --- a/stepped-solutions/07/frontend/components/Page.js +++ b/stepped-solutions/07/frontend/components/Page.js @@ -1,15 +1,39 @@ import React, { Component } from 'react'; +import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import Header from './Header'; import Meta from './Meta'; +const theme = { + red: '#FF0000', + black: '#393939', + grey: '#3A3A3A', + lightgrey: '#E1E1E1', + offWhite: '#EDEDED', + maxWidth: '1000px', + bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)', +}; + +const StyledPage = styled.div` + background: white; + color: ${props => props.theme.black}; +`; + +const Inner = styled.div` + max-width: ${props => props.theme.maxWidth}; + margin: 0 auto; + padding: 2rem; +`; + class Page extends Component { render() { return ( -
- -
- {this.props.children} -
+ + + +
+ {this.props.children} + + ); } } -- cgit v1.3 From 8858b3dede6359d105be6c3baf65eef259d18f11 Mon Sep 17 00:00:00 2001 From: jameygleason Date: Thu, 20 Sep 2018 08:21:22 -0400 Subject: Stepped Solutions --- stepped-solutions/08/frontend/components/Nav.js | 20 ++++++++++++---- stepped-solutions/08/frontend/components/Page.js | 29 +++++++++++++++++++++++- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/stepped-solutions/08/frontend/components/Nav.js b/stepped-solutions/08/frontend/components/Nav.js index 0bd20b7..a821bc1 100755 --- a/stepped-solutions/08/frontend/components/Nav.js +++ b/stepped-solutions/08/frontend/components/Nav.js @@ -1,14 +1,24 @@ import Link from 'next/link'; +import NavStyles from './styles/NavStyles'; const Nav = () => ( -
+ + + Items + - Sell! + Sell + + + Signup + + + Orders - - Home! + + Account -
+ ); export default Nav; diff --git a/stepped-solutions/08/frontend/components/Page.js b/stepped-solutions/08/frontend/components/Page.js index 0731f9f..99f3158 100755 --- a/stepped-solutions/08/frontend/components/Page.js +++ b/stepped-solutions/08/frontend/components/Page.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; +import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import Header from './Header'; import Meta from './Meta'; -import styled, { ThemeProvider, injectGlobal } from 'styled-components'; const theme = { red: '#FF0000', @@ -24,6 +24,33 @@ const Inner = styled.div` padding: 2rem; `; +injectGlobal` + @font-face { + font-family: 'radnika_next'; + src: url('/static/radnikanext-medium-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } + html { + box-sizing: border-box; + font-size: 10px; + } + *, *:before, *:after { + box-sizing: inherit; + } + body { + padding: 0; + margin: 0; + font-size: 1.5rem; + line-height: 2; + font-family: 'radnika_next'; + } + a { + text-decoration: none; + color: ${theme.black}; + } +`; + class Page extends Component { render() { return ( -- cgit v1.3 From 299af12f4985080b4f5d54b31e62b467d1462e45 Mon Sep 17 00:00:00 2001 From: jameygleason Date: Thu, 20 Sep 2018 08:41:44 -0400 Subject: Stepped Solutions --- stepped-solutions/09/frontend/components/Header.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/stepped-solutions/09/frontend/components/Header.js b/stepped-solutions/09/frontend/components/Header.js index b75fbc1..92b97aa 100755 --- a/stepped-solutions/09/frontend/components/Header.js +++ b/stepped-solutions/09/frontend/components/Header.js @@ -1,6 +1,20 @@ -import Nav from './Nav'; import Link from 'next/link'; import styled from 'styled-components'; +import Router from 'next/router'; +import NProgress from 'nprogress'; +import Nav from './Nav'; + +Router.onRouteChangeStart = () => { + NProgress.start(); +}; + +Router.onRouteChangeComplete = () => { + NProgress.done(); +}; + +Router.onRouteChangeError = () => { + NProgress.done(); +}; const Logo = styled.h1` font-size: 4rem; -- cgit v1.3