website improvements
This commit is contained in:
parent
05415d5955
commit
ed90c16b61
|
@ -17,7 +17,7 @@ import { readableColor } from "polished";
|
||||||
const FixedHeader = ({ uri }) => {
|
const FixedHeader = ({ uri }) => {
|
||||||
const { y } = useWindowScroll();
|
const { y } = useWindowScroll();
|
||||||
const ref = React.useRef(null);
|
const ref = React.useRef(null);
|
||||||
const [mode, setMode] = React.useState();
|
const [mode, setMode] = React.useState(null);
|
||||||
|
|
||||||
React.useLayoutEffect(() => {
|
React.useLayoutEffect(() => {
|
||||||
const offset = ref.current.offsetHeight + 1;
|
const offset = ref.current.offsetHeight + 1;
|
||||||
|
@ -34,7 +34,7 @@ const FixedHeader = ({ uri }) => {
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className="fixed inset-x-0 top-0 z-50">
|
<div ref={ref} className="fixed inset-x-0 top-0 z-50">
|
||||||
<NewsHeader />
|
<NewsHeader />
|
||||||
<Navigation mode={mode} uri={uri} />
|
{mode && <Navigation mode={mode} uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,8 +30,6 @@ const Navigation = ({ mode, uri }) => {
|
||||||
const isWindowTop = useWindowTop();
|
const isWindowTop = useWindowTop();
|
||||||
const { data: authenticated } = useAuthenticatedStatus();
|
const { data: authenticated } = useAuthenticatedStatus();
|
||||||
|
|
||||||
console.log(authenticated);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}, [windowSize, setOpen, uri]);
|
}, [windowSize, setOpen, uri]);
|
||||||
|
@ -170,12 +168,10 @@ const Navigation = ({ mode, uri }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
Navigation.propTypes = {
|
Navigation.propTypes = {
|
||||||
mode: PropTypes.oneOf(["dark", "light"]),
|
mode: PropTypes.oneOf(["dark", "light"]).isRequired,
|
||||||
uri: PropTypes.string,
|
uri: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
Navigation.defaultProps = {
|
Navigation.defaultProps = {};
|
||||||
mode: "dark",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Navigation;
|
export default Navigation;
|
||||||
|
|
|
@ -126,7 +126,7 @@ const AboutPage = ({ ...props }) => {
|
||||||
<>
|
<>
|
||||||
<Seo title="About" />
|
<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="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
|
||||||
<div className="col-span-3">
|
<div className="col-span-3">
|
||||||
<h1>
|
<h1>
|
||||||
|
|
|
@ -50,6 +50,12 @@ const NewsPage = ({ data }) => {
|
||||||
<Seo title="News" />
|
<Seo title="News" />
|
||||||
|
|
||||||
<Section className="bg-white" first={true}>
|
<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">
|
<div className="grid grid-cols-1 desktop:grid-cols-3 gap-x-8 gap-y-24">
|
||||||
{data.allMarkdownRemark.edges.map(({ node }) => (
|
{data.allMarkdownRemark.edges.map(({ node }) => (
|
||||||
<NewsCard key={node.id} {...node} />
|
<NewsCard key={node.id} {...node} />
|
||||||
|
|
|
@ -16,7 +16,7 @@ const BlogPostTemplate = ({ data, location }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Seo title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
|
<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">
|
<article className="blog-post" itemScope itemType="http://schema.org/Article">
|
||||||
<SectionTitle itemProp="headline" className="mb-16">
|
<SectionTitle itemProp="headline" className="mb-16">
|
||||||
{post.frontmatter.title}
|
{post.frontmatter.title}
|
||||||
|
|
|
@ -55,6 +55,7 @@ module.exports = {
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
mobile: "url('/bg-mobile.svg')",
|
mobile: "url('/bg-mobile.svg')",
|
||||||
desktop: "url('/bg.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({
|
addBase({
|
||||||
body: {
|
body: {
|
||||||
color: theme("textColor.palette.600"),
|
color: theme("textColor.palette.600"),
|
||||||
backgroundColor: theme("backgroundColor.palette.600"),
|
backgroundColor: theme("backgroundColor.palette.500"),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
|
|
Reference in New Issue