From 9f289308d4a1f91421af60ac274506a7752aa430 Mon Sep 17 00:00:00 2001 From: SteelWagstaff Date: Wed, 20 Apr 2022 19:07:47 -0700 Subject: [PATCH] Add page header, style tweaks --- assets/styles/common/_variables.scss | 4 +- assets/styles/layouts/_page-register.scss | 62 ++++++++++------ page-register.php | 89 ++++++++++++----------- 3 files changed, 90 insertions(+), 65 deletions(-) diff --git a/assets/styles/common/_variables.scss b/assets/styles/common/_variables.scss index 57ffadc..a0b988f 100644 --- a/assets/styles/common/_variables.scss +++ b/assets/styles/common/_variables.scss @@ -17,7 +17,7 @@ $warning-yellow: #ffd943; $disabled-grey: #c6c6c6; // Fonts -$big-font-size: 2rem; -$medium-font-size: 1.5rem; +$big-font-size: 1.8rem; +$medium-font-size: 1.4rem; $small-font-size: 1rem; $tiny-font-size: 0.8rem; diff --git a/assets/styles/layouts/_page-register.scss b/assets/styles/layouts/_page-register.scss index 164d052..82d69f7 100644 --- a/assets/styles/layouts/_page-register.scss +++ b/assets/styles/layouts/_page-register.scss @@ -10,6 +10,7 @@ $body-font: 'Spectral', serif; .signup { line-height: 1.4; + height: 100vh; a { text-decoration: underline; @@ -23,14 +24,39 @@ $body-font: 'Spectral', serif; margin-bottom: 0; } + &--tagline::after { + content: '\01F680'; + margin-left: .5rem; + } + + &--page-title { + padding: 0 2.5rem; + font-size: 2.5rem; + font-weight: 700; + } + + &--page-title, &--header-title { + text-transform: none; + text-align: left; + margin-bottom: 0; + + &::before { + display: none; + } + } + + &--header-title { + font-size: $big-font-size; + font-weight: 400; + } + &--wrapper { display: flex; - min-height: calc(100% - 175px); + min-height: calc(100% - 240px); flex-direction: row; - gap: 3rem; font-family: $header-font; - @media #{$breakpoint-not-large} { + @media #{$breakpoint-small-to-tablet} { flex-direction: column; } } @@ -39,26 +65,18 @@ $body-font: 'Spectral', serif; flex: 1; width: 50%; padding: 2.5rem; + + @media #{$breakpoint-small-to-tablet} { + width: 100%; + } } &--section:first-child { background: $light-grey-blue; } - &--header-title { - text-transform: none; - text-align: left; - font-size: $big-font-size; - font-weight: 400; - - &::before { - content: ""; - margin-bottom: 0; - background: none; - } - } - &--social-buttons { + margin-top: 2rem; } &--social-button { @@ -72,7 +90,7 @@ $body-font: 'Spectral', serif; margin-bottom: 20px; filter: drop-shadow(0 2px 1px #aaa); color: $dark-blue; - font-size: 1.3rem; + font-size: $medium-font-size; font-weight: 700; text-decoration: none; text-align: left; @@ -96,6 +114,7 @@ $body-font: 'Spectral', serif; .form { width: 100%; + margin-top: 2rem; &--input-wrapper { position: relative; @@ -105,15 +124,16 @@ $body-font: 'Spectral', serif; background: white; border: solid 1px $dark-blue; padding: 5px; - min-width: 66%; + width: 100%; + max-width: 525px; font-weight: 400; - height: 40px; + height: 45px; } label { position: absolute; - top: 8px; - left: 8px; + top: 12px; + left: 10px; color: #666; transition: .3s; z-index: 0; diff --git a/page-register.php b/page-register.php index 57c5ff9..bc074de 100644 --- a/page-register.php +++ b/page-register.php @@ -15,12 +15,18 @@ nocache_headers(); do_action( 'pb_custom_signup_form_handler' ) ?> - + +> - Pressbooks Signup + + + + Create your account - + + @@ -45,56 +51,55 @@ do_action( 'pb_custom_signup_form_handler' ) - + - +

+

Create a new account