diff --git a/opentech/public/navigation/templates/navigation/primarynav.html b/opentech/public/navigation/templates/navigation/primarynav.html
index 55f4ad7e907b13e60bacbca71d4e8c8a941e8196..8059ec4de2b390df18751a5704ed9e1a879d6de4 100644
--- a/opentech/public/navigation/templates/navigation/primarynav.html
+++ b/opentech/public/navigation/templates/navigation/primarynav.html
@@ -17,5 +17,9 @@
{% endfor %}
</ul>
</nav>
+<a href="/apply" class="link link--button-transparent link--mobile-standout">
+ <svg class="icon"><use xlink:href="#person-icon"></use></svg>
+ Log in
+</a>
<a href="/apply" class="link link--button-secondary link--mobile-standout">Apply</a>
diff --git a/opentech/public/standardpages/templates/standardpages/information_page.html b/opentech/public/standardpages/templates/standardpages/information_page.html
index 878ae55ecf806dc2c9b6b5333c6b287bf56f01a9..3b6a7fe90832652efe3a9a834214836dc68d25c5 100644
--- a/opentech/public/standardpages/templates/standardpages/information_page.html
+++ b/opentech/public/standardpages/templates/standardpages/information_page.html
@@ -9,16 +9,15 @@
{% include "navigation/breadcrumbs.html" %}
{% endblock %}
- <h1>{{ page.title }}</h1>
- <h5>{{ page.introduction }}</h5>
+ {% if page.introduction %}
+ <h4 class="heading heading--introduction">{{ page.introduction }}</h4>
+ {% endif %}
{% include_block page.body %}
{% include "includes/share.html" %}
</section>
-
{% sidebar %}
-
</div>
{% include "includes/relatedcontent.html" with related_pages=page.related_pages.all %}
diff --git a/opentech/static_src/src/sass/abstracts/_mixins.scss b/opentech/static_src/src/sass/abstracts/_mixins.scss
index 61730cf38a90c69fe4f39e6b4b346a09ec9f5839..64838c965f2b428a71be7961404a9a751f81c39e 100755
--- a/opentech/static_src/src/sass/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/abstracts/_mixins.scss
@@ -94,7 +94,6 @@
}
}
-
// Viewport sized typography mixin that takes a min and max pixel-based value
@mixin responsive-font-sizes($min, $max) {
diff --git a/opentech/static_src/src/sass/abstracts/_variables.scss b/opentech/static_src/src/sass/abstracts/_variables.scss
index 4b131c78344523008cb1a99b4b513425f3f5218f..4600a0d6605810fbe05d1a60ef61efe232f76d10 100755
--- a/opentech/static_src/src/sass/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/abstracts/_variables.scss
@@ -2,9 +2,16 @@ $color--white: #fff;
$color--black: #141414;
$color--light-blue: #43bbf1;
$color--dark-blue: #25aae1;
-$color--darkest-blue: #16729e;
$color--dark-grey: #404041;
$color--purple: #8b1fbc;
+$color--darkest-blue: #3d6bdb;
+$color--twitter: #1da6f6;
+$color--linkedin: #137ab8;
+$color--facebook: #396ab5;
+$color--mid-grey: #cfcfcf;
+$color--light-grey: #f7f7f7;
+$color--mustard: #e6ab32;
+$color--purple: #8c0bbf;
$color--default: $color--dark-grey;
$color--primary: $color--light-blue;
@@ -47,6 +54,7 @@ $font-sizes: (
// Wrappers
$site-width: 1280px;
+$wrapper--medium: 1020px;
$wrapper--small: 790px;
// Breakpoints
diff --git a/opentech/static_src/src/sass/base/_base.scss b/opentech/static_src/src/sass/base/_base.scss
index 010b745f8461fbde64b3f299541cb2774068b832..59ca2a341f5dda54427ede10628eb308433606be 100755
--- a/opentech/static_src/src/sass/base/_base.scss
+++ b/opentech/static_src/src/sass/base/_base.scss
@@ -47,10 +47,8 @@ button, input, select, textarea {
a {
color: $color--primary;
text-decoration: none;
- transition: color $transition;
&:hover {
- color: darken($color--primary, 20%);
cursor: pointer;
}
}
diff --git a/opentech/static_src/src/sass/components/_blockquote.scss b/opentech/static_src/src/sass/components/_blockquote.scss
index c6b291b0dffac1e85bd74cf14440ab8e23e7f50f..b836e0ab8a6176bf4bad9f444743358cd9869063 100644
--- a/opentech/static_src/src/sass/components/_blockquote.scss
+++ b/opentech/static_src/src/sass/components/_blockquote.scss
@@ -1,6 +1,25 @@
-blockquote {
- padding: 1rem;
- margin: 1rem 0;
- background: $color--tertiary;
- border-left: 10px solid $color--secondary;
+.blockquote {
+ @extend %h3;
+ position: relative;
+ font-weight: $weight--black;
+ text-align: center;
+
+ &__cite,
+ &__job-title {
+ @include responsive-font-sizes(15px, 17px);
+ display: block;
+ font-style: normal;
+ color: $color--darkest-blue;
+ text-transform: uppercase;
+ }
+
+ &__cite {
+ h5 {
+ margin: 0;
+ }
+ }
+
+ &__job-title {
+ font-weight: $weight--normal;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_card.scss b/opentech/static_src/src/sass/components/_card.scss
index 1e62a5ee9cbd2e3e8c4652917023d22d160f702f..93ec48387748c9b126e13532a5f68e67524a90f7 100644
--- a/opentech/static_src/src/sass/components/_card.scss
+++ b/opentech/static_src/src/sass/components/_card.scss
@@ -1,11 +1,24 @@
.card {
- padding: 20px;
- background-color: $color--tertiary;
- transition: background-color $transition;
+ $root: &;
+ position: relative;
+ padding: 30px 30px 100px;
+ background-color: $color--white;
+ transition: background-color, color, $transition;
&:hover {
- background-color: darken($color--tertiary, 10%);
- }
+ color: $color--white;
+ background: $color--light-blue;
+ }
+
+ &__teaser {
+ font-size: 16px;
+ color: $color--default;
+ transition: color $transition;
+
+ #{$root}:hover & {
+ color: $color--white;
+ }
+ }
}
.card-with-image {
diff --git a/opentech/static_src/src/sass/components/_grid.scss b/opentech/static_src/src/sass/components/_grid.scss
index a390e51aae0af3fced56751eb9132194b980484c..bad0827c712d429cd95802facb72236ff463d282 100644
--- a/opentech/static_src/src/sass/components/_grid.scss
+++ b/opentech/static_src/src/sass/components/_grid.scss
@@ -15,6 +15,14 @@
}
}
+ &--two {
+ > * {
+ // fix for IE11 not rendering calc flex-basis correctly
+ flex-basis: auto;
+ width: calc(50% - 20px);
+ }
+ }
+
&--narrow {
text-align: center;
@@ -33,6 +41,7 @@
> * {
flex-basis: initial;
+ width: auto;
margin: 0;
}
@@ -55,5 +64,18 @@
grid-template-columns: 50% 50%;
}
}
+
+ &--max-three {
+ grid-template-columns: 1fr;
+ grid-gap: 30px;
+
+ @include media-query(mob-landscape) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @include media-query(tablet-portrait) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
}
}
diff --git a/opentech/static_src/src/sass/components/_heading.scss b/opentech/static_src/src/sass/components/_heading.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7c3fa5fc47b7f494e1bd16f135956e577005f2ce
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_heading.scss
@@ -0,0 +1,8 @@
+.heading {
+ &--introduction {
+ padding: 0 0 2rem;
+ margin: 2rem 0;
+ font-weight: $weight--light;
+ border-bottom: 1px solid $color--mid-grey;
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index 7db3b1eae6780e904d9ec0b687258f0c5ae5917e..af9aeeb875cf8abcb989a4ec4c5206aaf4700c87 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -4,10 +4,6 @@
transition: fill $transition;
fill: $color--white;
- &:hover {
- fill: darken($color--white, 20%);
- }
-
&--home {
width: 15px;
height: 15px;
@@ -51,4 +47,32 @@
fill: $color--white;
}
}
+
+
+ &--social-share {
+ width: 40px;
+ height: 40px;
+ padding: 10px;
+ margin-right: 5px;
+ }
+
+ &--twitter-share {
+ background: $color--twitter;
+ }
+
+ &--linkedin-share {
+ background: $color--linkedin;
+ }
+
+ &--facebook-share {
+ background: $color--facebook;
+ }
+
+ &--card-pixels {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 35px;
+ height: 52px;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_link.scss b/opentech/static_src/src/sass/components/_link.scss
index 5034a9524c336847dfc5c24472b2d8178c42101b..c4ec4368c45e79f674ec64ddd0ea1f7a6f8bc75e 100644
--- a/opentech/static_src/src/sass/components/_link.scss
+++ b/opentech/static_src/src/sass/components/_link.scss
@@ -30,7 +30,7 @@
display: block;
width: 100%;
max-width: 250px;
- margin: 2rem auto 0;
+ margin: 1rem auto 0;
font-weight: $weight--bold;
text-align: center;
@@ -38,4 +38,23 @@
display: none;
}
}
+
+ &--fixed-apply {
+ @include button($color--purple, darken($color--purple, 20%));
+ position: fixed;
+ bottom: 0;
+ z-index: 100;
+ display: none;
+ color: $color--white;
+ border: 0;
+
+ @include media-query(tablet-portrait) {
+ right: 5%;
+ display: block;
+ }
+
+ @include media-query(tablet-landscape) {
+ right: 10%;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/components/_responsive-object.scss b/opentech/static_src/src/sass/components/_responsive-object.scss
index 9207dd118a35ff84e758385c295825b77a259727..7b64731c0eb9badbdb35255336a8d0a20b868cde 100644
--- a/opentech/static_src/src/sass/components/_responsive-object.scss
+++ b/opentech/static_src/src/sass/components/_responsive-object.scss
@@ -1,5 +1,10 @@
.responsive-object {
position: relative;
+ margin-bottom: 2rem;
+
+ @include media-query(tablet-portrait) {
+ margin-bottom: 4rem;
+ }
iframe,
object,
diff --git a/opentech/static_src/src/sass/components/_rich-text.scss b/opentech/static_src/src/sass/components/_rich-text.scss
index 0b8516bed58ffde776bed28c99d33bb07a1cebd5..b979962ba2e9cd0e6a1211748a220d340be9acc6 100644
--- a/opentech/static_src/src/sass/components/_rich-text.scss
+++ b/opentech/static_src/src/sass/components/_rich-text.scss
@@ -1,9 +1,30 @@
.rich-text {
+ margin-bottom: 2rem;
+
+ a {
+ font-weight: $weight--bold;
+ border-bottom: 1px solid transparent;
+ transition: border, color, 0.15s ease-in-out;
+
+ &:hover {
+ border-bottom: 1px solid $color--primary;
+ }
+ }
+
ul {
- list-style: inside disc;
+ padding-left: 20px;
+ list-style: outside disc;
+
+ li {
+ margin-bottom: 1rem;
+ }
}
ol {
list-style: inside decimal;
+
+ li {
+ margin-bottom: 1rem;
+ }
}
}
diff --git a/opentech/static_src/src/sass/components/_section.scss b/opentech/static_src/src/sass/components/_section.scss
index 6aa8bbe777b8a6416f6d01d60b22bab68d68940a..d2c7de54342dea364d529ab3ac8ae4e15d1ea272 100644
--- a/opentech/static_src/src/sass/components/_section.scss
+++ b/opentech/static_src/src/sass/components/_section.scss
@@ -6,4 +6,10 @@
margin: 0 auto;
}
}
+
+ &--share {
+ padding: 2rem 0;
+ margin: 3rem 0;
+ border-top: 1px solid $color--mid-grey;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index 66af824b9e4fca032d1d5b37f337729ae20b0316..91d02d6555ef754288dc69452a427259cb86f16b 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -6,22 +6,82 @@
margin: 0 auto;
}
+ &--medium {
+ max-width: $wrapper--medium;
+ margin: 0 auto;
+ }
+
&--large {
max-width: $site-width;
margin: 0 auto;
}
&--main {
- padding: 20px;
+ padding: 20px 20px 0;
background-color: $color--white;
}
- &--flex {
- display: flex;
- flex-direction: column;
+ &--breakout {
+ position: relative;
+ right: 50%;
+ left: 50%;
+ width: 100vw;
+ margin-right: -50vw;
+ margin-left: -50vw;
+ }
+
+ &--blockquote {
+ padding: 1rem 0;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ background: $color--light-grey;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 0;
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+
+ svg {
+ position: absolute;
+ display: none;
+ width: 110px;
+ height: 110px;
+ fill: $color--white;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ }
+
+ &:first-child {
+ top: 0;
+ left: 0;
+ transform: rotate(90deg);
+ }
+
+ &:last-child {
+ right: 0;
+ bottom: 0;
+ transform: rotate(-90deg);
+ }
+ }
+ }
+
+ &--dark-bg {
+ padding: 2rem 20px;
+ color: $color--white;
+ background-color: $color--mustard;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
+ }
+ }
+
+ &--streamfield {
+ margin-bottom: 2rem;
@include media-query(tablet-portrait) {
- flex-direction: row;
+ margin-bottom: 4rem;
}
}
}
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index cd14d66c35c76c42d42fac275ab6a67671b5a9ad..9fed8c40fc5dcab5fd8a493d06a03a1f3da3bf46 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -130,7 +130,7 @@
bottom: 0;
display: none;
- @include media-query(tablet-portrait) {
+ @include media-query(tablet-landscape) {
display: block;
}
}
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index ad5b05fa11817a6633152cbe889bdb41fe09c1e7..2562ffb8f8bfb329f9283e68b7e647370325ce60 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -16,6 +16,7 @@
@import 'components/card';
@import 'components/call-to-action';
@import 'components/form';
+@import 'components/heading';
@import 'components/grid';
@import 'components/icon';
@import 'components/input';
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 7e0b0e363586387eaef7adb4b86bf6d8ed150f4d..7b16d2cf96d14c1f3f02997d37bd9d8b43b744de 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -75,6 +75,7 @@
<header class="header header--standard">
{% endif %}
+ <a href="#" class="link link--fixed-apply">Apply</a>
<div class="header__inner wrapper wrapper--large">
<a href="{% slugurl 'home' %}">
<svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop"></use></svg>
diff --git a/opentech/templates/blocks/image_block.html b/opentech/templates/blocks/image_block.html
index 23cd319df6ea7fe3157904495fdc0e481dec7de1..50a43af2e6e39161c1e86539ccca910a1af958a5 100644
--- a/opentech/templates/blocks/image_block.html
+++ b/opentech/templates/blocks/image_block.html
@@ -1,4 +1,5 @@
{% load wagtailimages_tags %}
-
-{% image value.image original %}
-<p>{{ value.caption }}</p>
+<div class="wrapper wrapper--streamfield">
+ {% image value.image original %}
+ <p>{{ value.caption }}</p>
+</div>
diff --git a/opentech/templates/blocks/quote_block.html b/opentech/templates/blocks/quote_block.html
index 8af2d06ef4232167609fdb8cf155a058d305ae01..97f35842e2f764978a834af8447207b0b0de0b8d 100644
--- a/opentech/templates/blocks/quote_block.html
+++ b/opentech/templates/blocks/quote_block.html
@@ -1,5 +1,15 @@
-<blockquote>
- <p>{{ value.quote }}</p>
- {% if value.attribution %}{{ value.attribution }}{% endif %}
- {% if value.attribution %}{{ value.job_title }}{% endif %}
-</blockquote>
+<div class="wrapper wrapper--breakout wrapper--blockquote">
+ <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+ <div class="wrapper wrapper--medium">
+ <blockquote class="blockquote" {% if value.attribution %} cite="{{ value.attribution }}"{% endif %}>
+ <p>{{ value.quote }}</p>
+ {% if value.attribution %}
+ <cite class="blockquote__cite"><h5>{{ value.attribution }}</h5></cite>
+ {% endif %}
+ {% if value.job_title %}
+ <div class="blockquote__job-title">{{ value.job_title }}</div>
+ {% endif %}
+ </blockquote>
+ </div>
+ <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+</div>
diff --git a/opentech/templates/includes/relatedcontent.html b/opentech/templates/includes/relatedcontent.html
index 439bcdf0ea3c2f29c5660a167b64d108366d4c74..71fd15281d92f98faf99b4b0ec68e6234f0b8965 100644
--- a/opentech/templates/includes/relatedcontent.html
+++ b/opentech/templates/includes/relatedcontent.html
@@ -1,41 +1,47 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% if related_documents or related_pages %}
- <section class="grid">
- {% for related_document in related_documents %}
- {% with document=related_document.document %}
- <div class="card">
- <a href="{{ document.url }}">
- <h2>
- {% if related_document.title %}
- {{ related_document.title }}
- ({{ document.file_extension }})
- {% else %}
- {{ document.filename }}
- {% endif %}
- </h2>
- </a>
- </div>
- {% endwith %}
- {% endfor %}
+ <div class="wrapper wrapper--breakout wrapper--dark-bg">
+ <div class="wrapper wrapper--medium">
+ <h2>You might also like...</h2>
+ <section class="grid grid--max-three">
+ {% for related_document in related_documents %}
+ {% with document=related_document.document %}
+ <div class="card">
+ <a href="{{ document.url }}">
+ <h2>
+ {% if related_document.title %}
+ {{ related_document.title }}
+ ({{ document.file_extension }})
+ {% else %}
+ {{ document.filename }}
+ {% endif %}
+ </h2>
+ </a>
+ </div>
+ {% endwith %}
+ {% endfor %}
- {% for related in related_pages %}
- {# a related object links to the original page (related.source_page) and a related one (related.page) #}
- {% if related.page.live %}
- {% with specific_related_page=related.page.specific %}
- <a class="card" href="{% pageurl specific_related_page %}">
- {% if specific_related_page.listing_image %}
- {% image specific_related_page.listing_image fill-450x300 %}
- {% endif %}
- <h2>
- {{ specific_related_page.listing_title|default:specific_related_page.title }}
- </h2>
- {% if specific_related_page.listing_summary or specific_related_page.introduction %}
- <p>{{ specific_related_page.listing_summary|default:specific_related_page.introduction }}</p>
- {% endif %}
- </a>
- {% endwith %}
- {% endif %}
- {% endfor %}
- </section>
+ {% for related in related_pages %}
+ {# a related object links to the original page (related.source_page) and a related one (related.page) #}
+ {% if related.page.live %}
+ {% with specific_related_page=related.page.specific %}
+ <a class="card" href="{% pageurl specific_related_page %}">
+ {% if specific_related_page.listing_image %}
+ {% image specific_related_page.listing_image fill-450x300 %}
+ {% endif %}
+ <h4>
+ {{ specific_related_page.listing_title|default:specific_related_page.title }}
+ </h4>
+ {% if specific_related_page.listing_summary or specific_related_page.introduction %}
+ <p class="card__teaser">{{ specific_related_page.listing_summary|default:specific_related_page.introduction|truncatechars_html:130 }}</p>
+ {% endif %}
+ <svg class="icon icon--card-pixels"><use xlink:href="#arrow-head-pixels"></use></svg>
+ </a>
+ {% endwith %}
+ {% endif %}
+ {% endfor %}
+ </section>
+ </div>
+ </div>
{% endif %}
diff --git a/opentech/templates/includes/share.html b/opentech/templates/includes/share.html
index b88c922e037c82affac9fc456c12e3488f1af1bf..405f2b5a7453edee162dd85efd74ab1598fd4388 100644
--- a/opentech/templates/includes/share.html
+++ b/opentech/templates/includes/share.html
@@ -1,25 +1,24 @@
{% load util_tags wagtailimages_tags %}
-<div class="share">
+<section class="section section--share">
+ <h5>Share</h5>
{% image page.social_image fill-150x150 as social_img %}
{% with settings.utils.SocialMediaSettings as social_media_settings %}
- <ul>
- <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
- <li><a href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&url={{ page.full_url|urlencode }}&via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">Share on Twitter</a></li>
+ <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
+ <a href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&url={{ page.full_url|urlencode }}&via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">
+ <svg class="icon icon--social-share icon--twitter-share"><use xlink:href="#twitter"></use></svg>
+ </a>
- <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
- <li><a
- href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.full_url|urlencode }}&title={{ page.title|urlencode }}&summary={{ page|social_text:request.site|urlencode }}&source={{ social_media_settings.site_name|urlencode }}"
- title="Share on LinkedIn">Share on LinkedIn</a></li>
+ <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
+ <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.full_url|urlencode }}&title={{ page.title|urlencode }}&summary={{ page|social_text:request.site|urlencode }}&source={{ social_media_settings.site_name|urlencode }}"
+ title="Share on LinkedIn">
+ <svg class="icon icon--social-share icon--linkedin-share"><use xlink:href="#linkedin"></use></svg>
+ </a>
- <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
- <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
- <li><a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&name={{ page.title|urlencode }}&description={{ page|social_text:request.site|urlencode }}&redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">Share on Facebook</a></li>
-
- <!-- see https://developers.google.com/+/web/share/#sharelink -->
- <li><a href="https://plus.google.com/share?url={{ page.full_url|urlencode }}" title="Share on Google Plus">Share on Google Plus</a></li>
-
- </ul>
-
+ <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
+ <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
+ <a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&name={{ page.title|urlencode }}&description={{ page|social_text:request.site|urlencode }}&redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">
+ <svg class="icon icon--social-share icon--facebook-share"><use xlink:href="#facebook"></use></svg>
+ </a>
{% endwith %}
-</div>
+</section>
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index 9035efc796840371e4ee518348336380ba182e57..9079365de0a520973ff0f14a24787ff0e845c046 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -67,4 +67,17 @@
</g>
</symbol>
+
+ <symbol id="linkedin" viewBox="0 0 17 16" >
+ <path d="M17 9.81V16h-3.644v-5.776c0-1.45-.527-2.441-1.846-2.441-1.006 0-1.605.667-1.87 1.313-.095.23-.12.552-.12.875V16H5.875s.05-9.782 0-10.796H9.52v1.53l-.024.035h.024v-.035c.484-.734 1.349-1.783 3.284-1.783C15.202 4.95 17 6.494 17 9.81zM2.062 0C.816 0 0 .806 0 1.865 0 2.9.792 3.73 2.014 3.73h.024c1.272 0 2.062-.83 2.062-1.866C4.076.805 3.31 0 2.062 0zM.216 16H3.86V5.204H.216V16z" fill-rule="nonzero" />
+ </symbol>
+
+ <symbol id="arrow-head-pixels" viewBox="0 0 50 75">
+ <g fill="#25AAE1" fill-rule="evenodd">
+ <path opacity=".2" d="M0 50h25v25H0z" />
+ <path opacity=".15" d="M25 25h25v25H25z" />
+ <path opacity=".1" d="M0 0h25v25H0z" />
+ </g>
+ </symbol>
+
</svg>