Add page indicators to feeds

[rainbow-bamboo]

Pitch

We can add an indicator to give the user an idea of how many statuses they've read in a row.

I've implemented a simple one that you can include in your custom css if you like.

body{
 --main-accent-color: #343434;
}

.theme-default, .dark-theme, .high-contrast, .theme-fairy-floss{
 --main-accent-color: #fafafa;
}

/* it's 5n, so it shows the indicator every 5 posts */
article:nth-child(5n):after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    background: var(--main-accent-color);
    display: block;
}

Motivation

It ends up looking something like:

The motivation is that an endless feed encourages endless consumption. By adding a visual indicator every 5 statuses, it gives you some sense of how much you are consuming and makes it easier to stop scrolling.

Notes:

• When I used paddings instead of margins, scrolling down worked, but scrolling up did not.
• I also tried implementing it in JS where I would get the list of articles (statuses) and then insert new page break elements, but it was difficult to get it to keep adding new elements when you scrolled down, and the feed loaded the next 20 statuses.
• You can edit the page break to suit by adding text to the content attribute. One option is using css-counters to number the pages: eg:

body{
    counter-reset: page-number;
}

article:nth-child(5n){
 counter-increment: page-number;
}

article:nth-child(5n):after{
    content: "Page: " counter(page-number);
}

but having the pages be numbered made me feel more anxious/guilty than I would like. A chill circle is pretty neat though.

[rainbow-bamboo]

A flaw of this approach, is that if you don't have "slow mode" turned on, new posts change the position of the marker because instead of scrolling pass X number of posts, it's as if you scrolled past X + number of new posts .

Also, you can put emoji in the content field to get some easy icons.

article:nth-child(5n):after{
    content: "⛺";
    filter: greyscale(1);
}