SQLite Forum

a css to improve readability of this forum
Login

a css to improve readability of this forum

(1.2) By punkish on 2020-03-13 12:40:18 edited from 1.1 [link] [source]

Personally, I not only don't mind this forum but also like it in many respects, specially the ability to embed code with styling, and to be able to edit mistakes. I do have a couple of small questions:

  1. Can the email mailing be turned off/on by a setting?

  2. Every time I edit an existing post, I get mailed a copy. I love the ability to edit mistakes in an already committed post, but I would not like to spam everyone with my edits. They can always see the latest version on the web anyway.

That said, I am not a great typographer/designer but have opinions (like everyone else). I have created the following little css that (imo) greatly improves the look and readability of this forum (see below for the css). But first, I would request the forum designer to consider the following three requests:

  1. prefix all the css with a namespace, for example, FOSSIL or SQLITE would do. It would greatly help in making a custom css.

  2. to not use inline css to style the replies in the hierarchical tree. Instead, use classnames (with the above suggested prefix, of course). This too would allow styling the custom css.

  3. And finally, the forum is serving about 1100 lines of css (give or take a few) but really seems to use only a handful of lines (the stuff up until line 275). Why not get rid of the fossil-specific css that has little use on this forum website?

Now, my mods (also available at https://gist.github.com/punkish/309666d1a001061a521048869edc73cd in case someone else wants to imrove it further)

body {
    font-family: serif;
    font-size:18pt;
}

input[type=text] {
  height: 40px;
}
input[type=submit] {
    background-color: lightblue;
    border: 1px solid darkblue;
    padding: 10px;
  height: 40px;
    font-size: 12px;
    border-radius: 10px;
}

a {
    color: #0000ff;
    text-decoration: underline;
}

.title {
    text-align: center;
    float: unset;
    line-height: 1rem;
}
.title h1 {
    display:block;
    color: darkblue;
}
.title h1:after {
    content: " ";
    color: #777;
    font-weight: normal;
}
.status {
    font-family: sans-serif;
    position: absolute;
    top: 0;
    right: 25px;
}
.mainmenu {
    border: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-radius: 0;
    background: unset !important;
}
.content p {
  line-height: 2rem;
}
.forumHierRoot {
  padding: 2rem;
}
div.forumHier, div.forumTime {
  border: none;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  border-radius: 0 10px;
  padding: 10px;
  background-color: #f5f5f5;
}
pre {
  padding: 1rem;
    background-color: lightgrey;
  font-family: menlo, consolas, monospace;
  font-size: 12px;
}
@media screen and (max-width: 600px) {
  /* Spacing for mobile */

}
@media screen and (min-width: 750px) {
  /* Spacing for desktop */
  body {
      width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  /* Special declarations for narrow desktop or wide mobile */

}

Hope this helps others

(2) By Richard Hipp (drh) on 2020-03-13 12:47:12 in reply to 1.1 [link] [source]

I have (temporarily) installed the suggested CSS on draft2, for evaluation purposes. It doesn't really work for me.

(3) By punkish on 2020-03-13 13:00:48 in reply to 2 [link] [source]

yes, something is wrong in the way it is working on the draft2 website. It looks waaaay better on my computer. I will investigate and see what is going on.

(4.1) By punkish on 2020-03-13 13:06:06 edited from 4.0 in reply to 2 [link] [source]

yes, I see a problem right away. You see, I can't disable your css, so I am using my mods as a supplement. That is, they are applied after your original css is applied, thereby overriding a few of its directives. If you completely replace your css with mine, then it will not work as it won't have much of the foundational directives. In other words, my css cascades over your css. If you use it like that, it will (should) look a lot better.

(5) By Chris (crustyoz) on 2020-03-13 13:06:15 in reply to 2 [link] [source]

The proposed css is targetted at use on a cellphone. The text is too large for a desktop and leaves the right half of a wide screen empty.

On a cellphone, the text is still slightly too large but is quite readable. It wraps at the screen edges but bounding boxes are off-screen on the right side.

Clearly, there is need for media queries to make good use of this css where it is most appropriate.

The Bulma CSS library uses the following break points for its media queries:

mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px

and they seem to work well in my experience with cellphone, iPad, and 1920x1200 wide screen desktop.

(6) By punkish on 2020-03-13 13:11:58 in reply to 5 [link] [source]

The proposed css is targetted at use on a cellphone. The text is too large for a desktop and leaves the right half of a wide screen empty.

Please see my reply to Richard's post. First, make sure you use my mods on top of the existing website, not in place of the existing website's original css.

Two, yes you are correct, the css is mobile-first, but it reduces the body width to 50% on large screens there by improving readability (I did say imo). Wide columns from left to right make for a poor reading experience. On my Macbook at 1400px, a 50% wide column of text is a very pleasant reading experience.

That said, you are also probably correct that more judicious media queries could be used. I hacked this in about 10 mins without using any library. I've put my mods as a gist so please do fork it and make it better. I would be very happy to use a better version (without making it onerous – that is, using big external libraries).

Many thanks.

(7) By Warren Young (wyoung) on 2020-03-13 13:35:49 in reply to 1.2 [link] [source]

Can the email mailing be turned off/on by a setting?

Yes. Click your user name in the upper right corner of the screen, then the Email Alerts link.

That said, I am not a great typographer/designer...

Just FYI, your ordinal list was interrupted by this paragraph because you didn't precede it with spaces to make it continue your point #2. The following list item would then be #3 with that fix.

This feature of Fossil Markdown isn't covered in the brief md_rules file, but it is bog-standard Markdown.

prefix all the css with a namespace

Not likely to happen.

The URL host name effectively namespaces the CSS for this site already.

not use inline css to style the replies in the hierarchical tree. Instead, use classnames

Patches thoughtfully considered. :)

Why not get rid of the fossil-specific css that has little use on this forum website?

Because "little" is not the same as "none." Though not linked through the modified navbar buttons at the top of this page, you can still get to pages like /timeline, /file, and /wcontent which require those styles.

Anyway, your browser may be able to cache this between page hits, in which case its size isn't a serious concern. You pay its cost only on initial load from an unprimed cache.

I qualify that with "may" because Chrome can cache the CSS for this repo, but Firefox cannot. With some adjustment to the HTML headers served, Firefox could cache it, too. I suspect the front-end proxy for this site needs to set Expires to make this work, but that's just a guess. I haven't got the time to experiment with it at the moment to find out.

(8) By Richard Hipp (drh) on 2020-03-13 13:48:46 in reply to 4.1 [source]

I have now updated draft2 again by appending your CSS changes to the end of the current CSS, rather than replacing the standard CSS. The result is better. But it still seems to be geared toward mobile.

(9) By punkish on 2020-03-13 14:07:02 in reply to 8 [link] [source]

there is still something wrong with your implementation, and I don't yet know what. This is how it looks with your implementation

drafts2

and this is how it looks on my computer

my laptop

I will investigate this further later, but first, I have to go make some train travel changes because of the rapidly developing Covid situation here in Madrid.

(10.1) By punkish on 2020-03-13 20:53:36 edited from 10.0 in reply to 1.2 [link] [source]

Update: I bought Cascadea and installed it, and it works perfectly. Worth all of three bucks it cost me. Recommended if you are a Safari user like me.

Hi everyone,

I have cleaned up the CSS I am using and also added instructions. Both are available at https://gist.github.com/punkish/309666d1a001061a521048869edc73cd

The instructions are for Firefox (at this time) because it has a free extension that allows adding site-specific CSS. Personally I am a Safari user, and I've found Cascadea that claims to do the same thing. I haven't tried it yet, but will soon. In the meantime, I can attest that the above instructions work very well for Firefox. And, I am sure there must be something similar possible with Chrome.

Hope this is useful (for some of you).