Code
/
pressbooks-aldine
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add page header, style tweaks

pull/328/head
SteelWagstaff 4 years ago
parent
01e58da9c4
commit
9f289308d4
3 changed files with 90 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      assets/styles/common/_variables.scss
  2. 62
      assets/styles/layouts/_page-register.scss
  3. 23
      page-register.php

4
assets/styles/common/_variables.scss
Unescape View File

@ -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;

62
assets/styles/layouts/_page-register.scss
Unescape View File

@ -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;

23
page-register.php
Unescape View File

@ -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>
@ -45,10 +51,9 @@ do_action( 'pb_custom_signup_form_handler' )
<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"></path>
</symbol>
</svg>
</defs>
</defs>
</svg>
<header class="header" role="banner">
<div class="header__inside">
<header class="header" role="banner">
<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>
</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>

Write Preview
Loading…
Cancel
Save