Try your hand at bash scripting, it’s confusing at first, but it becomes almost addictive once you start building your knowledge base and get into it.
5 Likes
The forum CSS limits page width to 1110 pixels, of which 690 dedicated to the posts.
This is generally good, as it looks nice, wraps text at a reasonable width for readability, and gives a consistent look across devices.
However, when there are wide code blocks, I prefer to make use of the available screen width to read them inline rather than have to click to expand them and/or scroll sideways. I often miss something when I do that.
So, here’s my bookmarklet(*) to toggle “wide mode”:
(function(){const rs=document.querySelector(':root').style;if(rs.getPropertyValue('--d-max-width')==='100%'){rs.setProperty('--d-max-width','1110px');rs.setProperty('--topic-body-width','690px');}else{rs.setProperty('--d-max-width','100%');rs.setProperty('--topic-body-width','100%');}document.querySelector('#reply-control').style.setProperty('left','-10px');})()
The only issue I noticed is that sometimes it causes video embeds to jump back and forth between wide and narrow.
Also, it does not check the initial property values, it simply hardcodes the ones used on this forum. That said, it likely works on most other Discourse instances too.
(*) To use it, make a new bookmark on the toolbar and paste that line in the URL field, prefixed with javascript+: (I cannot write it in one piece or the forum won’t let me post)
When clicked it will toggle between 100% and the default values.
1 Like