diff --git a/opentech/public/navigation/templates/navigation/primarynav.html b/opentech/public/navigation/templates/navigation/primarynav.html
index 15e2af945297a35afabf8fb737e24ca983a97ff9..55f4ad7e907b13e60bacbca71d4e8c8a941e8196 100644
--- a/opentech/public/navigation/templates/navigation/primarynav.html
+++ b/opentech/public/navigation/templates/navigation/primarynav.html
@@ -17,3 +17,5 @@
{% endfor %}
</ul>
</nav>
+<a href="/apply" class="link link--button-secondary link--mobile-standout">Apply</a>
+
diff --git a/opentech/static_src/src/javascript/components/desktop-search.js b/opentech/static_src/src/javascript/components/desktop-search.js
deleted file mode 100644
index 49055cdfbf38f7a5aaa89ada668ccb159f31438a..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/javascript/components/desktop-search.js
+++ /dev/null
@@ -1,23 +0,0 @@
-class DesktopSearch {
- static selector() {
- return '.js-desktop-search-toggle';
- }
-
- constructor(node, searchForm) {
- this.node = node;
- this.searchForm = searchForm;
- this.bindEventListeners();
- }
-
- bindEventListeners() {
- this.node.click(this.toggle.bind(this));
- }
-
- toggle() {
- this.searchForm[0].classList.toggle('is-visible');
- this.node[0].querySelector('.header__icon--magnifying-glass').classList.toggle('is-hidden');
- this.node[0].querySelector('.header__icon--cross').classList.toggle('is-unhidden');
- }
-}
-
-export default DesktopSearch;
diff --git a/opentech/static_src/src/javascript/components/mobile-menu.js b/opentech/static_src/src/javascript/components/mobile-menu.js
index 04bf23232c0828dc804708442eb812aec29c4647..3c01a858d4da328331185a40c02c893a7650e6a7 100644
--- a/opentech/static_src/src/javascript/components/mobile-menu.js
+++ b/opentech/static_src/src/javascript/components/mobile-menu.js
@@ -3,40 +3,40 @@ class MobileMenu {
return '.js-mobile-menu-toggle';
}
- constructor(node, openCb = () => {}, closeCb = () => {}) {
+ constructor(node, closeButton, mobileMenu, search) {
this.node = node;
-
- // Any callbacks to be called on open or close.
- this.openCb = openCb;
- this.closeCb = closeCb;
-
- this.state = {
- open: false,
- };
+ this.closeButton = closeButton;
+ this.mobileMenu = mobileMenu;
+ this.search = search;
this.bindEventListeners();
}
bindEventListeners() {
this.node.click(this.toggle.bind(this));
+ this.closeButton.click(this.toggle.bind(this));
}
toggle() {
- this.state.open ? this.close() : this.open();
- }
-
- open() {
- this.node.addClass('is-open');
- this.openCb();
-
- this.state.open = true;
- }
-
- close() {
- this.node.removeClass('is-open');
- this.closeCb();
-
- this.state.open = false;
+ // toggle mobile menu
+ this.mobileMenu[0].classList.toggle('is-visible');
+
+ // toggle modifier to change position of the search div when the mobile menu is open
+ this.search[0].classList.toggle('header__search--mobile-menu-open');
+
+ // reset the search whenever the mobile menu is toggled
+ if(this.search[0].classList.contains('is-visible')){
+ this.search[0].classList.toggle('is-visible');
+ document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
+ }
+
+ // reset the search show/hide icons
+ if(this.mobileMenu[0].classList.contains('is-visible')){
+ document.querySelector('.header__icon--open-search-menu-open').classList.remove('is-hidden');
+ document.querySelector('.header__icon--close-search-menu-open').classList.remove('is-unhidden');
+ document.querySelector('.header__icon--open-search-menu-closed').classList.remove('is-hidden');
+ document.querySelector('.header__icon--close-search-menu-closed').classList.remove('is-unhidden');
+ }
}
}
diff --git a/opentech/static_src/src/javascript/components/mobile-sub-menu.js b/opentech/static_src/src/javascript/components/mobile-sub-menu.js
deleted file mode 100644
index 59c39eb05779e5be79b8b4f0dfabbbe3ae7a939d..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/javascript/components/mobile-sub-menu.js
+++ /dev/null
@@ -1,23 +0,0 @@
-class MobileSubMenu {
- static selector() {
- return '.header__menus--mobile .js-open-subnav';
- }
-
- constructor(node) {
- this.node = node;
- this.bindEventListeners();
- }
-
- bindEventListeners() {
- this.node.on('click', (e) => {
- e.preventDefault();
- this.open();
- });
- }
-
- open() {
- this.node[0].parentElement.nextElementSibling.classList.add('is-visible');
- }
-}
-
-export default MobileSubMenu;
diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
new file mode 100644
index 0000000000000000000000000000000000000000..b36fff10f5c4da79c1ecee2f8edde1ec815da2f6
--- /dev/null
+++ b/opentech/static_src/src/javascript/components/search.js
@@ -0,0 +1,32 @@
+class Search {
+ static selector() {
+ return '.js-search-toggle';
+ }
+
+ constructor(node, searchForm) {
+ this.node = node;
+ this.searchForm = searchForm;
+ this.bindEventListeners();
+ }
+
+ bindEventListeners() {
+ this.node.click(this.toggle.bind(this));
+ }
+
+ toggle() {
+ // show the search
+ this.searchForm[0].classList.toggle('is-visible');
+
+ // swap the icons
+ this.node[0].querySelector('.header__icon--open-search').classList.toggle('is-hidden');
+ this.node[0].querySelector('.header__icon--close-search').classList.toggle('is-unhidden');
+
+ // add modifier to header__inner when the menu is open to style search element
+ document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
+
+ // add modifier to header to be able to change header icon colours
+ document.querySelector('.header').classList.toggle('search-open');
+ }
+}
+
+export default Search;
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 48fba5e67ea92ce52657db8b4227a707aff850e9..743ab06f115464241b2deac4872de0bb7b7da5d2 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -1,35 +1,13 @@
import $ from './globals';
import MobileMenu from './components/mobile-menu';
-import MobileSubMenu from './components/mobile-sub-menu';
-import DesktopSearch from './components/desktop-search';
-
-// Open the mobile menu callback
-function openMobileMenu() {
- document.querySelector('body').classList.add('no-scroll');
- document.querySelector('.header__menus--mobile').classList.add('is-visible');
-}
-
-// Close the mobile menu callback.
-function closeMobileMenu() {
- document.querySelector('body').classList.remove('no-scroll');
- document.querySelector('.header__menus--mobile').classList.remove('is-visible');
-}
+import Search from './components/search';
$(function () {
$(MobileMenu.selector()).each((index, el) => {
- new MobileMenu($(el), openMobileMenu, closeMobileMenu);
- });
-
- $(MobileSubMenu.selector()).each((index, el) => {
- new MobileSubMenu($(el));
- });
-
- $(DesktopSearch.selector()).each((index, el) => {
- new DesktopSearch($(el), $('.header__search--desktop'));
+ new MobileMenu($(el), $('.js-mobile-menu-close'), $('.header__menus--mobile'), $('.header__search'));
});
- // Toggle subnav visibility
- $('.js-subnav-back').on('click', function(){
- this.parentNode.classList.remove('is-visible');
+ $(Search.selector()).each((index, el) => {
+ new Search($(el), $('.header__search'));
});
});
diff --git a/opentech/static_src/src/sass/abstracts/_mixins.scss b/opentech/static_src/src/sass/abstracts/_mixins.scss
index 2758787ee6cd9e24b61cc7592c625f61b7a2512e..61730cf38a90c69fe4f39e6b4b346a09ec9f5839 100755
--- a/opentech/static_src/src/sass/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/abstracts/_mixins.scss
@@ -79,20 +79,18 @@
}
// button mixin
-@mixin button($bg) {
+@mixin button($bg, $hover-bg) {
padding: 10px 60px;
font-weight: $weight--bold;
+ color: $color--white;
background: $bg;
border: 1px solid $color--white;
- transition: background $transition;
-
- &:hover {
- background: darken($bg, 8%);
- transition: background $transition;
- }
+ transition: color, background, border, $transition;
+ &:hover,
&:active {
- background: darken($bg, 25%);
+ cursor: pointer;
+ background: $hover-bg;
}
}
diff --git a/opentech/static_src/src/sass/abstracts/_variables.scss b/opentech/static_src/src/sass/abstracts/_variables.scss
index 344e99f35199f3cee633b3ecc5c91b6922095d28..4b131c78344523008cb1a99b4b513425f3f5218f 100755
--- a/opentech/static_src/src/sass/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/abstracts/_variables.scss
@@ -2,8 +2,11 @@ $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--default: $color--black;
+$color--default: $color--dark-grey;
$color--primary: $color--light-blue;
$color--secondary: #eaeaea;
$color--tertiary: #f9f9f9;
diff --git a/opentech/static_src/src/sass/components/_button.scss b/opentech/static_src/src/sass/components/_button.scss
index 68b2fc4ce214d63452846b9bdcc9e3f243946b17..19e7322e6f5e92c2044a7288973317b443105ae8 100644
--- a/opentech/static_src/src/sass/components/_button.scss
+++ b/opentech/static_src/src/sass/components/_button.scss
@@ -9,21 +9,49 @@
cursor: pointer;
}
+ &--left-space {
+ margin-left: 20px;
+ }
+
+ &--contains-icons {
+ display: flex;
+ align-items: center;
+ }
+
+ &--transparent {
+ @include button(transparent, $color--white);
+
+ &:hover {
+ color: $color--dark-blue;
+ }
+ }
+
+ &--narrow {
+ padding: 5px 15px;
+ font-size: 15px;
+ }
+
// cannot conform to BEM here in order to be able to override google button styles
&--google-translate {
- display: none;
width: 180px;
-
- @include media-query(tablet-portrait) {
- display: block;
- }
+ margin-left: 10px;
.goog-te-gadget-simple {
- @include button(transparent);
+ @include button(transparent, $color--white);
padding: 5px 15px;
font-family: $font--primary;
font-size: 15px;
font-weight: $weight--bold;
+ border: 1px solid $color--white;
+ transition: background, color, $transition;
+
+ &:hover {
+ .goog-te-menu-value {
+ span {
+ color: $color--dark-blue !important; // sass-lint:disable-line no-important
+ }
+ }
+ }
.goog-te-menu-value {
color: $color--white;
@@ -31,6 +59,7 @@
span {
// color of the arrow is inlined hence !important
color: $color--white !important; // sass-lint:disable-line no-important
+ transition: color $transition;
&:nth-of-type(2) {
// hide the pipe
@@ -47,69 +76,3 @@
}
}
-.button-menu-toggle {
- position: relative;
- z-index: 10;
- display: block;
- width: 40px;
- height: 30px;
- margin-top: 5px;
- background: transparent;
- border: 0;
- transform: rotate(0deg);
- transition: $transition;
-
- &__line {
- position: absolute;
- left: 0;
- display: block;
- width: 100%;
- height: 4px;
- background: $color--white;
- opacity: 1;
- transform: rotate(0deg);
- transition: top, width, opacity, transform, left, $transition;
-
- &:nth-child(1) {
- top: 0;
-
- .is-open & {
- top: 10px;
- left: 50%;
- width: 0%;
- }
- }
-
- &:nth-child(2),
- &:nth-child(3) {
- top: 12px;
- opacity: 0.25;
-
- .is-open & {
- opacity: 1;
- }
- }
-
- &:nth-child(2) {
- .is-open & {
- transform: rotate(45deg);
- }
- }
-
- &:nth-child(3) {
- .is-open & {
- transform: rotate(-45deg);
- }
- }
-
- &:nth-child(4) {
- top: 24px;
-
- .is-open & {
- top: 10px;
- left: 50%;
- width: 0%;
- }
- }
- }
-}
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index 00dc7ee7c51f70dc475bf9f592cd879f5fff5ccf..7db3b1eae6780e904d9ec0b687258f0c5ae5917e 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -13,7 +13,7 @@
height: 15px;
margin-right: 5px;
fill: $color--primary;
- }
+ }
&--footer-social {
@include media-query(tablet-portrait) {
@@ -21,9 +21,34 @@
}
}
+ &--mobile-menu {
+ width: 32px;
+ height: 28px;
+ }
+
&--footer-credit {
width: 70px;
height: 45px;
margin-right: 3rem;
}
+
+ &--person {
+ width: 15px;
+ height: 15px;
+ margin-right: 5px;
+ transition: fill $transition;
+ fill: $color--white;
+
+ .button:hover & {
+ fill: $color--dark-blue;
+ }
+
+ .header--has-bg-image & {
+ fill: $color--dark-blue;
+ }
+
+ .search-open & {
+ fill: $color--white;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/components/_link.scss b/opentech/static_src/src/sass/components/_link.scss
index 8655ce83c5d604197057edf22d9b92e7942a6d8b..5034a9524c336847dfc5c24472b2d8178c42101b 100644
--- a/opentech/static_src/src/sass/components/_link.scss
+++ b/opentech/static_src/src/sass/components/_link.scss
@@ -1,12 +1,21 @@
.link {
&--button {
- @include button($color--light-blue);
+ @include button($color--light-blue, $color--dark-blue);
display: inline-block;
}
+ &--button-secondary {
+ @include button($color--purple, darken($color--purple, 20%));
+ border: 0;
+ }
+
&--button-transparent {
- @include button(transparent);
+ @include button(transparent, $color--darkest-blue);
color: $color--white;
+
+ &:hover {
+ border: 1px solid transparent;
+ }
}
&--underlined {
@@ -16,4 +25,17 @@
&--footer-signup {
margin-top: 1rem;
}
+
+ &--mobile-standout {
+ display: block;
+ width: 100%;
+ max-width: 250px;
+ margin: 2rem auto 0;
+ font-weight: $weight--bold;
+ text-align: center;
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/components/_nav.scss b/opentech/static_src/src/sass/components/_nav.scss
index 94a6bdd197d19bd0bdac027807ec9087a6521235..b4d94ecacce52a5dd8491c4ce88a46b7fe2f9f6b 100644
--- a/opentech/static_src/src/sass/components/_nav.scss
+++ b/opentech/static_src/src/sass/components/_nav.scss
@@ -11,6 +11,8 @@
}
&--primary {
+ text-transform: uppercase;
+
@include media-query(tablet-portrait) {
flex-direction: row;
justify-content: flex-end;
@@ -36,11 +38,6 @@
&.is-visible {
transform: translate3d(0%, 0%, 0);
}
-
- @include media-query(tablet-portrait) {
- // @todo - desktop dropdown styles
- display: none;
- }
}
&--tertiary {
@@ -59,12 +56,9 @@
}
&__item {
- width: 60%;
- padding-bottom: 10px;
margin-bottom: 10px;
font-weight: $weight--bold;
text-align: center;
- border-bottom: 1px solid rgba($color--black, 0.2);
.nav--tertiary & {
width: 100%;
@@ -89,8 +83,15 @@
border-bottom: 0;
}
- &--secondary {
- font-weight: $weight--light;
+ &--primary {
+ @include font-size(epsilon);
+ margin: 0;
+ letter-spacing: 1px;
+
+ @include media-query(tablet-landscape) {
+ @include font-size(zeta);
+ margin: 0 18px;
+ }
}
&--footer {
@@ -142,6 +143,8 @@
}
&__link {
+ display: inline-block;
+ padding: 20px 15px;
color: $color--white;
border-bottom: 1px solid transparent;
transition: color, border $transition;
@@ -151,16 +154,15 @@
}
@include media-query(tablet-landscape) {
+ display: initial;
+ padding: 0;
+
&:hover {
color: lighten($color--secondary, 20%);
border-bottom: 1px solid $color--secondary;
}
}
- @include media-query(tablet-portrait) {
- margin: 0 10px;
- }
-
&--breadcrumb {
color: $color--primary;
@@ -170,11 +172,4 @@
}
}
}
-
- &__icon {
- @include media-query(tablet-landscape) {
- // @todo - desktop dropdown styles
- display: none;
- }
- }
}
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index 6fe7b3df7b436029ac6fe26eeca066504d39a3b2..cd14d66c35c76c42d42fac275ab6a67671b5a9ad 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -32,40 +32,57 @@
align-items: center;
justify-content: space-between;
width: 100%;
- }
- &__inner--top {
- display: flex;
- align-items: center;
- justify-content: flex-end;
+ &--mobile-buttons {
+ justify-content: flex-end;
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
+ }
+
+ &--menu-open {
+ padding: 10px;
+ background: transparent;
+ transition: background $transition;
+ }
+
+ &--search-open {
+ background: $color--dark-blue;
+ }
}
&__menus {
-
&--desktop {
display: none;
@include media-query(tablet-portrait) {
display: flex;
- flex-direction: column;
- justify-content: space-between;
+ align-items: center;
}
}
&--mobile {
position: fixed;
- top: 87px;
+ top: 0;
left: 0;
- display: flex;
+ z-index: 10;
width: 100%;
height: 100%;
- padding-top: 20px;
- background: rgba($color--white, 0.95);
- transform: translate3d(100%, 0%, 0);
- transition: transform 250ms cubic-bezier(0.24, 0.26, 0.2, 1) 0ms;
+ background: $color--dark-grey;
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ transition-duration: 0.25s;
+ transition-property: transform, opacity;
+ transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
&.is-visible {
- transform: translate3d(0%, 0%, 0);
+ opacity: 1;
+ transform: translate3d(0, 0%, 0);
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
}
nav {
@@ -81,7 +98,7 @@
width: 60px;
height: 60px;
- @include media-query(tablet-portrait) {
+ @include media-query(tablet-landscape) {
display: none;
}
}
@@ -89,7 +106,7 @@
&--desktop {
display: none;
- @include media-query(tablet-portrait) {
+ @include media-query(tablet-landscape) {
display: block;
height: 50px;
max-width: 215px;
@@ -98,23 +115,13 @@
}
&__menu-toggle {
- @include font-size(milli);
- z-index: 10;
- display: flex;
- align-items: flex-end;
- flex-direction: column;
- width: 100%;
- font-weight: $weight--bold;
- color: $color--secondary;
- text-transform: uppercase;
-
@include media-query(tablet-portrait) {
display: none;
}
}
&__icon {
- &--cross {
+ &--close-search {
@extend %is-hidden;
}
@@ -144,18 +151,30 @@
}
&__search {
- &--desktop {
- @extend %is-invisible;
- position: absolute;
- top: 0;
- left: 0;
+ @extend %is-invisible;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ width: 100%;
+ height: 180px;
+ padding-bottom: 50px;
+ background: $color--dark-blue;
+
+ &--mobile-menu-open {
+ top: 80px;
+ z-index: 12;
+ height: 120px;
+ }
+ }
+
+ &__button-container {
+ display: none;
+
+ @include media-query(tablet-portrait) {
display: flex;
- align-items: flex-end;
- justify-content: center;
- width: 100%;
- height: 180px;
- padding-bottom: 50px;
- background: $color--dark-blue;
}
}
}
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 5026087380878e45b0754d141f48f9448e37fe99..7e0b0e363586387eaef7adb4b86bf6d8ed150f4d 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -81,35 +81,52 @@
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
- <div class="header__menu-toggle">
- <span>Menu</span>
- <button class="button button-menu-toggle js-mobile-menu-toggle" aria-haspopup="true">
- <span class="button-menu-toggle__line"></span>
- <span class="button-menu-toggle__line"></span>
- <span class="button-menu-toggle__line"></span>
- <span class="button-menu-toggle__line"></span>
+ <div class="header__inner header__inner--mobile-buttons">
+ <button class="button js-search-toggle" aria-haspopup="true">
+ <svg class="header__icon header__icon--open-search header__icon--open-search-menu-closed icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
+ <svg class="header__icon header__icon--close-search header__icon--close-search-menu-closed icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
+ </button>
+ <button class="button button--left-space js-mobile-menu-toggle" aria-haspopup="true">
+ <svg class="icon icon--mobile-menu"><use xlink:href="#mobile-menu-toggle"></use></svg>
</button>
</div>
<section class="header__menus header__menus--desktop">
- <div class="header__inner--top">
- {% primarynav %}
+ {% primarynav %}
- <button class="button js-desktop-search-toggle">
- <svg class="header__icon header__icon--magnifying-glass icon"><use xlink:href="#magnifying-glass"></use></svg>
- <svg class="header__icon header__icon--cross icon"><use xlink:href="#cross"></use></svg>
- </button>
- </div>
+ <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true">
+ <svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
+ <svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
+ </button>
</section>
<section class="header__menus header__menus--mobile">
+ <div class="header__inner header__inner--menu-open">
+ <a href="{% slugurl 'home' %}">
+ <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
+ </a>
+ <div class="header__inner header__inner--mobile-buttons">
+ <button class="button js-search-toggle" aria-haspopup="true">
+ <svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
+ <svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
+ </button>
+ <button class="button button--left-space js-mobile-menu-close">
+ <svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
+ </button>
+ </div>
+ </div>
{% primarynav %}
</section>
-
- <div class="button button--google-translate" id="google_translate_element"></div>
+ <div class="header__button-container">
+ <a href="#" class="button button--transparent button--narrow button--contains-icons">
+ <svg class="icon icon--person"><use xlink:href="#person-icon"></use></svg>
+ Log in
+ </a>
+ <div class="button button--google-translate" id="google_translate_element"></div>
+ </div>
</div>
- <div class="header__search header__search--desktop">
+ <div class="header__search">
<form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
<button class="button" type="submit">
<svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
@@ -181,14 +198,13 @@
<span>PGP: 67AC DDCF B909 4685 36DD BC03 F766 3861 965A 90D2</span>
</p>
-
<p><a href="/rss.xml">RSS Feed</a></p>
<p><a class="link link--underlined" href="#">Terms of Use</a></p>
<p>Test the OTF website for censorship</p>
- <a class="link link--button" href="https://run.ooni.io/nettest?tn=web_connectivity&ta=%7B%22urls%22%3A%5B%22https%3A%2F%2Fwww.opentech.fund%2F%22%5D%7D&mv=1.2.0">Run OONI!</a>
+ <a class="link link--button link--button-transparent" href="https://run.ooni.io/nettest?tn=web_connectivity&ta=%7B%22urls%22%3A%5B%22https%3A%2F%2Fwww.opentech.fund%2F%22%5D%7D&mv=1.2.0">Run OONI!</a>
<div class="footer__credits">
<a href="https://www.bbg.gov/">
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index 223ef88e3ca94c53c6135a891f778f537843a222..9035efc796840371e4ee518348336380ba182e57 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -1,12 +1,9 @@
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <symbol id="magnifying-glass" viewBox="0 0 250.313 250.313">
- <path d="M244.186,214.604l-54.379-54.378c-0.289-0.289-0.628-0.491-0.93-0.76
- c10.7-16.231,16.945-35.66,16.945-56.554C205.822,46.075,159.747,0,102.911,0S0,46.075,0,102.911
- c0,56.835,46.074,102.911,102.91,102.911c20.895,0,40.323-6.245,56.554-16.945c0.269,0.301,0.47,0.64,0.759,0.929l54.38,54.38
- c8.169,8.168,21.413,8.168,29.583,0C252.354,236.017,252.354,222.773,244.186,214.604z M102.911,170.146
- c-37.134,0-67.236-30.102-67.236-67.235c0-37.134,30.103-67.236,67.236-67.236c37.132,0,67.235,30.103,67.235,67.236
- C170.146,140.044,140.043,170.146,102.911,170.146z"/>
+ <symbol id="magnifying-glass" viewBox="0 0 24 24">
+ <g stroke="#FFF">
+ <path d="M9.412 17.824C4.772 17.824 1 14.058 1 9.412 1 4.765 4.773 1 9.412 1c4.639 0 8.412 3.774 8.412 8.412 0 4.638-3.776 8.412-8.412 8.412zm0-15.142c-3.71 0-6.73 3.02-6.73 6.73 0 3.71 3.02 6.73 6.73 6.73 3.71 0 6.73-3.02 6.73-6.73 0-3.71-3.02-6.73-6.73-6.73zM21.902 23l-5.373-5.364 1.099-1.107L23 21.894z" />
+ </g>
</symbol>
<symbol id="twitter" viewBox="0 0 20.56 18.88">
@@ -53,7 +50,21 @@
<path d="M15.056 52.5a2.575 2.575 0 0 0-2.562-2.663 2.531 2.531 0 0 0-2.538 2.638 2.575 2.575 0 0 0 2.563 2.663 2.531 2.531 0 0 0 2.537-2.638M8 52.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0M21.568 49.827H19V48h7v1.827h-2.574V57h-1.858zM29 48h7v1.8h-4.979v1.913h4.382v1.8h-4.382V57H29zM10 0h5v5h-5zM10 33h5v5h-5zM29 0h5v5h-5zM5 5h5v5H5zM5 29h5v5H5zM34 29h5v5h-5zM29 33h5v5h-5zM34 5h5v5h-5zM0 10h5v19H0zM38 10h5v19h-5z" />
</symbol>
+ <symbol id="mobile-menu-toggle" viewBox="0 0 25 21">
+ <g fill-rule="evenodd">
+ <path d="M0 0h25v3H0zM0 9h25v3H0zM0 18h25v3H0z" />
+ </g>
+ </symbol>
+
<symbol id="bbg-logo" width="67" height="46" viewBox="0 0 67 46">
<path d="M36.063 37.97c-.482.085-.98.11-1.47.112-2.145.013-4.29.006-6.434.007 1.617-3.631 1.623-7.278.107-10.94-.026-.062-.05-.126-.075-.188 2.417.008 4.833-.009 7.25.03 2.603.042 4.963 2.41 5.168 5.006.241 3.059-1.904 5.507-4.546 5.973m-20.561.116c-2.332.011-4.665-.009-6.997.017-.467.005-.562-.142-.556-.577.025-1.668.01-3.336.01-5.003 0-1.702.004-3.404-.004-5.106-.001-.29.019-.466.398-.463 2.621.023 5.243-.018 7.863.04 2.761.063 4.976 2.294 5.232 5.164.23 2.574-1.66 5.146-4.226 5.752-.567.133-1.144.174-1.72.176M8.449 7.9c2.383.021 4.766-.005 7.15.014 2.808.023 4.979 1.613 5.66 4.108.967 3.546-1.613 6.93-5.394 7.007-2.5.05-5.004.002-7.506.018-.37.002-.406-.158-.404-.457.01-1.702.004-3.404.004-5.106 0-1.685.01-3.37-.007-5.054-.004-.378.07-.534.497-.53m19.742 11.14a13.526 13.526 0 0 0 1.143-6.688 12.468 12.468 0 0 0-1.175-4.44c2.179.001 4.357.003 6.535.002 1.822 0 3.386.577 4.609 1.985 2.72 3.134 1.012 8.184-3.055 9.016-.488.1-.978.116-1.47.116l-6.587.01M53.533 7.973c2.543.18 4.802 2.477 4.93 5.022.02.382.115.515.525.512 2.485-.021 4.97-.01 7.455-.01V12.27c-.152-.738-.262-1.487-.462-2.212C64.47 4.558 60.016.759 54.34.104c-.07-.008-.132-.021-.162-.094H17.078C11.525.01 5.972.014.418 0 .069 0 0 .069 0 .419.011 15.473.011 30.527 0 45.58c0 .35.068.42.419.419 5.553-.014 11.106-.01 16.659-.01h36.998c.815-.207 1.657-.27 2.471-.498a13.526 13.526 0 0 0 9.795-11.398c.011-.095-.021-.21.1-.263V19.015c-.782.008-1.564.021-2.347.022-3.882.002-7.763.011-11.645-.011-.505-.003-.617.144-.612.627.026 2.23.033 4.46-.003 6.689-.009.545.168.64.66.632 1.839-.028 3.678-.001 5.517-.02.372-.003.496.087.49.478-.027 1.838.023 3.678-.04 5.514-.09 2.625-2.397 4.929-5.027 5.09-2.023.124-4.05.02-6.075.06l-.136.27.136-.27c2.235-5.47 1.403-10.423-2.513-14.85-.177-.2-.18-.3.003-.493 1.952-2.054 3.152-4.492 3.574-7.287.396-2.616.017-5.144-1.065-7.563 2.058.047 4.118-.075 6.174.071" fill="#FEFEFE" fill-rule="nonzero" />
</symbol>
+
+ <symbol id="person-icon" viewBox="0 0 11 13">
+ <g fill-rule="evenodd">
+ <ellipse cx="5.5" cy="3.033" rx="2.962" ry="3.033" />
+ <path d="M8.012 6.83C9.786 7.982 11 10.313 11 13H0c0-2.688 1.214-5.019 2.988-6.17a3.742 3.742 0 0 0 5.024 0z" />
+ </g>
+ </symbol>
+
</svg>