From e1e364f7c717fb04fe9e670a96cf2a54f924f1ad Mon Sep 17 00:00:00 2001
From: Nad Chishtie <n.chishtie@gmail.com>
Date: Fri, 1 Feb 2019 18:07:51 +0000
Subject: [PATCH] WIP home updates
---
res/home.html | 395 +++++++++---------------
res/home/images/icon-create-account.svg | 17 +
res/home/images/icon-help.svg | 16 +
res/home/images/icon-room-directory.svg | 19 ++
res/home/images/icon-sign-in.svg | 16 +
res/home/images/logo.svg | 90 +-----
6 files changed, 231 insertions(+), 322 deletions(-)
create mode 100644 res/home/images/icon-create-account.svg
create mode 100644 res/home/images/icon-help.svg
create mode 100644 res/home/images/icon-room-directory.svg
create mode 100644 res/home/images/icon-sign-in.svg
diff --git a/res/home.html b/res/home.html
index d8238870e8..4ee8d8fd19 100644
--- a/res/home.html
+++ b/res/home.html
@@ -4,289 +4,190 @@
* voodoo where we have to set display: none by default
*/
-.mx_HomePage_header h1 {
- margin-left: 0px;
- margin-bottom: 0px;
- margin-top: 20px;
- margin-right: 20px;
- color: #454545;
+h1::after {
+ content: "!";
}
-.mx_HomePage_header h2 {
- margin-left: 0px;
- margin-top: 5px;
- margin-bottom: 20px;
- margin-right: 20px;
- color: #454545;
+.mx_Parent {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ text-align: center;
+ margin-top: 100px;
}
-.mx_HomePage_header h1 a {
- color: #454545;
+.mx_Well {
+ display: block;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 10px;
+ background-color: #F2F5F8;
}
-.mx_HomePage h3 {
- margin-top: 30px;
+.mx_ButtonParent {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 10px 20px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 10px;
+ width: 140px;
}
-.mx_HomePage_header {
- border: 1px solid #76CFA6;
- background-color: #eaf5f0;
- border-radius: 5px;
- align-items: center;
+.mx_ButtonRow {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ width: 600px;
+ height: 120px;
+ -webkit-justify-content: space-around;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.mx_HomePage_col {
- display: flex;
- flex-direction: row;
+.mx_buttonheadline {
+ margin-bottom: 14px;
}
-.mx_HomePage_toprow {
- flex-wrap: wrap;
+.mx_buttonicon {
+ width: 40px;
}
-.mx_HomePage_row {
- flex: 1 1 0;
- margin-right: 20px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
+.mx_buttonlabel {
+ margin-left: 20px;
}
-.mx_HomePage_logo {
- margin-top: 20px;
- margin-left: 40px;
- margin-right: 40px;
- margin-bottom: 20px;
- display: inline;
- height: 100px;
+.mx_buttonwrappertext {
+ margin-bottom: 10px;
}
-.mx_HomePage_room {
- cursor: pointer;
- float: left;
- text-decoration: none;
- text-align: center;
- padding-left: 10px;
- padding-right: 10px;
- width: 120px;
+.mx_Header2 {
+ font-size: 32px;
+ font-weight: 400;
+ margin-top: 40px;
}
-.mx_HomePage_toprow .mx_HomePage_room {
- width: 64px;
+.mx_Header22 {
+ font-size: 14px;
+ font-weight: 200;
+ margin-bottom: 40px;
}
-
-.mx_HomePage_room .mx_HomePage_icon {
- border-radius: 50%;
- width: 64px;
- height: 64px;
+.mx_ButtonSignIn {
+ background: #368BD6;
+ color: white;
}
-.mx_HomePage_room .mx_HomePage_name {
- display: block;
+.mx_ButtonCreateAccount {
+ background: #03B381;
+ color: white;
}
-.mx_HomePage_room .mx_HomePage_desc {
- display: block;
- font-size: 12px;
- margin-top: 8px;
+.mx_secondarybutton {
+ background: #FFFFFF;
+ color: #2E2F32;
}
-.mx_HomePage_comment {
- display: flex;
- align-items: center;
- margin-left: 100px;
- min-height: 64px;
-}
-
-.mx_HomePage_container h3::after,
-.mx_HomePage_container h4::after {
- content: ":";
-}
-
-.mx_HomePage_container {
- display: block ! important;
- margin: 20px;
-}
-
-.mx_HomePage_container h1,
-.mx_HomePage_container h2,
-.mx_HomePage_container h3,
-.mx_HomePage_container h4 {
- font-weight: 600;
-}
</style>
-<div class="mx_HomePage_container">
- <div class="mx_HomePage_col mx_HomePage_header">
- <a href="https://riot.im"><img src="home/images/logo.svg" class="mx_HomePage_logo"></a>
- <div>
- <h1>_t("Welcome to Riot.im")</h1>
- <h2>_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h2>
- </div>
- </div>
- <div class="mx_HomePage_col mx_HomePage_toprow">
- <div class="mx_HomePage_row">
- <div>
- <h3>_t("Search the room directory")</h3>
- <a class="mx_HomePage_room" href="#/directory">
- <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
- </a>
- <span class="mx_HomePage_comment">
- _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")
- </span>
+<div class="mx_Parent">
+ <a href="https://riot.im">
+ <img src="home/images/logo.svg" alt="" class="mx_logo"/>
+ </a>
+ <h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
+ <h4 class="mx_Header22">_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h4>
+ <div class="mx_Well">
+ <div class="mx_ButtonRow">
+ <div class="mx_ButtonParent mx_ButtonSignIn">
+ <img src="home/images/icon-sign-in.svg" alt="" class="mx_buttonicon"/>
+ <div class="mx_buttonlabel">Sign In</div>
+ </div>
+ <div class="mx_ButtonParent mx_ButtonCreateAccount">
+ <img src="home/images/icon-create-account.svg" alt="" class="mx_buttonicon"/>
+ <div class="mx_buttonlabel">Create Account</div>
</div>
</div>
- <div class="mx_HomePage_row">
- <div>
- <h3>_t("Chat with Riot Bot")</h3>
- <a class="mx_HomePage_room" href="#/user/@riot-bot:matrix.org?action=chat">
- <img class="mx_HomePage_icon" src="home/rooms/riot-bot.png">
- </a>
- <span class="mx_HomePage_comment">
- _t("Get started with some tips from Riot Bot!")
- </span>
+ <div class="mx_ButtonRow">
+ <div class="mx_buttonwrapper">
+ <div class="mx_buttonwrappertext">Need help?</div>
+ <div class="mx_ButtonParent mx_secondarybutton">
+ <img src="home/images/icon-help.svg" alt="" class="mx_buttonicon"/>
+ <div class="mx_buttonlabel">Chat with Riot Bot</div>
+ </div>
+ </div>
+ <div class="mx_buttonwrapper">
+ <div class="mx_buttonwrappertext">Explore rooms</div>
+ <div class="mx_ButtonParent mx_secondarybutton">
+ <img src="home/images/icon-room-directory.svg" alt="" class="mx_buttonicon"/>
+ <div class="mx_buttonlabel">Room Directory</div>
+ </div>
</div>
</div>
</div>
- <h3>_t("General discussion about Matrix and Riot")</h3>
- <div class="mx_HomePage_row">
- <div class="mx_HomePage_room">
- <a href="#/room/#matrix:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/matrix.png">
- <span class="mx_HomePage_name">Matrix HQ</span>
- </a>
- <span class="mx_HomePage_desc">_t("Discussion of all things Matrix!")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#riot:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/riot.png">
- <span class="mx_HomePage_name">Riot</span>
- </a>
- <span class="mx_HomePage_desc">_t("Riot/Web & Desktop chat")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#riot-ios:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/riot-ios.png">
- <span class="mx_HomePage_name">#riot-ios</span>
- </a>
- <span class="mx_HomePage_desc">_t("Riot/iOS & matrix-ios-sdk chat")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#riot-android:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/riot-android.png">
- <span class="mx_HomePage_name">#riot-android</span>
- </a>
- <span class="mx_HomePage_desc">_t("Riot/Android & matrix-android-sdk chat")</span>
- </div>
- </div>
- <h3>_t("Matrix technical discussions")</h3>
- <h4>_t("Running Matrix services")</h4>
-
- <div class="mx_HomePage_row">
- <div class="mx_HomePage_room">
- <a href="#/room/#synapse:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/matrix.png">
- <span class="mx_HomePage_name">Synapse Support Community</span>
- </a>
- <span class="mx_HomePage_desc">_t("Community-run support for Synapse")</span>
+ <!-- <div class="mx_HomePage_well">
+ <div class="mx_HomePage_col">
+ <div class="mx_HomePage_row ">
+ <div>
+ <h3>_t("Search the room directory")</h3>
+ <a class="mx_HomePage_room" href="#/directory">
+ <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
+ </a>
+ </div>
+ </div>
+ <div class="mx_HomePage_row">
+ <div>
+ <h3>_t("Chat with Riot Bot")</h3>
+ <a class="mx_HomePage_room" href="#/user/@riot-bot:matrix.org?action=chat">
+ <img class="mx_HomePage_icon" src="home/rooms/riot-bot.png">
+ </a>
+ <span class="mx_HomePage_comment">
+ _t("Get started with some tips from Riot Bot!")
+ </span>
+ </div>
+ </div>
</div>
- <div class="mx_HomePage_room">
- <a href="#/room/#dendrite:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/dendrite.png">
- <span class="mx_HomePage_name">#dendrite:matrix.org</span>
- </a>
- <span class="mx_HomePage_desc">_t("Admin support for Dendrite")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#homeowners:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/homeowners.png">
- <span class="mx_HomePage_name">Synapse Homeowners</span>
- </a>
- <span class="mx_HomePage_desc">_t("Announcements about Synapse releases")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#irc:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/irc.png">
- <span class="mx_HomePage_name">IRC Matrix Bridges</span>
- </a>
- <span class="mx_HomePage_desc">_t("Support for those using and running matrix-appservice-irc")</span>
- </div>
- </div>
-
- <h4>_t("Building services on Matrix")</h4>
-
- <div class="mx_HomePage_row">
- <div class="mx_HomePage_room">
- <a href="#/room/#matrix-dev:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/matrix-dev.png">
- <span class="mx_HomePage_name">#matrix-dev:matrix.org</span>
- </a>
- <span class="mx_HomePage_desc">_t("Support for those using the Matrix spec")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#e2e:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/e2e.png">
- <span class="mx_HomePage_name">End-to-end crypto in Matrix</span>
- </a>
- <span class="mx_HomePage_desc">_t("Design and implementation of E2E in Matrix")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#vr:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/vr.png">
- <span class="mx_HomePage_name">#vr:matrix.org</span>
- </a>
- <span class="mx_HomePage_desc">_t("Implementing VR services with Matrix")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#webrtc:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/webrtc.png">
- <span class="mx_HomePage_name">#webrtc:matrix.org</span>
- </a>
- <span class="mx_HomePage_desc">_t("Implementing VoIP services with Matrix")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#matrix-identity:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/identity.jpg">
- <span class="mx_HomePage_name">Matrix Identity</span>
- </a>
- <span class="mx_HomePage_desc">_t("Discussion of the Identity Service API")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#bridging:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/bridging.png">
- <span class="mx_HomePage_name">Matrix Bridging</span>
- </a>
- <span class="mx_HomePage_desc">_t("Support for those using, running and writing other bridges")</span>
- </div>
- </div>
-
- <h4>_t("Contributing code to Matrix and Riot")</h4>
-
- <div class="mx_HomePage_row">
- <div class="mx_HomePage_room">
- <a href="#/room/#riot-dev:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/riot-dev.png">
- <span class="mx_HomePage_name">#riot-dev</span>
- </a>
- <span class="mx_HomePage_desc">_t("Dev chat for the Riot/Web dev team")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#dendrite-dev:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/dendrite-dev.png">
- <span class="mx_HomePage_name">#dendrite-dev</span>
- </a>
- <span class="mx_HomePage_desc">_t("Dev chat for the Dendrite dev team")</span>
- </div>
- <div class="mx_HomePage_room">
- <a href="#/room/#riotweb-translations:matrix.org">
- <img class="mx_HomePage_icon" src="home/rooms/riot-translations.png">
- <span class="mx_HomePage_name">Riot Translations</span>
- </a>
- <span class="mx_HomePage_desc">_t("Co-ordination for Riot translators")</span>
- </div>
- </div>
-</div>
+ </div> -->
diff --git a/res/home/images/icon-create-account.svg b/res/home/images/icon-create-account.svg
new file mode 100644
index 0000000000..c9d25f2fa9
--- /dev/null
+++ b/res/home/images/icon-create-account.svg
@@ -0,0 +1,17 @@
+
+<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+ <g id="Home" transform="translate(-880.000000, -478.000000)" stroke="#FFFFFF" stroke-width="1.6">
+ <g id="Group-11" transform="translate(621.000000, 176.000000)">
+ <g id="Group-7-Copy" transform="translate(243.000000, 290.000000)">
+ <g id="user-plus" transform="translate(17.000000, 13.000000)">
+ <path d="M15,18 L15,16 C15,13.790861 13.209139,12 11,12 L4,12 C1.790861,12 2.22044605e-16,13.790861 0,16 L0,18" id="Path"></path>
+ <circle id="Oval" cx="7.5" cy="4" r="4"></circle>
+ <path d="M19,5 L19,11" id="Path"></path>
+ <path d="M22,8 L16,8" id="Path"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/res/home/images/icon-help.svg b/res/home/images/icon-help.svg
new file mode 100644
index 0000000000..dc96f8e0cf
--- /dev/null
+++ b/res/home/images/icon-help.svg
@@ -0,0 +1,16 @@
+
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+ <g id="Home" transform="translate(-672.000000, -577.000000)" stroke="#000000" stroke-width="1.6">
+ <g id="Group-11" transform="translate(621.000000, 176.000000)">
+ <g id="Group-10" transform="translate(39.000000, 391.000000)">
+ <g id="help-circle" transform="translate(13.000000, 11.000000)">
+ <circle id="Oval" cx="10" cy="10" r="10"></circle>
+ <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Path"></path>
+ <path d="M10,15 L10.0050017,15.0050017" id="Path"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/res/home/images/icon-room-directory.svg b/res/home/images/icon-room-directory.svg
new file mode 100644
index 0000000000..6f888611f1
--- /dev/null
+++ b/res/home/images/icon-room-directory.svg
@@ -0,0 +1,19 @@
+
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+ <g id="Home" transform="translate(-880.000000, -581.000000)" stroke="#000000" stroke-width="1.6">
+ <g id="Group-11" transform="translate(621.000000, 176.000000)">
+ <g id="Group-8" transform="translate(243.000000, 391.000000)">
+ <g id="list" transform="translate(15.000000, 14.000000)">
+ <path d="M7,1 L20,1" id="Path"></path>
+ <path d="M7,7 L20,7" id="Path"></path>
+ <path d="M7,13 L20,13" id="Path"></path>
+ <path d="M2,1 L2.02063964,1.02063964" id="Path"></path>
+ <path d="M2,7 L2,7.03169624" id="Path"></path>
+ <path d="M2,13 L2,13.0336048" id="Path"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/res/home/images/icon-sign-in.svg b/res/home/images/icon-sign-in.svg
new file mode 100644
index 0000000000..584b2f0add
--- /dev/null
+++ b/res/home/images/icon-sign-in.svg
@@ -0,0 +1,16 @@
+
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+ <g id="Home" transform="translate(-673.000000, -478.000000)" stroke="#FFFFFF" stroke-width="1.6">
+ <g id="Group-11" transform="translate(621.000000, 176.000000)">
+ <g id="Group-7" transform="translate(40.000000, 283.000000)">
+ <g id="log-in" transform="translate(13.000000, 20.000000)">
+ <path d="M12,0 L16,0 C17.1045695,0 18,0.8954305 18,2 L18,16 C18,17.1045695 17.1045695,18 16,18 L12,18" id="Path"></path>
+ <polyline id="Path" points="7 14 12 9 7 4"></polyline>
+ <path d="M12,9 L0,9" id="Path"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/res/home/images/logo.svg b/res/home/images/logo.svg
index a5f70e5e4c..79039b70d0 100644
--- a/res/home/images/logo.svg
+++ b/res/home/images/logo.svg
@@ -1,76 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, 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 173.6 146.6" style="enable-background:new 0 0 173.6 146.6;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#7DC8A2;}
- .st1{fill:#AFDBC5;}
- .st2{fill:#764D80;}
- .st3{enable-background:new ;}
- .st4{fill:none;stroke:#764D80;stroke-miterlimit:10;}
-</style>
-<title>New_logo</title>
-<g id="Design">
- <path class="st0" d="M62.3,0H21.2C9.9,0,0.7,9.2,0.7,20.6v102.8c0,11.4,9.2,20.6,20.6,20.6c11.3,0,20.5-9.2,20.6-20.6v-20.6h20.5
- c28.4,0,51.4-23,51.4-51.4S90.7,0,62.3,0z"/>
- <path class="st1" d="M21.2,138.8c-8.5,0-15.4-6.9-15.4-15.4V20.6c0-8.5,6.8-15.3,15.3-15.4h41.2c25.5,0.4,46,21.4,45.6,46.9
- c-0.4,25-20.6,45.2-45.6,45.6H36.6v25.7C36.6,131.9,29.7,138.8,21.2,138.8z"/>
- <path class="st0" d="M21.2,133.7c-5.7,0-10.3-4.6-10.3-10.3V20.6c0-5.6,4.5-10.2,10.1-10.3h41.3c22.7,0,41.1,18.4,41.1,41.1
- S85.1,92.5,62.4,92.5H31.5v30.8C31.5,129.1,26.9,133.7,21.2,133.7z"/>
- <path class="st1" d="M21.2,128.6c-2.9,0-5.2-2.3-5.2-5.2V20.6c0-2.8,2.2-5.1,5-5.2h41.3c19.9,0,36,16.1,36,36s-16.1,36-36,36h-36
- v36C26.4,126.3,24.1,128.6,21.2,128.6z"/>
- <path class="st0" d="M21.3,82.3h41.1c17.1,0,30.9-13.8,30.9-30.9S79.4,20.5,62.3,20.5H21.2L21.3,82.3z"/>
- <path class="st1" d="M26.4,77.2V25.7h36c14.2,0.3,25.5,12,25.2,26.3c-0.3,13.8-11.4,25-25.2,25.2H26.4z"/>
- <path class="st0" d="M31.5,72V30.8h30.8c11.4,0.3,20.4,9.7,20.2,21.1c-0.2,11-9.1,19.9-20.2,20.2H31.5z"/>
- <path class="st1" d="M36.6,66.9v-31h25.7c8.6,0,15.5,6.9,15.5,15.5s-6.9,15.5-15.5,15.5H36.6z"/>
- <path class="st0" d="M41.8,61.8V41.1h20.6c5.7,0,10.4,4.7,10.3,10.4c0,5.7-4.6,10.3-10.3,10.3H41.8z"/>
- <path class="st1" d="M46.9,56.6V46.2h15.5c2.9,0,5.2,2.3,5.2,5.2s-2.3,5.2-5.2,5.2L46.9,56.6z"/>
- <ellipse transform="matrix(0.8192 -0.5736 0.5736 0.8192 -8.0825 15.5141)" class="st2" cx="20.6" cy="20.6" rx="20.6" ry="20.6"/>
- <path class="st2" d="M109.3,111.6c6.7,9.2,4.6,22-4.6,28.7s-22,4.6-28.7-4.6c-0.1-0.2-0.3-0.4-0.4-0.6l-30.8-44
- c-6.5-9.3-4.3-22.1,5-28.6s22.1-4.3,28.6,5L109.3,111.6z"/>
-</g>
-<g id="Layer_3">
- <path class="st2" d="M145.3,32.7h16.4c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6h-16.4c-0.9,0-1.6,0.7-1.6,1.6
- C143.7,32,144.4,32.7,145.3,32.7z"/>
- <path class="st2" d="M145.3,3.3h4.9v5l0,0l-5.8,4c-0.7,0.5-0.9,1.5-0.4,2.3c0.5,0.7,1.5,0.9,2.3,0.4l4.6-3.2c1.6,3.2,5.5,4.6,8.8,3
- c2.2-1.1,3.7-3.4,3.6-5.9V1.7l0,0c0-0.9-0.7-1.6-1.6-1.6l0,0h-16.4c-0.9,0-1.6,0.7-1.6,1.6C143.7,2.6,144.4,3.3,145.3,3.3
- L145.3,3.3z M160,8.9c0,1.8-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3V3.3h6.5V8.9z"/>
- <path class="st2" d="M161.7,75.6c-0.9,0-1.6,0.7-1.6,1.6l0,0v4.9h-14.7c-0.9,0-1.6,0.7-1.6,1.6l0,0l0,0c0,0.9,0.7,1.6,1.6,1.6l0,0
- H160v5c0,0.9,0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6v-6.6l0,0v-6.5C163.4,76.4,162.6,75.7,161.7,75.6C161.7,75.6,161.7,75.6,161.7,75.6z"
- />
- <path class="st2" d="M153.5,46.4c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S159.1,46.4,153.5,46.4z M153.5,63.2
- c-3.7,0-6.7-3-6.7-6.7c0-3.7,3-6.7,6.7-6.7c3.7,0,6.7,3,6.7,6.7v0C160.2,60.2,157.2,63.2,153.5,63.2L153.5,63.2z"/>
- <g class="st3">
- <path class="st2" d="M145.2,109h16.5c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7
- c-0.2,0.2-0.5,0.3-0.7,0.3h-16.5c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7
- C144.7,109.1,144.9,109,145.2,109z"/>
- </g>
- <g class="st3">
- <path class="st4" d="M145.2,109h16.5c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7
- c-0.2,0.2-0.5,0.3-0.7,0.3h-16.5c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7
- C144.7,109.1,144.9,109,145.2,109z"/>
- </g>
- <g class="st3">
- <path class="st2" d="M145.2,126h16.5c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7v0.2c0,0.4-0.2,0.7-0.5,1l-9.8,6.5l9.8,6.5
- c0.4,0.2,0.5,0.5,0.5,1v0.2c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3h-16.5c-0.3,0-0.5-0.1-0.7-0.3
- c-0.2-0.2-0.3-0.4-0.3-0.7s0.1-0.5,0.3-0.7c0.2-0.2,0.5-0.3,0.7-0.3h13.7l-8.6-5.9c-0.3-0.2-0.5-0.5-0.5-0.9
- c0-0.3,0.2-0.6,0.5-0.9l8.6-5.8h-13.7c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7
- C144.7,126.1,144.9,126,145.2,126z"/>
- </g>
- <g class="st3">
- <path class="st4" d="M145.2,126h16.5c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7v0.2c0,0.4-0.2,0.7-0.5,1l-9.8,6.5l9.8,6.5
- c0.4,0.2,0.5,0.5,0.5,1v0.2c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3h-16.5c-0.3,0-0.5-0.1-0.7-0.3
- c-0.2-0.2-0.3-0.4-0.3-0.7s0.1-0.5,0.3-0.7c0.2-0.2,0.5-0.3,0.7-0.3h13.7l-8.6-5.9c-0.3-0.2-0.5-0.5-0.5-0.9
- c0-0.3,0.2-0.6,0.5-0.9l8.6-5.8h-13.7c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7
- C144.7,126.1,144.9,126,145.2,126z"/>
- </g>
- <g class="st3">
- <path class="st2" d="M152.5,98.1c0.3,0,0.6,0.1,0.9,0.4s0.4,0.5,0.4,0.9c0,0.3-0.1,0.6-0.4,0.9c-0.2,0.2-0.5,0.4-0.9,0.4h-0.5
- c-0.3,0-0.6-0.1-0.9-0.4c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.4,0.1-0.7,0.4-0.9s0.5-0.4,0.9-0.4H152.5z"/>
- </g>
- <g class="st3">
- <path class="st4" d="M152.5,98.1c0.3,0,0.6,0.1,0.9,0.4s0.4,0.5,0.4,0.9c0,0.3-0.1,0.6-0.4,0.9c-0.2,0.2-0.5,0.4-0.9,0.4h-0.5
- c-0.3,0-0.6-0.1-0.9-0.4c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.4,0.1-0.7,0.4-0.9s0.5-0.4,0.9-0.4H152.5z"/>
- </g>
-</g>
+
+<svg width="112px" height="104px" viewBox="0 0 112 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Home" transform="translate(-796.000000, -174.000000)">
+ <g id="Group-11" transform="translate(621.000000, 193.000000)">
+ <g id="Square-logo" transform="translate(177.000000, -17.000000)">
+ <path d="M28.7405867,28.5813527 L28.7405867,43.0723278 L43.1636162,43.0571778 C43.3467737,43.0571778 43.5138944,43.0521278 43.6801712,43.0411861 C47.4724623,42.7861611 50.4367461,39.6139193 50.4367461,35.8196861 C50.4367461,31.8276611 47.1812672,28.5813527 43.1779648,28.5813527 L28.7405867,28.5813527 Z M14.4762377,100.155003 C6.59877202,100.155003 0.211888643,93.7869528 0.211888643,85.9308361 L0.211888643,58.8215943 C0.160401939,58.3300611 0.132548476,57.8301111 0.132548476,57.3242693 C0.131704432,56.8091693 0.158713851,56.3008028 0.211888643,55.7991693 L0.211888643,14.3571861 C0.211888643,6.5010694 6.59877202,0.132177738 14.4762377,0.132177738 L43.1779648,0.132177738 C62.9117211,0.132177738 78.9662882,16.1415194 78.9662882,35.8196861 C78.9662882,54.5290943 64.3119907,70.1681028 45.6045923,71.4238693 C44.8095024,71.4785778 43.9899356,71.5063528 43.1779648,71.5063528 L28.7405867,71.5206611 L28.7405867,85.9308361 C28.7405867,93.7869528 22.3545474,100.155003 14.4762377,100.155003 Z" id="Fill-1" fill="#A2DDEF" fill-rule="nonzero"></path>
+ <path d="M28.7405867,28.5813527 L28.7405867,43.0723278 L43.1636162,43.0571778 C43.3467737,43.0571778 43.5138944,43.0521278 43.6801712,43.0411861 C47.4724623,42.7861611 50.4367461,39.6139193 50.4367461,35.8196861 C50.4367461,31.8276611 47.1812672,28.5813527 43.1779648,28.5813527 L28.7405867,28.5813527 Z M14.4762377,100.155003 C6.59877202,100.155003 0.211888643,93.7869528 0.211888643,85.9308361 L0.211888643,58.8215943 C0.160401939,58.3300611 0.132548476,57.8301111 0.132548476,57.3242693 C0.131704432,56.8091693 0.158713851,56.3008028 0.211888643,55.7991693 L0.211888643,14.3571861 C0.211888643,6.5010694 6.59877202,0.132177738 14.4762377,0.132177738 L43.1779648,0.132177738 C62.9117211,0.132177738 78.9662882,16.1415194 78.9662882,35.8196861 C78.9662882,54.5290943 64.3119907,70.1681028 45.6045923,71.4238693 C44.8095024,71.4785778 43.9899356,71.5063528 43.1779648,71.5063528 L28.7405867,71.5206611 L28.7405867,85.9308361 C28.7405867,93.7869528 22.3545474,100.155003 14.4762377,100.155003 Z" id="Stroke-3" stroke="#368BD6" stroke-width="2.51086957"></path>
+ <path d="M14.4763221,85.9305836 L14.4763221,14.3569336 L43.1780493,14.3569336 C55.0647254,14.3569336 64.7011793,23.9662419 64.7011793,35.8194336 C64.7011793,47.1810918 55.8479984,56.4806668 44.6466862,57.2322753 C44.1605169,57.2651003 43.6718153,57.2819336 43.1780493,57.2819336 L14.3969819,57.3105503" id="Stroke-5" stroke="#368BD6" stroke-width="2.51086957" stroke-linecap="round"></path>
+ <path d="M26.2303145,6.1990794 C28.4172333,9.31072107 29.2570575,13.0864377 28.5953267,16.8259627 C27.9327519,20.5680127 25.8479624,23.8277877 22.7249984,26.0068627 C16.2773438,30.5055711 7.35832749,28.9392293 2.84353443,22.5147877 C0.656615595,19.4031461 -0.183208504,15.6282711 0.479366288,11.8870627 C1.14109704,8.1458544 3.22588652,4.88523775 6.34969454,2.7070044 C12.7973491,-1.79170393 21.7155214,-0.225362262 26.2303145,6.1990794 Z M64.8185861,100.146839 C60.323206,100.146839 55.9004137,98.0342553 53.1243518,94.0843136 L32.9643533,65.3952636 C28.4436519,58.9615636 30.0093542,50.0912386 36.4603849,45.5841136 C42.9114157,41.0736218 51.8067987,42.6357553 56.3275,49.0694553 L76.4874987,77.7585053 C81.0090441,84.1922053 79.443342,93.0625303 72.9923112,97.5696553 C70.5006923,99.3110636 67.6452906,100.146839 64.8185861,100.146839 Z" id="Combined-Shape" fill="#368BD6" fill-rule="nonzero"></path>
+ <path d="M97.0646617,23.1852217 C96.4319548,23.1852217 95.9398495,22.6976355 95.9398495,22.0707389 C95.9398495,21.4438424 96.4319548,20.9562562 97.0646617,20.9562562 L108.593985,20.9562562 C109.226692,20.9562562 109.718797,21.4438424 109.718797,22.0707389 C109.718797,22.6976355 109.226692,23.1852217 108.593985,23.1852217 L97.0646617,23.1852217 Z M97.0646617,2.70660098 C96.4319548,2.70660098 95.9398495,2.21901478 96.0804512,1.45280788 C96.0804512,0.825911331 96.5725565,0.338325122 97.2052632,0.338325122 L101.774812,0.338325122 L108.664286,0.338325122 C108.875188,0.338325122 109.08609,0.407980295 109.296993,0.547290639 C109.578195,0.756256159 109.789098,1.10453202 109.789098,1.52246305 L109.789098,6.53763546 C109.789098,9.04522168 107.680075,11.1348768 105.149248,11.1348768 C103.321428,11.1348768 101.774812,10.1597044 101.001504,8.62729063 L97.7676691,10.8562562 C97.2052632,11.204532 96.5022558,11.0652217 96.1507519,10.5776355 C95.7992481,10.0203941 95.9398495,9.32384236 96.4319548,8.97556651 L100.509399,6.18935962 L100.509399,2.70660098 L97.0646617,2.70660098 Z M107.398872,6.60729063 L107.328572,2.70660098 L102.759022,2.70660098 L102.759022,6.60729063 C102.759022,7.86108374 103.813534,8.90591134 105.078947,8.90591134 C106.344361,8.90591134 107.398872,7.86108374 107.398872,6.60729063 Z M108.593985,53.1369458 C109.226692,53.1369458 109.718797,53.624532 109.718797,54.2514286 L109.718797,58.7790147 L109.718797,63.3762563 C109.718797,64.0031526 109.226692,64.490739 108.593985,64.490739 C107.961278,64.490739 107.469173,64.0031526 107.469173,63.3762563 L107.469173,59.8934975 L97.1349624,59.8934975 C96.5022558,59.8934975 96.0101505,59.4059113 96.0101505,58.7790147 C96.0101505,58.1521181 96.5022558,57.664532 97.1349624,57.664532 L107.469173,57.664532 L107.469173,54.2514286 C107.469173,53.624532 107.961278,53.1369458 108.593985,53.1369458 Z M102.829323,32.7976353 C106.695865,32.7976353 109.859399,35.9321181 109.859399,39.7631526 C109.859399,43.5941873 106.695865,46.7286698 102.829323,46.7286698 C98.9627821,46.7286698 95.7992481,43.5941873 95.7992481,39.7631526 C95.7992481,35.9321181 98.9627821,32.7976353 102.829323,32.7976353 Z M102.829323,44.4300492 C105.430451,44.4300492 107.539474,42.3403941 107.539474,39.7631526 C107.539474,37.1859113 105.430451,35.0962563 102.829323,35.0962563 C100.228195,35.0962563 98.119173,37.1859113 98.119173,39.7631526 C98.119173,42.3403941 100.228195,44.4300492 102.829323,44.4300492 Z M109.367293,76.3321181 C109.578195,76.5410837 109.648496,76.8197046 109.648496,77.0983252 C109.648496,77.4466009 109.578195,77.6555664 109.367293,77.864532 C109.08609,78.0734975 108.804887,78.1431526 108.593985,78.1431526 L96.994361,78.1431526 C96.6428572,78.1431526 96.4319548,78.1431526 96.2210526,77.864532 C96.0101505,77.5859113 95.9398495,77.3769458 95.9398495,77.0983252 C95.9398495,76.7500492 96.0101505,76.5410837 96.2210526,76.3321181 C96.5022558,76.1231526 96.7131579,76.0534975 96.994361,76.0534975 L108.593985,76.0534975 C108.945489,76.0534975 109.156391,76.1231526 109.367293,76.3321181 Z M109.648496,89.0790147 C109.648496,89.4969458 109.437594,89.8452218 109.156391,90.0541873 L102.688722,94.3031526 L109.156391,98.5521181 C109.578195,98.7610837 109.648496,99.1790147 109.648496,99.5272907 L109.648496,99.6666009 C109.648496,100.014877 109.648496,100.223842 109.367293,100.432808 C109.08609,100.641773 108.875188,100.711429 108.593985,100.711429 L97.0646617,100.711429 C96.7131579,100.711429 96.5022558,100.711429 96.2913533,100.432808 C96.0804512,100.154187 96.0101505,100.014877 96.0101505,99.6666009 C96.0101505,99.3183252 96.0804512,99.1093596 96.2913533,98.9003941 C96.5725565,98.6914286 96.8537593,98.6217735 97.0646617,98.6217735 L105.571053,98.6217735 L100.439098,95.1390147 C100.157895,94.9300492 99.9469926,94.5817735 99.9469926,94.2334975 C99.9469926,93.8852218 100.087594,93.6066009 100.368797,93.3279803 L105.500752,89.9148769 L96.994361,89.9148769 C96.6428572,89.9148769 96.4319548,89.9148769 96.2210526,89.6362563 C96.0101505,89.3576353 95.9398495,89.2183252 95.9398495,88.8700492 C95.9398495,88.5217735 96.0101505,88.312808 96.2210526,88.1038424 C96.5022558,87.8948769 96.7834586,87.8948769 96.994361,87.8948769 L108.593985,87.8948769 C108.945489,87.8948769 109.156391,87.964532 109.367293,88.1734975 C109.578195,88.382463 109.648496,88.6610837 109.648496,88.9397046 L109.648496,89.0790147 Z M102.056015,68.7397046 C102.266917,68.7397046 102.47782,68.8093596 102.688722,69.0183252 C102.829323,69.1576353 102.969925,69.3666009 102.969925,69.6452218 C102.969925,69.8541873 102.899624,70.0631526 102.688722,70.2721181 C102.54812,70.4114286 102.337218,70.550739 102.056015,70.550739 L101.704511,70.550739 C101.493609,70.550739 101.282707,70.4810837 101.071805,70.2721181 C100.931203,70.132808 100.790601,69.9238424 100.790601,69.6452218 C100.790601,69.3666009 100.860902,69.1576353 101.071805,69.0183252 C101.212406,68.8790147 101.423308,68.7397046 101.704511,68.7397046 L102.056015,68.7397046 Z" id="Combined-Shape" fill="#212121" fill-rule="nonzero"></path>
+ </g>
+ </g>
+ </g>
+ </g>
</svg>