Fix banner styles

gatsbyjs · Apr 2, 2018 · 621f60a · 621f60a
1 parent a5b5e30
commit 621f60a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -96,6 +96,7 @@ export default ({ pathname }) => {
         zIndex: `2`,
         left: 0,
         right: 0,
+        top: `calc(2.8rem - 1px)`,
         [presets.Tablet]: {
           position: isHomepage || isBlog ? `absolute` : `fixed`,
         },

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -141,6 +141,8 @@ class DefaultLayout extends React.Component {
             fontFamily: options.headerFontFamily.join(`,`),
             textAlign: `center`,
             boxShadow: `inset 0px -3px 2px 0px ${colors.ui.bright}`,
+            zIndex: `2`,
+            position: isHomepage || isBlog ? `absolute` : `fixed`,
           }}
         >
           Live 2-day Gatsby training with Kyle Mathews! Sign up for{" "}
@@ -230,6 +232,7 @@ class DefaultLayout extends React.Component {
 
           <div
             css={{
+              marginTop: isHomepage || isBlog ? 0 : `calc(2.8rem - 1px)`,
               ...childrenMobileDisplay,
               [presets.Tablet]: {
                 paddingLeft: leftPadding(10),

diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js
@@ -15,6 +15,7 @@ class BlogPostsIndex extends React.Component {
     return (
       <div
         css={{
+          marginTop: `calc(2.8rem - 1px)`,
           [presets.Tablet]: {
             background: colors.ui.whisper,
             paddingBottom: rhythm(options.blockMarginBottom * 4),

diff --git a/www/src/pages/plugins.js b/www/src/pages/plugins.js
@@ -4,14 +4,14 @@ import logo from "../monogram.svg"
 import { rhythm, options } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
 
-class Packages extends Component {
+class Plugins extends Component {
   render() {
     return (
       <Container
         css={{
           alignItems: `center`,
           display: `flex`,
-          minHeight: `calc(100vh - ${presets.headerHeight})`,
+          minHeight: `calc(100vh - (${presets.headerHeight} + 2.8rem - 1px))`,
         }}
       >
         <div
@@ -40,7 +40,7 @@ class Packages extends Component {
               textAlign: `center`,
             }}
           >
-            Welcome to the Gatsby Package Library!
+            Welcome to the Gatsby Plugin Library!
           </h1>
           <p
             css={{
@@ -52,7 +52,7 @@ class Packages extends Component {
               textAlign: `center`,
             }}
           >
-            Please use the search bar to find packages that will make your
+            Please use the search bar to find plugins that will make your
             blazing-fast site even more awesome.
           </p>
         </div>
@@ -61,4 +61,4 @@ class Packages extends Component {
   }
 }
 
-export default Packages
+export default Plugins