website improvements

packages/website/src/components/Layout/Layout.js

@@ -17,7 +17,7 @@ import { readableColor } from "polished";
 const FixedHeader = ({ uri }) => {
   const { y } = useWindowScroll();
   const ref = React.useRef(null);
-  const [mode, setMode] = React.useState();
+  const [mode, setMode] = React.useState(null);
 
   React.useLayoutEffect(() => {
     const offset = ref.current.offsetHeight + 1;
@@ -34,7 +34,7 @@ const FixedHeader = ({ uri }) => {
   return (
     <div ref={ref} className="fixed inset-x-0 top-0 z-50">
       <NewsHeader />
-      <Navigation mode={mode} uri={uri} />
+      {mode && <Navigation mode={mode} uri={uri} />}
     </div>
   );
 };

packages/website/src/components/Navigation/Navigation.js

@@ -30,8 +30,6 @@ const Navigation = ({ mode, uri }) => {
   const isWindowTop = useWindowTop();
   const { data: authenticated } = useAuthenticatedStatus();
 
-  console.log(authenticated);
-
   React.useEffect(() => {
     setOpen(false);
   }, [windowSize, setOpen, uri]);
@@ -170,12 +168,10 @@ const Navigation = ({ mode, uri }) => {
 };
 
 Navigation.propTypes = {
-  mode: PropTypes.oneOf(["dark", "light"]),
+  mode: PropTypes.oneOf(["dark", "light"]).isRequired,
   uri: PropTypes.string,
 };
 
-Navigation.defaultProps = {
-  mode: "dark",
-};
+Navigation.defaultProps = {};
 
 export default Navigation;

packages/website/src/pages/about.js

@@ -126,7 +126,7 @@ const AboutPage = ({ ...props }) => {
     <>
       <Seo title="About" />
 
-      <Section className="bg-palette-100" marginBottom={true} first={true}>
+      <Section className="bg-palette-100 desktop:bg-white desktop:bg-column" marginBottom={false} first={true}>
         <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
           <div className="col-span-3">
             <h1>

packages/website/src/pages/news.js

@@ -50,6 +50,12 @@ const NewsPage = ({ data }) => {
       <Seo title="News" />
 
       <Section className="bg-white" first={true}>
+        {/* this is the gray box in the top left corner, 400px height is totally arbitrary but it works */}
+        <div
+          className="hidden desktop:block bg-white bg-column absolute top-0 left-0 right-0"
+          style={{ height: "400px" }}
+        />
+
         <div className="grid grid-cols-1 desktop:grid-cols-3 gap-x-8 gap-y-24">
           {data.allMarkdownRemark.edges.map(({ node }) => (
             <NewsCard key={node.id} {...node} />

packages/website/src/templates/news-post.js

@@ -16,7 +16,7 @@ const BlogPostTemplate = ({ data, location }) => {
   return (
     <>
       <Seo title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
-      <Section className="bg-white" first={true}>
+      <Section className="bg-white desktop:bg-column" first={true}>
         <article className="blog-post" itemScope itemType="http://schema.org/Article">
           <SectionTitle itemProp="headline" className="mb-16">
             {post.frontmatter.title}

packages/website/tailwind.config.js

@@ -55,6 +55,7 @@ module.exports = {
       backgroundImage: {
         mobile: "url('/bg-mobile.svg')",
         desktop: "url('/bg.svg')",
+        column: `linear-gradient(to right, ${colors.palette[100]}, ${colors.palette[100]} calc(50% - 288px), transparent calc(50% - 288px))`,
       },
     },
   },
@@ -73,7 +74,7 @@ module.exports = {
       addBase({
         body: {
           color: theme("textColor.palette.600"),
-          backgroundColor: theme("backgroundColor.palette.600"),
+          backgroundColor: theme("backgroundColor.palette.500"),
         },
       });
     }),