WorkFlowy 360px Wide Page for 1920x1080 Screen Res (FHD) (1080p) 📄 by Styling

/* ==UserStyle==
@name         WorkFlowy 360px Wide Page for 1920x1080 Screen Res (FHD) (1080p) 📄
@version      20230513.06.21
@namespace    userstyles.world/user/Styling
@description  This a useful size for using with the Windows Power Toys utility known as FancyZones that, for free, splits windows into multiple zones quickly and efficiently. I especially use this userstyle with WorkFlowy for a 524px x 1080px zone (because it works well with the size of my CalenGoo calendar app on my BlueStacks Android emulator), but it also works well on wider zone or even slightly narrower.

This is best done using a browser like the Microsoft Edge browser, since some browsers limit too much how narrow you can make them, which makes me feel extreme fury. However, it mostly makes me use Microsoft Edge.

This also adds styling to the border corners so it loosely resembles a 3-inch by 5-inch "Rite in the Rain" brand waterproof pocket notebook's corners. Delete or change the border-radius values if you wish. You may also want to put in a border-color value other than grayish / greyish.

This userstyle sets the font to Arial, Helvetica, 'Helvetica Neue', Sans-Serif (in that order); reduces the margin between nodes aka bullets by 1px; and adds a tiny bit of spacing between the letters, which you may or may not like. In general, a bit of extra letter spacing improves legibility when reading light text on a dark background.

There are a few minor additional tweaks that, at least at 1920x1080 screen resolution (FHD) (1080p) and 100% browser scaling, make WorkFlowy line up a bit better with the bullets, the distance between lines be more uniform and thus highlighting of lines retain similar-size gaps, etc.

The example shown in the thumbnail was made with WorkFlowy's Vintage theme found at WorkFlowy Settings > Appearance.
@author       Styling
@license      CC BY-NC-SA 4.0
==/UserStyle== */

@-moz-document url-prefix("https://workflowy.com") {
/* WF ☛thin☚ for 500px Wide or Larger Browser Windows

When not overridden by enabling my "WF ☚☚☚☚WIDE☛☛☛☛" userstyle, this sizes WorkFlowy for a 500px wide (minimuum width in Edge, although some other browsers have a larger minimum width, in which case you can still use this, but your window itsel will be a little wider [for example, 524px wide in Chrome and Brave {Advantage Edge! <Edge also has shorter top address and favorites/bookmarks bars, giving you more vertical screen real estate>})].

This also adds styling to the border corners so it loosely resembles a 3-inch by 5-inch "Rite in the Rain" brand waterproof pocket notebook's corners, the kind I carry. Delete or change the border-radius values if you wish. You may also want to put in a border-color value other than grayish.

This userstyle further sets the font to Arial, Helvetica, 'Helvetica Neue', Sans-Serif (in that order); increases the margin between nodes aka bullets by 2px (to better match WorkFlowy's styling on their mobile apps); and adds a tiny bit of spacing between the letters, which you may or may not like. In general, a bit of extra letter spacing improves legibility when reading light text on a dark background, however.

There are a few minor additional tweaks that make WorkFlowy line up a bit better with the bullets, the distance between lines be more uniform and thus highlighting of lines retain similar-size gaps, etc.

The example shown in the thumbnail was made with contrasting white/black page/background colors for demonstration.

Additionally, you will probably want to get these userstyles fom my userstyles homepage.

☚☚☚☚WIDE☛☛☛☛ 
    (WF ☚☚☚☚WIDE☛☛☛☛ for 500px Wide or Larger Browser Windows)
This overrides WF ☛thin☚.

WF ☛thin☚ ⮜⮜⮜Left
    (WorkFlowy ☛thin☚ on the Left Side of Window ⮜⮜⮜)

WF ☛thin☚ Right⮞⮞⮞
    (WorkFlowy ☛thin☚ on the Right Side of Window ⮞⮞⮞)

N.B. You can LEAVE WF ☛thin☚ ENABLED ALL THE TIME. Then, just also enable ONE OF "WF ☚☚☚☚WIDE☛☛☛☛," "WF ☛thin☚ ⮜⮜⮜Left," or "WF ☛thin☚ Right⮞⮞⮞" when you want one of those.

Finally, I also made 16 WorkFlowy themes as userstyles!

These range from white to black, light to dark, from the very colorful to the subdued, from those with transparency effects on moving animated backgrounds to classic pages on wooden desktops.

I designed them for "circadian rhythm" health protection, as in bluer/whiter/brighter light in the morning, redder/darker/dimmer night at light, so as not to mess up melatonin production specifically and your sleep cycle generally.

They complement the WF ☚☚☚☚WIDE☛☛☛ and WF ☛thin☚userstyles. If you're curious about these themes, they're all at my userstyles profile page. */
}

@-moz-document url-prefix("https://workflowy.com") {
/* This WF Userstyle's Notes

For this to work correctly, you must disable WorkFlowy's "Full width page" feature, found at Workflowy Settings > Experimental features. */
}

@-moz-document url-prefix("https://workflowy.com") {
/* CC BY-NC-SA 4.0 License

Copyright (c) 2023 C. Will Dollis

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

CC BY-NC-SA 4.0 License Summary:

This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.

CC BY-NC-SA 4.0 includes the following elements:

   BY - Credit must be given to the creator
   NC - Only noncommercial uses of the work are permitted
   SA - Adaptations must be shared under the same terms

See this URL for FULL CC BY-NC-SA 4.0 license terms:

https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
*/
}

@-moz-document url-prefix("https://workflowy.com") {
/* WF ☛thin☚'s CSS */
html {
    overflow-x: hidden;
}

.page {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 364px;
    padding-left: 46px;
    padding-right: 42px;
    border-width: 1px;
    border-style: solid;
    border-color: #95989A;
    -moz-border-radius: 1px 1px 49px 49px !important;
    border-radius: 1px 1px 49px 49px !important;
    padding-top: 15px;
    padding-bottom: 1px;
    position: relative;
    top: 5px;
    margin-bottom: 56px;
}

.pageContainer {
    overflow-x: hidden !important;
}

#page container,
.mainTreeRoot.selected {
    position: relative;
    bottom: 12px;
}

#app > div.pageContainer._3blhy7 > div > div.project.selected.root.mainTreeRoot._a4lwbb > div.name._12tqtu1._3hmsj {
    height: 29px;
}

#app > div.pageContainer > div > div.project > div.name {
    margin-top: 1px;
}

#app > div.pageContainer._3blhy7 > div > div._1vs75eu {
    display: none;
}

#app > div.pageContainer > div > div.project > div.children {
    margin-bottom: 10px;
}

/* Moves Comment and Complete Buttons to the left */
div.nameHoverButtons {
    margin-left: -28px;
}

/* FONTS AND TWEAKS */
.content {
    font-family: Arial, Helvetica, 'Helvetica Neue', 'Sans-Serif';
    font-size: 1em;
    letter-spacing: 0.01em;
    line-height: 1.306435em;
}
/* 1.313em x 99.5% line-height */

.selected.project > .name > .content {
    font-size: 0.648em;
    letter-spacing: 0.00648em;
    line-height: 1.36514em;
    position: relative !important;
    top: 10px !important;
}
 /* 1.372em x 99.5% line-height */

.noted > .notes > .content {
    font-size: 0.82em;
    letter-spacing: 0.0082em;
    line-height: 1.22em;
}
}