Add page header, style tweaks

4 years ago · 9f289308d4
3 changed files with 90 additions and 65 deletions
--- 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;
--- 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;
--- a/page-register.php
+++ b/page-register.php
@ -15,12 +15,18 @@ nocache_headers();
 do_action( 'pb_custom_signup_form_handler' )

 ?>
-<html lang="en">
+<!doctype html>
+<html <?php language_attributes(); ?>>
 <head>
-	<title>Pressbooks Signup</title>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta http-equiv="x-ua-compatible" content="ie=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Create your account</title>
 	<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'template_directory' ); ?>/dist/styles/aldine.css" />
-	<?php do_action( 'pb_custom_signup_header' ); ?>
+	<?php do_action( 'pb_custom_signup_header' );
+	// TODO: figure out how to customize/replace wp_head(); ?>
 </head>
+
 <body class="page signup">
 <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
 	<defs>
@ -48,7 +54,6 @@ do_action( 'pb_custom_signup_form_handler' )
 </defs>
 </svg>
 <header class="header" role="banner">
-		<div class="header__inside">
 	<div class="header__brand">
 		<a title="<?php echo get_bloginfo( 'name', 'display' ); ?>" href="<?php echo network_home_url(); ?>">
 			<?php if ( has_custom_logo() ) { ?>
@ -69,9 +74,9 @@ do_action( 'pb_custom_signup_form_handler' )
 			<?php } ?>
 		</a>
 	</div>
-		</div>
 </header>
 <p class="signup--tagline"><?php _e( 'Start creating your textbook today', 'pressbooks-aldine' ); ?></p>
+<h1 class="signup--page-title">Create a new account</h1>
 <?php do_action( 'pb_custom_signup_before_wrapper' ); ?>
 <div class="signup--wrapper">
 	<section class="signup--section">
@ -94,7 +99,7 @@ do_action( 'pb_custom_signup_form_handler' )
 		<h2 class="signup--header-title">Already have an account? <a href="<?php echo site_url(); ?>/wp-login.php">Log in</a></h2>
 	</section>
 	<section class="signup--section">
-		<h2 class="signup--header-title"><?php _e( 'Or sign up with one of the following:', 'pressbooks-aldine' ); ?></h2>
+		<h2 class="signup--header-title"><?php _e( 'Or sign up with one of the following', 'pressbooks-aldine' ); ?></h2>
 		<div class="signup--social-buttons">
 			<button class="signup--social-button google"><svg class="logo-google"><use xlink:href="#logo-google" /></svg>Google</button>
 			<button class="signup--social-button twitter"><svg class="logo-twitter"><use xlink:href="#logo-twitter" /></svg>Twitter</button>