darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-10 01:55:41 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
ae2db8d2ec2cf6c1cbfc34b5952f7e3df62e3cd2
notifications-admin/app/assets/stylesheets/views/product-page.scss

101 lines
1.5 KiB
SCSS
Raw Normal View History

Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
.product-page {
&-intro {
margin: -10px 0 $gutter * 1.5 0;
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
padding: 0 0 $gutter * 2 0;
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
background: $govuk-blue;
color: $white;
&-wrapper {
Add illustration to the ‘what is Notify’ section Compliments the new tagline. Illustration by Stephen. Only shown where there is space (ie on desktop).
2016-11-28 17:20:41 +00:00
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
@extend %site-width-container;
Add illustration to the ‘what is Notify’ section Compliments the new tagline. Illustration by Stephen. Only shown where there is space (ie on desktop).
2016-11-28 17:20:41 +00:00
@include media(desktop) {
background-image: file-url('product/proposition-illustration.png');
background-size: 320px;
background-repeat: no-repeat;
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
background-position: right -6px top 100px;
Add illustration to the ‘what is Notify’ section Compliments the new tagline. Illustration by Stephen. Only shown where there is space (ie on desktop).
2016-11-28 17:20:41 +00:00
}
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
}
h1 {
Match type sizes to prototype
2016-11-23 10:58:02 +00:00
@include bold-48;
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
margin: 20px 0 $gutter 0;
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
}
p {
Match type sizes to prototype
2016-11-23 10:58:02 +00:00
@include core-24;
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
margin: $gutter-half 0 $gutter;
}
.button-container {
Match type sizes to prototype
2016-11-23 10:58:02 +00:00
line-height: 45px;
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
}
.button {
Fix button shadow colour on product page The button was inheriting a green box shadow from the default GOV.UK button style, which is typically used on a white background. On the blue background, a darker blue shadow looks better I think. The 15% darkening is the same as used by the default green button: https://github.com/alphagov/govuk_frontend_toolkit/blob/a3fe44e00ef3e364376a138fbffa8495af9906df/stylesheets/design-patterns/_buttons.scss#L36
2016-12-16 10:27:13 +00:00
@include box-shadow(0 2px 0 darken($govuk-blue, 15%));
Match type sizes to prototype
2016-11-23 10:58:02 +00:00
background: $white;
Space out items in blue box a bit I went too far with tightening it up from the prototype. This is somewhere in between.
2016-11-28 14:54:49 +00:00
margin-right: 15px;
Fix button padding on the product product-page It’s uneven ever since we upgraded the toolkit. Guess it’s probably allowing space for an arrow image. But I don’t like the arrow image because it looks like it’s pointing at the ‘or sign in’ link. So this commit overrides the button’s default spacing.
2017-04-20 15:01:42 +01:00
padding-right: 1.25em;
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
&:link,
&:visited,
&:hover {
color: $govuk-blue;
}
&:hover {
background: $light-blue-25;
outline: none;
}
}
a {
&:link,
&:visited {
color: $white;
}
&:hover,
&:active {
color: $light-blue-25;
}
}
}
&-section {
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
@extend %site-width-container;
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
margin-bottom: $gutter-half;
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
h2 {
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
@include bold-27;
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
margin: 0 0 $gutter;
}
.with-keyline {
border-top: 1px solid $border-colour;
padding: $gutter * 1.5 0 0 0;
}
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
img {
Make SVGs 100% wide Internet Explorer 11 and below don’t scale SVG images properly when they’re used in `<img>` tags. See https://gist.github.com/larrybotha/7881691 for details. This manifested itself as the SVG images on the product page being smaller when viewed in IE11 than other browsers. This commit explicitly sets them the be 100% wide, which seems to fix the problem.
2016-12-10 12:19:15 +00:00
width: 100%;
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
margin: 0 0 $gutter * 1.5 0;
}
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
}
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
&-big-number {
@include bold-48($tabular-numbers: true);
margin: 0 0 0 0;
}
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
}
Reference in New Issue Copy Permalink