From f319f935810a5ad7a11a95eeb0337048e4bd1609 Mon Sep 17 00:00:00 2001
From: Arona Jones <warlordjones@gmail.com>
Date: Tue, 21 Oct 2014 10:40:16 +0100
Subject: [PATCH] Add JoshPageTM sidebar

Visuals pending
---
 css/custom.css | 12 ++++++++++++
 index.html     | 23 ++++++++++++-----------
 2 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 css/custom.css

diff --git a/css/custom.css b/css/custom.css
new file mode 100644
index 0000000..bba51fe
--- /dev/null
+++ b/css/custom.css
@@ -0,0 +1,12 @@
+.media {
+    width:55px;
+    position: absolute;
+    top: 170px;
+    right: 0px;
+    background-color: lightblue;
+}
+.media img {
+    width: 40px;
+    float: right;
+    margin-right: 5px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ef73690..ea4daf5 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
         <!-- Bootstrap core CSS -->
         <link href="/css/main.min.css" rel="stylesheet">
         <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="/css/custom.css">
 
         <!-- Custom styles for this template -->
         <style>body{padding-top:50px;}.starter-template{padding:40px 15px;text-align:center;}</style>
@@ -49,17 +50,16 @@
             </div>
         </nav>
         <div class="container">
-            <script src="/javascripts/semantic.min.js"></script>
-            <div class="ui sidebar">
-                 <h5>Me on the web:</h5>
-                    <a href="http://twitter.com/jacknife98"><img src="http://seven50.org/wp-content/uploads/2014/08/twitter-icon.png" width="2%"></a>
-                    <a href="https://plus.google.com/u/0/100791479736569815145"><img src="http://kollaj.typepad.com/googleplusicon.png" width="2%"></a>
-                    <a href="https://www.youtube.com/user/warlordjones"><img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/256/YouTube-icon.png" width="2%"></a>
-                    <a href="https://github.com/warlordjones"><img src="http://fc05.deviantart.net/fs71/i/2012/223/4/3/github_flurry_ios_style_icon_by_flakshack-d5ariic.png" width="2%"></a>
-                    <a href="http://brassgoggles.co.uk/forum/index.php?action=profile;u=18504;sa=summary"><img src="https://brassgoggles.co.uk/forum/Themes/Steampunk/images/on.gif" width="2%"></a>
-                    <a href="http://www.minecraftforum.net/members/warlordjones" width="2%"><img src="http://fc07.deviantart.net/fs71/f/2013/034/e/2/minecraft_icon_for_faenza_theme_by_raymih-d5trt0s.png" width="2%"></a>
-                    <a href="mailto://warlordjones@gmail.com"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/512/Communication-gmail-icon.png" width="2%"></a>
-                    <a href="404.html"><img src="http://images3.wikia.nocookie.net/__cb20110728041007/warhammer40k/images/thumb/4/40/Bad_Moons_Icon.jpg/200px-Bad_Moons_Icon.jpg" width="2%"></a>
+            
+            <div class="media">
+                    <a href="http://twitter.com/jacknife98"><img src="http://seven50.org/wp-content/uploads/2014/08/twitter-icon.png"></a>
+                    <a href="https://plus.google.com/u/0/100791479736569815145"><img src="http://kollaj.typepad.com/googleplusicon.png"> </a>
+                    <a href="https://www.youtube.com/user/warlordjones"><img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/256/YouTube-icon.png"></a>
+                    <a href="https://github.com/warlordjones"><img src="http://fc05.deviantart.net/fs71/i/2012/223/4/3/github_flurry_ios_style_icon_by_flakshack-d5ariic.png"></a>
+                    <a href="http://brassgoggles.co.uk/forum/index.php?action=profile;u=18504;sa=summary"><img src="https://brassgoggles.co.uk/forum/Themes/Steampunk/images/on.gif"></a>
+                    <a href="http://www.minecraftforum.net/members/warlordjones"> <img src="http://fc07.deviantart.net/fs71/f/2013/034/e/2/minecraft_icon_for_faenza_theme_by_raymih-d5trt0s.png"></a>
+                    <a href="mailto://warlordjones@gmail.com"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/512/Communication-gmail-icon.png"> </a>
+                    <a href="404.html"><img src="http://images3.wikia.nocookie.net/__cb20110728041007/warhammer40k/images/thumb/4/40/Bad_Moons_Icon.jpg/200px-Bad_Moons_Icon.jpg"> </a>
             </div>
             <div class="starter-template">
                 <img src="/images/avatar.png">
@@ -75,5 +75,6 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <!-- compiled and minified Bootstrap JavaScript -->
         <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+        <script src="/javascripts/semantic.min.js"></script>
     </body>
 </html>