Implement more of Bootstrap.

index.html

@@ -24,27 +24,40 @@
     <div class="container">
       <div class="row">
         <div class="col-md-12">
-          <img
+          <h1>
-         src="https://secure.gravatar.com/avatar/0e25d6dfd8f326c6d2aeae3752c22863" class="pull-left" style="border-radius:5px;margin-right:1em;" alt="Daniel Kraus">
+            <img class="img-rounded pull-left" style="margin-right:1em;" src="https://secure.gravatar.com/avatar/0e25d6dfd8f326c6d2aeae3752c22863" alt="Daniel Kraus">
-          <h1>Daniel Kraus is (a) Bovender</h1>
+            Daniel Kraus is (a) Bovender
+          </h1>
         </div>
       </div>
       <div class="row" style="margin-top:18px; margin-bottom:8px;">
         <div class="col-md-12">
-          <div class="well text-center" style="line-height:40px;">
+          <div class="well text-center">
-            Find me on&hellip;
+            <p style="display:inline;margin-right:1em;">
-            <a class="btn btn-primary" href="https://github.com/bovender">
+              Find me on
-              GitHub
+            </p>
-            </a>
+            <ul class="list-inline" style="display:inline;">
-            <a class="btn btn-primary" href="https://www.mediawiki.org/wiki/User:Bovender">
+              <li>
-              MediaWiki
+                <a class="btn btn-primary" href="https://github.com/bovender">
-            </a>
+                  GitHub
-            <a class="btn btn-primary" href="https://de.linkedin.com/in/krada">
+                </a>
-              LinkedIn
+              </li>
-            </a>
+              <li>
-            <a class="btn btn-primary" href="https://www.researchgate.net/profile/Kraus_Daniel">
+                <a class="btn btn-primary" href="https://www.mediawiki.org/wiki/User:Bovender">
-              ResearchGate
+                  MediaWiki
-            </a>
+                </a>
+              </li>
+              <li>
+                <a class="btn btn-primary" href="https://de.linkedin.com/in/krada">
+                  LinkedIn
+                </a>
+              </li>
+              <li>
+                <a class="btn btn-primary" href="https://www.researchgate.net/profile/Kraus_Daniel">
+                  ResearchGate
+                </a>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -149,11 +162,8 @@
                   github.com/bovender/indicator-ip
                 </a>
               </h4>
-              <p class="text-center">
-                <img
-           src="https://github.com/bovender/indicator-ip/raw/master/src/IndicatorIp/images/screenshot.png" alt="indicator-ip screenshot" style="max-width:100%;height:auto;">
-              </p>
               <p>
+                <img class="img-responsive" src="https://github.com/bovender/indicator-ip/raw/master/src/IndicatorIp/images/screenshot.png" alt="indicator-ip screenshot">
                 <span class="label label-primary">Python</span>
                 Ubuntu Unity indicator that displays the current IP
                 address(es) in the indicator bar.
@@ -237,8 +247,8 @@
         </div>
       </div>
 
-      <div class="row" style="margin-top: 18px;color:#558;">
+      <div class="row" style="margin-top: 18px">
-        <div class="col-md-12 text-center">
+        <div class="col-md-12 text-center text-muted">
           <p style="margin:0">
             <small>
               This microsite was hand-coded using <a