As an editor, I want to add content pages to the site so I can publish editorial and contributor guides and other documentation on the site.

[gwijthoff]

When adding two pages to a new content/guides directory—"Editorial Guidelines" and "Style Guide for Contributors"—I noticed that our standalone page layout isn't styled. Given that these two pages are meant to demonstrate the site's features, I think it should be styled similarly to type: article. So, things needed include:

• bulleted list formatting
• horizontal line / <hr> replaced with our Startwords logo styled section break
• supporting figure shortcodes
• IBM Plex Serif used in article body text, rather than the larger sans font used in About and Issue page text.
• contextual notes

Things to note:

• Publication dates for Issue 3 articles could be placed in the future so that they aren't published when moving these changes from develop to main.
• I left the one embedded video and two images in the "Style Guide" in code blocks for now, until the shortcodes work. What is the best way to embed Gissoo's ACH video? It's currently stored in the Drive, not hosted on YouTube.
• For some reason, body text lines aren't breaking in the "Style Guide" page, though I assume addressing the issues above will fix that.

And a lingering design question, for @gissoo, though this may deserve a separate issue: is there a different approach to avoiding the nav covering the title and summary text on mobile, rather than indenting that title and summary to the right, which looks awkward (see below)?

[gissoo]

@gwijthoff thanks for flagging!
@rlskoeser do you know if we can either reposition it on desktop? Or if we can make most of the nav hide after a few seconds and only fully back out on a hover on desktop and a tap on mobile?

[rlskoeser]

@rlskoeser do you know if we can either reposition it on desktop? Or if we can make most of the nav hide after a few seconds and only fully back out on a hover on desktop and a tap on mobile?

Gissoo, I'm not sure what you mean about repositioning on desktop. I would rather not auto-hide it at the top of the screen, that's complicated and it doesn't solve the problem in all cases. Simple solutions I can see:

1. Make the spacing around the header larger so text falls below the left nav
2. Add padding to both sides of the first paragraph on mobile to ensure it isn't hidden by the nav (~ similar to individual article header)
3. Increase the margins for content pages so they are always clear (similar to issue introduction text)

I prefer 2

[gwijthoff]

@rlskoeser for option 2, are you suggesting indenting the first paragraph of whatever body text is on the page? So in the example below, the ¶ beginning "Each issue of Startwords typically involves..." would be indented right, in line with the "Editorial Guidelines" title?

I worry that would introduce a semantic change to the text that doesn't make sense: readers will wonder why the ¶ is indented.

For option 3: I can see that working, though the lines of issue introduction text are fairly short on mobile: 4-6 words per line. Maybe more characters would fit per line if we switch standalone pages to use IBM Plex Serif like the article text.

Another option to add to the list, though I'm not sure how I feel about it. 4: centering page title and subtitle / preview text. cc @gissoo

[rlskoeser]

@rlskoeser for option 2, are you suggesting indenting the first paragraph of whatever body text is on the page? So in the example below, the ¶ beginning "Each issue of Startwords typically involves..." would be indented right, in line with the "Editorial Guidelines" title?

Yes, that was what I was suggesting.

I worry that would introduce a semantic change to the text that doesn't make sense: readers will wonder why the ¶ is indented.

I thought that might be mitigated by adding padding on both sides; left indentation has meaning in some cases but if it's padded on both sides and centered it would seem more clearly a presentation/display choice.