Skip to content

Commit

Permalink
Links to Github, Twitter, Discord are now visible on iPad…
Browse files Browse the repository at this point in the history 
That said, the masthead background and the social icon visibility still have their issues – gotta write some more media queries…
No real regressions. Along the way:

* Simplify masthead background SVGs a lot (could have been even simpler with IE supporting CSS transforms for SVG elements…)
* Consolitate "social icons" nav styles.
  • Loading branch information
Florian Kissling committed Jul 27, 2017
1 parent a39d441 commit ff0d2af
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 80 deletions.
110 changes: 54 additions & 56 deletions www/src/components/masthead.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,19 @@ const cover = {
bottom: 0,
}

const MastheadBgRightPoly = ({ fill }) =>
<polygon fill={fill} points="-27,105 83,-5 130,-5 130,105 " />

const MastheadBgRightGroup = ({ brightOff, darkOff, cssClassName }) =>
<g className={`Masthead-bg-right-group ${cssClassName}`}>
<g className="bright" transform={`translate(${brightOff})`}>
<MastheadBgRightPoly fill={presets.brandLight} />
</g>
<g className="dark" transform={`translate(${darkOff})`}>
<MastheadBgRightPoly fill={presets.brandDark} />
</g>
</g>

const MastheadBg = () =>
<div
className="Masthead-bg"
Expand Down Expand Up @@ -48,8 +61,12 @@ const MastheadBg = () =>
},
}}
/>
<div
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
className="Masthead-bg-right"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMin slice"
css={{
...cover,
position: `absolute`,
Expand All @@ -58,48 +75,40 @@ const MastheadBg = () =>
zIndex: -1,
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400"
preserveAspectRatio="xMinYMin slice"
style={{ width: `100%`, height: `100%` }}
>
<style type="text/css">
{`
<style type="text/css">
{`
.Masthead-bg-right--lg {
display: none;
}
@media screen and (min-width: 960px) and (min-height: 600px) {
.Masthead-bg-right--lg {
display: none;
display: block;
}
@media screen and (min-width: 960px) and (min-height: 600px) {
.Masthead-bg-right--lg {
display: block;
}
}
`}
</style>
<polygon
fill={presets.brandLight}
className="Masthead-bg-right--sm"
points="-250,571.8 436.8,-115 1070,-115 1070,571.8 "
/>
<polygon
fill={presets.brandDark}
className="Masthead-bg-right--sm"
points="-130,571.8 556.8,-115 1586.2,-115 1586.2,571.8 "
/>
<polygon
fill={presets.brandLight}
className="Masthead-bg-right--lg"
points="-190,460 496.8,-226.8 1130,-226.8 1130,460 "
/>
<polygon
fill={presets.brandDark}
className="Masthead-bg-right--lg"
points="-130,460 556.8,-226.8 1586.2,-226.8 1586.2,460 "
/>
</svg>
</div>
<div
}
`}
</style>
{/* :-/ */}
{/* works for phones */}
<MastheadBgRightGroup
brightOff="20,0"
darkOff="35,0"
cssClassName="Masthead-bg-right--sm"
/>
{/* works for ipad/pro portrait, but not for any phone in portrait mode */}
{/* <MastheadBgRightGroup brightOff="-5,0" darkOff="15,0" /> *}
{/* works for large screens */}
<MastheadBgRightGroup
brightOff="-10,0"
darkOff="5,0"
cssClassName="Masthead-bg-right--lg"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100"
xmlSpace="preserve"
preserveAspectRatio="xMinYMin slice"
className="Masthead-bg-left"
css={{
position: `absolute`,
Expand All @@ -115,23 +124,12 @@ const MastheadBg = () =>
[presets.VVHd]: {
left: vPVVHdOff,
},
width: `100%`,
height: `100%`,
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10000 10000"
xmlSpace="preserve"
preserveAspectRatio="xMinYMin slice"
style={{ width: `100%`, height: `100%` }}
>
<polygon
className="st9"
fill={presets.brandLighter}
points="-5000,-5000 15000,15000 -5000,15000 "
/>
</svg>
</div>
<polygon fill={presets.brandLighter} points="-50,-50 150,150 -50,150 " />
</svg>
</div>

const MastheadContent = () =>
Expand Down
34 changes: 10 additions & 24 deletions www/src/layouts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,13 @@ module.exports = React.createClass({
{title}
</div>
</Link>
const socialIconsStyles = {
color: presets.brandLight,
[presets.Desktop]: {
color: this.props.location.pathname !== `/` ? false : `white`,
fontSize: scale(0).fontSize,
},
}

return (
<div>
Expand Down Expand Up @@ -240,14 +247,7 @@ module.exports = React.createClass({
href="https://github.com/gatsbyjs/gatsby"
css={{
...navItemStyles,
color: presets.brandLight,
[presets.Tablet]: {
color:
this.props.location.pathname !== `/` ? false : `white`,
},
[presets.Desktop]: {
fontSize: scale(0).fontSize,
},
...socialIconsStyles,
}}
>
<GithubIcon css={{ verticalAlign: `text-top` }} />
Expand All @@ -257,14 +257,7 @@ module.exports = React.createClass({
href="https://discord.gg/0ZcbPKXt5bZjGY5n"
css={{
...navItemStyles,
color: presets.brandLight,
[presets.Tablet]: {
color:
this.props.location.pathname !== `/` ? false : `white`,
},
[presets.Desktop]: {
fontSize: scale(0).fontSize,
},
...socialIconsStyles,
}}
>
<DiscordIcon />
Expand All @@ -273,14 +266,7 @@ module.exports = React.createClass({
href="https://twitter.com/gatsbyjs"
css={{
...navItemStyles,
color: presets.brandLight,
[presets.Tablet]: {
color:
this.props.location.pathname !== `/` ? false : `white`,
},
[presets.Desktop]: {
fontSize: scale(0).fontSize,
},
...socialIconsStyles,
}}
>
<TwitterIcon css={{ verticalAlign: `text-top` }} />
Expand Down

0 comments on commit ff0d2af

Please sign in to comment.