gatsbyjs / themejam.gatsbyjs.org Goto Github PK

1. Overflowing is happening because some wrapper around the Theme Jam illustration has a fixed width of 360px. It needs to be fluid and can be fixed by removing/overriding the width: 360 in src/gatsby-theme-marketing-sanity/components/serializers.js.

2. The site-title is breaking on 2 lines on very small screens (320px wide). This can be fixed by removing the ml: 4 applied to the li of the "Submit" button in src/components/Header.js.

It makes sense for this paragraph to be centered:

It is not super legible to have the contest rules centered:

My proposal here is to:

• Add a lede block for that home page content (this should also probably be a larger font size, but we can deal with that later)
• Make the rest of the content on the site left-aligned by default

ran a webpagetest on the website https://www.webpagetest.org/result/190703_1S_27d8385dd468c46e0d30c7b16b92ff40/

three quick things which would speed up loading a lot:

• add <link href="https://cdn.sanity.io/" rel="preconnect" crossorigin> to speed up downloading the main image (SSL negotiation takes a full 1.5 seconds) — see https://www.keycdn.com/blog/resource-hints for more about this — it’d be cool actually to add this to gatsby-source-sanity (and other source plugins with their own image API like Contentful) as this is a common problem.
• add loading={"eager"} to the Img component so the image starts downloading before JS loads
• add <link rel="preload" href="/static/ftn65-webfont-0ddc10d20bd3c3e162e4ea9b49c82856.woff2" as="font"> & <link rel="preload" href="/static/ftn45-webfont-c2439033a37a428d148b673062131f47.woff2" as="font"> to speed up font preloading

The illustration pushes all content off the screen on shorter viewports, so let's set a max-height of ~50vh on it to make sure people are able to see some content on every screen without scrolling.

So that it shows up in the list of repos and helps identify what repo does what. Thanks!

See https://themejam.gatsbyjs.org/showcase

Right now we're having to do a weird workaround to add the Figure with styling — let's refactor and figure out how to make that easier without wrapping/shadowing the component.

Let's 1.5–2x the amount of margin between the footer and the main content to make the separation more clear and give the content room to breathe.

We need to add social sharing metadata. We can use this component and probably lift it straight across.

https://github.com/jlengstorf/marisamorby.com/blob/a817a02ba482573ca7a56b75dbe2a43d504bfee0/packages/gatsby-theme-blog-sanity/src/components/seo.js#L40-L52

So I was thinking that a good rule to be put in place for the ThemeJam is to maybe restrict previously made themes from being entered. I'm thinking this as themes have been in a beta state for a few months and with that, I wouldn't want people to have an advantage in this over someone who is just learning about Themes when the event begins.

cc: @jlengstorf @gillkyle