@DarTar We've been discussing different static site generators in T164449 – without finding the perfect solution yet.

@Volker_E per our email discussion, it sounds like neither of the nav/template related requirements are going to be available for launch. Should we keep this task open in case other requirements emerge, or close it for now?

@Capt_Swing If you're referring to the two points in the task description, my plan is to give the CSS/JS highlight another shot.

@Volker_E that makes perfect sense. In fact, I realized that I was being premature and added two other requirements (also sent to you in email). Thanks for being on top of it!

@Volker_E @cmadeo any progress on this task since we last touched base on October 17?

@Capt_Swing I'm looking into it later this afternoon on the technical side.

@Capt_Swing + @Volker_E, sorry I wasn't clear on what to move forward with design-wise. Happy to jump back in if you need any additional design help!

@Capt_Swing
High-prio 1: https://github.com/wikimedia-research/landing-page/pull/1

Generally speaking, we're not doing ourselves from extensibility POV the biggest favor starting with a copy of Style Guide. It would have been better to be involved from the beginning to come up with a more modular solution. It's not a big problem right now, but it might become one if the Research Page gets further built upon.

Ad prio 2: @cmadeo We should reduce font-size slightly/treat differently at the mentioned cards of https://wikimedia.invisionapp.com/share/7XD6569D4#/screens/253718274 from an information architecture and weighing perspective…?!

@Volker_E we certainly could, although these all link out to pages where the same title will be the H1 for that page. I sort of like the large titles, but if it feels overwhelming or is too much of a hierarchy issue I can scale them back a touch.

@Volker_E Couple questions:

• when do anticipate completing the implementation of the "preview cards"?
• We'd like to provide team member cards with a headshot, name, and title. I've repurposed the color-palette color-section class to approximate this. It works fine for name and title, but I think I need some help with image formatting. Here's what I have so far. @cmadeo's implementation is better (see the team section of this mock), but I don't know if implementing that is in-scope, since I didn't specify it at the outset.
• finally, there's one additional element that we'd like to adopt from @cmadeo's mock, if possible. It's the three-column link list under the "Resources and Links" section of this mock. I don't know whether this can be implemented in the current framework, or if it requires additional classes.

Sorry for adding new requirements at this late stage; I'm not super familiar with what's possible in the style guide framework, and I'm slowly discovering that elements from Carolyn's mock which I assumed were already part of the framework will actually (probably?) require additional development.

@Capt_Swing The next PR is in, it brings the team member “cards” on par with the design template with minor amendments, the font-size for the member descriptions is a tad bigger and the color contrast of the descriptions is a bit higher – following our subtle colors which align to the Web Content Accessibility Guidelines.
https://github.com/wikimedia-research/landing-page/pull/2

@cmadeo Did you decide against the section breadcrumb (example: “About” above “Research team”) with a specific idea behind?

@Volker_E Yeah, I think we decided against that after having a way to jump to the resources was added under the title of some subpages.

@Volker_E I added content using the new team member and featured project cards. I'm running into a small alignment problem with both classes: They align on the bottom instead of the top. This creates 'crooked' rows when there are different amounts of content on adjacent cards.

Examples

• team page: Aaron Halfaker's card is higher than the two following cards because his title is 2 lines instead of 1.
• projects page: most project descriptions are slightly different lengths, leading to crooked rows.

Can you update the styles so that they are aligned at the top of each card, instead of the bottom? We would need this done by Thursday, November 30th, when we plan to show the landing page to stakeholders.

Also, @Volker_E Have you done any work on the 3-column link list class (see ticket description above for details)? Looking at your commit history, I don't think you explicitly created this as a class. I tried to 'fake' it by using featured project cards, but it didn't work well, for two reasons:

• The horizontal alignment issue mentioned above (it will only be aligned if each column has the same number of items under it, which will not always be the case)
• Too much whitespace between section title and items (see the example at the bottom of this page).

Please let me know as soon as you can whether you can implement this class per @cmadeo 's comps by Thursday, November 30.

@Capt_Swing The alignment issue is now resolved on desktop. There's a small glitch when resizing with the images yet. More to come…

Hi all, I just took a look around the Research landing page and am getting so excited!
There are a few little design (primarily alignment and spacing) tweaks that I thought might be helpful to point out:

Homepage
Title and description area

• The margin between paragraphs and also between the body text and the title could benefit from a bit more breathing room, perhaps 2rem 0 0?

Featured Projects

• The page title and featured project titles should be the same size and weight, or if we'd like them to be different the featured project title should be decreased more (perhaps 24px (2.4 rem) and 500 weight)
• The line height looks a bit tight on the subtitle text for the featured projects. Could it be increased to 1.6?
• The margin between the card title and description should be 10px.
• The card descriptions should be a standard height (perhaps five lines) so that the cell takes up the same space regardless of text length.
• Ideally the 'read more' links would all be bottom aligned with 20px of margin between the description box and the link.

Research team

• Currently the profile images are of varying heights, would it be possible to mask them to all be a single standard height? Also if you need help with this I can easily edit the images and send them back to you.
• The name and title text feels a touch too large, could it be pulled back to 1.4 / 14

These changes above would if accepted would also be applied to the shared styles across the site.

Please let me know if you have any questions or need any help! Thanks!

@Capt_Swing Moved the maintainability topics to T181588 as the site is built now with working navigation and they are therefore for the time being and the launch no priority.

@cmadeo Ad more breathing room, I will increase it, but 2rem 0 0 seems too much, we also need to think about mobile and that we might end up with a lot of vertical scrolling. I also don't want to care about every margin on different device factors again and adapt it per media query if possible.
Going for 1.2rem 0 0 for now.

@cmadeo In the style guide we went for a 8px base, we should stay with it if there are no strong arguments for changing.

Ad Featured Projects: @cmadeo We don't have Charter in 500 available, only 400. Reduced the font-size anyways.

@Volker_E, okay, this all sounds reasonable. Thanks!

Feedback from earlier today by @DarTar - headshots get cut off on mobile.

@Volker_E just a quick note that I see these changes and am grateful. Please keep me posted! Thanks, J

@cmadeo I thought about having specifically prepared pics, but it makes more sense to keep the ones from Commons in as they are all a little bigger and therefore scale properly on HiDPI screens. Got the different dimensions pretty much under control with only CSS.

@Volker_E that sounds ideal, thanks!

@DarTar Grayscale is in, it also features a hover effect on wider screens (touchscreens are exempt!) showing the normal pic.