Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[www] Refactor Homepage and Navigation & convert diagram to html/css #1605

Merged
merged 21 commits into from
Jul 27, 2017
Merged

[www] Refactor Homepage and Navigation & convert diagram to html/css #1605

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
e4a5f67
WiP …
Jul 21, 2017
944cdf0
Move Discord icon, "hero" and CTA button to component
Jul 23, 2017
bb81c3b
:P
Jul 24, 2017
836776e
Tidy Diagram, rename Hero to Masthead
Jul 25, 2017
8e85004
Add Cards, Card, and CardHeadline components; tidy moar
Jul 25, 2017
1ab61f7
Add Now.sh to the list of static web hosts
Jul 25, 2017
a00541f
Fix "Data Sources" flexbox layout for Safari and iPhone5-ish screens
Jul 25, 2017
d1f7f81
Use typography rhythm for Diagram Gatsby logo and container
Jul 25, 2017
4530ead
Merge branch 'master' into www-main-navigation
KyleAMathews Jul 26, 2017
f1ba3a1
Copy editing
KyleAMathews Jul 26, 2017
90a449c
Try three blog posts on front page
KyleAMathews Jul 26, 2017
288bcd5
Fix tech icon alignment, move to component
Jul 26, 2017
aa8da6e
Quick shot at animated connector lines for the explanatory diagram
Jul 26, 2017
d3150a9
Reduce height of connector lines
Jul 26, 2017
9c4ac37
Change "YAML/JSON" to "YAML, JSON, CSV"
Jul 26, 2017
0d34c09
Copy and order changes according to https://github.com/gatsbyjs/gatsb…
Jul 26, 2017
602a16d
Fix paragraph size
Jul 26, 2017
be3793d
Improve Diagram font sizes for large screens
Jul 27, 2017
e5218d1
A little less border-radius
Jul 27, 2017
a39d441
Make CTA button big for Phablet already, restore original "masthead l…
Jul 27, 2017
ff0d2af
Links to Github, Twitter, Discord are now visible on iPad…
Jul 27, 2017
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix tech icon alignment, move to component
  • Loading branch information
Florian Kissling committed Jul 26, 2017
commit 288bcd521cd216d8f358bd7b574118c3d52624d5
54 changes: 17 additions & 37 deletions www/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@ import BlogPostPreviewItem from "../components/blog-post-preview-item"
import FuturaParagraph from "../components/futura-paragraph"
import CtaButton from "../components/cta-button"

const TechWithIcon = ({ icon, children }) =>
<span css={{ whiteSpace: `nowrap` }}>
{children}&nbsp;<img
src={icon}
css={{
height: `1.2em`,
width: `auto`,
margin: 0,
verticalAlign: `text-bottom`,
}}
/>
</span>

const IndexRoute = React.createClass({
render() {
console.log(this.props)
Expand All @@ -37,32 +50,9 @@ const IndexRoute = React.createClass({
<CardHeadline>Modern web tech without the headache</CardHeadline>
<FuturaParagraph>
Enjoy all the power of the latest web technologies –{` `}
<span css={{ whiteSpace: `nowrap` }}>
React.js&nbsp;
<img
src={ReactJSIcon}
css={{
height: `1.2em`,
width: `auto`,
margin: 0,
verticalAlign: `middle`,
}}
/>
</span>
,{` `}
<span css={{ whiteSpace: `nowrap` }}>
Webpack&nbsp;
<img
src={WebpackIcon}
css={{
height: `1.2em`,
width: `auto`,
margin: 0,
verticalAlign: `middle`,
}}
/>
</span>
, modern JavaScript and CSS and more – all setup and waiting for
<TechWithIcon icon={ReactJSIcon}>React.js</TechWithIcon>,{` `}
<TechWithIcon icon={WebpackIcon}>Webpack</TechWithIcon>,{` `}
modern JavaScript and CSS and more – all setup and waiting for
you to start building.
</FuturaParagraph>
</Card>
Expand All @@ -73,17 +63,7 @@ const IndexRoute = React.createClass({
the data you want – from one or many sources: Pull data from
headless CMSs, SaaS services, APIs, databases, your file system
& more directly into your pages using{` `}
<span css={{ whiteSpace: `nowrap` }}>
GraphQL&nbsp;<img
src={GraphQLIcon}
css={{
height: `1.2em`,
width: `auto`,
margin: 0,
verticalAlign: `middle`,
}}
/>
</span>.
<TechWithIcon icon={GraphQLIcon}>GraphQL</TechWithIcon>.
</FuturaParagraph>
</Card>
<Card>
Expand Down