diff --git a/css/_variables.scss b/css/_variables.scss index 7d764b229..d7c450011 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -178,8 +178,17 @@ $welcomePageHeaderTextMarginTop: 35px; $welcomePageHeaderTextMarginBottom: 35px; $welcomePageHeaderTextTitleMarginBottom: 16px; +$welcomePageHeaderTextTitleFontSize: 2.5rem; +$welcomePageHeaderTextTitleFontWeight: 500; +$welcomePageHeaderTextTitleLineHeight: 1.18; +$welcomePageHeaderTextTitleOpacity: 1; $welcomePageHeaderTextDescriptionDisplay: inherit; +$welcomePageHeaderTextDescriptionFontSize: 1rem; +$welcomePageHeaderTextDescriptionFontWeight: 400; +$welcomePageHeaderTextDescriptionLineHeight: 24px; +$welcomePageHeaderTextDescriptionMarginBottom: 20px; +$welcomePageHeaderTextDescriptionAlignSelf: inherit; $welcomePageEnterRoomWidth: 680px; $welcomePageEnterRoomPadding: 25px 30px; @@ -198,6 +207,8 @@ $welcomePageTabButtonsDisplay: flex; $welcomePageTabDisplay: block; $welcomePageButtonWidth: 51px; +$welcomePageButtonMinWidth: inherit; +$welcomePageButtonFontSize: 14px; $welcomePageButtonHeight: 35px; $welcomePageButtonFontWeight: inherit; $welcomePageButtonBorderRadius: 4px; diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index f7ed3cd19..ebf24126e 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -38,19 +38,21 @@ body.welcome-page { .header-text-title { color: $welcomePageTitleColor; - font-size: 2.5rem; - font-weight: 500; - line-height: 1.18; + font-size: $welcomePageHeaderTextTitleFontSize; + font-weight: $welcomePageHeaderTextTitleFontWeight; + line-height: $welcomePageHeaderTextTitleLineHeight; margin-bottom: $welcomePageHeaderTextTitleMarginBottom; + opacity: $welcomePageHeaderTextTitleOpacity; } .header-text-description { display: $welcomePageHeaderTextDescriptionDisplay; color: $welcomePageDescriptionColor; - font-size: 1rem; - font-weight: 400; - line-height: 24px; - margin-bottom: 20px; + font-size: $welcomePageHeaderTextDescriptionFontSize; + font-weight: $welcomePageHeaderTextDescriptionFontWeight; + line-height: $welcomePageHeaderTextDescriptionLineHeight; + margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom; + align-self: $welcomePageHeaderTextDescriptionAlignSelf; } #enter_room { @@ -148,8 +150,9 @@ body.welcome-page { .welcome-page-button { width: $welcomePageButtonWidth; + min-width: $welcomePageButtonMinWidth; height: $welcomePageButtonHeight; - font-size: 14px; + font-size: $welcomePageButtonFontSize; font-weight: $welcomePageButtonFontWeight; background: #0074E0; border-radius: $welcomePageButtonBorderRadius;