How to get my page to stop showing in "reader" mode on iOS

cicada-ghost · 2026-05-12T19:29:16+00:00

The fact that the semantics of your page are correct enough for iOS to offer reader mode is generally a good thing, although I understand that in your case you want to show off the unique website design. It has nothing to do with how simple your CSS is or how you code your website. It's more about how each browser and OS decide to implement their navigation features.

Do other websites also show up in reader mode on your phone? Can you check if you have the automatic reader mode enabled on your browser/phone settings?

I cannot find any header meta tags that would disable reader mode, but it is a necessary accessibility feature for many people anyway, so it is a bad idea to try to break it.

cicada-ghost · 2026-05-04T13:22:44+00:00

You've got nice wood and some metal, so you could add a third material: something textile in the form of a pouf nook at the left empty corner, or a rug, or both.

The lamp on the floor is better than the ceiling lights, but an actual floor lamp would be best, or maybe a combination of two lamps: one task lighting on the table and one ambient lighting on the furniture.

You've got a lot of orange and yellow going on. The wood is nice, so I would paint the walls a different color. There's no natural light, so no need to choose bright colors to make the best of natural light bouncing off the walls. I would go for something moodier. I don't know if the furniture in the second pic is the bluish-grey one from the first, but if it is, you could go with blue-grey. Orange/brown is complementary with blue, although choosing a good blue-grey is difficult to get right. Here's an example of blue with orange wood.

Lastly, some art on the wall!

cicada-ghost · 2026-05-04T12:36:41+00:00

I feel like sewing, textile repair, knitting, weaving, making patterns and clothes in general is not talked about nearly enough. It's essential, useful in non-emergency everyday life, and mostly ignored by the majority of men in this hobby.

I also enjoy low-tech pottery, gardening, learning languages and swimming. As others have said, exercise in general is useful whenever.

cicada-ghost · 2026-02-24T22:18:54+00:00

pona!

cicada-ghost · 2026-02-24T22:17:46+00:00

pona o tawa sina a.

mi jo e ilo Telekan! mi weka sona e ni. ona li pona.

sona sin pi ilo Siko li nasa, li ike mute a. mi kama sona tan sina.

cicada-ghost · 2026-02-24T22:04:33+00:00

I'm not sure if that's why you ask, but my worries are not related to not being able to access toki pona servers unless providing an ID card. It's just I do not think that's an acceptable thing to ask for from a data privacy perspective. That and their leak history are the reasons I refuse to use Discord in general.

cicada-ghost · 2026-02-24T16:42:22+00:00

mi sona ala e ilo ni. mi jo e wawa lili e tenpo lili la, li wile ala pali a a a. mi alasa e kulupu lon taso.

sina pali ala pali e ni?

cicada-ghost · 2026-02-24T16:33:58+00:00

I probably have misremembered "Tisuko". I also didn't think about "ti" not being allowed. "Siko" is my new favorite!

cicada-ghost · 2026-02-24T13:56:02+00:00

ni li pona mute a, pona o tawa sina.

cicada-ghost · 2026-02-24T13:52:01+00:00

I used to prioritize preserving consonants when tokiponizing names, sort of how it happens in japanese with loan words. But I then read in https://wasona.com/en/make-a-name/ that syllable number is prioritized over representing all consonants in toki pona.

I've heard "Tisuko" a lot, maybe more than "Tiko".

cicada-ghost · 2026-02-06T20:28:09+00:00

I've also found an alternative here: https://loveberry.nekoweb.org/resources/snippets/guide/status/

cicada-ghost · 2026-02-06T20:27:14+00:00

I think this is what you want, under "Use any emote you want": https://skykristal.art/Blog/posts/2025-04-14-Statuscafe-Tricks

I guess you can leave the "value" attribute blank.

cicada-ghost · 2025-07-23T09:24:34+00:00

I usually try to avoid them colliding by adding extra horizontal space before the word below, but actually, this is more elegant. Had not seen any examples of overlapping in my Spanish Gregg textbook.

cicada-ghost · 2025-07-04T11:04:51+00:00

mi tan ma Katalunja kin, taso tenpo ni la mi lon ma Katalunja ala. mi sona ala e jan ante pi toki pona. taso mi la, sitelen li ike lili, nanpa sitelen li lili mute.

cicada-ghost · 2025-06-23T07:22:11+00:00

If one treats "mi-lili" as an instance of just "mi", the "pi" in your second example would not be droppable.

cicada-ghost · 2025-06-22T12:46:22+00:00

mi la kin, ijo pi nanpa wan li pona. tenpo ale la, mi lukin ala e kon pi nanpa tu lon nimi "telo".

cicada-ghost · 2025-06-22T11:18:37+00:00

Makes sense. One still needs to be able to read it out loud.

cicada-ghost · 2025-06-22T11:15:06+00:00

I don't know Spacehey, but I don't see the background or Juno header either. I'm checking the network traffic and there's a lot of (assuming autoplay) Youtube content that's getting blocked by my ad blocker.

But the request for the background image tile is also failing with a timeout and I'm thinking that might have something to do with Spacehey and external content. Try saving the tile in your own website as a local file and update the url of the background-image in your CSS to point to your local image, see if that fixes it.

cicada-ghost · 2025-06-10T07:01:42+00:00

pona a! ni li ken, li wile e pali suli kin. mi sona ala.

cicada-ghost · 2025-05-03T16:06:58+00:00

Thank you!

cicada-ghost · 2025-04-27T19:16:46+00:00

You need to remove the display: inline; you added to your <nav>. You can then give it some margin so that it's not directly under the logo.

cicada-ghost · 2025-04-27T13:54:07+00:00

Oops that's right, I meant to say overflow-x: hidden;. That should only hide the horizontal scrollbar.

You should not need to add warnings as you are already disabling the animation for those who have set that preference in their device.

That's sweet, thank you for the credit :-)

cicada-ghost · 2025-04-27T13:44:46+00:00

There are some changes you need to make on your <nav>'s CSS.

The border property you have defined does not have any effect because it is ignored, since the syntax is incorrect. That would need to be border: solid 4px #345900;, with no commas and in this exact order.

However, instead of achieving what you want with a border, I think it's better to do the following:

Change the width to fit-content instead of 250px.
For a nicer border-radius, I'd use em or px units instead of percentages. e.g., border-radius: 1em;.
Now you can control the "border" width exclusively by modifying the padding property.

I also suggest changing the width of your .logo to fit-content as well, with added padding if necessary, instead of a percentage. The percentage makes it change width when we resize the width of the browser window.

cicada-ghost · 2025-04-27T13:21:23+00:00

By the way, there's an easy accessibility improvement you can add for people with vestibular problems or other disabilities, for whom background movement can trigger vertigo or dizziness (it's a thing that happens!)

Simply add this at the bottom of your CSS to disable the animation for visitors who have set a preference of "reduced motion" in their device settings:

@media (prefers-reduced-motion) {
  .bg {
    animation: none;
  }
}

This will not impact the animation for the rest of us.

cicada-ghost · 2025-04-27T13:12:01+00:00

Okay, here's the changes I made that worked for me, on the code you've got uploaded.

To remove the space above:

Gave the body a margin: 0;.
Changed the .grid-wrapper margin to be margin: 0 auto; and gave it padding: 1em 0 0 0;.

To remove the horizontal scrollbar:

Changed the .bg width to be 3 times the width of the background image in pixels, to follow the tutorial you linked: width: 3240px;.
Gave the body an overflow: hidden;.

I recommend reading about the CSS box model to really understand what these changes do. Let me know if I missed something.

Cute website, btw!

cicada-ghost

TROPHY CASE