Responsive markdown images, update about page layout

www/about.html

@@ -5,49 +5,21 @@
 <h1>About Me</h1>
 
 <div class="row">
-	<div class="col-md-2">
-		<img src="/static/photos/ff7ec4f5.jpg" width="256" height="256" alt="Kirsle" class="portrait"><p>
-
-		<table border="0" cellspacing="0" cellpadding="4">
-			<tr>
-				<td>
-					<img src="/static/icons/aim.gif" width="16" height="15" alt="AIM">
-				</td>
-				<td>
-					<strong>AIM:</strong>
-				</td>
-				<td>
-					<a href="aim:goim?ScreenName=Kirsle">Kirsle</a>
-				</td>
-			</tr>
-			<tr>
-				<td>
-					<img src="/static/icons/skype.png" width="16" height="!6" alt="Skype">
-				</td>
-				<td>
-					<strong>Skype:</strong>
-				</td>
-				<td>
-					<a href="skype:kirsle?chat">Kirsle</a>
-				</td>
-			</tr>
-			<tr>
-				<td>
-					<img src="/static/icons/xmpp.gif" width="16" height="16" alt="XMPP">
-				</td>
-				<td>
-					<strong>XMPP:</strong>
-				</td>
-				<td>
-					kirsle@kirsle.net
-				</td>
-			</tr>
-		</table><p>
+	<div class="col-lg-2">
+		<img src="/static/photos/ff7ec4f5.jpg" class="img-responsive portrait" alt="Kirsle"><p>
+
+		<img src="/static/icons/aim.gif" width="16" height="15" alt="AIM">
+		<strong>AIM:&nbsp;&nbsp;&nbsp;</strong>
+		<a href="aim:goim?ScreenName=Kirsle">Kirsle</a><br>
+
+		<img src="/static/icons/xmpp.gif" width="16" height="16" alt="XMPP">
+		<strong>XMPP:</strong>
+		kirsle@kirsle.net<p>
 
 		&#0164; <a href="/contact">Send me an e-mail</a>
 	</div>
 
-	<div class="col-md-10">
+	<div class="col-lg-10">
 		<h2>Hello world!</h2>
 
 		My name is <strong>Noah</strong> and this is my website. I am a software engineer who lives in

www/contact/index.html

@@ -5,7 +5,8 @@
 <h1>Contact Me</h1>
 
 You can use the form below to send me an e-mail. Alternatively you can contact
-me on an instant messenger:
+me on an instant messenger
+(<a href="https://otr.cypherpunks.ca/">Off-the-Record</a> optional):<p>
 
 <blockquote>
 	<table class="table" style="width: auto" border="0" cellspacing="4" cellpadding="4">
@@ -20,17 +21,6 @@ me on an instant messenger:
 				<a href="aim:goim?ScreenName=Kirsle">Kirsle</a>
 			</td>
 		</tr>
-		<tr>
-			<td>
-				<img src="/static/icons/skype.png" width="16" height="!6" alt="Skype">
-			</td>
-			<td>
-				<strong>Skype:</strong>
-			</td>
-			<td>
-				<a href="skype:kirsle?chat">Kirsle</a>
-			</td>
-		</tr>
 		<tr>
 			<td>
 				<img src="/static/icons/xmpp.gif" width="16" height="16" alt="XMPP">
@@ -39,7 +29,7 @@ me on an instant messenger:
 				<strong>XMPP:</strong>
 			</td>
 			<td>
-				kirsle@kirsle.net
+				noah@kirsle.net
 			</td>
 		</tr>
 	</table>

www/solar/ui.css

@@ -113,6 +113,12 @@ acronym,abbr {
 p {
 	margin: 10px 0px;
 }
+ul {
+	margin: 10px 0px;
+}
+blockquote {
+	margin: 20px 0px;
+}
 
 /* Our own custom nav button for Bootstrap */
 .mobile-nav {
@@ -427,6 +433,12 @@ ul.blog-categories li:last-child:after {
 	-webkit-box-shadow: 0px 0px 4px #0099FF;
 }
 
+/* Responsive images in markdown */
+.markdown img {
+	max-width: 100%;
+	height: auto;
+}
+
 /*************
  * Eye Candy *
  ************/