Mobile CSS for news product

[fmfernandes]

This is the CSS code that I added to https://a8c.feedland.org/newsproduct?template=https://drummer.land/fernando.fernandes@automattic.com/newsproduct.opml and @cagrimmett also copied over to https://peekskill.news/:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap');
body {
    font-family: 'Open Sans', sans-serif;
}
.divRiverSection {
    border-top: none;
}
.divSectionHeader {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid silver;
}
.divRiverSection .spFeedPubDate, .divRiverSection .spFeedTitle {
    margin: unset;
    padding: unset;
    float: unset;
}
.divProductLogo {
    width: unset;
}
.divRiverSection span.spFeedTitle {
    background: white;
}
table, tbody, tr {
    display: block;
}
.divRiverContent {
    background: white;
    border: 1px solid silver;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
}
.divRiverItemBody.bodyTruncated {
    -webkit-mask-image: -webkit-gradient(linear, 0 200, 0 110, from(rgba(255, 255, 255, 0)), color-stop(0.6, rgba(255, 255, 255, 0.9)), color-stop(1, rgb(255, 255, 255)), to(rgb(255, 255, 255)));
    transition: max-height 0.2s ease 0s;
}
.divRiverItemBody {
    transition: all 0.2s ease 0s;
}
.divRiverSection .spFeedPubDate {
    background: white;
    order: 2;
}
@media screen and (max-width: 900px ) {
    .divRiverDisplay {
        width: unset;
    }
    .divPageBody {
        width: 95%;
    }
    .divRiverPageTop {
        width: unset;
    }
    .divPageBody {
        margin: 0 auto;
    }
    .divRiverContent {
        width: unset;
    }
    .divRiverPageTop .divProductTitle {
        font-size: 30px;
    }
    .divTitledItem .divTitle {
        font-size: 15px;
    }
    .divTitledItemBody {
        font-size: 13px;
    }
}

Would be nice to see it added as the default template for news product as it's a good starting point for mobile screens.

[scripting]

good morning @fmfernandes --

I have found the place where this code needs to be added, and can do it right away if you tell me where in the file it should go?

Pretty good chance it's at the end of the file, but I don't want to take any chances. ;-)

Let me know and I can do it right away.

PS: No hurry on this, it can wait until Monday.

[fmfernandes]

Hey @scripting 👋🏻

The only thing that should be at the top is the @import statement, which should be the first thing in that file (styles.css). Everything else can be added at the end.

[scripting]

@fmfernandes -- as I started making the changes I realized that we can't do this this way.

we're changing the defaults for all news products, but there already is an installed base.

like my main news site which has a lot of users: news.scripting.com.

this feature has been in the product, documented and used, for over a year.

these changes would break all the products, so this can't happen this way. we have to think about a mechanism that gives you what you want without breaking existing users.

this is a core value. of course sometimes things break, but never intentionally without giving it a lot of thought about how to avoid breakage.

[scripting]

@fmfernandes -- I think the answer here to start at least is to allow a way for a news product spec to include a CSS file, to match this use-case. So you'd store the custom CSS you want to use in an HTML file somewhere and provide its URL via the spec.

[fmfernandes]

these changes would break all the products, so this can't happen this way. we have to think about a mechanism that gives you what you want without breaking existing users.

What if we have something like themes for news products? Something like WordPress themes but maybe implemeted in a way like Obsidian does? You could host your theme on GitHub and on a setting or something, have FeedLand download that, or in reality, just point to the CSS file, i.e. in Obsidian's example theme, point (@import maybe) to theme.css.

This way we could also have a GitHub repo showcasing community created themes.

[scripting]

@fmfernandes -- i think we can do it now with the template capabilities we have.

here's the story --

1. Starting with the template for news.scripting.com.
2. I added a link element in the html section, which includes this CSS file.
3. When you load the page, http://news.scripting.com, the background color is aliceblue, which is what the CSS in the file says to do.

I'm not sure how legal it is in terms of HTML, having a link element in the body section of a document, but i've seen other people do it, that's how i know it would work.

I definitely want to do a nice html-level templating system for news products, i've done it on products since before the web, working on prepress applications with Frontier in the early 90s, and then pretty much every web product I've done has had the feature. I know how important it is to do this carefully and slowly, step by step, because you have to live with your mistakes forever.

i'm going to think about this some more and look forward to your feedback. ;-)