Update header

[ngsilverman]

I think the current header is pretty busy and pretty big. With this first change I'm hoping to shift the focus back on the most important elements: the title of the publication, the main menu, and the rest of the content. I want to be clear that I don't love this new design I'm proposing, but I think it's an improvement, and that it creates a solid foundation to further improve upon in the near future.

A few notes:

• I added a "kulupu pi toki pona" tagline under "lipu tenpo". This could say something else or be removed entirely. The idea is to give just a little bit more information about what the website is since this is the first thing visitors are likely to read. If read as a single sentence "lipu tenpo kulupu pi toki pona" it can mean the magazine of the toki pona community.
• I converted the Patreon popup banner into a permanent menu item. This simplifies the website and hopefully will invite more people to checkout the Patreon page.
• I updated the first menu item to say "lipu" rather than "open" for consistency since the title of that page is already "lipu".

Some possible further improvements I'm already thinking of:

• A more musi logo, maybe adding a small illustration (like a kijetesantakalu character) or using sitelen sitelen?
• An active state for the menu item that corresponds to the active page.
• A more musi divider under the menu.

And, of course, I'm open to requests and feedback!

[alifeee]

I like it a lot :)

I think it solves a few nice problems like

• the content being viewable on page load (without scrolling)
• a change from the image which people find strange
• sitelen pona is a nice inclusion
• I like the idea about the fun header

I think

• (image) it would be nice to have some image content on the page, so it is not a "grey plate". I personally like the "drawer" (looks like the website is "on top" of the image) look of the current header, but I think it is impractically designed to fit the image I had. Perhaps an image like the Patreon header could be used.
• (patreon) Patreon being a link is nice. I like that it is front and center. However, I think the fact that it is not toki pona is a bit dissonant. Perhaps it could be elsewhere that is still "obvious". It is also the only external link in the header; it might be nice to keep them all internal.
• (tagline) "If read as a single sentence "lipu tenpo kulupu pi toki pona" it can mean the magazine of the toki pona community." is a very cute idea. I think it could be grammaticised like "lipu tenpo li kulupu pi toki pona", that is interpretable in multiple ways

[alifeee]

one way of doing active state: https://sometimes.digital/posts/highlighting-the-active-navigation-link-in-eleventy/

another could be to expose a piece of data on each page like page: lipu and use that data on the header template

[ngsilverman]

@alifeee

• Patreon: Yeah I can see how that might seem out of place. I will think about it some more.
• Tagline: I'll change it to li kulupu…
• Header image: Here I think we disagree. I agree that this design needs a bit more musi but my vote would be to get away from the huge banner. It takes a lot of space, distracts from the actual content, and doesn't look that good imo.

Thanks for the documentation about how to do active links, that's very helpful! I'm not planning on working on that as part of this PR, but definitely in the future.

[ngsilverman]

Here's a more compact iteration with blobby active states. I'm quite pleased with the look of this. One thing that may seem a little odd is that the header is now left-aligned whereas the rest of the website is centered, but I'm planning doing the same thing with the rest of the content shortly and I think it looks good regardless.

[alifeee]

I like it :)

Thanks for the changes!

A few notes:

1. should the blobby active state be "active" for sub-pages, for example https://liputenpo.org/lipu/nanpa-linja/. I feel it makes sense if it was active, as otherwise whenever you click onto a lipu or toki you end up,,, "orphaned"
2. I still don't really like the Patreon being "blended in" with the other pages. I expect all the header items to keep me on the same page, especially with the blobby activeness, so it's jarring to be sent to a different site.
3. (this was already the case, but) sub-pages look a bit "blank" to me now, as pages like https://liputenpo.org/lipu/nanpa-linja/ or http://localhost:8080/toki/nanpa-tenpo/o-kama-pona/ start with just a white header. This is not part of this PR, but perhaps could be a separate issue to make the sub-pages look "nicer" at the top
4. I like the sub-title. I think we should ask the Discord members for their suggestions of what it could be. "li kulupu pi toki pona" is nice, and true, but not that specific. It could have "lipu" in it somewhere to be more... "magazine-y"

For me, I would be happy to merge this without solving 1, 3, and 4 yet. They can be separate issues.

However, I am not a fan of the Patreon link in the header. I think it is jarring to click around. What do you think?

[alifeee]

hey! I'd like to merge this as it is nice, but I'd like to move the Patreon link somewhere else (or leave it in the "popup" as it currently is) - what do you think?

[ngsilverman]

Hey @alifeee, here are some options off the top of my head for dealing with the Patreon link:

• We go back to the previous popup (not my preference).
• We add an "external link" icon next to it to indicate that it goes to another website (something like https://www.flaticon.com/free-icons/external-link).
• We create an actual "esun tawa ni" page on the website that explains how to support lipu tenpo and links to Patreon from there.
• We make it a little section on the homepage—maybe between the latest issue and the list of all previous ones.

Thoughts?

[alifeee]

1. We go back to the previous popup (not my preference).
2. We add an "external link" icon next to it to indicate that it goes to another website (something like https://www.flaticon.com/free-icons/external-link).
3. We create an actual "esun tawa ni" page on the website that explains how to support lipu tenpo and links to Patreon from there.
4. We make it a little section on the homepage—maybe between the latest issue and the list of all previous ones.

I like 3 and 4. Personally, I support having only as many pages as necessary, so I suggest we can have only:

• lipu ni (homepage)
• toki tan kulupu (toki)
• sona seme (sona page)

the patreon link can be put on the homepage or sona page, and the "lipu ante" can also be put on the sona page (the links on there are massively outdated, so not really deserving of their own page)

One note is that lipu tenpo's goal at the moment is to find more writers/artists/proofreaders/layouters. In my opinion, promoting Patreon is not massively important in contrast (we have a good number on there. ... especially as more people on print+post means I have to pack more envelopes 😄)

what do you think of this suggestion of having only 3 pages?

[alifeee]

I have made some changes. View the site on https://liputenpotest.alifeee.co.uk/ :)

[alifeee]

if sticking with the removal of lipu-ante, a redirect should be made

[github-actions[bot]]

surge: deployed to https://liputenpotest-86.surge.sh surge: deployed to https://liputenpotest-86.surge.sh surge: deployed to https://liputenpotest-86.surge.sh

[alifeee]

thanks for the review! I think it is nearly ready to merge,

jan Alonola was saying that the left-align of the header felt weird. I think you were saying how you think it is better, and you were thinking of left-aligning more of the content?

I hope the deploy preview works for you!

[ngsilverman]

@alifeee the left alignment does look a little weird on larger screens given that the rest of the content is centered at the moment. My suggestion would be to keep it left-aligned but within a container that is centered on the page and has a maximum width. Does that make sense?

[alifeee]

I think that's a great idea

the homepage big-list is limited to 60rem

most of the sona page (text) and the toki pages are limited to 40rem

so we already have this in some places, it would be a good help with the header

[ngsilverman]

Centered the header as discussed (max width of 60rem) and updated the menu links:

[alifeee]

super! thanks for updating :)

I think this is a great change now! Just playing around with some final centering, as now the menu items are different heights it looks a little jarring to me that they're all top-aligned. What do you think of this comparison?

original

centred

also, what do you think of "lipu" -> "lipu ale" (I think it could be nice as it makes the headings more similar heights)

my apologies if I'm drawing out this PR!

I would also be happy to merge this as-is, as the "stepped" nature of the headings does knock up against the top right corner, so fits fine

I'd love if you provided a review and we can get it merged ! :)

[alifeee]

I realise (I think) you cannot provide a "review". a comment will do :)

[ngsilverman]

@alifeee I'm in favor of lipu ale rather than lipu. Another option might be tomo lipu since it is also the homepage. I'm less sure of the vertical centering, I think it looks good but legibility might be better when they all start at the same baseline. My suggestion is that I update the link text and keep the alignment for now and we can make that a separate issue.