Responsive display

1

I use FT as a note taking app with always a little page open, close to my main work window, in order to drop in infomation, code, ideas, etc. In this configuration, a 12pt font size is perfect on my 27” iMac display. But when I create some text in full screen I’d prefer a 14pt type, more accurate and confortable for this kind of work. iA Writer does this and I like it.

I think I could achieve this in the CSS, as one can manage different browser page sizes or devices display like iPhone or iPad. The code should look like this:

@[page] (min-width 960px) { @font-size: 14pt; }

What is the good syntax to get such a responsive display?

2

Hi, try adding something like this to your user.less file:

@media (min-width: 960px) {	
  .CodeMirror {
    font-size: 14pt;
    line-height: 21pt;
  }
}
3

Thank you Jesse. It’s perfect.

4

To match exactly iA Writer behavior, I appreciate a lot, I added this code, setting the default font-size to 11pt for the small windows at the beginning.

@fontSize: 11pt;

@media (min-width: 800px) {	
  .CodeMirror {
    font-size: 13pt;
    line-height: 19pt;
  }
}

@media (min-width: 960px) {	
  .CodeMirror {
    font-size: 14pt;
    line-height: 21pt;
  }
}

:slight_smile:

5

Finally, I use three font size 10, 12 & 14pt.

@fontSize: 10pt;

@media (min-width: 800px) {	
  .CodeMirror {
    font-size: 12pt;
    line-height: 18pt;
  }
}

@media (min-width: 960px) {	
  .CodeMirror {
    font-size: 14pt;
    line-height: 21pt;
  }
}