jeffalo / ocular

forum search for scratch
https://ocular.jeffalo.net
50 stars 27 forks source link

margin at 1350 #57

Open jeffalo opened 3 years ago

jeffalo commented 3 years ago

the margin breakpoint should start at widths lower than 1350px

CluckCluckChicken commented 3 years ago

very detailed description

jeffalo commented 3 years ago

i was referring to the margin breakpoints. ocular is a bit wide on smaller screened devices.

CluckCluckChicken commented 3 years ago

interesting

towerofnix commented 3 years ago

i browse basically every internet page at 120-150% resolution because my eyes suck and dear lord the margin makes it kinda hard to read forum posts lol, they take up the full width of my desktop screen:

A forum thread I've opened in Ocular, with the width so wide you have to scan your eyes across nearly the entire screen reading each text line.

jeffalo commented 3 years ago

so @towerofnix, should the margin breakpoint be smaller? it's currently that 1500px for when it becomes full width. how wide is your monitor?

towerofnix commented 3 years ago

@jeffalo my monitor is 1920px wide, though at full-screen the CSS width is about 1272px. the trouble is that this is an apparently thin amount of space, but the width of the screen its displaying on is still, like, my entire 20 inch screen or so :P

something ive seen a few layouts do is go for a percentage-based look instead of static margins, allowing the breakpoint to be placed quite a bit lower before the margin becomes an obstruction; e.g. see margin-left: 12%; margin-right: 12% at 100%, 150%, 100% (small screen), and 150% (small screen).

it only really becomes a bother at the final smallest screen (150% zoom thin viewport); that could possibly be detected (and have padding removed) with in/cm units, though i havent played with it myself :P

worth noting that scratch uses roughly this layout:

max-width: 1350px; /* per memory, check scratch's css to be sure */
margin-left: auto;
margin-right: auto;

but it also has a higher default font size than ocular, so that counters out the relatively large width of 1350. just various factors to consider when layouting!

jeffalo commented 3 years ago

so if i mirroed the scratch forum's margins would that be good enough?

.margined {
  width: 942px;
  margin-left: auto;
  margin-right: auto;
}

and the scratch forum doesn't do this, but it fixes margins on mobile

@media only screen and (max-width: 1050px) {
  .margined {
    /*background-color: lightblue;*/
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}
towerofnix commented 3 years ago

yes, i think that would work pretty well! (tested via inspect element and it looks good!)

jeffalo commented 3 years ago

yes, i think that would work pretty well! (tested via inspect element and it looks good!)

awesome. the only problem is when i asked people on the ocular thread, they really didn't how much space would be wasted. i wonder if i pushed this if anyone would really care that much though.

towerofnix commented 3 years ago

i saw some comments there and their concerns are valid—i think its probably not too bad as is currently, and userstyles can go enough of the way to adjust things to my own preferences :P

to be honest i think boosting the font size to a bigger default size (or simply not changing it from the browser default, usually 16px but possibly larger or smaller) would be just as useful, but that would probably also be worth checking in with other users about :package:

jeffalo commented 3 years ago

thanks. i don't remember why i changed the font size, i'll see if keeping it as browser default messes with anything.

mxmou commented 3 years ago

I actually thing using the same margins as Scratch would be a good idea if the layout of posts was exactly the same as Scratch's (so the left part with the profile picture would have a with of 208px instead of 20%).