Permalink
Browse files

Converting absolute unit values (px) to relative values (em) to bette…

…r support zooming
  • Loading branch information...
1 parent bc63a09 commit ff1180a28cd4a32261aadb13c1579b603e022ac4 @wafflesnatcha wafflesnatcha committed May 3, 2012
Showing with 12 additions and 12 deletions.
  1. +1 −1 style.css
  2. +11 −11 style.scss
View
@@ -1 +1 @@
-body.scott{background:#fff;color:#000;font-family:"Lucida Grande","Lucida Sans",Helvetica,sans-serif;font-size:12px;height:100%;margin:0;overflow:hidden;padding:0}.scott h1,.scott h2,.scott h3,.scott h4,.scott h5,.scott h6{color:#000;font-style:normal;font-weight:500}.scott h1{font-size:2em}.scott h2{font-size:1.5em}.scott h3{font-size:1.17em}.scott h4{font-size:1em}.scott h5{font-size:0.83em}.scott h6{font-size:0.67em}.scott a{color:#1525ab;text-decoration:none}.scott a:visited{color:#680094}.scott a:hover,.scott a:active,.scott a:focus{text-decoration:underline}.scott blockquote{color:#444;font-style:italic;margin-left:40px;margin-right:0}.scott h1,.scott h2,.scott h3,.scott h4,.scott h5,.scott h6,.scott p,.scott pre,.scott blockquote{-webkit-margin-after:15px;-webkit-margin-before:15px;-webkit-margin-collapse:collapse}.scott h1:first-of-type,.scott h2:first-of-type,.scott h3:first-of-type,.scott h4:first-of-type,.scott h5:first-of-type,.scott h6:first-of-type,.scott p:first-of-type,.scott pre:first-of-type,.scott blockquote:first-of-type{margin-top:0}.scott dl,.scott dt,.scott dd{margin-left:0;margin-right:0}.scott code,.scott pre,.scott tt,.scott textarea{font-family:Menlo,Monaco,"Courier New",monospace;font-size:inherit}.scott pre{-webkit-border-radius:3px;border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#eee;margin:1em 0;overflow:auto;padding:.6em .8em;position:relative;white-space:pre;word-wrap:normal}.scott pre code{white-space:pre;word-wrap:normal}.scott hr{background-color:#e0e0e0;border:none;height:1px;margin:1em 0;padding:0}.scott li>p{margin:0}.scott #tm_webpreview_header{background:none;border:none;color:#000;display:block;font-size:inherit;height:28px;left:-2px;overflow:visible;padding:0;position:fixed;right:-2px;text-shadow:0 1px 0 rgba(255,255,255,0.4);top:0;width:auto;z-index:10000}.scott #tm_webpreview_header #gradient,.scott #tm_webpreview_header #teaser{display:none}.scott #tm_webpreview_header .headline{-webkit-background-origin:border;background-origin:border-box;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(215,215,215,0.88)), color-stop(100%, rgba(180,180,180,0.75))),url("images/noise.png");background-image:-webkit-linear-gradient(top, rgba(215,215,215,0.88),rgba(180,180,180,0.75)),url("images/noise.png");background-image:linear-gradient(top, rgba(215,215,215,0.88),rgba(180,180,180,0.75)),url("images/noise.png");background-color:transparent;border:none;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.15) inset;box-shadow:0 1px 0 rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.15) inset;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:18px;font-weight:bold;margin:0;height:28px;line-height:28px;overflow-x:hidden;padding:0 200px 0 12px;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:10}.scott #tm_webpreview_header .type{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(89,9,89,0.9)), color-stop(100%, rgba(153,15,135,0.9)));background-image:-webkit-linear-gradient(top, rgba(89,9,89,0.9),rgba(153,15,135,0.9));background-image:linear-gradient(top, rgba(89,9,89,0.9),rgba(153,15,135,0.9));-webkit-background-origin:border;background-origin:border-box;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,0.3);box-shadow:0 0 1px 0 rgba(0,0,0,0.3);text-shadow:0 1px 0 #000;border-bottom:1px solid rgba(0,0,0,0.4);border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1);border-top:none;color:#fff;float:left;font-size:11px;font-weight:bold;margin:0 7px;max-width:92%;min-height:1px;overflow:hidden;padding:2px 10px;position:static;text-overflow:ellipsis;white-space:nowrap;width:auto}.scott #tm_webpreview_header .type:empty{display:none}.scott #theme_switcher{-webkit-box-sizing:border-box;box-sizing:border-box;color:#4a4a4a;font-size:10px;font-weight:bold;margin:0;opacity:1;height:28px;max-width:200px;padding:2px 10px;position:absolute;right:0;text-align:right;top:0;z-index:100}.scott #theme_switcher form{padding:0}.scott #theme_switcher #theme_selector{-webkit-appearance:none;appearance:none;background-image:url("images/arrow_down.png"),-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.7)), color-stop(100%, rgba(201,201,201,0.7)));background-image:url("images/arrow_down.png"),-webkit-linear-gradient(top, rgba(255,255,255,0.7),rgba(201,201,201,0.7));background-image:url("images/arrow_down.png"),linear-gradient(top, rgba(255,255,255,0.7),rgba(201,201,201,0.7));-webkit-background-origin:border;background-origin:border-box;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2);box-shadow:1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#ddd;background-position:right center;background-repeat:no-repeat, repeat-x;border:1px solid rgba(100,100,100,0.5);color:#444;font-weight:bold;max-width:130px;outline:none;padding:2px 5px 3px}.scott #theme_switcher #theme_selector:hover{background-color:#fff}.scott #tm_webpreview_footer{text-shadow:none;-webkit-background-origin:border;background-origin:border-box;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(242,242,242,0.95)), color-stop(100%, rgba(242,242,242,0.95)));background-image:-webkit-linear-gradient(top, rgba(242,242,242,0.95),rgba(242,242,242,0.95));background-image:linear-gradient(top, rgba(242,242,242,0.95),rgba(242,242,242,0.95));-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 0 2px 0 rgba(0,0,0,0.4);box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 0 2px 0 rgba(0,0,0,0.4);background-color:transparent;border:0;bottom:0;font-size:11px;font-weight:500;color:#222;display:block;height:auto;left:0;margin:0 auto;max-height:30px;overflow:hidden;padding:3px 6px 4px;position:fixed;right:0;text-overflow:ellipsis;top:auto;white-space:nowrap;width:auto;z-index:10000}.scott #tm_webpreview_footer p{margin:0;padding:0}.scott #tm_webpreview_content{-webkit-box-sizing:border-box;box-sizing:border-box;background:none;bottom:0;height:auto;left:0;margin:0;overflow:auto;padding:25px 15px 15px;position:absolute;right:0;top:28px;width:auto}.scott #tm_webpreview_content :first-child{margin-top:auto}.scott .pro_table{border-bottom:2px solid #eaeaea;border-collapse:inherit;border-spacing:0;font-size:inherit;margin:0;padding:0}.scott .pro_table th,.scott .pro_table td{background-color:#fff;padding:4px 8px}.scott .pro_table th{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(150,150,150,0.15)));background-image:-webkit-linear-gradient(top, rgba(255,255,255,0),rgba(150,150,150,0.15));background-image:linear-gradient(top, rgba(255,255,255,0),rgba(150,150,150,0.15));-webkit-background-origin:border;background-origin:border-box;-webkit-box-shadow:0 -3px 4px -3px rgba(0,0,0,0.2) inset;box-shadow:0 -3px 4px -3px rgba(0,0,0,0.2) inset;border-bottom:1px solid #bbb;font-weight:bold;text-align:left}.scott .pro_table td{vertical-align:top}.scott .pro_table>tbody>tr:nth-child(even)>td{background-color:#f3f6fa}.scott .pro_table p{margin:0}.scott .pro_table p+p{margin-top:1em}.scott div.footnotes{padding:1em;font-size:90%}.scott .alternate{background-color:#f0f0f0}
+body.scott{background:#fff;color:#000;font-family:"Lucida Grande","Lucida Sans",Helvetica,sans-serif;font-size:12px;height:100%;margin:0;overflow:hidden;padding:0}.scott h1,.scott h2,.scott h3,.scott h4,.scott h5,.scott h6{color:#000;font-style:normal;font-weight:500}.scott h1{font-size:2em}.scott h2{font-size:1.5em}.scott h3{font-size:1.17em}.scott h4{font-size:1em}.scott h5{font-size:0.83em}.scott h6{font-size:0.67em}.scott a{color:#1525ab;text-decoration:none}.scott a:visited{color:#680094}.scott a:hover,.scott a:active,.scott a:focus{text-decoration:underline}.scott blockquote{color:#444;font-style:italic;margin-left:40px;margin-right:0}.scott h1,.scott h2,.scott h3,.scott h4,.scott h5,.scott h6,.scott p,.scott pre,.scott blockquote{-webkit-margin-after:15px;-webkit-margin-before:15px;-webkit-margin-collapse:collapse}.scott h1:first-of-type,.scott h2:first-of-type,.scott h3:first-of-type,.scott h4:first-of-type,.scott h5:first-of-type,.scott h6:first-of-type,.scott p:first-of-type,.scott pre:first-of-type,.scott blockquote:first-of-type{margin-top:auto}.scott dl,.scott dt,.scott dd{margin-left:0;margin-right:0}.scott code,.scott pre,.scott tt,.scott textarea{font-family:Menlo,Monaco,"Courier New",monospace;font-size:inherit}.scott pre{-webkit-border-radius:3px;border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#eee;margin:1em 0;overflow:auto;padding:.6em .8em;position:relative;white-space:pre;word-wrap:normal}.scott pre code{white-space:pre;word-wrap:normal}.scott hr{background-color:#e0e0e0;border:none;height:1px;margin:1em 0;padding:0}.scott li>p{margin:0}.scott #tm_webpreview_header{background:none;border:none;color:#000;display:block;font-size:18px;height:1.6em;left:-2px;overflow:visible;padding:0;position:fixed;right:-2px;text-shadow:0 1px 0 rgba(255,255,255,0.4);top:0;width:auto;z-index:10000}.scott #tm_webpreview_header #gradient,.scott #tm_webpreview_header #teaser{display:none}.scott #tm_webpreview_header .headline{-webkit-background-origin:border;background-origin:border-box;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(215,215,215,0.88)), color-stop(100%, rgba(180,180,180,0.75))),url("images/noise.png");background-image:-webkit-linear-gradient(top, rgba(215,215,215,0.88),rgba(180,180,180,0.75)),url("images/noise.png");background-image:linear-gradient(top, rgba(215,215,215,0.88),rgba(180,180,180,0.75)),url("images/noise.png");background-color:transparent;border:none;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.15) inset;box-shadow:0 1px 0 rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.15) inset;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,sans-serif;font-weight:bold;margin:0;height:1.6em;line-height:1.6em;overflow-x:hidden;padding:0 200px 0 12px;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:10}.scott #tm_webpreview_header .type{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(89,9,89,0.9)), color-stop(100%, rgba(153,15,135,0.9)));background-image:-webkit-linear-gradient(top, rgba(89,9,89,0.9),rgba(153,15,135,0.9));background-image:linear-gradient(top, rgba(89,9,89,0.9),rgba(153,15,135,0.9));-webkit-background-origin:border;background-origin:border-box;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,0.3);box-shadow:0 0 1px 0 rgba(0,0,0,0.3);text-shadow:0 1px 0 #000;border-bottom:1px solid rgba(0,0,0,0.4);border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1);border-top:none;color:#fff;float:left;font-size:11px;font-weight:bold;margin:0 7px;max-width:92%;min-height:1px;overflow:hidden;padding:2px 10px;position:static;text-overflow:ellipsis;white-space:nowrap;width:auto}.scott #tm_webpreview_header .type:empty{display:none}.scott #theme_switcher{-webkit-box-sizing:border-box;box-sizing:border-box;color:#4a4a4a;font-size:10px;font-weight:bold;margin:0;opacity:1;height:1.6em;line-height:1.6em;max-width:20em;padding:.2em 1em;position:absolute;right:0;text-align:right;top:0;z-index:100}.scott #theme_switcher form{padding:0}.scott #theme_switcher #theme_selector{-webkit-appearance:none;appearance:none;background-image:url("images/arrow_down.png"),-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.7)), color-stop(100%, rgba(201,201,201,0.7)));background-image:url("images/arrow_down.png"),-webkit-linear-gradient(top, rgba(255,255,255,0.7),rgba(201,201,201,0.7));background-image:url("images/arrow_down.png"),linear-gradient(top, rgba(255,255,255,0.7),rgba(201,201,201,0.7));-webkit-background-origin:border;background-origin:border-box;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2);box-shadow:1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#ddd;background-position:right center;background-repeat:no-repeat, repeat-x;border:1px solid rgba(100,100,100,0.5);color:#444;font-weight:bold;max-width:13em;outline:none;padding:.2em .5em .3em}.scott #theme_switcher #theme_selector:hover{background-color:#fff}.scott #tm_webpreview_footer{text-shadow:none;-webkit-background-origin:border;background-origin:border-box;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(242,242,242,0.95)), color-stop(100%, rgba(242,242,242,0.95)));background-image:-webkit-linear-gradient(top, rgba(242,242,242,0.95),rgba(242,242,242,0.95));background-image:linear-gradient(top, rgba(242,242,242,0.95),rgba(242,242,242,0.95));-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 0 2px 0 rgba(0,0,0,0.4);box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 0 2px 0 rgba(0,0,0,0.4);background-color:transparent;border:0;bottom:0;font-size:11px;font-weight:500;color:#222;display:block;height:auto;left:0;margin:0 auto;max-height:3em;overflow:hidden;padding:.3em .6em .4em;position:fixed;right:0;text-overflow:ellipsis;top:auto;white-space:nowrap;width:auto;z-index:10000}.scott #tm_webpreview_footer p{margin:0;padding:0}.scott #tm_webpreview_content{-webkit-box-sizing:border-box;box-sizing:border-box;background:none;bottom:0;height:auto;left:0;margin:0;overflow:auto;padding:2.6em 1.5em 1.5em;position:absolute;right:0;top:1.6em;width:auto}.scott #tm_webpreview_content :first-child{margin-top:auto}.scott .pro_table{border-bottom:2px solid #eaeaea;border-collapse:inherit;border-spacing:0;font-size:inherit;margin:0;padding:0}.scott .pro_table th,.scott .pro_table td{background-color:#fff;padding:4px 8px}.scott .pro_table th{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(150,150,150,0.15)));background-image:-webkit-linear-gradient(top, rgba(255,255,255,0),rgba(150,150,150,0.15));background-image:linear-gradient(top, rgba(255,255,255,0),rgba(150,150,150,0.15));-webkit-background-origin:border;background-origin:border-box;-webkit-box-shadow:0 -3px 4px -3px rgba(0,0,0,0.2) inset;box-shadow:0 -3px 4px -3px rgba(0,0,0,0.2) inset;border-bottom:1px solid #bbb;font-weight:bold;text-align:left}.scott .pro_table td{vertical-align:top}.scott .pro_table>tbody>tr:nth-child(even)>td{background-color:#f3f6fa}.scott .pro_table p{margin:0}.scott .pro_table p+p{margin-top:1em}.scott div.footnotes{padding:1em;font-size:90%}.scott .alternate{background-color:#f0f0f0}
View
@@ -15,7 +15,7 @@ $font_size: 12px;
$default: #000;
$default_bg: #fff;
-$header_height: 28px;
+$header_height: 1.6em;
body.scott {
background: $default_bg;
@@ -74,7 +74,7 @@ body.scott {
-webkit-margin-collapse: collapse;
&:first-of-type {
- margin-top: 0;
+ margin-top: auto;
}
}
@@ -126,7 +126,7 @@ body.scott {
border: none;
color: $default;
display: block;
- font-size: inherit;
+ font-size: 18px;
height: $header_height;
left: -2px;
overflow: visible;
@@ -154,7 +154,6 @@ body.scott {
@include box-sizing(border-box);
font: {
family: $font_heading;
- size: 18px;
weight: bold;
}
margin: 0;
@@ -210,8 +209,9 @@ body.scott {
margin: 0;
opacity: 1;
height: $header_height;
- max-width: 200px;
- padding: 2px 10px;
+ line-height: $header_height;
+ max-width: 20em;
+ padding: .2em 1em;
position: absolute;
right: 0;
text-align: right;
@@ -237,9 +237,9 @@ body.scott {
border: 1px solid rgba(100,100,100,.5);
color: #444;
font-weight: bold;
- max-width: 130px;
+ max-width: 13em;
outline: none;
- padding: 2px 5px 3px;
+ padding: .2em .5em .3em;
&:hover {
background-color: #fff;
@@ -267,9 +267,9 @@ body.scott {
height: auto;
left: 0;
margin: 0 auto;
- max-height: 30px;
+ max-height: 3em;
overflow: hidden;
- padding: 3px 6px 4px;
+ padding: .3em .6em .4em;
position: fixed;
right: 0;
text-overflow: ellipsis;
@@ -292,7 +292,7 @@ body.scott {
left: 0;
margin: 0;
overflow: auto;
- padding: 25px 15px 15px;
+ padding: $header_height + 1 1.5em 1.5em;
position: absolute;
right: 0;
top: $header_height;

0 comments on commit ff1180a

Please sign in to comment.