I changed the css of marxists.org using Stylus. I think it ended up pretty good.

Do you do something similar? Even if it’s just changing the font on the ebook reader?

  • Muad'Dibber@lemmygrad.ml
    5·
    2 days ago

    That’s pretty smart. I usually just try to find the epubs so I can use my own reader w/ its styles, but not everything is in epub form.

    • TabularTuxedo@lemmygrad.mlOP
      3·
      3 days ago

      The only thing that I don’t like on marxists.org is the large paragraph width, though. This one looks a bit better for me (Font: Source Serif 4):

      Pretty big waste of space with black bars, but it’s nice for focus. I did think that the right side of the screenshot looked good.

      (edited because I sounded pretentious)

      • quarrk [he/him]@hexbear.netEnglish
        2·
        2 days ago

        That looks nice, and I agree about the paragraph width. I’m a fan of double-page view on landscape layouts because I read better when I can see contextual pages.

        • TabularTuxedo@lemmygrad.mlOP
          1·
          2 days ago

          Oh yeah, I love double-page view too. Calibre’s default setting of page A - page B --> page turn -->page B - page C is the best in my opinion.

          Maybe it’s possible to do this with Javascript for the online page. I’ll see if I can do that in the future. As for now, saving page in PDF works.

  • TabularTuxedo@lemmygrad.mlOP
    7·
    3 days ago

    CSS:

    spoiler to avoid clutter 
    *,
*:before,
*:after {
    font-family: "Source Code Pro", "Noto Serif", serif;
}

:root {
    font-size: 16px;
}

html {
    background-color: #000;
    max-width: 100vw;
}

body {
    max-width: 60ch;
    margin: 0 auto;
    padding: min(10em, 10vw);
    font-stretch: expanded;
    background-color: rgb(238, 238, 216);
    color: #333;
    text-align: left;
}


p {
    font-family: inherit;
    text-align: inherit;
    margin: 0;
    margin-top: 1em;
    margin-bottom: 1em;
}


p[class] {
    font-family: inherit;
}

span.minor {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
}

a,
a:link,
a:visited {
    color: #000;
    text-decoration: underline dotted 2px;
}

img {
    image-rendering: pixelated;
    filter: grayscale(1);
}

img:hover {
    image-rendering: initial;
    filter: grayscale(0);
}

a:hover {
    text-decoration: none;
    background-color: black;
    color: white;
}