diff --git a/src/images/diane-abbott.jpg b/src/images/diane-abbott.jpg new file mode 100644 index 00000000..09be8b1e Binary files /dev/null and b/src/images/diane-abbott.jpg differ diff --git a/src/stylesheets/elements/_media.scss b/src/stylesheets/elements/_media.scss index fd705499..37a3c31e 100644 --- a/src/stylesheets/elements/_media.scss +++ b/src/stylesheets/elements/_media.scss @@ -25,7 +25,7 @@ video { .section--primary { img { - width: 126px; + width: 295px; border-radius: 4px; margin-bottom: $base-spacing-unit-small; } @@ -35,12 +35,12 @@ video { .section--primary { img { float: right; - width: 144px; + width: 295px; margin-bottom: 0; } img + .section--primary__block { float: left; - width: 75%; + width: 41.6666666667%; } } } diff --git a/src/stylesheets/objects/_content-layouts.scss b/src/stylesheets/objects/_content-layouts.scss index 9e2ec884..cb225710 100644 --- a/src/stylesheets/objects/_content-layouts.scss +++ b/src/stylesheets/objects/_content-layouts.scss @@ -58,6 +58,13 @@ padding-top: $base-spacing-unit-small; padding-bottom: ($base-spacing-unit-tiny - 1); // -1px to compensate for border height } + &__bottom { + padding-bottom: ($base-spacing-unit-medium - 1); // -1px to compensate for border height + border-bottom: 1px solid $grey-3; + @include media($desktop) { + padding-bottom: ($base-spacing-unit-large - 1); // -1px to compensate for border height + } + } } // Column Layout Options diff --git a/src/templates/prototypes/people-id.pug b/src/templates/prototypes/people-id.pug index 2ab60e9e..5ce6dcdb 100644 --- a/src/templates/prototypes/people-id.pug +++ b/src/templates/prototypes/people-id.pug @@ -1,57 +1,21 @@ extends ../../layouts/layout.pug block content - .section--primary(id="content") - .container - .section--primary__container - +image('../../images/diane_abbott.png', 'Dianne Abbott') - .section--primary__block - h1 Diane Abbott - .block--border - p MP for #[+link('#', 'Hackney North and Stoke Newington')] - p #[+link('#', 'View all current Labour MPs')] - .block--border - p Labour - section - .container - h2 Contact Details - //- Representative Information - .highlight--box.highlight--primary__soft - p Find out #[+link('#', "When an MP can help you and when they can't")]. - p If you contact an MP who does not represent your constituency, they may not get back to you. - .highlight--box.highlight--caution__soft - p Please include your postcode when emailing an MP. - //- Contact Details - dl.list--definition - dt Email: - dd #[+link('mailto:ayo.sanusi@parliament.uk', 'ayo.sanusi@parliament.uk')] - dt Phone: - dd #[+link('tel:02072194426', '020 7219 4426')] - dt Address: - dd House of Commons, London, SW1A 0AA - .line-break--sm - dl.list--definition - dt Email: - dd #[+link('mailto:ayo.sanusi@parliament.uk', 'ayo.sanusi@parliament.uk')] - dt Phone: - dd #[+link('tel:02072194426', '020 7219 4426')] - dt Address: - dd House of Commons, London, SW1A 0AA + .section--primary(id="content") + .container + .block--border__bottom + .section--primary__container + +image('../../images/diane-abbott.jpg', 'Dianne Abbott') + .section--primary__block + h1 Diane Abbott + p #[+link('#', 'Labour')] MP for #[+link('#', 'Hackney North and Stoke Newington')] - section - .container - //- Membership History - h2 Biography - h3 Lords - ol.list--pipe - each object in [{sitting_duration: '1987 - 2015', party: 'Labour'}] - li - p= object.sitting_duration - p #[+link('#', object.party)] - - h3 Commons - ol.list--pipe - each object in [{constituency: 'Hackney North and Stoke Newington', sitting_duration: '2015 - Current', party: "Labour"},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '1987 - 2015', party: 'Labour'}] - li - p MP for #[+link('#', object.constituency)] - p= object.sitting_duration - p #[+link('#', object.party)] + section + .container + //- Membership History + h2 Roles + h3 Member of the House of Commons + ol.list--pipe + each object in [{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '7 May 2015 - 3 May 2017'}] + li + p MP for #[+link('#', object.constituency)] + p= object.sitting_duration