Foundation 테마의 현대화

The design team are in the process of making small but powerful changes/tweaks to the foundation theme to align a bit closer to modern web standards. To view these changes live on meta, join this group:

https://meta.discourse.org/g/modernized-foundation

We will be making this change live through the new Upcoming Changes feature available in Discourse. This will allow site owners to enable the changes for any group they specify, in order to test the roll out of the changes without the fear of possibly breaking themes or current customizations.

What will change?

Header shrinks in height

We have decreased the site of the header along with some of the icons & avatar slightly to utilize onscreen real estate.

Default buttons

We are moving from a grey default button background to a transparent / “secondary” background with a border.

  • removal of grey background
  • addition of borders
  • icon color matches text color
  • buttons now have a set height

Create new topic button on topic list page

Matching Horizon and giving this a “CTA” background color of tertiary

Lots of gray background removal

Topic list

  • removal of 3 px thicc top border
  • decrease font size of table header data
  • consistent color for table data items
  • color value changes to read/unread
  • slight increase in font weight to unread

Category boxes

  • left alignment of text
  • removal of thicc left colored border
  • slightly rounded badges
  • thinner border on box

Nav bar

  • The nav pills on topic list pages will be the same height as buttons in this zone
  • darker color text & icon on select kit

Sidebar

  • icon & text match color
  • darker text & icons
  • lighter “active” background
  • heavier active font weight

Welcome banner

  • balanced spacing
  • added variables for easier left/right/center alignment via customization
  • header font weight decreased
  • sub title font size decrease

Calendar

  • removed grey background from “buttons”
  • use grey only to signify “active”
  • switch to “bordered transparent” button styling

Drop downs

  • padding added to drop down container
  • height, padding, gap now matches sidebar items
    • unification of “clickable lists”
  • border inherits --d-border-radius variable

New Variables

Some of the changes here will be introduced via additional variables added into core.

Welcome banner alignment

The alignment of the welcome banner will now be able to be changed via:

// default
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// custom
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Button height

We will now have a set button height via:

// default
  --button-height: var(--space-8);

Font smoothing

We are already doing this in Horizon, it makes sense to bring to foundation.

// new default
--webkit-font-smoothing: antialiased;
38개의 좋아요

the gist button dropdown has a scrollbar (overflow on the fk-d-menu maybe?), and probably doesn’t need the same min-width: 200px as other such dropdown-menu classes.

edit: nevermind, fixed already :smiley:

6개의 좋아요

I can see the modern foundation theme, but why do I still have the old categories layout?

I think Meta doesn’t use “Boxes with subcategories” but “Categories only” in their Desktop category page style site setting.

1개의 좋아요

Oops, I assumed the screenshots were taken on meta but I didn’t even think of checking it.


Small but weird behavior. On the regular theme, when we release the mouse button on , it instantly triggers the show or close sidebar’s animation.

On the new theme, when we release the mouse button on when the sidebar is closed, there’s a split second of waiting before the sliding animation is triggered. Doesn’t happen if we click the icon when the sidebar is visible.

I’m probably hallucinating :thinking:


Can I leave the group to compare changes with the old theme? I don’t see the leave option.

2개의 좋아요

oh yes, fixed that… should be able to leave at will now

4개의 좋아요

Would you please allow me to leave the @modernized-foundation group.
Edit: Now, after leaving the group, I can add a comparison screenshot of the new topic button.
image

It seems some icon colors don’t work well with the wcag palette.
image

And, for example, the group selector on the top left of the group page doesn’t really support 2 lines.

This is how it looks when I log out.

4개의 좋아요

I like most of the changes. They are subtle. Some I don’t even see the difference unless I look at the CSS values :smile: (sidebar icon and text colors, topic list read and unread colors)

Before / After
image image

I like the emphasized new topic button. I actually customized it like that on my forum a long time ago (until my code broke and I didn’t bother fixing it).


Before / After


I also like this; At least on dark palette, the dark blue on dark grey was a weird pairing.


Before / After

While I like the new button style, I feel they lack contrast with the background in certain areas, especially the topic footer.
It looks messy. The buttons don’t look like they belong to a specific section, unlike the previous version. They just kind of… sit there. I don’t know if it makes sense.

7개의 좋아요

This seems to work on the read and topics activity in some screen sizes

But once I reduce the width a little, “Replies” and “activity” seem too big (This is also a problem on /latest)

There is a similar problem with “updated” and “activity” on /my/activity/bookmarks

Another example where the icon and text color do not match is the expand button on my profile

This is how it looks when I leave the group:

I think you didn’t mention that not only the font size of the table headers, but also the size of the numbers in the Replies, Views, and Activity columns, seem to be decreased.

I think the icon in the language dropdown is now very large in relation to the text.
Before:
image

After:
image

7개의 좋아요

Thank you so much for the before/after. I thought it was missing from the OP.

Both these changes look weird: the after side looks much less contrasted and may cause A11y issues, or?

I’m heading to the new group for a test drive!

4개의 좋아요

The word “link” in the topic map is only partly shown after I join the group:

Screenshot taken at Add link to sidebar category setting to new admin menu in categories section of the sidebar

And the text in this modal is difficult to read on hover. I think the contrast was better before

1개의 좋아요

I’m really looking forward to the changes to the default style, when will it be released approximately?

1개의 좋아요

검색 입력란과 제출 버튼이 눌려 있습니다!

squish!

수정: 모바일에서만 발생하는 문제입니다

5개의 좋아요

지금까지 모든 피드백과 버그 찾기가 훌륭했습니다. 업데이트해 주셔서 감사합니다.

5개의 좋아요

좋은 지적입니다. 저도 새로운 버튼 스타일이 꽤 마음에 드는데, 이 섹션에서는 버튼이 너무 많이 모여 있어서인지 어딘가 어색하게 느껴집니다.

5개의 좋아요

읽지 않은 글의 폰트 굵기가 읽은 글보다 더 굵습니다.
데스크톱에서는 잘 모르겠는데, 모바일에서는 눈에 띕니다.

제 생각에는 약간 거칠어 보입니다.

대부분의 포럼 소프트웨어에서 볼 수 있는 표준적인 굵기 차이보다는 색상의 변화만으로 처리한 디스코스의 방식이 더 우아하다고 생각했거든요.

이제는 두 가지가 모두 적용되어 있습니다. 차이는 미묘하지만, 저는 색상 변화만 적용되는 것을 선호합니다 :paintbrush:

3개의 좋아요

최근 변경 사항은 곧 다음 PR에서 배포될 예정입니다:

4개의 좋아요

최종 버전은 대략 언제 출시될 예정인가요? 이 스타일 업그레이드를 정말 기대하고 있습니다.

정말 기대가 크신 것 같습니다. 현재 변경 사항은 실험 단계이지만, 오늘 바로 Modernize Foundation theme를 활성화할 수 있습니다: Upcoming Changes

4개의 좋아요