diff --git a/opentech/static_src/src/javascript/components/desktop-search.js b/opentech/static_src/src/javascript/components/desktop-search.js
new file mode 100644
index 0000000000000000000000000000000000000000..49055cdfbf38f7a5aaa89ada668ccb159f31438a
--- /dev/null
+++ b/opentech/static_src/src/javascript/components/desktop-search.js
@@ -0,0 +1,23 @@
+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/main.js b/opentech/static_src/src/javascript/main.js
index f02bc0be4258212b329e3f0c67fb725e77fab51b..48fba5e67ea92ce52657db8b4227a707aff850e9 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -1,6 +1,7 @@
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() {
@@ -23,6 +24,10 @@ $(function () {
new MobileSubMenu($(el));
});
+ $(DesktopSearch.selector()).each((index, el) => {
+ new DesktopSearch($(el), $('.header__search--desktop'));
+ });
+
// Toggle subnav visibility
$('.js-subnav-back').on('click', function(){
this.parentNode.classList.remove('is-visible');
diff --git a/opentech/static_src/src/sass/components/_form.scss b/opentech/static_src/src/sass/components/_form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bf480de5bf7eaebe5f508c5b8fa2c6cc7dcb940b
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_form.scss
@@ -0,0 +1,6 @@
+.form {
+ &--header-search-desktop {
+ width: 300px;
+ border-bottom: 1px solid $color--white;
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_input.scss b/opentech/static_src/src/sass/components/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..98d0e903291f2b7ab97f454a34f993d57ebdd089
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_input.scss
@@ -0,0 +1,7 @@
+.input {
+ &--transparent {
+ color: $color--white;
+ background: transparent;
+ border: 0;
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_nav.scss b/opentech/static_src/src/sass/components/_nav.scss
index 0faa9c29731a840247dba77946011cd658488c5c..94a6bdd197d19bd0bdac027807ec9087a6521235 100644
--- a/opentech/static_src/src/sass/components/_nav.scss
+++ b/opentech/static_src/src/sass/components/_nav.scss
@@ -85,20 +85,8 @@
width: auto;
padding: 0;
margin: 0;
- font-weight: $weight--light;
text-align: left;
border-bottom: 0;
-
- &::after {
- color: $color--tertiary;
- content: '|';
- }
-
- &:last-of-type {
- &::after {
- content: '';
- }
- }
}
&--secondary {
@@ -154,7 +142,7 @@
}
&__link {
- color: rgba($color--black, 0.7);
+ color: $color--white;
border-bottom: 1px solid transparent;
transition: color, border $transition;
@@ -170,9 +158,7 @@
}
@include media-query(tablet-portrait) {
- padding: 5px 0;
margin: 0 10px;
- color: $color--secondary;
}
&--breadcrumb {
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index 90e0a9fa7678186ef5051f919df04542c6b86a3e..6fe7b3df7b436029ac6fe26eeca066504d39a3b2 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -1,14 +1,37 @@
.header {
+ position: relative;
padding: 10px;
background-color: $color--primary;
@include media-query(tablet-portrait) {
+ height: 410px;
padding: 20px;
}
+ &--standard {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ &--has-bg-image {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ }
+
+ &__title {
+ color: $color--white;
+ text-transform: uppercase;
+ }
+
&__inner {
+ position: relative;
+ z-index: 10;
display: flex;
+ align-items: center;
justify-content: space-between;
+ width: 100%;
}
&__inner--top {
@@ -26,7 +49,6 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- width: 100%;
}
}
@@ -53,10 +75,25 @@
}
&__logo {
- max-width: 100px;
+ fill: $color--white;
- @include media-query(tablet-portrait) {
- max-width: 100%;
+ &--mobile {
+ width: 60px;
+ height: 60px;
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
+ }
+
+ &--desktop {
+ display: none;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ height: 50px;
+ max-width: 215px;
+ }
}
}
@@ -75,4 +112,50 @@
display: none;
}
}
+
+ &__icon {
+ &--cross {
+ @extend %is-hidden;
+ }
+
+ &--pixels {
+ position: absolute;
+ bottom: 0;
+ display: none;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ }
+ }
+
+ &--pixels-left {
+ left: 0;
+ width: 105px;
+ height: 98px;
+ fill: $color--white;
+ }
+
+ &--pixels-right {
+ right: 0;
+ width: 295px;
+ height: 300px;
+ fill: $color--dark-blue;
+ }
+ }
+
+ &__search {
+ &--desktop {
+ @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;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index 8550f65b991f5e33c5ffff36769248c21be851dc..894cca36135fe18d668abe003906adfd4b56a275 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -15,8 +15,10 @@
@import 'components/blockquote';
@import 'components/card';
@import 'components/call-to-action';
+@import 'components/form';
@import 'components/grid';
@import 'components/icon';
+@import 'components/input';
@import 'components/nav';
@import 'components/responsive-object';
@import 'components/rich-text';
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 50f376e90d20562be6683036abf1fc628dc3b1b0..137faddc17d64de5d7cc2b6d9790adb1890b448d 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -68,10 +68,16 @@
{% wagtailuserbar %}
- <header class="header">
+ {# {% if page.header_image %} #}
+ <!-- <header class="header header--standard header--has-bg-image" style="background-image:url('')"> -->
+ {# {% else %} #}
+ <header class="header header--standard">
+ {# {% endif %} #}
+
<div class="header__inner wrapper wrapper--large">
<a href="{% slugurl 'home' %}">
- <img class="header__logo" src="https://placehold.it/150x100" alt="Logo for opentech">
+ <svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop"></use></svg>
+ <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
<div class="header__menu-toggle">
@@ -86,22 +92,35 @@
<section class="header__menus header__menus--desktop">
<div class="header__inner--top">
- {% secondarynav %}
- <form action="{% url 'search' %}" method="get" role="search" class="form form--header-search">
- <input class="input" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
- <button class="button" type="submit">
- <svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
- </button>
- </form>
- </div>
+ {% 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>
</section>
<section class="header__menus header__menus--mobile">
{% primarynav %}
</section>
+
+ </div>
+
+ <div class="header__search header__search--desktop">
+ <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>
+ </button>
+ <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
+ </form>
+ </div>
+
+ <div class="wrapper wrapper--small">
+ <h1 class="header__title">{{ page.title }}</h1>
</div>
+ <svg class="header__icon header__icon--pixels header__icon--pixels-left"><use xlink:href="#hero-standard-left-pixels"></use></svg>
+ <svg class="header__icon header__icon--pixels header__icon--pixels-right"><use xlink:href="#hero-standard-right-pixels"></use></svg>
</header>
<main class="wrapper wrapper--large wrapper--main">
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index d7a6ab231134408e1d5fdaa77453ac26e5ea1fba..b8057d6a69be6b9993f5f37d3ecca80f067d6a93 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -1,24 +1,55 @@
<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>
-
- <symbol id="twitter" viewBox="0 0 20.56 18.88">
- <path d="M20.56,2.24A7.69,7.69,0,0,1,18.14,3,4.71,4.71,0,0,0,20,.35,7.86,7.86,0,0,1,17.31,1.5,4,4,0,0,0,14.23,0,4.52,4.52,0,0,0,10,4.77a5.32,5.32,0,0,0,.11,1.09,11.58,11.58,0,0,1-8.69-5,5.24,5.24,0,0,0-.57,2.4,5,5,0,0,0,1.88,4,3.86,3.86,0,0,1-1.91-.6V6.7a4.66,4.66,0,0,0,3.38,4.67,3.67,3.67,0,0,1-1.11.17,3.72,3.72,0,0,1-.79-.08,4.32,4.32,0,0,0,3.94,3.31,7.87,7.87,0,0,1-5.24,2,7.51,7.51,0,0,1-1-.07,11,11,0,0,0,6.47,2.14c7.76,0,12-7.26,12-13.56,0-.21,0-.41,0-.62a9.25,9.25,0,0,0,2.1-2.47"/>
- </symbol>
-
- <symbol id="facebook" viewBox="0 0 8.95 20.95">
- <path d="M0,6.93H1.92V4.82a6.24,6.24,0,0,1,.62-3.25A3.29,3.29,0,0,1,5.51,0,10.75,10.75,0,0,1,8.95.39L8.47,3.6a5.8,5.8,0,0,0-1.54-.26c-.75,0-1.41.3-1.41,1.14V6.93H8.57l-.21,3.13H5.51V21H1.92V10.06H0Z"/>
- </symbol>
-
- <symbol id="home" viewBox="0 0 512 512">
+ <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>
+
+ <symbol id="twitter" viewBox="0 0 20.56 18.88">
+ <path d="M20.56,2.24A7.69,7.69,0,0,1,18.14,3,4.71,4.71,0,0,0,20,.35,7.86,7.86,0,0,1,17.31,1.5,4,4,0,0,0,14.23,0,4.52,4.52,0,0,0,10,4.77a5.32,5.32,0,0,0,.11,1.09,11.58,11.58,0,0,1-8.69-5,5.24,5.24,0,0,0-.57,2.4,5,5,0,0,0,1.88,4,3.86,3.86,0,0,1-1.91-.6V6.7a4.66,4.66,0,0,0,3.38,4.67,3.67,3.67,0,0,1-1.11.17,3.72,3.72,0,0,1-.79-.08,4.32,4.32,0,0,0,3.94,3.31,7.87,7.87,0,0,1-5.24,2,7.51,7.51,0,0,1-1-.07,11,11,0,0,0,6.47,2.14c7.76,0,12-7.26,12-13.56,0-.21,0-.41,0-.62a9.25,9.25,0,0,0,2.1-2.47"/>
+ </symbol>
+
+ <symbol id="facebook" viewBox="0 0 8.95 20.95">
+ <path d="M0,6.93H1.92V4.82a6.24,6.24,0,0,1,.62-3.25A3.29,3.29,0,0,1,5.51,0,10.75,10.75,0,0,1,8.95.39L8.47,3.6a5.8,5.8,0,0,0-1.54-.26c-.75,0-1.41.3-1.41,1.14V6.93H8.57l-.21,3.13H5.51V21H1.92V10.06H0Z"/>
+ </symbol>
+
+ <symbol id="home" viewBox="0 0 512 512">
<g><path d="M506.555,208.064L263.859,30.367c-4.68-3.426-11.038-3.426-15.716,0L5.445,208.064 c-5.928,4.341-7.216,12.665-2.875,18.593s12.666,7.214,18.593,2.875L256,57.588l234.837,171.943c2.368,1.735,5.12,2.57,7.848,2.57 c4.096,0,8.138-1.885,10.744-5.445C513.771,220.729,512.483,212.405,506.555,208.064z"/></g>
<g><path d="M442.246,232.543c-7.346,0-13.303,5.956-13.303,13.303v211.749H322.521V342.009c0-36.68-29.842-66.52-66.52-66.52 s-66.52,29.842-66.52,66.52v115.587H83.058V245.847c0-7.347-5.957-13.303-13.303-13.303s-13.303,5.956-13.303,13.303v225.053 c0,7.347,5.957,13.303,13.303,13.303h133.029c6.996,0,12.721-5.405,13.251-12.267c0.032-0.311,0.052-0.651,0.052-1.036v-128.89 c0-22.009,17.905-39.914,39.914-39.914s39.914,17.906,39.914,39.914v128.89c0,0.383,0.02,0.717,0.052,1.024 c0.524,6.867,6.251,12.279,13.251,12.279h133.029c7.347,0,13.303-5.956,13.303-13.303V245.847 C455.549,238.499,449.593,232.543,442.246,232.543z"/></g>
</symbol>
+
+ <symbol id="cross" viewBox="0 0 21.9 21.9">
+ <path d="M14.1 11.3c-.2-.2-.2-.5 0-.7l7.5-7.5c.2-.2.3-.5.3-.7s-.1-.5-.3-.7L20.2.3c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.7.3l-7.5 7.5c-.2.2-.5.2-.7 0L3.1.3C2.9.1 2.6 0 2.4 0s-.5.1-.7.3L.3 1.7c-.2.2-.3.5-.3.7s.1.5.3.7l7.5 7.5c.2.2.2.5 0 .7L.3 18.8c-.2.2-.3.5-.3.7s.1.5.3.7l1.4 1.4c.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.2-.2.5-.2.7 0l7.5 7.5c.2.2.5.3.7.3s.5-.1.7-.3l1.4-1.4c.2-.2.3-.5.3-.7s-.1-.5-.3-.7l-7.5-7.5z"/>
+ </symbol>
+
+ <symbol id="hero-standard-right-pixels" viewBox="0 0 326 333">
+ <g fill-rule="nonzero">
+ <path opacity=".505" d="M271 333h55v-55h-55z" />
+ <path opacity=".75" d="M218 278h55v-55h-55z" />
+ <path opacity=".594" d="M163 333h55v-55h-55z" />
+ <path d="M163 221h55v-55h-55z" />
+ <path opacity=".505" d="M110 55h55V0h-55z" />
+ <path opacity=".75" d="M55 112h55V57H55z" />
+ <path opacity=".594" d="M0 167h55v-55H0z" />
+ <path d="M0 55h55V0H0z" />
+ <path opacity=".75" d="M271 55h55V0h-55z" />
+ <path opacity=".45" d="M53 332h55v-55H53z" />
+ </g>
+ </symbol>
+
+ <symbol id="hero-standard-left-pixels" viewBox="0 0 107 100">
+ <path d="M0 0h57v100H0zM57 50h50v50H57z" />
+ </symbol>
+
+ <symbol id="logo-desktop" viewBox="0 0 213 48">
+ <path d="M12 0h6v6h-6zM12 42h6v6h-6zM6 6h6v6H6zM6 36h6v6H6zM0 12h6v24H0zM79.417 6A3.433 3.433 0 0 0 76 2.45a3.375 3.375 0 0 0-3.392 3.517 3.433 3.433 0 0 0 3.417 3.55A3.375 3.375 0 0 0 79.408 6M70 6a6 6 0 1 1 12 0 6 6 0 0 1-12 0M91.487 5.565a1.79 1.79 0 0 0 1.371-.406c.377-.319.597-.778.605-1.264 0-1.084-.778-1.63-2.026-1.63h-1.925V5.64l1.975-.074zM87.017 0h4.638C94.359 0 96 1.564 96 3.813c0 2.559-2.043 3.879-4.588 3.879h-1.9V11H87l.017-11zM101 0h7.922v2.16h-5.62v2.224h4.946v2.16h-4.946v2.305H109V11h-8zM114 0h2.284l5.274 6.779V0H124v11h-2.11l-5.448-6.99V11H114zM75.302 20.232H72V18h9v2.232h-3.31V29h-2.388zM86 18h7.93v2.151h-5.633v2.233h4.958v2.151h-4.958v2.314H94V29h-8zM99.002 23.509a5.368 5.368 0 0 1 1.63-3.934 5.563 5.563 0 0 1 4.017-1.568 5.652 5.652 0 0 1 4.271 1.642l-1.52 1.722a4.032 4.032 0 0 0-2.767-1.203 3.225 3.225 0 0 0-2.29 1.001 3.112 3.112 0 0 0-.854 2.316c-.057.86.247 1.704.841 2.337a3.225 3.225 0 0 0 2.303 1.012 3.942 3.942 0 0 0 2.847-1.25l1.52 1.51a5.588 5.588 0 0 1-4.44 1.901 5.521 5.521 0 0 1-3.971-1.587 5.328 5.328 0 0 1-1.587-3.915M114 18h2.34v4.351h4.312V18H123v11h-2.348v-4.416h-4.312V29H114zM130 18h2.276l5.274 6.77V18H140v11h-2.11l-5.448-6.99V29H130zM153.417 24A3.433 3.433 0 0 0 150 20.45a3.375 3.375 0 0 0-3.392 3.517 3.433 3.433 0 0 0 3.417 3.55A3.375 3.375 0 0 0 153.408 24M144 24a6 6 0 1 1 12 0 6 6 0 0 1-12 0M161 18h2.45v8.8H169V29h-8zM181.4 24a3.433 3.433 0 0 0-3.417-3.55 3.375 3.375 0 0 0-3.383 3.517 3.433 3.433 0 0 0 3.417 3.55A3.375 3.375 0 0 0 181.4 24m-9.4 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0M188 23.516c0-1.474.64-2.888 1.776-3.923 1.136-1.035 2.674-1.606 4.269-1.585 1.659-.08 3.285.446 4.53 1.463l-1.584 1.747a4.456 4.456 0 0 0-3.014-1.078c-1.904.077-3.384 1.56-3.312 3.321-.057.885.287 1.752.949 2.394a3.6 3.6 0 0 0 2.542.99 4.298 4.298 0 0 0 2.392-.638v-1.503h-2.554v-2.03H199v4.627c-1.368 1.096-3.12 1.697-4.93 1.692-1.613.076-3.187-.477-4.34-1.524-1.151-1.047-1.776-2.492-1.721-3.984M206.28 24.665L202 18h2.867l2.654 4.416L210.223 18H213l-4.272 6.616V29h-2.448zM72 37h8v2.2h-5.688v2.346h5.013v2.192h-5.013V48H72zM85 43.191V37h2.534v6.127c0 1.758.929 2.676 2.466 2.676 1.537 0 2.466-.879 2.466-2.596V37H95v6.111C95 46.386 93.057 48 89.983 48c-3.074 0-4.95-1.598-4.95-4.793M100 37h2.276l5.274 6.77V37H110v11h-2.11l-5.448-6.998V48H100zM118.23 45.836a3.067 3.067 0 0 0 2.345-.893c.622-.62.958-1.477.925-2.362a3.192 3.192 0 0 0-.909-2.396 3.091 3.091 0 0 0-2.36-.923h-1.843v6.647l1.843-.073zM114 37h4.23c3.414 0 5.77 2.376 5.77 5.484 0 3.1-2.356 5.516-5.77 5.516H114V37zM36 0h6v6h-6zM42 36h6v6h-6zM36 42h6v6h-6zM42 6h6v6h-6zM48 12h6v24h-6z" />
+ </symbol>
+
+ <symbol id="logo-mobile" width="43" height="57" viewBox="0 0 43 57">
+ <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>
</svg>