Two little things about the register screen after installing Discourse on desktop

Canapin · October 17, 2022, 8:38pm

I installed Discourse this afternoon and here’s the screen that welcomed me after the successful installation:

Two things caught my attention:

The background image size seems wrong: these random, scattered, large color patches seem a bit off.
The text container is too large on my screen (2560px width), it should have in my opinion a max width.

Don · October 18, 2022, 5:06am

Hello,

Here is the comment why it is a bit off:

github.com

discourse/discourse/blob/243efa89318d0de1b67aba9087c58c252a1d540a/app/assets/stylesheets/wizard.scss#L20


      
              transform: scale(1.05);
            }
          
          
  100% {
              transform: scale(1);
            }
          }
          
          
body.wizard {
            background: $wizard-bg;
            background-size: 110vw 110vh; // crops better than cover at various viewport sizes
            background-repeat: no-repeat;
            background-position: bottom;
            background-color: var(--secondary);
            color: var(--primary-very-high);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
          
          
  #wizard-main {
              display: flex;
              flex-direction: column;

And it also same on invite page.

github.com

discourse/discourse/blob/243efa89318d0de1b67aba9087c58c252a1d540a/app/assets/stylesheets/common/base/login.scss#L39


      
                &:hover,
                &:focus {
                  background: var(--primary-very-low);
                }
              }
            }
          }
          
          
body.invite-page {
            background-image: $invite-bg;
            background-size: 110vw 110vh; // crops better than cover at various viewport sizes
            background-repeat: no-repeat;
            background-position: bottom;
            background-color: var(--secondary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
            @include breakpoint("mobile-extra-large") {
              background: $invite-mobile-bg;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: bottom;

Topic		Replies	Views
Proper dimensions for logo? support	7	4139	August 3, 2015
Image upload size/resize question support	24	4735	April 4, 2021
Discourse with a very widescreen browser ux	2	1922	October 14, 2016
Image displayed incorrectly on Mobile due to theme settings ux	4	1145	February 13, 2018
Reset button and log look weird on mobile support	12	789	May 22, 2018

Two little things about the register screen after installing Discourse on desktop

Related Topics