Page MenuHomeFreeBSD

website: complete refresh of beastie theme
Needs ReviewPublic

Authored by mark_freebsdfoundation.org on Nov 25 2025, 11:26 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Jan 15, 4:06 AM
Unknown Object (File)
Thu, Jan 15, 2:30 AM
Unknown Object (File)
Wed, Jan 14, 10:34 PM
Unknown Object (File)
Wed, Jan 14, 9:53 PM
Unknown Object (File)
Wed, Jan 14, 1:38 AM
Unknown Object (File)
Wed, Jan 14, 1:37 AM
Restricted File
Mon, Jan 12, 4:00 PM
Unknown Object (File)
Mon, Jan 12, 11:46 AM

Details

Summary

Sponsored by: The FreeBSD Foundation

Diff Detail

Repository
R9 FreeBSD doc repository
Lint
Lint Skipped
Unit
Tests Skipped
Build Status
Buildable 69821
Build 66704: arc lint + arc unit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

On this point specifically:

You can't imagine how long it's been trying to find people to help move this along :)

Have you asked for review? I recall seeing some discussion about this on mailing lists a long time ago when it was in its infancy and then radio silence. I was completely unaware this review existed, or that there was an up-to-date live site, or that there was an intent to land this soon, until someone happened to mention the site on IRC and I went digging.

I am glad that this is now moving and working as I tried to suggest months ago. Having things in the public as possible is essential spirit of the open source world.

Other bug reports (all on Safari):

  • There's a stray submit button in the search box:
    image.png (136×470 px, 12 KB)
  • Hovering over one of the download buttons colours the text the same as the background:
    image.png (224×552 px, 27 KB)
  • The <label> within the navbar dropdown doesn't set cursor:, and Safari's default stylesheet causes it to end up as a pointer rather than a hand, so you only get the hand if you hover over the non-text part of the dropdown (the <a> but not the <label>)

Yes @jrtc27 — they're broken bits. Let's fix them before we go-live. If you're able to sort them, you're most welcome to. If you're not into CSS-wrangling, just say, and I'll take a look 👍

I've made some content and mechanical changes in my local branch, but when I make clean website; firefox website/public/index.html renders just broken black and white.

.gitignore
6 ↗(On Diff #168212)

Why are we adding these?

website/config/_default/hugo.toml
18

This is a custom parameter, we should document this.

19

The description should be different than the title on line 19. I don't have strong feelings about what it should say, but I do have an old FreeBSD foundation fridge magnet that says "RELIABLE. STABLE. SECURE."

20

This is also a custom parameter, we should document this.

website/content/en/about.adoc
31

Th

I've made some content and mechanical changes in my local branch, but when I make clean website; firefox website/public/index.html renders just broken black and white.

I tend to test it locally with 'make run' (in the website directory) and point a browser at the hugo server running on port 1313. You could do 'make build' which will make the public site and should be browsable like that, I would think (I have not tested it that way, although the mock site running at freebsd.fortasse.cloud is just an rsync of the public directory running in a Caddy container)

.gitignore
6 ↗(On Diff #168212)

It can be ditched. I've got a local ignore for them — they were added whilst developing to make sure others didn't accidentally pull these sorts of files in (after a .DS_Store leaked in). Personally I have prettier installed locally (a node_module) which has helped finding mistakes in Hugo templates. I didn't want it pulling in by accident in a commit — but as mentioned, I have a local git ignore. This can be dumped or left so others don't make a mistake in future. I'll leave that as your call :)

website/config/_default/hugo.toml
18

Taken from the original site. I think it's something Sergio was perhaps using for testing. I've a feeling it might now be redundant.

19

Where does it appear on the site when rendered? It might just be in metadata (this hasn't changed from the original site AFAIK).

20

Also not touched in this edit. But yes, I agree, it should be documented why it's here.

.gitignore
6 ↗(On Diff #168212)

Probably they are useful, I just wanted to know what they are. Thanks!

website/config/_default/hugo.toml
19

I think it's the second appearance of this text that appears when you hover the mouse over it in Safari.

Afaik, this is the doc:
https://gohugo.io/methods/page/description

website/config/_default/hugo.toml
19

I think it gets used like this:

Screenshot_20251230_145528_Discord.jpg (294×925 px, 42 KB)

Fixes: copy in 'why' boxes, remove Netflix

Just looking at the homepage there is some very strange use of whitespace: specifically, there is a lot of extra vertical whitespace in various places that look unbalanced and make the content too spread out, and there is vertical whitespace lacking in the feed headings. See the attachments for before and after fixing these oddities that make the design feel more cohesive, polished and readable.

@jrtc27 Where did you make these changes? I can see from the PDFs it is a 'nicer' look — I'd like to put your changes into this edit. Feel free to either ping me the changes as a diff, or just tell me and I'll update the files :) Many thanks!

hi!

The main bit of feedback I have is "please don't mix company stuff with project features." We have plenty of other large companies that contribute to freebsd; I think having a big netflix logo and only mentioning netflix in networking is doing everyone else a disservice.

I highly recommend finding a replacement image for networking, remove the Netflix mention and just mention "Many companies that power the Internet.." or something to that effect.

Thanks!

Fixed @adrian ! Many thanks for the input.

docs not invited to review, is the omission intentional?

https://reviews.freebsd.org/project/profile/72/

People who are willing to review documentation changes (opt-in)

I should add: in my experience, omissions are most often accidental :-)

(OT: Phabricator is complicated. Discovery, including discovery of things that have human members, is sometimes not easy. I look forward to use of Forgejo.)

I am trying to keep reviewers and consensus to a 'right size' @grahamperrin :)

Fix search box as per jrtc27 report. Fix community box copy.
Fix download links background colour.

Remove a section: clutter. Fix pointer on menus.

website/themes/beastie/static/images/Netflix-Logo.png
1 ↗(On Diff #168212)

If we're not using this logo anymore we should not put it in the tree

mark_freebsdfoundation.org added inline comments.
website/themes/beastie/static/images/Netflix-Logo.png
1 ↗(On Diff #168212)

I'm still waiting on confirmation about usage from Netflix. That may or may not happen. For now I don't mind a few kb making it in when it _might_ be used soon. It'll just sit in the dir without being referenced. However, if you really want it removing I can, of course.

Just looking at the homepage there is some very strange use of whitespace: specifically, there is a lot of extra vertical whitespace in various places that look unbalanced and make the content too spread out, and there is vertical whitespace lacking in the feed headings. See the attachments for before and after fixing these oddities that make the design feel more cohesive, polished and readable.

@jrtc27 Where did you make these changes? I can see from the PDFs it is a 'nicer' look — I'd like to put your changes into this edit. Feel free to either ping me the changes as a diff, or just tell me and I'll update the files :) Many thanks!

I just hacked it up live via Inspect Element rather than figuring out how to do it the actual website sources. Also has the benefit of giving instant feedback so it can be a more interactive process of playing around with it.

website/themes/beastie/static/images/Netflix-Logo.png
1 ↗(On Diff #168212)

But what they think doesn't matter? It's not appropriate to use it on the front page to advertise networking because it shows heavy favouritism, so where would it even be used? It shouldn't be here unless there's a clear need for it.

Another minor issue is visual distinction between elements. The same colour and text styling (when not hovered over) are used for headings and links here:

image.png (260×1 px, 49 KB)

At least for me, my brain thinks those headings are links and wants to be able to click on them, but you can't, and don't find that out until you hover over them to try to click on them.

Links are also inconsistent. In most places they're underlined on hover, however in the "Why FreeBSD?" section they're always underlined (in fact, this is the default, they're just overridden to not be always underlined for the various other specific places):

image.png (414×1 px, 84 KB)

The links in the navbar drop-downs also feel pretty "dead" (no interactivity when you hover over them) but that's an issue inherited from the docs theme.

mark_freebsdfoundation.org added inline comments.
website/themes/beastie/static/images/Netflix-Logo.png
1 ↗(On Diff #168212)

I disagree, and I'm more than happy to explain the rationale why it is not favouritism. We should talk about this versus type, it's much better to discuss differences of opinion :) Nonetheless, I've removed it.

Looking through the markup I see there are slashes placed at the end of self-closing tags such as <meta>, <link>, <img> and others (and sometimes not). But no HTML standard has ever specified that slashes be put there. This is a holdover from when people thought we'd all be using XHTML/XML for web pages. While allowed for that reason, putting a slash there has no meaning, it does nothing, is not required and browsers ignore it. If anything, the slash can cause problems for unquoted attributes. As a long time web developer, I suggest these be removed.

Looking through the markup I see there are slashes placed at the end of self-closing tags such as <meta>, <link>, <img> and others (and sometimes not). But no HTML standard has ever specified that slashes be put there. This is a holdover from when people thought we'd all be using XHTML/XML for web pages. While allowed for that reason, putting a slash there has no meaning, it does nothing, is not required and browsers ignore it. If anything, the slash can cause problems for unquoted attributes. As a long time web developer, I suggest these be removed.

Many thanks for this @rob_belics.com — should be fixed now! :)

Rebase. Remove .gitignore changes (not required)

mark_freebsdfoundation.org added inline comments.
website/config/_default/hugo.toml
18

I'm not sure this is really useful any more. It can be catered for with {{ if hugo.IsServer }}.

I'll look at removing this. For now it causes no harm.

19

I did a bit more digging into this. It's only used in layouts/_partials/site-head.html and only when it's the homepage. It's for search engine results pages (SERPs). If you particularly want to indulge yourself @ziaee https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta :)

20

This is a hangover from docs site. I'll remove it. It's not used at all in the website templates.

hugo.conf: remove unused params variable

website/config/_default/hugo.toml
19

Thanks!

site-footer: those stray }} shouldn't be there

You probably already do this but occasionally run the HTML through the W3C HTML Validator for that list of errors and warnings: https://validator.w3.org/nu/
And then there's the CSS Validator: https://jigsaw.w3.org/css-validator/ A lot of those vendor extensions can be removed.

You probably already do this but occasionally run the HTML through the W3C HTML Validator for that list of errors and warnings: https://validator.w3.org/nu/
And then there's the CSS Validator: https://jigsaw.w3.org/css-validator/ A lot of those vendor extensions can be removed.

CSS cleanup is planned after this release Rob, yes. For now we'd like to get something new out there, and iterate on it. If it's working, I'm happy :)

Really appreciate your eye for details! If you have time, please keep an eye on this and feel free to make suggestions. I'm making a post-implementation todo list of 'none blocking' things that can be addressed later. Once it's gone live and is in the proper docs git repository it'll be much easier for everyone to make contributions too, which is what I'm very much hoping for.

ziaee accepted this revision as: ziaee.EditedMon, Jan 12, 10:22 AM
ziaee added reviewers: releng, security, maxim, ebrandi, wosch.

I think we have made a lot of progress on this, and the greatest points of controversy are resolved. To me, if this is acceptable to the major stake holders, I can merge this and we can continue iterating in the tree.

Turning over to the major stakeholders: releng, security, translation, and webmaster.

This revision is now accepted and ready to land.Mon, Jan 12, 10:22 AM
This revision now requires review to proceed.Mon, Jan 12, 12:49 PM

Remove large bottom margin from hero section.

Hello group!

Is the community Wiki part of this new theme revision

I noticed this contrast between the community Wikipedia page and this new theme revision https://wiki.freebsd.org/

At the bottom of the page

{F141925374}

site-footer: Fix broken link for security

Hello group!

Is the community Wiki part of this new theme revision

I noticed this contrast between the community Wikipedia page and this new theme revision https://wiki.freebsd.org/

At the bottom of the page

{F141925374}

Not this release, no.

@vladlen @andy would you gentlemen please check it out? I'd love to hear our multi-lang support doesn't have any major issues after these changes.

@vladlen @andy would you gentlemen please check it out? I'd love to hear our multi-lang support doesn't have any major issues after these changes.

It's the same as it was - the exact lang files have been copied over, and @vladlen has been brilliant at keeping up with the changes. There are more improvements to come, which will be implemented post go-live (and they're improvements on what we had before).

You can see a staging version at https://freebsd.fortasse.cloud - please do take a look.

We would like to get this live before the end of the month, then once it is, continuously improve on things as more and more users experience it. The intention is this is *not* a 'done' site like the original, we intend to keep it alive and improving :)

Many thanks for your time folks!