Rework toward the minimal mockup #12

Open
opened 2024-11-15 11:53:29 +00:00 by btlogy · 7 comments
btlogy commented 2024-11-15 11:53:29 +00:00 (Migrated from code.lafs.eval.latfa.net)

As discussed with @meejah and Tiff, we should get rid of the big pictures and the pattern.

As discussed with @meejah and Tiff, we should get rid of the big pictures and the pattern.
btlogy commented 2024-12-17 15:25:59 +00:00 (Migrated from code.lafs.eval.latfa.net)

Mostly done in #13, #14 and #15
Better images should be PR soon...

Mostly done in #13, #14 and #15 Better images should be PR soon...
btlogy commented 2025-05-02 08:40:44 +00:00 (Migrated from code.lafs.eval.latfa.net)

In #21, @hacklschorsch has suggested that the custom CSS might have broken the initial responsive design...
I wonder if we can review this to simplify our customization.

In #21, @hacklschorsch has suggested that the custom CSS might have broken the initial responsive design... I wonder if we can review this to simplify our customization.
btlogy commented 2025-05-02 09:00:35 +00:00 (Migrated from code.lafs.eval.latfa.net)

In #23, @hacklschorsch is proposing to avoid the system-ui font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)?

  • Currently (w/ systemui):
    image
  • Mock-up:
    image
  • Proposed (#23):
    image
In #23, @hacklschorsch is proposing to avoid the `system-ui` font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)? - Currently (w/ systemui): ![image](/attachments/9e5e439e-7d3a-44a5-889a-fdf91179185b) - Mock-up: ![image](/attachments/cd2f042c-c703-4fc0-95cb-8d8fb529a012) - Proposed (#23): ![image](/attachments/371415a6-1b8e-43e7-ac71-ccaa70015bc7)
btlogy commented 2025-05-02 09:07:55 +00:00 (Migrated from code.lafs.eval.latfa.net)

In the meantime, we still miss a few changes to match the mock-up:

  • The "Get Involved" section should by 2x2 instead of 3x1 (with an additional item):
    image
  • The "About" section should be reduced to a single article:
    image
  • The footer may be reworked (at least the copyright date):
    image
  • Get rid of the bullet points in all items:
    image
In the meantime, we still miss a few changes to match the mock-up: - The "Get Involved" section should by 2x2 instead of 3x1 (with an additional item): ![image](/attachments/5d94edac-fb4b-45d6-9490-4fe44cdfce22) - The "About" section should be reduced to a single article: ![image](/attachments/2b3d5c2d-d2bd-41f9-8d4c-93578873a1e9) - The footer may be reworked (at least the copyright date): ![image](/attachments/71d0d11c-f0d7-4941-8298-9d6366f1feb8) - Get rid of the bullet points in all items: ![image](/attachments/cd2f042c-c703-4fc0-95cb-8d8fb529a012)
hacklschorsch commented 2025-05-05 13:36:14 +00:00 (Migrated from code.lafs.eval.latfa.net)

In #23, @hacklschorsch is proposing to avoid the system-ui font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)?

If I am not mistaken, this is a misunderstanding - system-ui is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using system-ui on different OSes and browsers leads to different fonts being used.

The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks

> In #23, @hacklschorsch is proposing to avoid the `system-ui` font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)? If I am not mistaken, this is a misunderstanding - `system-ui` is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using `system-ui` on different OSes and browsers leads to different fonts being used. The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks
btlogy commented 2025-05-06 11:37:09 +00:00 (Migrated from code.lafs.eval.latfa.net)

In #23, @hacklschorsch is proposing to avoid the system-ui font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)?

If I am not mistaken, this is a misunderstanding - system-ui is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using system-ui on different OSes and browsers leads to different fonts being used.

I do not think there is any misunderstanding about what the system-ui is. But if I remember correctly, Tiff's design was explicitly using this font (in the code, not the screenshot).

The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks

So as I said: we can go back to use the fonts provided by the theme if it makes sense (and I believe it does).
My comment was to remember why we have switched to system-ui in the first place: I was merely back-porting Tiff's choices (or more likely the defaults from Figma).

> > In #23, @hacklschorsch is proposing to avoid the `system-ui` font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)? > > If I am not mistaken, this is a misunderstanding - `system-ui` is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using `system-ui` on different OSes and browsers leads to different fonts being used. I do not think there is any misunderstanding about what the `system-ui` is. But if I remember correctly, Tiff's design was explicitly using this font (in the code, not the screenshot). > The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks So as I said: we can go back to use the fonts provided by the theme if it makes sense (and I believe it does). My comment was to remember why we have switched to `system-ui` in the first place: I was merely back-porting Tiff's choices (or more likely the defaults from Figma).
btlogy commented 2025-05-07 07:26:52 +00:00 (Migrated from code.lafs.eval.latfa.net)

In #23, @hacklschorsch is proposing to avoid the system-ui font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)?

If I am not mistaken, this is a misunderstanding - system-ui is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using system-ui on different OSes and browsers leads to different fonts being used.

I do not think there is any misunderstanding about what the system-ui is. But if I remember correctly, Tiff's design was explicitly using this font (in the code, not the screenshot).

The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks

So as I said: we can go back to use the fonts provided by the theme if it makes sense (and I believe it does).
My comment was to remember why we have switched to system-ui in the first place: I was merely back-porting Tiff's choices (or more likely the defaults from Figma).

I was not 100% sure that system-ui was comming from the mock-up. So I went back to it and it's not there!
My bad thus @hacklschorsch: I've likely chosen system-ui myself!

Here are the font I've managed to collect from the mock-up:

  • Montserrat for the top logo and the buttons
  • Open Sans for the news articles
  • Ag for the rest

I'm going to merge #23 and see with @hacklschorsch if we can improve the fonts differently.

> > > In #23, @hacklschorsch is proposing to avoid the `system-ui` font for good reason. But it was the one proposed by Tiff in the mockup. So should we do use the default again (it does not look that bad to me)? > > > > If I am not mistaken, this is a misunderstanding - `system-ui` is an alias that stands for different fonts, depending on what OS you are using. Tiff's (possibly macOS?) screenshot is only valid for macOS - using `system-ui` on different OSes and browsers leads to different fonts being used. > > I do not think there is any misunderstanding about what the `system-ui` is. But if I remember correctly, Tiff's design was explicitly using this font (in the code, not the screenshot). > > > The theme we use already does that, but in a bit more sensible manner, differentiating between the defaults for serif and non-serif fonts: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#font-stacks > > So as I said: we can go back to use the fonts provided by the theme if it makes sense (and I believe it does). > My comment was to remember why we have switched to `system-ui` in the first place: I was merely back-porting Tiff's choices (or more likely the defaults from Figma). I was not 100% sure that `system-ui` was comming from the mock-up. So I went back to it and it's not there! My bad thus @hacklschorsch: I've likely chosen `system-ui` myself! Here are the font I've managed to collect from the mock-up: - `Montserrat` for the top logo and the buttons - `Open Sans` for the news articles - `Ag` for the rest I'm going to merge #23 and see with @hacklschorsch if we can improve the fonts differently.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: tahoe-lafs/web-landing-page#12
No description provided.