Skip to content

Commit

Permalink
Use em-based font sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kangax
kangax committed Jan 18, 2014
1 parent 95390bd commit f0d0801
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 33 deletions.
2 changes: 1 addition & 1 deletion _layouts/post.html
View file
Expand Up @@ -38,7 +38,7 @@
{{ content }}

<p class="donations-in-post">
Liked this? Donations are welcome
Did you like this? Donations are welcome

<script data-gittip-username="kangax"
data-gittip-widget="button"
Expand Down
2 changes: 1 addition & 1 deletion _posts/2011-06-13-refactoring-javascript-with-kratko-js.html
View file
Expand Up @@ -8,7 +8,7 @@

<h2>Refactoring Javascript with kratko.js</h2>

<p><img src="/images/kratko_screenshot_1.png" style="width:700px"></p>
<p><img src="/images/kratko_screenshot_1.png" style="width:675px"></p>

<p>Understanding the concept of <a href="http://en.wikipedia.org/wiki/Code_refactoring">code refactoring</a> is one of the best things you can do to become a better programmer <sup><a href="#on-refactoring">[1]</a></sup>.</p>

Expand Down
53 changes: 22 additions & 31 deletions css/master.css
View file
@@ -1,5 +1,8 @@
/*
16px = 1em
*/
body {
border-top: 2px solid #555; margin: 0; font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif; color: #333; font-size: 16px; background: #fff;
border-top: 2px solid #555; margin: 0; font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif; color: #333; font-size: 1em; background: #fff;
}

#outer-wrapper { border-top: 7px solid #ddd; }
Expand All @@ -9,13 +12,13 @@ body {
.blog-title a { color: #333; text-decoration: none; }
.blog-title a:hover, .blog-title a:focus { text-shadow: #FFC8C8 0 0 1px; }
.blog-author { margin: 0; display: inline; vertical-align: baseline; font-style: italic; }
.blog-slogan { clear: both; margin-top: 0; font-size: 14px; text-transform: lowercase; font-variant: small-caps; color: #f06; margin-left: 2px; margin-bottom: 60px; }
.blog-slogan { clear: both; margin-top: 0; font-size: 0.9em; text-transform: lowercase; font-variant: small-caps; color: #f06; margin-left: 2px; margin-bottom: 60px; }

h2, h3, h4, h5 { position: relative; }
h2 { font-size: 28px; margin-bottom: 28px; }
h3 { font-size: 22px; margin-top: 32px; margin-left: -30px; padding-left: 30px; }
h2 { font-size: 1.6em; margin-bottom: 28px; }
h3 { font-size: 1.4em; margin-top: 32px; margin-left: -30px; padding-left: 30px; }
h4 { margin-left: -25px; padding-left: 25px; }
h5 { font-size: 16px; margin-left: -25px; padding-left: 25px; }
h5 { font-size: 1.2em; margin-left: -25px; padding-left: 25px; }
h3 a, h4 a, h5 a { position: absolute; left: -5px; top: -10px; text-decoration: none; display: none; padding: 10px; }
h3:hover a, h4:hover a, h5:hover a, h3:focus a, h4:focus a, h5:focus a { display: block; }
ol li, ul li { margin-bottom: 7px; line-height: 1.4; }
Expand All @@ -33,8 +36,8 @@ a:active { color: #333; }
strong code { background: #ffc; }
.superhero strong { background: none !important }

code { font-family: Courier, monospace; font-size: 14px; background: #e0e0e0; padding: 1px 4px; }
pre code { border: none; font-size: 14px; display: block; }
code { font-family: Courier, monospace; font-size: 0.9em; background: #e0e0e0; padding: 1px 4px; }
pre code { border: none; font-size: 0.9em; display: block; }

pre { background: rgb(200,200,200); margin-left: -6px; margin-top: 22px; margin-bottom: 22px; padding: 1px; border-radius: 4px; }
pre code { background: rgb(100,100,100); padding-left: 10px; color: #eee; border: 2px solid #fff; border-radius: 3px; padding-bottom: 18px; }
Expand All @@ -48,7 +51,7 @@ cite { float: none; line-height: 1.4; }
position: fixed;
top: 40px;
left: 0;
font-size: 12px;
font-size: 0.8em;
background: #f5f5f5;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
Expand All @@ -61,23 +64,15 @@ cite { float: none; line-height: 1.4; }
#toc li { margin-bottom: 10px; list-style: none; }
#toc li:before { content: '- '; }

.footnote { font-size: 12px; color: #666; }
.footnote { font-size: 0.75em; color: #666; }
.footnote sup { color: #f06; margin-right: 5px; }

.post { position: relative; }
.post > h2 { margin-top: 60px; margin-right: 130px; }

.meta { color: #555; font-size: 11px; position: absolute; top: 18px; right: 0; }
.meta { color: #555; font-size: 0.75em; position: absolute; top: 18px; right: 0; }
.entry { margin-bottom: 20px; }

.subnav {padding:0 12px;}
.subnav h2 {color:#F06;font-size:auto;height:20px;margin-left:8px;margin-top:1em;font-size:1.2em;}
.subnav ul {margin:0 0 16px;padding:0;}
.subnav li {border-bottom:1px dotted #333;list-style:none;margin:0;padding: 3px 0; }
.subnav h1 a {color:#F06;}
.subnav li > a {color:#777;display:block;font-size:0.9em;padding:3px 6px 3px 8px;text-align:left;text-decoration:none;}
.subnav li > a:focus, .subnav li > a:hover {color:#DDD;}

#carbonads-container { float: right; margin-left: 20px; margin-bottom: 20px; margin-top: 40px; clear: both; }

.ad { font-size: 0.8em; margin-bottom: 0.5em; margin-top: 0.5em; margin-left: 0.75em }
Expand All @@ -95,45 +90,45 @@ cite { float: none; line-height: 1.4; }
.posts .popular, .posts .new { position: relative; }

.posts .popular:before {
content: 'popular'; position: absolute; top: -1px; left: -60px; font-size: 11px;
content: 'popular'; position: absolute; top: -1px; left: -60px; font-size: 0.7em;
border-radius: 5px; background: rgb(155, 177, 213); color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; }

.posts .new:before {
content: 'new'; position: absolute; top: -1px; left: -45px; font-size: 11px;
content: 'new'; position: absolute; top: -1px; left: -45px; font-size: 0.7em;
border-radius: 5px; background: rgb(152, 203, 74); color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; }

.posts li.hidden { height: 0; overflow: hidden; opacity: 0; margin-bottom: 0; }

.popular-tag { font-size: 11px; border-radius: 5px; background: rgb(155, 177, 213); color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; }
.popular-tag { font-size: 0.7em; border-radius: 5px; background: rgb(155, 177, 213); color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; }

.gist span { font-size: 90%; }
.gist-meta { opacity: 0; transition: all 0.1s; }
.gist-file { border: none !important; }
.gist:hover .gist-meta { opacity: 1; }

.post-date, .post-num-words { float: right; font-style: italic; color: #888; margin-top: 10px; font-size: 14px; }
.post-date, .post-num-words { float: right; font-style: italic; color: #888; margin-top: 10px; font-size: 0.9em; }
.post-num-words span { color: #ccc; }
.post-date:after { content: '\b7'; margin-right: 10px; margin-left: 7px; }

.front-page-content { margin: 80px auto; position: relative; }

.filter { position: absolute; top: -50px; right: 0; font-size: 13px; }
.filter { position: absolute; top: -50px; right: 0; font-size: 0.8em; }
.topic:first-child { margin-left: 10px; }
.topic.selected { font-size: 11px; border-radius: 5px; background: #f06; color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; text-decoration: none; }
.topic.selected { font-size: 0.9em; border-radius: 5px; background: #f06; color: #fff; padding: 3px 6px; font-family: Helvetica, sans-serif; text-decoration: none; }

.floated { float: left; vertical-align: top; margin-right: 20px; margin-top: 10px; }

.back-to-front { position: absolute; top: 8px; left: -65px; text-decoration: none; font-size: 13px; }
.back-to-front { position: absolute; top: 8px; left: -65px; text-decoration: none; font-size: 0.9em; }
.back-to-front:hover, .back-to-front:focus { text-decoration: underline; }

.content { position: relative; }

.toc { margin-bottom: 30px; }

.donations-in-post { font-size: 12px; background: #eee; padding: 5px 10px; line-height: 30px; margin-top: 20px; }
.donations-in-post { font-size: 0.8em; background: #eee; padding: 5px 10px; line-height: 30px; margin-top: 20px; }
.donations-in-post iframe { position: relative; top: 6px; left: 10px; }

.footer { background: #eee; line-height: 40px; font-size: 12px; }
.footer { background: #eee; line-height: 40px; font-size: 0.8em; }
.footer .wrapper { width: 860px; margin: 0 auto; }
.footer iframe { position: relative; top: 5px; left: 5px; }
.footer .donations { float: right; }
Expand Down Expand Up @@ -175,7 +170,3 @@ html, body {
height: 60px;
}
}

@media (max-width: 480px) {
font-size: 3em;
}

0 comments on commit f0d0801

Please sign in to comment.