Fix up both mobile and main styles

jduff · May 30, 2013 · 7ca27cb · 7ca27cb
1 parent d29522e
commit 7ca27cb
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 10 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -21,18 +21,16 @@
           <h2 class='site-title'>
             <a href="{{ site.production_url }}">JOHN DUFF</a>
           </h2>
-          <ul>
+          <ul id="links">
+              <li class="github"><a href="http://github.com/jduff" rel='me' class='url'>@github</a></li>
+              <li class="twitter"><a href="http://twitter.com/johnduff" rel="me" class="url">@johnduff</a></li>
+          </ul>
+
+          <p>A blog about writing software and things.</p>
+
+          <ul id="navigation" class="clearfix">
             <li class='about'><a href='/about/'>About</a></li>
             <li class='archives'><a href='/archives/'>Archives</a></li>
-            <li><a href="/atom.xml">feed</a></li>
-          </ul>
-          <h3>Around the Web</h3>
-          <ul id="links">
-              <li class="github"><a href="http://github.com/jduff" rel='me' class='url'>GitHub Profile</a></li>
-              <li class="twitter"><a href="http://twitter.com/johnduff" rel="me" class="url">Twitter Feed</a></li>
-              <li class="linkedin"><a href="http://www.linkedin.com/in/johnduff" rel="me" class="url">LinkedIn Profile</a></li>
-              <li class="reader"><a href="http://www.google.com/reader/shared/17682955537280407457" rel="me" class="url">Reader Feed</a></li>
-              <li class="facebook"><a href="http://www.facebook.com/duff.john" rel="me" class="url">Facebook Profile</a></li>
           </ul>
         </div>
       </div>

diff --git a/_sass/default.scss b/_sass/default.scss
@@ -105,18 +105,79 @@ h1, h2 {
   top: 0px;
   bottom: 0px;
   border-right: 4px solid;
+
+  li {
+    list-style: none;
+  }
+
+  p {
+    margin: 10px 0px 20px 25px;
+  }
 }
 
 .well {
   background-color: transparent;
   border: none;
 }
 
+#links {
+  /*margin: 0px 0px 0px -20px;*/
+  li {
+    display: inline;
+    padding: 0px 10px;
+  }
+}
+
+#navigation {
+  li {
+    margin: 10px 0px;
+  }
+  a {
+    border-radius: 20px;
+    -moz-border-radius: 20px;
+    -webkit-border-radius: 20px;
+    padding: 5px 13px;
+    border: 5px solid #E6E6E6;
+    color: #E6E6E6;
+    font-weight:bold;
+    font-size:110%;
+    display: inline-block;
+
+    &:hover {
+      border: 5px solid #000;
+      color: #000;
+    }
+  }
+}
+
 @media (max-width: 767px) {
   .sidebar.affix {
     position: relative;
     text-align: center;
     border-right: none;
+    width: 100%;
+    margin: auto;
+
+    .well {
+      padding: 0px;
+      margin-left: 20px;
+    }
+
+    #navigation, #links {
+      margin: 0px 0px 0px -20px;
+      li {
+        display: inline;
+        padding: 0px 10px;
+      }
+    }
+
+    #navigation {
+      margin-top: 20px;
+    }
+
+    p {
+      margin-left: 0px;
+    }
   }
 
   body {

diff --git a/css/default.css b/css/default.css
@@ -101,17 +101,69 @@ h1 a, h2 a {
   bottom: 0px;
   border-right: 4px solid;
 }
+.sidebar li {
+  list-style: none;
+}
+.sidebar p {
+  margin: 10px 0px 20px 25px;
+}
 
 .well {
   background-color: transparent;
   border: none;
 }
 
+#links {
+  /*margin: 0px 0px 0px -20px;*/
+}
+#links li {
+  display: inline;
+  padding: 0px 10px;
+}
+
+#navigation li {
+  margin: 10px 0px;
+}
+#navigation a {
+  border-radius: 20px;
+  -moz-border-radius: 20px;
+  -webkit-border-radius: 20px;
+  padding: 5px 13px;
+  border: 5px solid #E6E6E6;
+  color: #E6E6E6;
+  font-weight: bold;
+  font-size: 110%;
+  display: inline-block;
+}
+#navigation a:hover {
+  border: 5px solid #000;
+  color: #000;
+}
+
 @media (max-width: 767px) {
   .sidebar.affix {
     position: relative;
     text-align: center;
     border-right: none;
+    width: 100%;
+    margin: auto;
+  }
+  .sidebar.affix .well {
+    padding: 0px;
+    margin-left: 20px;
+  }
+  .sidebar.affix #navigation, .sidebar.affix #links {
+    margin: 0px 0px 0px -20px;
+  }
+  .sidebar.affix #navigation li, .sidebar.affix #links li {
+    display: inline;
+    padding: 0px 10px;
+  }
+  .sidebar.affix #navigation {
+    margin-top: 20px;
+  }
+  .sidebar.affix p {
+    margin-left: 0px;
   }
 
   body {