darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-05 23:08:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Progressively enhance the proposition illustration

Browse Source 
When users with Javascript enabled request it we can show a higher
quality SVG image which will look better in certain circumstances.
This commit is contained in:
Chris Hill-Scott
2021-02-11 16:44:22 +00:00
parent 70b606a2d4
commit 7463510378
5 changed files with 430 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/views/product-page.scss
View File

@@ -12,13 +12,14 @@ $button-shadow-size: $govuk-border-width-form-element;
// negative margin-top it overlaps the theme bar at the bottom of the header
position: relative;
margin: -10px 0 govuk-spacing(6) * 1.5 0;
padding: 0 0 govuk-spacing(9) 0;
background: $product-page-blue;
color: $white;
&-wrapper {
@include govuk-width-container;
user-select: none;
padding: 0 0 govuk-spacing(9) 0;
@include media(desktop) {
background-image: file-url('product/proposition-illustration.png');
@@ -27,6 +28,11 @@ $button-shadow-size: $govuk-border-width-form-element;
background-position: right -6px top 100px;
}
&--alternative {
background-image: file-url('product/proposition-alternative.svg');
background-position: right 10px bottom 0;
}
}
h1 {