Permalink
Browse files

Many styling improvements

1) improved markup semantics
2) archive & collapse buttons fully working
3) sidebar improvements
  • Loading branch information...
mduan committed Jan 8, 2012
1 parent 4f3cda1 commit 713bb169734e62d2e198aedd65096e62bded556e
View
@@ -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>
View
@@ -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>.

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

Hope you don't get spam :P You could just upload an image or something.

@divad12

divad12 Jan 11, 2012

Contributor

Hope you don't get spam :P You could just upload an image or something.

This comment has been minimized.

Show comment Hide comment
@mduan

mduan Jan 11, 2012

Owner

I'll set up a new email and do this if it turns out to be a problem.

Personal note: still need to actually set up email.

@mduan

mduan Jan 11, 2012

Owner

I'll set up a new email and do this if it turns out to be a problem.

Personal note: still need to actually set up email.

+</section>
View
@@ -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>
View
@@ -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>
View
@@ -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>
View
@@ -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 %}

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

Nice de-coupling of the different components of the page. :)

@divad12

divad12 Jan 11, 2012

Contributor

Nice de-coupling of the different components of the page. :)

{% include google_analytics.html %}
</body>
</html>
View
@@ -1,6 +1,6 @@
---
layout: default
-css_paths: ["/css/blog.css"]
+css_paths: ["/assets/css/blog.css"]

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

Just curious, what this /assets/ path let you do? Caching or something? I just want to learn. :)

@divad12

divad12 Jan 11, 2012

Contributor

Just curious, what this /assets/ path let you do? Caching or something? I just want to learn. :)

type: post-page
---
<section>
@@ -19,3 +19,13 @@ article .date {
#archive h1 {
margin-top: 0;
}
+
+#blog {
+ float: left;
+ clear: right;
+ width: 100%;
+}
+
+#archive-toggle-button {
+ float: right;
+}
File renamed without changes.
@@ -1,9 +1,15 @@
+#resume {
+ float: left;
+ clear: right;
+}
+
h1 {
text-align: center;
}
#contact-info ul {
list-style: none;
+ overflow: hidden;
}
#contact-info li {
@@ -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;
}
+*/
File renamed without changes.
View
@@ -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);

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

You probably already know this, but just FYI it's a good practice in JS to always write parseInt(someStr, 10) to avoid nasty surprises with octal.

@divad12

divad12 Jan 11, 2012

Contributor

You probably already know this, but just FYI it's a good practice in JS to always write parseInt(someStr, 10) to avoid nasty surprises with octal.

+ $sidebar.animate({'margin-right': -marginRight});
+
+ $mainContent = $('#main-content');

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

Forgot a var here.

@divad12

divad12 Jan 11, 2012

Contributor

Forgot a var here.

+ 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});

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

FYI: (here and other places) don't need quotes around JS keys. Could do

.animate({ width: oldWidth, paddingRight: oldPaddingRight});

Notice jQuery lets you do paddingRight, which is the same as 'padding-right'.

@divad12

divad12 Jan 11, 2012

Contributor

FYI: (here and other places) don't need quotes around JS keys. Could do

.animate({ width: oldWidth, paddingRight: oldPaddingRight});

Notice jQuery lets you do paddingRight, which is the same as 'padding-right'.

This comment has been minimized.

Show comment Hide comment
@mduan

mduan Jan 11, 2012

Owner

Is it preferable to use paddingRight? I prefer 'padding-right' just because it is consistent w/ CSS.

@mduan

mduan Jan 11, 2012

Owner

Is it preferable to use paddingRight? I prefer 'padding-right' just because it is consistent w/ CSS.

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

I personally prefer paddingRight because then I don't have to quote my keys and camelCasing hyphen-separated CSS properties is actually quite standard in the DOM API. Eg. node.style.paddingRight.

@divad12

divad12 Jan 11, 2012

Contributor

I personally prefer paddingRight because then I don't have to quote my keys and camelCasing hyphen-separated CSS properties is actually quite standard in the DOM API. Eg. node.style.paddingRight.

+ }
+ });
+ })();
+
+ // Blog archive display toggle
+ (function () {

This comment has been minimized.

Show comment Hide comment
@divad12

divad12 Jan 11, 2012

Contributor

nit: You don't really have to wrap this in an immediately-called fn since everything's already in a fn, but it's fine I guess.

@divad12

divad12 Jan 11, 2012

Contributor

nit: You don't really have to wrap this in an immediately-called fn since everything's already in a fn, but it's fine I guess.

+ $('#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');
+ //}
+ });
+ })();
+});
Oops, something went wrong.

0 comments on commit 713bb16

Please sign in to comment.