Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Many styling improvements

1) improved markup semantics
2) archive & collapse buttons fully working
3) sidebar improvements
  • Loading branch information...
commit 713bb169734e62d2e198aedd65096e62bded556e 1 parent 4f3cda1
@mduan authored
View
4 _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>
View
4 _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>.
@divad12
divad12 added a note

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

@mduan Owner
mduan added a note

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+</section>
View
10 _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>
View
11 _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>
View
10 _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>
View
76 _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 %}
@divad12
divad12 added a note

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
{% include google_analytics.html %}
</body>
</html>
View
2  _layouts/post.html
@@ -1,6 +1,6 @@
---
layout: default
-css_paths: ["/css/blog.css"]
+css_paths: ["/assets/css/blog.css"]
@divad12
divad12 added a note

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
type: post-page
---
<section>
View
10 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;
+}
View
0  css/reset.css → assets/css/reset.css
File renamed without changes
View
6 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 {
View
127 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;
}
+*/
View
0  css/text.css → assets/css/text.css
File renamed without changes
View
43 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);
@divad12
divad12 added a note

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $sidebar.animate({'margin-right': -marginRight});
+
+ $mainContent = $('#main-content');
@divad12
divad12 added a note

Forgot a var here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ 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});
@divad12
divad12 added a note

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'.

@mduan Owner
mduan added a note

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

@divad12
divad12 added a note

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }
+ });
+ })();
+
+ // Blog archive display toggle
+ (function () {
@divad12
divad12 added a note

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $('#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');
+ //}
+ });
+ })();
+});
View
357 css/960.css
@@ -1,357 +0,0 @@
-/*
- 960 Grid System ~ Core CSS.
- Learn more ~ http://960.gs/
-
- Licensed under GPL and MIT.
-*/
-
-/*
- Forces backgrounds to span full width,
- even if there is horizontal scrolling.
- Increase this if your layout is wider.
-
- Note: IE6 works fine without this fix.
-*/
-
-body {
- min-width: 960px;
-}
-
-/* `Container
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 {
- margin-left: auto;
- margin-right: auto;
- width: 960px;
-}
-
-/* `Grid >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12 {
- display: inline;
- float: left;
- margin-left: 10px;
- margin-right: 10px;
-}
-
-.push_1, .pull_1,
-.push_2, .pull_2,
-.push_3, .pull_3,
-.push_4, .pull_4,
-.push_5, .pull_5,
-.push_6, .pull_6,
-.push_7, .pull_7,
-.push_8, .pull_8,
-.push_9, .pull_9,
-.push_10, .pull_10,
-.push_11, .pull_11 {
- position: relative;
-}
-
-/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------------*/
-
-.alpha {
- margin-left: 0;
-}
-
-.omega {
- margin-right: 0;
-}
-
-/* `Grid >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .grid_1 {
- width: 60px;
-}
-
-.container_12 .grid_2 {
- width: 140px;
-}
-
-.container_12 .grid_3 {
- width: 220px;
-}
-
-.container_12 .grid_4 {
- width: 300px;
-}
-
-.container_12 .grid_5 {
- width: 380px;
-}
-
-.container_12 .grid_6 {
- width: 460px;
-}
-
-.container_12 .grid_7 {
- width: 540px;
-}
-
-.container_12 .grid_8 {
- width: 620px;
-}
-
-.container_12 .grid_9 {
- width: 700px;
-}
-
-.container_12 .grid_10 {
- width: 780px;
-}
-
-.container_12 .grid_11 {
- width: 860px;
-}
-
-.container_12 .grid_12 {
- width: 940px;
-}
-
-/* `Prefix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .prefix_1 {
- padding-left: 80px;
-}
-
-.container_12 .prefix_2 {
- padding-left: 160px;
-}
-
-.container_12 .prefix_3 {
- padding-left: 240px;
-}
-
-.container_12 .prefix_4 {
- padding-left: 320px;
-}
-
-.container_12 .prefix_5 {
- padding-left: 400px;
-}
-
-.container_12 .prefix_6 {
- padding-left: 480px;
-}
-
-.container_12 .prefix_7 {
- padding-left: 560px;
-}
-
-.container_12 .prefix_8 {
- padding-left: 640px;
-}
-
-.container_12 .prefix_9 {
- padding-left: 720px;
-}
-
-.container_12 .prefix_10 {
- padding-left: 800px;
-}
-
-.container_12 .prefix_11 {
- padding-left: 880px;
-}
-
-/* `Suffix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .suffix_1 {
- padding-right: 80px;
-}
-
-.container_12 .suffix_2 {
- padding-right: 160px;
-}
-
-.container_12 .suffix_3 {
- padding-right: 240px;
-}
-
-.container_12 .suffix_4 {
- padding-right: 320px;
-}
-
-.container_12 .suffix_5 {
- padding-right: 400px;
-}
-
-.container_12 .suffix_6 {
- padding-right: 480px;
-}
-
-.container_12 .suffix_7 {
- padding-right: 560px;
-}
-
-.container_12 .suffix_8 {
- padding-right: 640px;
-}
-
-.container_12 .suffix_9 {
- padding-right: 720px;
-}
-
-.container_12 .suffix_10 {
- padding-right: 800px;
-}
-
-.container_12 .suffix_11 {
- padding-right: 880px;
-}
-
-/* `Push Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .push_1 {
- left: 80px;
-}
-
-.container_12 .push_2 {
- left: 160px;
-}
-
-.container_12 .push_3 {
- left: 240px;
-}
-
-.container_12 .push_4 {
- left: 320px;
-}
-
-.container_12 .push_5 {
- left: 400px;
-}
-
-.container_12 .push_6 {
- left: 480px;
-}
-
-.container_12 .push_7 {
- left: 560px;
-}
-
-.container_12 .push_8 {
- left: 640px;
-}
-
-.container_12 .push_9 {
- left: 720px;
-}
-
-.container_12 .push_10 {
- left: 800px;
-}
-
-.container_12 .push_11 {
- left: 880px;
-}
-
-/* `Pull Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .pull_1 {
- left: -80px;
-}
-
-.container_12 .pull_2 {
- left: -160px;
-}
-
-.container_12 .pull_3 {
- left: -240px;
-}
-
-.container_12 .pull_4 {
- left: -320px;
-}
-
-.container_12 .pull_5 {
- left: -400px;
-}
-
-.container_12 .pull_6 {
- left: -480px;
-}
-
-.container_12 .pull_7 {
- left: -560px;
-}
-
-.container_12 .pull_8 {
- left: -640px;
-}
-
-.container_12 .pull_9 {
- left: -720px;
-}
-
-.container_12 .pull_10 {
- left: -800px;
-}
-
-.container_12 .pull_11 {
- left: -880px;
-}
-
-/* `Clear Floated Elements
-----------------------------------------------------------------------------------------------------*/
-
-/* http://sonspring.com/journal/clearing-floats */
-
-.clear {
- clear: both;
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0;
-}
-
-/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
-
-.clearfix:before,
-.clearfix:after,
-.container_12:before,
-.container_12:after {
- content: '.';
- display: block;
- overflow: hidden;
- visibility: hidden;
- font-size: 0;
- line-height: 0;
- width: 0;
- height: 0;
-}
-
-.clearfix:after,
-.container_12:after {
- clear: both;
-}
-
-/*
- The following zoom:1 rule is specifically for IE6 + IE7.
- Move to separate stylesheet if invalid CSS is a problem.
-*/
-
-.clearfix,
-.container_12 {
- zoom: 1;
-}
View
35 index.html
@@ -1,30 +1,17 @@
---
layout: default
type: blog-page
-css_paths: ["/css/blog.css"]
+css_paths: ["/assets/css/blog.css"]
title: Blog
---
-<div id="archive-toggle-button-wrapper">
- <a id="archive-toggle-button" class="button" href="#">Archive</a>
+<button id="archive-toggle-button">Archive</button>
+<div id="blog">
+ {% include archive.html %}
+ <section id="articles">
+ {% for article in site.posts limit:1 %}
@divad12
divad12 added a note

Hey, so have you tested if custom stylesheets that you include in css_paths in blog posts get rendered on the homepage? If you get it working please tell me. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ {% assign index = true %}
+ {% assign content = article.content %}
+ {% include article.html %}
+ {% endfor %}
+ </section>
</div>
-{% include archive.html %}
-<script>
- $('.button').button();
- $('#archive').css('display', 'none') ;
- $('#archive-toggle-button').click(function() {
- $this = $(this);
- $this.toggleClass('down');
- if ($this.hasClass('down')) {
- $('#archive').slideDown('slow');
- } else {
- $('#archive').slideUp('slow');
- }
- });
-</script>
-<section id="articles">
-{% for article in site.posts limit:1 %}
- {% assign index = true %}
- {% assign content = article.content %}
- {% include article.html %}
-{% endfor %}
-</section>
View
8 projects.html
@@ -0,0 +1,8 @@
+---
+layout: default
+type: projects-page
+title: Projects
+---
+<section id="projects">
+ <h1>Projects</h1>
+</section> <!-- projects -->
View
14 resume.html
@@ -1,24 +1,24 @@
---
-css_paths: ["css/resume.css"]
+css_paths: ["/assets/css/resume.css"]
layout: default
type: resume-page
title: Resume
---
<section id="resume">
- <h1>Mack Duan</h1>
- <section id="contact-info">
- <ul class="clearfix">
+ <section id="contact-info" class="vcard">
+ <h1 class="fn">Mack <span class="n">Duan</span></h1>
+ <ul>
<li class="website">
<span class="name">Website:</span>
- <span class="value"><a href="/">http://mduan.com</a></span>
+ <span class="value"><a class="url" href="/">http://mduan.com</a></span>
</li>
<li class="email">
<span class="name">Email:</span>
- <span class="value"><a href="mailto:mack@mduan.com">mack@mduan.com</a></span>
+ <span class="value"><a class="email" href="mailto:mack@mduan.com">mack@mduan.com</a></span>
</li>
<li class="phone">
<span class="name">Phone:</span>
- <span class="value"><a href="tel:2268081578">(226) 808-1578</a></span>
+ <span class="value"><a class="tel" href="tel:2268081578">(226) 808-1578</a></span>
</li>
</ul>
</section><!-- contact-info -->
@divad12

Forgot a var here.

@divad12

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

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

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.

@mduan

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

@divad12

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

@divad12

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

@divad12

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

@divad12

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.

@mduan

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.

@divad12

Hey, so have you tested if custom stylesheets that you include in css_paths in blog posts get rendered on the homepage? If you get it working please tell me. :)

Please sign in to comment.
Something went wrong with that request. Please try again.