home page: add fedsocnet logos

just mastodon and hubzilla for now

static/index.html

@@ -26,11 +26,16 @@
  <a href="/"><img class="img-responsive" src="/static/bridgy_logo.jpg" /></a>
 </div>
 
-<div id="header" class="col-xs-8">
+<div id="fedsocnet-logos" class="col-xs-1">
+ <a href="http://joinmastodon.org/"><img src="/static/mastodon_logo.png" class="img-responsive" /></a>
+ <a href="https://hubzilla.org/"><img src="/static/hubzilla_logo.png" class="img-responsive" /></a>
+</div>
+
+<div id="header" class="col-xs-7">
 <p class="big">
-Got an <a href="https://indieweb.org/">IndieWeb</a> site?<br />
-Want to interact with <a href="https://joinmastodon.org/">Mastodon</a>, <a href="https://project.hubzilla.org/">Hubzilla</a>,<br />
-and the rest of the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>?<br />
+Got an <a href="https://indieweb.org/">IndieWeb</a> site?
+Want to interact with <a href="https://joinmastodon.org/">Mastodon</a>, <a href="https://project.hubzilla.org/">Hubzilla</a>,
+and the rest of the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>?
 <a id="title" href="/">Bridgy Fed</a> is for you.
 </p></div>
 </div>

static/style.css

@@ -1,27 +1,21 @@
 #intro {
   margin-top: 2em;
+  z-index: -1;
 }
 
-#protocol-logos {
-  float: right;
-  margin-top: -.5em;
+#logos {
+  z-index: 1;
 }
 
-#protocol-logos > :first-child img {
-  margin-left: -.2em;
+#fedsocnet-logos {
+  padding-left: 0;
+  margin-right: 15px;
+  max-width: 80px;
+  z-index: 1;
 }
 
-@media (max-width: 600px) {
-  #logo {
-    float: left;
-  }
-  #protocol-logos {
-    float: right;
-  }
-  #header {
-    float: none;
-    width: 100%;
-  }
+#fedsocnet-logos img {
+  min-width: 30px;
 }
 
 .big {
@@ -33,19 +27,15 @@
 }
 
 #header {
+  float: none;
+  width: 100%;
+  z-index: 0;
+}
+
+#header p {
   text-align: left;
 }
 
-#header br {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  #header br {
-    display: inline;
-  }
-}
-
 #title {
   font-weight: normal;
 }