website improvements

This commit is contained in:
Karol Wypchlo 2021-04-08 16:02:01 +02:00
parent 05415d5955
commit ed90c16b61
6 changed files with 14 additions and 11 deletions

View File

@ -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>
); );
}; };

View File

@ -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;

View File

@ -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>

View File

@ -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} />

View File

@ -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}

View File

@ -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"),
}, },
}); });
}), }),