Many styling improvements

1) improved markup semantics 2) archive & collapse buttons fully working 3) sidebar improvements
mduan · Jan 8, 2012 · 713bb16 · divad12 · Jan 11, 2012 · mduan
1 parent 4f3cda1
commit 713bb16
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 487 deletions.
diff --git a/_includes/about.html b/_includes/about.html
@@ -0,0 +1,4 @@
+<section id="about">
+	<div class="sidebar-title">About</div>
+	I am currently an undergraduate student attending the University of Waterloo. I am expected to graduate in the spring of 2014.
+</section>
diff --git a/_includes/contact.html b/_includes/contact.html
@@ -0,0 +1,4 @@
+<section id="contact">
+	<div class="sidebar-title">Contact</div>
+	You can reach me by email at <a href="mailto:mack@mduan.com">mack@mduan.com</a>.
+</section>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,10 @@
+<footer>
+	<nav>
+		<ul>
+			<li><a href="https://github.com/mduan/mduan_site">managed by github</a></li>
+			<li><a href="http://github.com/mojombo/jekyll">generated by jekyll</a></li>
+			<li><a href="http://creativecommons.org/licenses/by-sa/3.0/us/">licensed by creative commons</a></li>
+			<li><a href="http://citynethost.com">served by citynethost</a></li>
+		</ul>
+	</nav>
+</footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,11 @@
+<header>
+	<nav>
+		<a href="/index.html" id="logo">Mack Duan</a>
+		<ul>
+			<li><a href="/index.html" class="blog">Blog</a></li>
+			<li><a href="/projects.html" class="projects">Projects</a></li>
+			<li><a href="/resume.html" class="resume">Resume</a></li>
+			<li><a href="/atom.xml" class="atom">Atom</a></li>
+		</ul>
+	</nav>
+</header>
diff --git a/_includes/social.html b/_includes/social.html
@@ -0,0 +1,10 @@
+<section id="social">
+	<div class="sidebar-title">Social</div>
+	<nav>
+		<ul>
+			<li><a href="http://www.linkedin.com/in/mduan">LinkedIn</a></li>
+			<li><a href="https://github.com/mduan">Github</a></li>
+			<li><a href="http://feeds.feedburner.com/mduan">Feedburner</a></li>
+		</ul>
+	</nav>
+</section>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,71 +4,31 @@
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 	<title>MD by Mack Duan | {{ page.title }}</title>
 	<meta name="author" content="Mack Duan" />
-	<link rel="stylesheet" href="/css/960.css" type="text/css" media="screen, projection" />
-	<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen, projection" />
-	<link rel="stylesheet" href="/css/text.css" type="text/css" media="screen, projection" />
-	<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+	<link rel="stylesheet" href="/assets/css/reset.css" type="text/css" media="screen, projection" />
+	<link rel="stylesheet" href="/assets/css/text.css" type="text/css" media="screen, projection" />
+	<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="screen, projection" />
 	{% for css_path in page.css_paths %}
 		<link rel="stylesheet" href="{{ css_path }}" type="text/css" media="screen, projection" />
 	{% endfor %}
 	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
-	<script type="text/javascript" src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
+	<!--<script type="text/javascript" src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
+	<script type="text/javascript" src="/assets/js/screen.js"></script>
 </head>
-<body id="{{ page.type }}" class="container_12">
-	<header class="grid_12">
-		<nav>
-			<a href="/index.html" id="logo">Mack Duan</a>
-			<ul>
-				<li><a href="/index.html" class="blog">Blog</a></li>
-				<li><a href="/projects.html" class="projects">Projects</a></li>
-				<li><a href="/resume.html" class="resume">Resume</a></li>
-				<li><a href="/atom.xml" class="atom">Atom</a></li>
-			</ul>
-		</nav>
-	</header>
-	<div id="content-wrapper" class="grid_12">
-		<div class="grid_9 alpha">
-			<div id="main-content" class="grid-wrapper border-left-lside">
-				{{ content }}
-			</div>
-		</div>
-		<div class="grid_3 omega">
-			<aside class="grid-wrapper border-left-rside">
-				<!-- {% include about.html %}
-				{% include contact.html %}
-				-->
-				<section id="about">
-					<div class="sidebar-title">About</div>
-					I am currently an undergraduate student attending the University of Waterloo. I am expected to graduate in the spring of 2014.
-				</section>
-				<section id="contact">
-					<div class="sidebar-title">Contact</div>
-					You can reach me by email at <a href="mailto:mack@mduan.com">mack@mduan.com</a>.
-				</section>
-				<section id="social">
-					<div class="sidebar-title">Social</div>
-						<nav>
-						<ul>
-							<li>Facebook</li>
-							<li>Twitter</li>
-							<li>LinkedIn</li>
-							<li>Github</li>
-						</nav>
-					</ul>
-				</section>
-			</aside>
+<body id="{{ page.type }}">
+	{% include header.html %}
+	<div id="content-wrapper">
+		<div id="main-content">
+			<!-- TODO: hack to get button to render in a nice looking way. ideally this should be made to display as a vertical tab button to the left of the sidebar -->
+			<button id="sidebar-toggle-button">Collapse</button>
+			{{ content }}
 		</div>
+		<aside id="sidebar">
+			{% include about.html %}
+			{% include contact.html %}
+			{% include social.html %}
+		</aside>
 	</div>
-	<footer class="grid_12">
-		<nav>
-			<ul>
-				<li><a href="https://github.com/mduan/mduan_site">managed by github</a></li>
-				<li><a href="http://github.com/mojombo/jekyll">generated by jekyll</a></li>
-				<li><a href="http://creativecommons.org/licenses/by-sa/3.0/us/">licensed by creative commons</a></li>
-				<li><a href="http://citynethost.com">served by citynethost</a></li>
-			</ul>
-		</nav>
-	</footer>
+	{% include footer.html %}
 	{% include google_analytics.html %}
 </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,6 +1,6 @@
 ---
 layout: default
-css_paths: ["/css/blog.css"]
+css_paths: ["/assets/css/blog.css"]
 type: post-page
 ---
 <section>

diff --git a/css/blog.css → assets/css/blog.css b/css/blog.css → assets/css/blog.css
@@ -19,3 +19,13 @@ article .date {
 #archive h1 {
 	margin-top: 0;
 }
+
+#blog {
+  float: left;
+  clear: right;
+  width: 100%;
+}
+
+#archive-toggle-button {
+  float: right;
+}
diff --git a/css/reset.css → assets/css/reset.css b/css/reset.css → assets/css/reset.css
diff --git a/css/resume.css → assets/css/resume.css b/css/resume.css → assets/css/resume.css
@@ -1,9 +1,15 @@
+#resume {
+  float: left;
+  clear: right;
+}
+
 h1 {
 	text-align: center;
 }
 
 #contact-info ul {
 	list-style: none;
+  overflow: hidden;
 }
 
 #contact-info li {

diff --git a/css/screen.css → assets/css/screen.css b/css/screen.css → assets/css/screen.css
@@ -1,6 +1,5 @@
 h1, h2, h3, h4, h5, h6, p, ul {
 	margin-bottom: 0.5em;
-	margin-top: 0.5em;
 }
 
 h1 {
@@ -32,15 +31,37 @@ body {
 	font: 14px/1.5 Helvetica, Arial,'Liberation Sans', FreeSans, sans-serif;
 }
 
-header {
-	overflow: hidden;
-	position: relative;
-	height: 50px;
-	margin-top: 10px;
+header,
+#content-wrapper,
+footer {
+  margin: 10px auto;
+  overflow: hidden;
+  position: relative;
 }
 
+header,
 footer {
-	overflow: hidden;
+  width: 960px;
+}
+
+header {
+  height: 50px;
+}
+
+#content-wrapper {
+  width: 920px;
+  background: #f4f4f4;
+  padding: 20px;
+
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+
+  /*
+  box-shadow: 0 0 3px 3px black;
+  -moz-box-shadow: 0 0 3px 3px black;
+  -webkit-box-shadow: 0 0 3px 3px black;
+  */
 }
 
 header #logo {
@@ -94,24 +115,6 @@ nav a:active,
 	text-decoration: none;
 }
 
-#content-wrapper {
-	background: #f4f4f4;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	padding-top: 20px;
-	padding-bottom: 20px;
-
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-
-	/*
-	box-shadow: 0 0 3px 3px black;
-	-moz-box-shadow: 0 0 3px 3px black;
-	-webkit-box-shadow: 0 0 3px 3px black;
-	*/
-}
-
 #content-wrapper a:link,
 #content-wrapper a:visited {
 	color: #2382c5;
@@ -122,8 +125,7 @@ nav a:active,
 
 #content-wrapper a:hover,
 #content-wrapper a:focus,
-#content-wrapper a:active,
-#content-wrapper a.button.down {
+#content-wrapper a:active {
 	color: #2382c5;
 	text-decoration: none;
 	padding: 0;
@@ -134,7 +136,6 @@ nav a:active,
 section {
 	padding-bottom: 20px;
 	border-bottom: 1px #cccccc solid;
-	margin-top: 20px;
 	margin-bottom: 20px;
 }
 
@@ -165,28 +166,74 @@ ul.name-value-pairs > li .value {
 	display: table-cell;
 }
 
-aside .sidebar-title {
+#main-content {
+	float: left;
+	padding-right: 10px;
+	width: 610px;
+	overflow: hidden;
+	position: relative;
+}
+
+aside#sidebar {
+	float: right;
+  border-left: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+	width: 290px;
+	padding-left: 9px; /* 9px padding + 1px border = 10px */
+	position: relative;
+}
+
+aside#sidebar .sidebar-title {
 	font-weight: bold;
 	font-size: 1.5em;
 }
 
-.grid-wrapper {
-	padding-left: 20px;
-	padding-right: 20px;
+#content-wrapper button {
+	font-weight: bold;
+	text-decoration: none;
+	background: #eaeaea;
+	padding: 5px;
+	border: 1px outset buttonface;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-o-border-radius: 5px;
+	-webkit-border-radius: 5px;
 }
 
-.grid-wrapper.border-right-lside {
-	border-left: 1px solid #cccccc;
+#content-wrapper button:hover,
+#content-wrapper button:focus,
+#content-wrapper button:active {
+	background: #d9efff;
+	color: #2382c5;
 }
 
-.grid-wrapper.border-right-rside {
-	padding-left: 0;
+#content-wrapper button.depressed {
+	background: #2382c5;
+	color: #d9efff;
+	box-shadow: inset 0 0 2px #333333;
+	-moz-box-shadow: inset 0 0 2px #333333;
+	-o-box-shadow: inset 0 0 2px #333333;
+	-webkit-box-shadow: inset 0 0 2px #333333;
 }
 
-.grid-wrapper.border-left-lside {
-	padding-right: 0;
+#sidebar-toggle-button {
+	float: right;
+}
+
+/*
+.clearfix:before,
+.clearfix:after {
+	content: '.';
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	font-size: 0;
+	line-height: 0;
+	width: 0;
+	height: 0;
 }
 
-.grid-wrapper.border-left-rside {
-	border-left: 1px solid #cccccc;
+.clearfix:after {
+	clear: both;
 }
+*/
diff --git a/css/text.css → assets/css/text.css b/css/text.css → assets/css/text.css
diff --git a/assets/js/screen.js b/assets/js/screen.js
@@ -0,0 +1,43 @@
+$(function() {
+  // TODO: refactor out toggling logic
+
+  // Sidebar collapse/expand toggle
+  (function() {
+    var oldPaddingRight = undefined;
+    var oldWidth = undefined;
+    $('#sidebar-toggle-button').click(function() {
+      $this = $(this);
+      $this.toggleClass('depressed');
+      if ($this.hasClass('depressed')) {
+        var $contentWrapper = $('#content-wrapper');
+
+        $sidebar = $('#sidebar');
+        var marginRight = parseInt($contentWrapper.css('padding-right')) + $sidebar.outerWidth(true);
+        $sidebar.animate({'margin-right': -marginRight});
+
+        $mainContent = $('#main-content');
+        oldWidth = $mainContent.width();
+        oldPaddingRight = parseInt($mainContent.css('padding-right'));
+        $mainContent.animate({'width': $contentWrapper.width(), 'padding-right': 0});
+      } else {
+        $('#sidebar').animate({'margin-right': 0});
+        $('#main-content').animate({'width': oldWidth, 'padding-right': oldPaddingRight});
+      }
+    });
+  })();
+
+  // Blog archive display toggle
+  (function () {
+    $('#archive').css('display', 'none');
+    $('#archive-toggle-button').click(function() {
+      $this = $(this);
+      $this.toggleClass('depressed');
+      $('#archive').slideToggle();
+      //if ($this.hasClass('depressed')) {
+      //  $('#archive').slideDown('slow');
+      //} else {
+      //  $('#archive').slideUp('slow');
+      //}
+    });
+  })();
+});