more responsive navbar style

clemmy · Jan 22, 2015 · e14ad0f · e14ad0f
1 parent eb4501b
commit e14ad0f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/site/css/style.css b/site/css/style.css
@@ -111,10 +111,22 @@ a:visited {
     color: #aaaaaa;
 }
 
+.navbar {
+    text-align: center;
+}
+
 @media (min-width: 769px) {
     .infobox {
         flex: 1 0 0;
     }
+
+    .navbar li {
+        display: inline;
+    }
+
+    .navbar li:not(:last-child):after {
+        content: " • ";
+    }
 }
 
 @media (max-width: 768px) {
@@ -130,4 +142,8 @@ a:visited {
         margin: 10px;
         max-width: 100%;
     }
+
+    .navbar {
+        list-style-type: none;
+    }
 } 
diff --git a/site/index.html b/site/index.html
@@ -9,7 +9,13 @@
     <header class="top-bar center-text">
       <h1>Elvin Yung</h1>
       <h4><i class="thin">Full Stack Wizard (in Training)</i></h4>
-      <h4><a href="#am">Who I Am</a> &middot; <a href="#do">What I Do</a> &middot; <a href="#done">What I've Done</a> &middot; <a href="#doing">What I'm Doing</a> &middot; <a href="#talk">Let's Talk</a></h4>
+      <ul class="navbar">
+        <li><a href="#am">Who I Am</a></li>
+        <li><a href="#do">What I Do</a></li>
+        <li><a href="#done">What I've Done</a></li>
+        <li><a href="#doing">What I'm Doing</a></li>
+        <li><a href="#talk">Let's Talk</a></li>
+      </ul>
     </header>
     <div class="content">
       <div class="slide tall-slide center-text">