@Volker_E I realized that after adding collaborator lists (as a simple paragraph) below the list of team members on individual project pages there's a lot of whitespace between the two elements (see screenshot below). Is it ok if I capture these minor design fixes here or shall I create a catch-all task?

@DarTar @Capt_Swing I will provide the CSS for the highlight cards later today.
The semantic structure in order for you to begin:

<section id="project-updates" class="updates">
	<h2>Recent updates</h2>
	<ol class="list list--updates">
		<li class="update list__col">
			<a href="" class="update__card">
				<h3 class="update__card--title">Initiative for Open Citations</h3>
				<time datetime="2017-08" class="update__card--time">Aug 2017</time>
				<span class="update__card--desc">Veggies es bonus vobis. Developing systems to identify content gaps across Wikipedia languages and recommend contributions based on editors’ interests.</span>
			</a>
		</li>
		<li>…</li>
	</ol>
</section>

Hope that's sufficient for now… Happy hacking!

@Volker_E I noticed the following minor issue on Firefox 58:

Notice that one of the "Read more" links is gone, and another is appearing out of place (bottom left). You can reproduce the issue by zooming in on the page -- it appears at about 170%.

@Volker_E I added sample content for the updates section, using your suggested markup. Does that look good, format-wise and what's your ETA for the CSS?

@DarTar All open requests from the task description are accomplished! Have slightly updated the HTML semantics and classes from above – adding .list and .list__col.

@Volker_E looking great!

@Volker_E I captured above in the checklist the issue with the width of the highlight cards, as discussed. cc @bmansurov. We're targeting some time on Tuesday 2/6 for the launch (depending on availability from SRE for the deployment).

@Volker_E I just noticed the weird spacing issue applies to all elements on a project page that are meant to be on multiple columns, see below:

@Volker_E I removed all the photos and left a comma separated list of names for team members and collaborators, wrapped in a <p> (see this example). Whenever we have time, it would be great to replace this flat paragraph with an inline <ul> (I don't think we have a class for this, do we?)

@bmansurov I couldn't reproduce the scaling issue – not on Win10/Fx57 nor on OS X/Fx58…

@Volker_E thanks for checking. It was happening on the latest Arch Linux.

@Volker_E: thanks for pointing out the issue with the image size, it was on my list of things to ask you. I'll fix them per your specs.

I also noticed the following misaligned footer on Chromium Version 64.0.3282.140 on Arch Linux:

@Volker_E I got a last minute, minor request from Legal, who would like to ask us we add captions with licensing for images and courtesy attribution (even if it's not strictly required, for copyright-free media), whenever we use them. This is particularly true for screenshots or anything that may fall under fair use. I appreciate this is a last minute request, so I might create a paragraph class myself, with a smaller font-size and a grey color. I don't want this to block the launch. Giving you the heads up in case this is something you were already planning to work on, since it came up in previous conversations and it's in @cmadeo's specs (see this example).

@DarTar The class is already there, I've updated the code slightly to provide better markup:

• Recommended way <figure> and <figcaption>:

Put the image into a figure element like this, I've updated events.html accordingly:
From:

<a target="_blank" href="https://www.mediawiki.org/wiki/Wikimedia_Research/Showcase"><img src="img/screenshots/Research Showcase.png" title="Wikimedia Research Showcase" alt="screenshot of videos from the monthly Wikimedia Research Showcase" /></a>

to:

<a target="_blank" href="https://www.mediawiki.org/wiki/Wikimedia_Research/Showcase">
	<figure>
		<img src="img/screenshots/Research Showcase.png" title="Wikimedia Research Showcase" alt="screenshot of videos from the monthly Wikimedia Research Showcase">
		<figcaption class="figure__caption">Screenshot of videos from the monthly Wikimedia Research Showcase</figcaption>
	</figure>
</a>

Resulting in

Btw, you don't need /> at the end of img tags, HTML5 makes this obsolete.

PR is merged and events.html has been updated as outlined above.

@bmansurov The footer issue is captured in https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/62 upstream. As soon as this gets reviewed, I'll update it here too.

In T185278#3947391, @Volker_E wrote:

@DarTar The class is already there, I've updated the code slightly to provide better markup:

amazing, you're the best!!

@DarTar One thing to consider is, you've set all project taglines, but on the “Projects” overview page, you're currently going with only a normal paragraph.
Proposal to change this (and probably shorten it slightly) to:

“We support … to support them” -> “enabling them”

In T185278#3947687, @Volker_E wrote:

@DarTar One thing to consider is, you've set all project taglines, but on the “Projects” overview page, you're currently going with only a normal paragraph.
Proposal to change this (and probably shorten it slightly) to:

“We support … to support them” -> “enabling them”

yes, this was an intentional decision, that we'll probably revisit for consistency, if we have time. Thanks for flagging it!

In T185278#3947391, @Volker_E wrote:

@DarTar The class is already there, I've updated the code slightly to provide better markup: [ ...]
PR is merged and events.html has been updated as outlined above.

@Volker_E I moved the <a> element inside the <figure> tag, because it was generating a weird styling issue with the caption getting an underline when hovering. Hope that's okay, semantically:

									<figure>
										<a target="_blank" href="http://wikiworkshop.org/"><img src="img/screenshots/WikiWorkshop.png" title="Wiki Workshop" alt="banner of Wiki Workshop 2018, hosted at the Web Conference 2018 in Lyon, France"></a>
										<figcaption class="figure__caption">Banner for Wiki Workshop 2018, Lyon, France. Dario Taraborelli, CC BY.</figcaption>
									</figure>

I also noticed that when the window size is reduced there's no horizontal margin for the <figcaption>, which seems wrong. Nothing major but you way want to fix it upstream:

@DarTar Non-margins are a design feature from Style Guide. ;) But there's a connected bug of the figcaption not being put back on horizontal alignment of main contents text. We were discussing the imagery and on smartphones in portrait mode it turned out to work better for our imagery there. Take a moment and give it a try with several images (ignoring the figcaption alignment) before deciding for one or the other.

@Volker_E sounds good!

@DarTar As it's sometimes unnecessary hard to imagine, this would be a preview with figcaption issue resolved:

@bmansurov the site is deployment-ready, including all the final design changes and input from Legal. @srodlund will take a final pass at the copy tomorrow (Tuesday) morning PT, in case there's any last minute typo to squash, and will tick the box in the checklist when she's done. After this, we can go live any time. All the remaining tasks, other than the announcement on social and the lists, are assigned to you.

@DarTar OK, I'll do my items once Sarah is done checking one last time.
I've also made a pull request related to the content.

@bmansurov I have done a final pass, and @DarTar has approved the pull requests. Everything should be ready to go.