Thursday + Takeflight changes (#31)

* Adds Facebook svg button, and adds Facebook link type to models

* CSS work from takeflight, 30 June 2016

* Adds drop-down menus for navigation

* Adds mobile menus for navigation

* Minor tweak to mobile nav headings

* Makes the logo a link back to the homepage

* Updates the footer to the current version, removing sponsor logos for the moment.

cms_pages/migrations/0005_auto_20160630_0134.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-06-30 01:34
+from __future__ import unicode_literals
+
+from django.db import migrations
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms_pages', '0004_auto_20160626_0110_squashed_0007_auto_20160626_0335'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('basic_content', wagtail.wagtailcore.blocks.StructBlock([(b'panel_type', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('blue_left', 'Left-aligned image, blue-filtered image BG'), ('white_right', 'Right-aligned image, white background')])), (b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'inset_illustration', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('antarctica.svg', 'Antarctica'), ('bridge.svg', 'Bridge'), ('casino.svg', 'Casino'), ('cradle.svg', 'Cradle Mountain'), ('devil.svg', 'Tasmanian Devil'), ('falls.svg', 'Waterfall'), ('hobart.svg', 'Hobart'), ('lavender.svg', 'Lavender'), ('tuz.svg', 'Tuz'), ('wineglass.svg', 'Wineglass')])), (b'background_image', wagtail.wagtailimages.blocks.ImageChooserBlock(help_text="This is used as the background image of a blue-left block. It's not used for white-right.", required=False)), (b'body', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), (b'link', wagtail.wagtailcore.blocks.StructBlock([('page', wagtail.wagtailcore.blocks.PageChooserBlock()), ('title', wagtail.wagtailcore.blocks.CharBlock(required=True))])), (b'external_links', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailcore.blocks.StructBlock([('alt', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('icon', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('twitter', 'Twitter'), ('facebook', 'Facebook'), ('generic', 'Generic URL')])), ('url', wagtail.wagtailcore.blocks.URLBlock(required=True))])))]))]),
+        ),
+    ]

cms_pages/models.py

@@ -56,10 +56,12 @@ class BasicContentBlock(blocks.StructBlock):
     )
 
     EXTERNAL_LINK_TWITTER = "twitter"
+    EXTERNAL_LINK_FACEBOOK = "facebook"
     EXTERNAL_LINK_GENERIC = "generic"
 
     EXTERNAL_LINK_TYPES = (
         (EXTERNAL_LINK_TWITTER, "Twitter"),
+        (EXTERNAL_LINK_FACEBOOK, "Facebook"),
         (EXTERNAL_LINK_GENERIC, "Generic URL"),
     )
 

pinaxcon/templates/cms_pages/home_page_blocks/btn_facebook.html

@@ -0,0 +1,25 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 57 57">
+   <defs>
+     <style>
+         .fcbk-cls-1 {
+             fill: none;
+         }
+
+         .fcbk-cls-2 {
+             clip-path: url(#clip-path);
+         }
+
+         .fcbk-cls-3 {
+             fill: currentColor;
+         }
+     </style>
+     <clipPath id="clip-path" transform="translate(0 0)">
+         <rect class="fcbk-cls-1" width="57" height="57"></rect>
+     </clipPath>
+   </defs>
+<g class="fcbk-cls-2">
+	<path class="fcbk-cls-3" d="M28.5,0C12.8,0,0,12.8,0,28.5C0,44.2,12.8,57,28.5,57C44.2,57,57,44.2,57,28.5C57,12.8,44.2,0,28.5,0z
+		 M34.6,28.5h-4c0,6.4,0,14.2,0,14.2h-5.9c0,0,0-7.8,0-14.2h-2.8v-5h2.8v-3.3c0-2.3,1.1-6,6-6l4.4,0v4.9c0,0-2.7,0-3.2,0
+		c-0.5,0-1.3,0.3-1.3,1.4v3h4.5L34.6,28.5z"/>
+</g>
+</svg>

pinaxcon/templates/cms_pages/home_page_blocks/btn_svg.html

@@ -1,5 +1,7 @@
 {% if link.icon == "twitter" %}
   {% include "cms_pages/home_page_blocks/btn_twitter.html" %}
+{% elif link.icon == "facebook" %}
+  {% include "cms_pages/home_page_blocks/btn_facebook.html" %}
 {% elif link.icon == "generic" %}
   {% include "cms_pages/home_page_blocks/btn_generic_link.html" %}
 {% endif %}

pinaxcon/templates/site_base.html

@@ -46,7 +46,11 @@
     <header role="banner" class="l-header">
       <div class="l-header--logo">
         {% block site_brand %}
-          <img src="{% static 'lca2017/images/svgs/lca2017-website-logo.svg' %}" width="100%"/>
+          <a href="/">
+            <img src="{% static 'lca2017/images/svgs/lca2017-website-logo.svg' %}"
+              width="100%"
+              />
+          </a>
         {% endblock %}
       </div>
     {% block nav %}
@@ -84,18 +88,21 @@
 
 {% block footer_base %}
       <!-- https://gist.github.com/geedmo/5682742-->
-      <footer class="l-footer">
+      <footer class="l-footer l-footer__alt">
         {% block footer %}
-        <div class="l-footer--text">
+          {% comment %}
-          <h3>Sponsors</h3>
+            <div class="l-footer--text">
-          <p class="lede">Magna morbi aliquet commodo arcu odio dui imperdiet blandit est.
+              <h3>Sponsors</h3>
-          </p><a href="#" class="btn">See sponsors</a>
+              <p class="lede">Magna morbi aliquet commodo arcu odio dui imperdiet blandit est.
-        </div>
+              </p><a href="#" class="btn">See sponsors</a>
-        <div class="l-footer--logos">
+            </div>
-          <img src="{% static 'lca2017/images/HPE.jpg' %}" role="presentation">
+            <div class="l-footer--logos">
-          <img src="{% static 'lca2017/images/IBM.jpg' %}" role="presentation"></div>
+              <img src="{% static 'lca2017/images/HPE.jpg' %}" role="presentation">
+              <img src="{% static 'lca2017/images/IBM.jpg' %}" role="presentation">
+            </div>
+          {% endcomment %}
 
-          <p class="lede">© 2016 linux.conf.au 2017 and Linux Australia. Linux is a registered trademark of Linus Torvalds. Site design by <a href="http://takeflight.com.au" >Takeflight</a>. Image credits can be found on our <a href="/about/colophon">Colophon</a>.</p>
+          <p class="lede">©2016 Linux Australia and linux.conf.au 2017. Linux is a registered trademark of Linus Torvalds. Site design by <a href="http://takeflight.com.au" >Takeflight</a>. Image credits can be found on our <a href="/about/colophon">Colophon</a>.</p>
 
         {% endblock %}
       </footer>

pinaxcon/templates/sitetree_header.html

@@ -1,10 +1,20 @@
 {% load sitetree %}
-<nav role="navigation" class="l-header--links">
+<nav role="navigation" id="LOL" class="l-header--links">
-    {% for item in sitetree_items %}
+  {% for item in sitetree_items %}
-    <!-- FIXME: NEeds a dropdown mechanism -->
+    <li class="l-header--nav">
-    <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown" {% else %}class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"{% endif %}>{{ item.title_resolved }}</a>
+      <a
-<!--    {% if item.has_children %}
+        href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}"
-        {% sitetree_children of item for menu template "sitetree_header_dropdown.html" %}
+        {% if item.has_children %}
-    {% endif %} -->
+          class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown"
-    {% endfor %}
+        {% else %}
+          class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"
+        {% endif %}>
+        {{ item.title_resolved }}
+      </a>
+
+      {% if item.has_children %}
+          {% sitetree_children of item for menu template "sitetree_header_dropdown.html" %}
+      {% endif %}
+    </li> 
+  {% endfor %}
 </nav>

pinaxcon/templates/sitetree_header_dropdown.html

@@ -1,8 +1,17 @@
 {% load sitetree %}
-<ul class="dropdown-menu" role="menu">
+<div class="menu-dropdown">
-    {% for item in sitetree_items %}
+  <ul class="link-list" role="menu">
-        <li role="presentation" {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
+      {% for item in sitetree_items %}
-            <a role="menuitem" href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
+          <li class="link-list--item">
-        </li>
+            <a role="menuitem" href="{% sitetree_url for item %}"
-    {% endfor %}
+              class="link-list--link"
-</ul>
+              {% if item.hint %}
+                title="{{ item.hint }}"
+              {% endif %}
+              >
+                {{ item.title_resolved }}
+            </a>
+          </li>
+      {% endfor %}
+  </ul>
+</div>

pinaxcon/templates/sitetree_opener.html

@@ -1,14 +1,22 @@
 {% load sitetree %}
-    <div data-menu="" class="l-header--menu">
+<div data-menu class="mobile-menu">
-          <ul class="link-list">
+  <ul class="mobile-menu--list">
     {% for item in sitetree_items %}
-    <!-- FIXME: NEeds a dropdown mechanism -->
+      <li class="mobile-menu--item mobile-menu--item__primary">
-    <li class="link-list--item"><a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown" {% else %}class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"{% endif %}>{{ item.title_resolved }}</a></li>
+        <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}"
-<!--    {% if item.has_children %}
+          {% if item.has_children %}
+            class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}"
+            data-toggle="dropdown"
+          {% else %}
+            class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"
+          {% endif %}
+        >
+          {{ item.title_resolved }}
+        </a>
+      </li>
+      {% if item.has_children %}
         {% sitetree_children of item for menu template "sitetree_opener_dropdown.html" %}
-    {% endif %} -->
+      {% endif %}
     {% endfor %}
-          </ul>
+  </ul>
-    </div>
+</div>
-
-</nav>

pinaxcon/templates/sitetree_opener_dropdown.html

@@ -1,8 +1,13 @@
 {% load sitetree %}
-<ul class="dropdown-menu" role="menu">
+
-    {% for item in sitetree_items %}
+{% for item in sitetree_items %}
-        <li role="presentation" {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
+  <li role="presentation" class="mobile-menu--item">
-            <a role="menuitem" href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
+    <a role="menuitem" href="{% sitetree_url for item %}"
-        </li>
+      {% if item.hint %}
-    {% endfor %}
+        title="{{ item.hint }}"
-</ul>
+      {% endif %}
+      >
+        {{ item.title_resolved }}
+    </a>
+  </li>
+{% endfor %}

static/src/lca2017/css/app.css

@@ -68,36 +68,36 @@
 		.nav {}
 	}
 --------------------------------------------------------------------------- */
-.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
+.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
   max-width: 1746px;
   margin: 0 40px;
 }
 
 @media (min-width: 48em) {
-  .panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
+  .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 70px;
   }
 }
 
 @media (min-width: 64em) {
-  .panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
+  .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 160px;
   }
 }
 
 @media (min-width: 80em) {
-  .panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
+  .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 200px;
   }
 }
 
 @media (min-width: 1946px) {
-  .panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
+  .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 auto;
   }
 }
 
-.panel--content, .l-speaker-page, .l-footer {
+.panel--content, .l-speaker-page {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: start;
@@ -109,7 +109,7 @@
 }
 
 @media (min-width: 48em) {
-  .panel--content, .l-speaker-page, .l-footer {
+  .panel--content, .l-speaker-page {
     -ms-flex-direction: row;
     flex-direction: row;
     -ms-flex-pack: justify;
@@ -584,7 +584,7 @@ body {
   font-size: 4vw;
 }
 
-@media (min-width: 400px) {
+@media (min-width: 25em) {
   body {
     font-size: 2.2vw;
   }
@@ -608,7 +608,7 @@ body {
   font-size: 4.2vw;
 }
 
-@media (min-width: 400px) {
+@media (min-width: 25em) {
   .lede {
     font-size: 3vw;
   }
@@ -745,6 +745,7 @@ table.alt tr:not(:last-of-type) {
   padding: 0.625rem 1.25rem;
   border-radius: 0.625rem;
   transition: all 300ms ease-in-out;
+  line-height: normal;
 }
 
 .btn:hover, .btn:focus, .btn:active {
@@ -1162,6 +1163,117 @@ table.alt tr:not(:last-of-type) {
   }
 }
 
+.menu-dropdown {
+  position: absolute;
+  left: 0;
+  padding-top: 20px;
+  padding-top: 1.25rem;
+  display: none;
+  z-index: 50;
+}
+
+.menu-dropdown:before {
+  position: absolute;
+  content: '';
+  background: linear-gradient(45deg, #89d0de 50%, transparent 50%);
+  width: 20px;
+  width: 1.25rem;
+  height: 20px;
+  height: 1.25rem;
+  top: 0;
+  left: 0;
+}
+
+.menu-dropdown__last {
+  right: 0;
+  left: auto;
+}
+
+.menu-dropdown__last:before {
+  background: linear-gradient(-45deg, #89d0de 50%, transparent 50%);
+  left: auto;
+  right: 0;
+}
+
+.menu-dropdown .link-list {
+  font-size: 0.8em;
+  background-color: #89d0de;
+  padding-top: 20px;
+  padding-top: 1.25rem;
+}
+
+.menu-dropdown .link-list--item {
+  margin: 0;
+  display: block;
+}
+
+.menu-dropdown .link-list--item:hover {
+  background-color: #0c486c;
+  color: white;
+}
+
+.menu-dropdown .link-list--link {
+  font-weight: normal;
+  border: 0;
+  padding: 6.666px 40px 6.666px 20px;
+  padding: 0.41667rem 2.5rem 0.41667rem 1.25rem;
+  width: 100%;
+  height: 100%;
+  display: block;
+  white-space: nowrap;
+}
+
+.menu-dropdown .link-list--link:hover {
+  color: white;
+}
+
+.mobile-menu {
+  position: absolute;
+  width: 100%;
+  height: auto;
+  background-color: white;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  will-change: opacity;
+  transition: all 300ms ease-in-out;
+  pointer-events: none;
+  z-index: 100;
+  display: block;
+  margin-bottom: -150%;
+}
+
+.mobile-menu--list {
+  margin: auto;
+  text-align: center;
+  margin-top: 20%;
+  list-style: none;
+}
+
+.mobile-menu--item > a {
+  font-size: 2em;
+  border: 0;
+}
+
+.mobile-menu--item__primary > a {
+  font-size: 2.5em;
+  font-family: "Titillium Web", sans-serif;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.mobile-menu.is-active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+@media (min-width: 48em) {
+  .mobile-menu {
+    display: none !important;
+  }
+}
+
 .l-header {
   display: -ms-flexbox;
   display: flex;
@@ -1182,12 +1294,8 @@ table.alt tr:not(:last-of-type) {
   height: 100%;
 }
 
-.l-header--links {
+.l-header--logo > a {
-  height: 100%;
+  border: 0;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-  display: none;
-  margin-left: 1em;
 }
 
 .l-header--menu-opener {
@@ -1231,48 +1339,34 @@ table.alt tr:not(:last-of-type) {
   transform: translateY(-8.8px) rotate(-45deg);
 }
 
-.l-header--menu {
+.l-header--links {
-  position: absolute;
+  height: 100%;
-  width: 100%;
+  -ms-flex-item-align: start;
-  height: 300%;
+  align-self: flex-start;
-  background-color: white;
+  display: none;
-  left: 0;
+  list-style: none;
-  top: 0;
+  white-space: nowrap;
-  bottom: 0;
-  opacity: 0;
-  will-change: opacity;
-  transition: all 300ms ease-in-out;
-  pointer-events: none;
-  z-index: 100;
-  display: block;
-}
-
-.l-header--menu > .link-list {
-  font-size: 2em;
-  margin: auto;
-  text-align: center;
-  transform: translateY(50%);
-}
-
-.l-header--menu.is-active {
-  opacity: 1;
-  pointer-events: all;
 }
 
 .l-header--nav {
-  border: 0;
+  display: inline-block;
-  margin-right: 20px;
+  margin-right: 10px;
-  margin-right: 1.25rem;
+  margin-right: 0.625rem;
   vertical-align: top;
+  position: relative;
+}
+
+.l-header--nav:hover > .menu-dropdown {
+  display: block;
+}
+
+.l-header--nav > a {
+  vertical-align: top;
+  border: 0;
   font-size: 0.8em;
 }
 
-.l-header--nav:hover {
+@media (min-width: 25em) {
-  color: #0c486c;
-  border-bottom: 3px solid #3ab1c9;
-}
-
-@media (min-width: 400px) {
   .l-header--logo {
     width: 200px;
     margin-right: 2.5rem;
@@ -1283,7 +1377,7 @@ table.alt tr:not(:last-of-type) {
   .l-header {
     margin-top: 6.25rem;
   }
-  .l-header--menu, .l-header--menu-opener {
+  .l-header--menu-opener {
     display: none !important;
   }
   .l-header--links {
@@ -1298,6 +1392,9 @@ table.alt tr:not(:last-of-type) {
   .l-header--logo {
     width: 300px;
   }
+  .l-header--nav {
+    margin-right: 1.25rem;
+  }
 }
 
 .l-speaker-page {
@@ -1324,13 +1421,19 @@ table.alt tr:not(:last-of-type) {
 }
 
 .l-footer {
-  margin-top: 60px;
+  display: -ms-flexbox;
-  margin-top: 3.75rem;
+  display: flex;
-  -ms-flex-align: end;
+  -ms-flex-align: center;
-  -ms-grid-row-align: flex-end;
+  align-items: center;
-  align-items: flex-end;
+  -ms-flex-wrap: wrap;
-  margin-bottom: 50px;
+  flex-wrap: wrap;
-  margin-bottom: 3.125rem;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 100px;
+  margin-top: 6.25rem;
+  padding: 50px 40px;
+  padding: 3.125rem 40px;
+  width: 100%;
 }
 
 .l-footer--logos {
@@ -1338,27 +1441,62 @@ table.alt tr:not(:last-of-type) {
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -ms-flex-align: stretch;
+  -ms-flex-pack: distribute;
-  align-items: stretch;
+  justify-content: space-around;
-  -ms-flex-item-align: start;
+  margin-top: 20px;
-  align-self: flex-start;
+  margin-top: 1.25rem;
 }
 
-.l-footer--logos > img {
+.l-footer--logo {
   max-width: 100%;
-  height: auto;
+  -ms-flex-preferred-size: 45%;
+  flex-basis: 45%;
 }
 
-@media (min-width: 64em) {
+.l-footer--logo > svg {
-  .l-footer--logos {
+  display: block;
-    -ms-flex-item-align: end;
+  width: 100%;
-    align-self: flex-end;
+  height: 100%;
-  }
+}
+
+.l-footer__alt {
+  background-color: #0c486c;
+  color: white;
 }
 
 @media (min-width: 48em) {
   .l-footer {
-    margin-bottom: 6.25rem;
+    padding: 6.25rem 70px;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+  .l-footer--logos {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 64em) {
+  .l-footer {
+    padding: 6.25rem 160px;
+  }
+}
+
+@media (min-width: 80em) {
+  .l-footer {
+    padding: 6.25rem 200px;
+  }
+  .l-footer--logo {
+    margin-bottom: 0;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+}
+
+@media (min-width: 1946px) {
+  .l-footer {
+    padding: 6.25rem auto;
   }
 }
 
@@ -1368,29 +1506,28 @@ table.alt tr:not(:last-of-type) {
 }
 
 .l-content-page--image {
-  height: 80vh;
+  height: 200px;
   width: 100%;
-  margin: 60px 0;
+  margin: 7vw 0;
-  margin: 3.75rem 0;
   background-size: cover;
   background-position: center;
 }
 
 @media (min-width: 48em) {
   .l-content-page--image {
-    height: 450px;
+    height: 350px;
   }
 }
 
 @media (min-width: 64em) {
   .l-content-page--image {
-    height: 600px;
+    height: 500px;
   }
 }
 
 @media (min-width: 80em) {
   .l-content-page--image {
-    height: 80vh;
+    height: 600px;
   }
 }
 

static/src/lca2017/images/svgs/FB icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3BB0C9;}
+</style>
+<g>
+	<path class="st0" d="M28.5,0C12.8,0,0,12.8,0,28.5C0,44.2,12.8,57,28.5,57C44.2,57,57,44.2,57,28.5C57,12.8,44.2,0,28.5,0z
+		 M34.6,28.5h-4c0,6.4,0,14.2,0,14.2h-5.9c0,0,0-7.8,0-14.2h-2.8v-5h2.8v-3.3c0-2.3,1.1-6,6-6l4.4,0v4.9c0,0-2.7,0-3.2,0
+		c-0.5,0-1.3,0.3-1.3,1.4v3h4.5L34.6,28.5z"/>
+</g>
+</svg>