As seen on the mockups.
This can help: https://gradientlab.space/

To style the site as well as I can I'd love to see a more populated development version!

Concretely:

Images

• Member images - Currently no member pictures are displaying (see for example the Supporters page)
• Alert image - See the Front Page
• Featured item images - See the Front Page
• Featured news images - See the Front Page

Content

• Footer - Currently only one line, whereas the footer in the mockups contains a logo, a nav, etc

Pages

• About (nav.nav) doesn't exist, shows a default (404?) page with a sitemap, article archives, and article categories
• Who We Are (nav.nav) doesn't link anywhere (but there are sub-links). See issue #2
• Projects (nav.nav) is empty apart from a .page-intro
• Volunteers (nav.calls-to-action) is empty
• Partners (in the mockups) is on the site (shortlink /our_partners/) but doesn't appear in any nav

Change all temporary colors (alert, buttons, text...) to the real Mockup colors

This is the Mockup's font:

This is Noto Sans, which I started with because it supports many alphabets:

I'm not convinced by Noto. It's less "rounded" than the Mockup's font and it's hard to work with because it comes in only two weights on Google Fonts: 400 and 700. 700 is too bold.

I think that Montserrat would be a better alternative:

It's still not perfect (I can't find a font with a round "a") but improves it a lot, I think!

Working on it, will make a PR soon

I see that <?php main_nav(); ?> in header.php generates a list with a sub-links for secondary links (namely "Leadership", "Community" and "Supporters" under "Who We Are").

However these do not appear in the Mockups. Are they displayed on hover?

If they are, how do you want them styled? A dropdown?

Increase and homogenize white space in layouts

In the featured partners grid, the logos have a border-radius.
This style should only apply to images in homepage sections.

• Increase indent for sub-links
• Reduce line-height
• Smaller text for sub-links

Add media queries to properly display the site on smaller screens.

On the Supporters page (Tier 3 donors section), this PHP error message appears:

Warning: array_merge(): argument #1 is not an array in template-donors.php on line 83

Nav has a white background and banner message isn't vertically centered

Check that the div stretches to display the image (not currently displayed even though a has a height)

Animate buttons and CTAs on hover.

The color could change, and/or we could add a drop shadow, and/or we could move the buttons up by a pixel or so.

• Split layouts.styl into different page-specific layouts
• Check that styles overall are on the right sheets and properly commented out

• Spacing around headings
• Page intro padding

Style individual pages for video post type

Make the nav dropdown overflow its parent element so that the scrollbar appears right below the nav.

Currently the scrollbar appears very low because of the dropdown:

(any other dropdown solutions - we're using visibility: hidden at the moment - are welcome!)

Post type conflicts with page slug. Current workaround is to give the partners page a slug of "partners"

I'll style the close button.

@bogreudell can you take care of the script?

Make sure the footer sticks to the bottom of the viewer in case we have short content, like this:

This is only dummy content but we might have short pages, for example a 404 or the like.

@bogreudell how do we want the alert section to display on mobile?

On desktop there are roughly two columns: the image on the left, and a column with the text on the right.

On mobile, the text reduced to only 50% width could take almost a full screen's height:

I think we can either:

1. choose to place the image above the text
2. choose to show only the text's heading on mobile, and hide the details:
   

In wt-section, the ::before colored backgrounds overflow and create horizontal scrolling.

I couldn't figure out how to fix it yet. Any ideas?

We need the navigation links text to be black on most pages, but to be white when the page starts with a .banner hero image.

We can unfortunately not so this in pure CSS (I tried but failed).

The layouts seem a bit tricky to tamper with because the nav is included as header.php and the (occasional) banner is on the specific page template (for example front-page.php). It's hard to relate the two of them (or maybe in PHP?)

One option I see remaining would be using Javascript. Do you know how to do something like this?

Some are echoed in the background style of divs and other elements. This is to make them crop more easily (hint: user background-size:cover;)

In the future we will possibly have new volunteer developers contributing to the Wikitongues website, and we may also expand our website and adapt based on analytics. Adopting a CSS class standard will make these changes easier for us.

The BEM (block-element-modifier) methodology is one of the most popular and simplest standards. BEM defines a block as any fully reusable, independent component; an element as a part of a block that serves a single purpose as part of that block; and a modifier as a variation of a block or element. Key aspects of the BEM convention are:

• Blocks, elements, and modules are designated by classes using the naming convention .block, .block__element, .block--modifier, and .block__element--modifier.
• ID's are not used in CSS code.
• Blocks can be nested inside of other blocks, but CSS rules should not be nested. This keeps the CSS code readable and its behavior predictable.
• Elements should not be nested inside elements.

More info:

• https://en.bem.info/methodology/
• https://css-tricks.com/bem-101/

Considerations for us:

• Refactoring would be a significant task--we have a lot of nested CSS. However, it could pay off by improving maintainability.
• We'd have to come up with standards for dealing with pseudo-elements and media queries. Pseudo-elements (used for our background shapes) could mostly be placed using something similar to .block:nth-child(x), or in some specific cases using modifiers (e.g. .block--yellow-background-rect:after). Media queries could generally be defined individually for blocks (we should define variables for screen widths).
• Stylus gives us an elegant way to write rules for a block and its elements and modifiers. The compiled CSS is non-nested.

Please share your thoughts, any other considerations, or any alternatives that you'd prefer.

• Populate the form, the page heading and the resources on WP
• Create page layout with form to the right of heading and resources (might have to change markup)
• Style form elements

The goal here is to sync the Community Table in the Wikitongues CRM with the Members post-type, in order to automate updates to the community page.

note to myself

Style video post type archive