Styling Issues

[tyler-yin]

Issues tracked by @stefanietam @tyler-yin

DESKTOP & TABLET

GLOBAL

Side Navigation

• p5.js logo should have 20px top padding
• The line height in the secondary panel text items should match the line height of the navigation items in the primary panel.
• The secondary panel’s first text block should have 20px top padding.
• The dropdown arrows in both panels should have 27.5px top padding
• Start Coding and Donate buttons should have 20px padding from the bottom of the panel and 15px between buttons. Update left and right padding from .3rem to .5rem for these two buttons specifically.
• Anchor links should have an auto scroll animation of 300ms as opposed to automatically snapping. It can automatically snap to the respective y-pos when reduced motion is selected as an accessibility option.
• There shouldn’t be a horizontal rule visible at the bottom of the side navigation. This is only visible with the split side navigation.
• The anchored scroll position should have 20px padding between the top of the viewport and the top of the section header text block.
• Secondary side navigation panel items should have a line height of 24px–not 28px to match the line spacing of the main navigation panel, , spacing between header and line items should be 20px (ie: the space between “Jump To” and first line item) for the following pages: Reference, Examples, Contribute, and Community. Tutorials and About should have 10px of padding between anchor links.

Content Margins

• The left and right margins should match the column gutter width—40px. Some pages have the correct gutter width, some don’t.

Rich Text and Type Styles

• H3 is 30/34, not 30/36.
• Detail page max widths for body text are inconsistent. They should all have the same value of 750px.
• Please remove all instances of bold styling of National Park
• Some instances of National Park Desktop/Tablet Body are 20/28 when all 20pt text should be 20/24

Footer

• Footer items text block height should be 24px—not 28px—to match the line spacing of the main navigation panel, spacing between header and line items should be 20px (ie: the space between “Resources” and “Reference,” “Tutorials,” etc.
• When the content of the page is less than the height of the viewport, the footer should stay bottom aligned to the browser.
• Bottom padding of the p5 asterisk in the footer should be 20px
• Please include the Processing Foundation and address in the footer.

Top UI

• Alt text in dark mode should be black, not the page theme color.
• Alt text in dark mode/monochrome mode should be black, not white.
• The height of the tablet version of languages, accessibility, and search bar of the top UI should be the same as the height as the desktop breakpoint of these buttons. It currently shrinks by a few px.

Colored Page Headers

• Height of the header should match the height of the split side navigation panel (50vh until min-height is reached).
• (Desktop) The H1 title’s text baseline should be aligned to the baseline of the fourth main navigation item, in this case, “Contribute.”
• (Tablet) The H1 title’s text baseline should be aligned to the baseline of the fifth main navigation item, in this case, “Community.”
• The description text underneath the H1 title should be H3. The description text should also have 2 column max width, rather than 4 columns.

Breadcrumbs

• Please replace the current breadcrumb arrow with the designated breadcrumb arrow
• The padding between the breadcrumb, the arrow, and the detail page title should be 10px.
• (Desktop) The breadcrumb’s text baseline should be aligned to the baseline of the first main navigation item, in this case, “Reference.” The following H1 title should be aligned to the fourth main navigation item, in this case, “Contribute.”
• (Tablet) The breadcrumb’s text baseline should be aligned to the baseline of the fourth main navigation item, in this case, “Contribute.”

HOME

• When the user lands on the homepage, the top header and the hero image should split the viewport above the fold by 50vh/50vh. The browser should have a min-height of 750px.
• Some of the sketches don’t seem to follow the four column grid, see: Sketch #WCCC_Obscure_bg_submission justAnotherAnotherUser. This seems like it should have the width of 2 columns.
• The buttons on the homepage text CTA’s are a bit wider than the width of one column. It should have the same width as the language/accessibility dropdowns.
• Slow speed of the rotating asterisk to ⅔ of current speed.
• (Tablet) Intro text in header should be 20/24, not 20/28

REFERENCE

• Reference items description text should be Body Caption sized. It should have 4px of padding between the reference name and the description copy.
• If there’s only one subcategory per each category, please remove the duplicated H3 header. See “Transform” and “Environment” as an example.
• Filter by keyword width should match the width of 2 columns rather than having a fixed width.
• Can we remove the focus state from the filter by keyword field when clicked on with a mouse? Instead, implement the flashing type bar.
• After typing something into the filter by keyword bar, an X icon should appear at the right edge of the bar. Clicking on the X will clear the filter.
• The filter by keyword entry should also parse the reference description text—not just the reference title.

REFERENCE DETAIL

• When clicking on the example editor to edit the code, the dotted outline is only visible on the left side and the corners, but it should outline the entire code block.
• Secondary side navigation panel should be inclusive of all reference items, not just the relative category of reference items. Is it possible to keep the respective category pushed to the top, though?
• Example editor blocks should take on Courier typeface
• Detail page max widths for body text are inconsistent. They should all have the same value of 750px.

TUTORIALS

• The bottom padding of each section should match the bottom padding of sections on all other overview pages. It currently seems to be double the global bottom padding value.

TUTORIALS DETAIL

• The code blocks have dark backgrounds—can they reflect the color theme of the example editor blocks with a light gray background?
• Detail page max widths for body text are inconsistent. They should all have the same value of 750px.

EXAMPLES

• The column gutters should be 40px wide
• Top padding of section titles is inconsistent with other overview pages' top padding.

EXAMPLES DETAIL

• Page color should be Example Red
• Secondary side navigation panel should be inclusive of all example items, not just the relative category of example items. Is it possible to keep the respective category pushed to the top, though?
• When clicking on the example editor to edit the code, the dotted outline is only visible on the left side and the corners, but it should outline the entire code block.
• The example editor needs padding between the play and stop buttons and the preview.
• The example editor preview block should match the max width of the page content of 750px.
• Example editor blocks should take on Courier typeface

CONTRIBUTE

• Contribute blue cards should have an aspect ratio of 3:2. This will increase the height of the block.
• The Frequently asked questions page is not populated with content and links the user back to /contribute—should be removed until filled out with content.
• The text within the contribute card color blocks should stay black in monochrome mode and dark mode.
• In monochrome mode, the contribute card should turn white, not stay blue.
• The column gutters should be 40px wide
• Donate page’s iframe should have all rounded corners, not just the top left.
• Donate page’s second block of rich text should have the max-width implemented.
• Donate page’s footer is the incorrect width

COMMUNITY

• The column gutters should be 40px wide
• “All sketches →,” “All events →” “All libraries →” buttons should have the width of 1 column.

SKETCHES

• Missing images should fill the image block with 25% opacity of the community green color.
• Some of the sketches don’t seem to follow the four column grid, see: Sketch #WCCC_Obscure_bg_submission justAnotherAnotherUser. This seems like it should have the width of 2 columns.

EVENTS DETAIL

• Back to back images currently have no padding between each other.
• Inline YouTube videos should have matching width to the max content width of 750px.

LIBRARIES

• The rule separating the page description and the library cards seems to double the weight of the standard rule.

ABOUT

• The rule between “What is p5.js” and “Community Statement” should span the full width of the viewport.
• The description text size “What is p5.js” and “Community Statement” should be Body Large, not Body.

PEOPLE

• If there’s only one alumni, we should remove this section entirely and move cypress into the people section.
• If there’s only one contributor, we should remove this section entirely.
• We should remove the text “Get to know the p5.js team.” It’s unnecessary with the following paragraph of text.
• The larger square image is currently 1 column width of 4. It should instead take on ⅓ width—the text, ⅔ width.

SEARCH RESULTS

• After selecting a filter, it should expand to show an X on the right. Clicking on the X will deselect the filter.
• The top padding of the top UI is inconsistent with the top padding everywhere else globally.
• The large search bar should be sticky to the top, scroll through prototype page.

MOBILE

GLOBAL

Top Navigation Menu

• [Bug] Top navigation box is missing its dividing rule when there isn’t a secondary navigation dropdown. For example, reference the download, home, and people pages.
• Top navigation items in main menu and secondary menu should be Mobile H3 size
• Vertically center the logo, “Menu” text, and hamburger icon within the collapsed main menu box.
• Please refer to documentation for all subnavigation type sizes, spacing, etc. here.

Footer

• Type sizes in footer need to be Mobile Body size 16/20, also update line height

Content Margins / Gutters

• The gutters globally should match the left and right margins at 20px. In some locations, it seems to still be 40px.
• Gutters should be 20px, top padding of sections should be 20px, and bottom padding of sections should be 80px. It’s inconsistent throughout the site.

Cards

• Sketch, Library, Event, Contribute cards are using the wrong type size. The title should use Mobile Body type size and Mobile Caption type size. It’s still defaulting to desktop/tablet type sizing. The current Tutorials card is using the right type size, but please reduce the padding between the image and the title to be 8px and all other cards to be restyled.

HOME

• [BUG] Top navigation box is missing its dividing rule.
• Large sketch card should be full content width, it’s currently a little smaller. See: Sketch #WCCC_Obscure_bg_submission justAnotherAnotherUser.
• Sketch, Library, Event, Contribute cards are using the wrong type size. The title should use Mobile Body type size and Mobile Caption type size.

REFERENCE

• Margins and gutters should be 20px wide. The description text should be Mobile Caption text size and have 4px of padding between the description and the reference title.

REFERENCE DETAIL

• The space between the preview and the code block in the example editor is too big. It should have 20 px of padding, it seems like it might be double the amount. The play and stop buttons also need 10px of padding between each other.
• Related reference items description text should not be underlined upon hover. It should also take on Mobile Caption type size.

ABOUT

• What is p5.js and Community statement text should be in Mobile Body Large size, not Mobile Body size.