Reorganise styles to have handheld and desktop versions.

benschwarz · Feb 19, 2011 · 6dbc543 · 6dbc543
1 parent 0e78e2d
commit 6dbc543
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 117 deletions.
diff --git a/html/head.html b/html/head.html
@@ -3,4 +3,6 @@
 <meta name="viewport" content="width=device-width; initial-scale=1.0;">
 <link rel="apple-touch-icon" href="/images/ios.png">
 <link href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold" rel="stylesheet">
-
+<link href="/css/all.css" rel="stylesheet">
+<link href="/css/desktop.css" rel="stylesheet" media="screen and (min-width: 960px)">
+<link href="/css/handheld.css" rel="stylesheet" media="screen and (max-width: 959px)">
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
@@ -0,0 +1,13 @@
+/* Button */
+@mixin button {
+	@include border-radius(10px);
+	@include box-shadow(0px, -1px, 0px, #fff);
+	@include gradient(#fefefe, #eeeeee);
+
+ 	font-family: "Droid Serif"; font-style: italic; text-align: center; margin: 0.5em auto; font-size: 0.9em; padding: 0.3em 1.8em 0.3em 0.8em; color: #666; cursor: pointer; text-shadow: 0em 0.1em 0em #fff; border: 0.1em outset buttonface;
+
+	&:active {
+	  text-shadow: 0em -0.1em 0em #fff;
+	  border: 0.1em inset buttonface;
+	}
+}
diff --git a/sass/_columns.scss b/sass/_columns.scss
@@ -5,6 +5,10 @@ $column_gutter: 20px;
 	width: ($column_width * $count) + ($column_gutter * $count) - $column_gutter;
 }
 
+@mixin column-max-width($count: 1) {
+	max-width: ($column_width * $count) + ($column_gutter * $count) - $column_gutter;
+}
+
 @mixin column($count: 1) {
 	@include column-width($count);
   margin-right: $column_gutter;

diff --git a/sass/_css3.scss b/sass/_css3.scss
@@ -1,19 +1,40 @@
-@mixin border-radius($radius: 0px) { 
-	-webkit-border-radius: $radius;
-	-moz-border-radius: $radius;
-	-ms-border-radius: $radius;
-	-o-border-radius: $radius;
-	border-radius: $radius;
+@mixin border-radius($radius: 5px) {
+  border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -o-border-radius: $radius;
+  -m-border-radius: $radius;
 }
-
-@mixin box-shadow($x, $y, $blur, $colour) {
-	-webkit-box-shadow: $x, $y, $blur, $colour;
-	-moz-box-shadow: $x, $y, $blur, $colour;
-	-ms-box-shadow: $x, $y, $blur, $colour;
-	-o-box-shadow: $x, $y, $blur, $colour;
-	box-shadow: $x, $y, $blur, $colour;
+@mixin inset-box-shadow($x, $y, $blur, $color) {
+  box-shadow: inset $x $y $blur $color;
+  -webkit-box-shadow: inset $x $y $blur $color;
+  -moz-box-shadow: inset $x $y $blur $color;
+  -o-box-shadow: inset $x $y $blur $color;
+  -ms-box-shadow: inset $x $y $blur $color;
+}
+@mixin box-shadow($x, $y, $blur, $color) {
+  box-shadow: $x $y $blur $color;
+  -webkit-box-shadow: $x $y $blur $color;
+  -moz-box-shadow: $x $y $blur $color;
+  -o-box-shadow: $x $y $blur $color;
+  -ms-box-shadow: $x $y $blur $color;
+}
+@mixin gradient($start, $end) {
+  background: $end;
+  background-image: -moz-linear-gradient(270deg, $start, $end);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($start), to($end));
+}
+@mixin opacity($float) {
+  opacity: $float; filter: alpha(opacity=($float * 100));
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$float*100)";
+}
+@mixin user-select {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
-
 @mixin column-count($count) { 
 	-webkit-column-count: $count;
 	-moz-column-count: $count;

diff --git a/sass/_handheld.scss b/sass/_handheld.scss
diff --git a/sass/_header.scss b/sass/_header.scss
diff --git a/sass/_reset.scss b/sass/_reset.scss
@@ -2,7 +2,7 @@
 header, footer, article, section, aside, nav, menu, figure { display: block; }
 
 /* Resets */
-body, h1, h2, h3, h4, h5, h6, p, a, ul, ol, dl, dt, dd, table, caption, th, td, fieldset, legend, blockquote { font-weight: normal; margin: 0; padding: 0; color: inherit; list-style-type: none; }
+body, h1, h2, h3, h4, h5, h6, p, a, ul, ol, dl, dt, dd, table, caption, th, td, fieldset, legend, blockquote { font-weight: normal; margin: 0; padding: 0; color: inherit; }
 a img, form, legend { border: 0; }
 
 fieldset, abbr { border: none; }
diff --git a/sass/master.scss → sass/all.scss b/sass/master.scss → sass/all.scss
@@ -1,5 +1,3 @@
-@charset "utf-8";
-
 /* Utilities, mixins, global */
 @import "reset";
 @import "prettify-js";
@@ -8,28 +6,49 @@
 @import "css3";
 @import "typography";
 @import "columns";
-
-/* Modular */
-@import "handheld";
+@import "buttons";
 
 $color_base: #CC211B;
 
 a:link, a:visited { color: lighten($color_base, 10%); text-decoration: none; }
 a:hover { color: darken($color_base, 20%); }
 
-body .wrapper { @include column-width(14); margin: 4em auto; padding: 0 1em; }
-
-@import "header";
-
 p.pubdate { display: none; }
 
+header.head {
+	div.logo {
+		@include column-width(2);
+		@include border-radius(0.3em);
+		font-size: 10px; background-color: $color_base; color: #fff; padding: 2.5em 0.7em 0.25em; font-family: Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0.1em;
+	}
+
+	h1 { line-height: 1em; font-family: "M+2pheavy"; font-weight: bold; color: black; }
+  h1 a { color: black; }
+	h2 { font-size: 12px; margin-bottom: 0.5em; font-family: "Droid Serif"; font-style: italic; font-weight: normal; color: #666; }
+
+	div#search {
+		ol:empty { border: 0; }
+	  ol { 
+	    position: absolute; right: 0; width: 25em; background-color: #eeeeee; z-index: 1; @include border-radius(0.2em); @include box-shadow(0, 0, 1em, rgba(0, 0, 0, 0.75));
+	    li { text-align: left; list-style: none; } 
+	    li a { display: block; color: #666; padding: 0.2em 0.4em; }
+	    li a span { color: lighten(#666, 20%); display: block; font-style: italic; font-size: 0.7em; }
+	    li a:focus, li a.selected { 
+	      color: white; background-color: $color_base;
+	      span { color: rgba(255, 255, 255, 0.6); }
+	    }
+	    li:first-child a.selected { @include border-radius(0.2em 0.2em 0 0); }
+	    li:last-of-type a.selected { @include border-radius(0 0 0.2em 0.2em); }
+	  }
+	}
+}
+
 section[role="main"] {
-	@include skip-column(2);
-	clear: left;
+	clear: both;
 }
 
 section[role="main"] > h2 {
-	position: relative; text-transform: uppercase; letter-spacing: 0.2em; font-family: "M+2pheavy"; margin: 2em 0;
+	position: relative; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.5em; font-family: "M+2pheavy"; margin: 2em 0;
 	.secno { position: absolute; display: block; left: -1.5em; color: #999; text-align: right;  }	
 }
 
@@ -38,44 +57,29 @@ a.secno, h3 .secno, h4 .secno, h5 .secno, h6 .secno { display: none; } /* Only t
 h3, h4, h5, h6 { margin: 3em 0 1em 0; }
 h4, h5, h6 { color: $color_base; }
 
-section#credits { 
-	@include skip-column(2);
-
+section#credits {
+	margin-top: 3em;
 	h1 { margin-bottom: 1em; font-size: 34px; }
 }
 
-p { @include column-width(9); margin-bottom: 1em; }
-
-/* Handle references inline */
-div.reference-wrapper {
-  @include clearfix;
-
-  p { @include column(9); }
-  aside.reference { @include column(3); font-size: 11px; color: #777; font-style: italic; margin: 0 0 1em 0; }
-  a[href*="#refs"] { display: none; } /* Hide reference style links */
-}
+p { margin-bottom: 1em; }
 
-ul, ol { 
-	@include column-width(10);
-	margin-bottom: 1em;
-}
-ul li { list-style: none; position: relative; margin-bottom: 0.25em; }
+ul, ol, dl { margin-bottom: 1em; }
+ul li { list-style: none; /*margin-bottom: 0.25em;*/ }
 
-ul li:before { content: '\22c5'; font-size: 2em; color: #CCC; position: absolute; top: -0.35em; left: -0.65em; font-family: Arial; font-weight: bold; }
+ul li:before { content: '\22c5'; font-size: 2em; color: #CCC; margin-left: -0.65em; font-family: Arial; font-weight: bold; }
 
 ul li ul { margin: 0em; }
 li li { margin-left: 1.2em; }
 
 /* DOM Tree */
-ul.domTree {
-	li { margin: 0; }
-}
+ul.domTree li { margin-bottom: 0; }
+ul.domTree li:before { display: none; }
 
 code, pre { font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", "Andale Mono", Inconsolata, "Lucida Console", Consolas, Monaco, "courier new", courier; display: inline-block; font-style: normal; }
 
 pre { 
-	@include column-width(13); position: relative;
-  margin: 1em 0em 1em -2.6em; display: block; padding: 0.25em 0.3em; border: 1px solid #eee;
+	display: block; padding: 0.25em 0.3em; border: 1px solid #eee;
 
 	/* Pinched from boilerplate */
 	/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
@@ -105,7 +109,11 @@ table tr, table tbody { border: 0px; }
 hr { display: none; }
 
 /* The TOC is only shown on the index page (Temp) */
-section[role="main"] > nav { display: none;	}
+/*section[role="main"] > nav { display: none;	}*/
+nav button { @include button; }
+nav button + ol { display: none; }
+nav button.active + ol { display: block; }
+nav ol li { list-style: none; }
 
 /* Only found on the index page */
 section[role="main"] > ol.toc {
@@ -124,7 +132,7 @@ strong.rfc2119 { font-size: 0.8em; letter-spacing: 0.1; text-transform: uppercas
 	Typographic conventions
 	(http://developers.whatwg.org/introduction.html#typographic-conventions)
 */
-.note { @include column-width(10); position: relative; margin-left: -2em; padding: 0.5em; background-color: #eee; }
+.note { padding: 10px; background-color: #eee; }
 .example { color: #666; font-style: italic; }
 .XXX {} /* An open issue */
 .warning { background-color: lighten($color_base, 50%); padding: 0.5em; }
@@ -134,8 +142,6 @@ strong.rfc2119 { font-size: 0.8em; letter-spacing: 0.1; text-transform: uppercas
 
 /* Up next */
 div#up-next {
-	@include skip-column(2);
-	@include column-width(9);
   @include box-shadow(2px, 2px, 3px, rgba(0, 0, 0, 0.4)); 
 
 	margin-top: 3em; padding: 0.7em 1em; background-color: #eee;
@@ -152,11 +158,7 @@ div#up-next {
 
 /* Footer (all pages) */
 body .wrapper > footer {
-	@include skip-column(2);
-	@include column-width(10);
-
 	margin-top: 3em; border-top: 1px solid #ccc; padding: 1em 0 0 0;  clear: right; 
-
 	p { color: #666; font-size: 1em; margin: 0; }
 }
 

diff --git a/sass/desktop.scss b/sass/desktop.scss
@@ -0,0 +1,60 @@
+@charset "utf-8";
+
+@import "all";
+
+body .wrapper { @include column-width(14); margin: 4em auto; padding: 0 1em; }
+header.head div.logo { @include column(2); width: 6em; }
+
+header.head {
+  @include column-width(13);
+	@include clearfix; 
+
+  position: relative;
+
+	hgroup { @include column(10); }
+
+	div#search {
+	  @include column-width(3);
+	  position: absolute; top: 0; right: 0;
+	}
+}
+
+
+section[role="main"] { 
+	@include skip-column(2);
+
+	p { @include column-width(9); }
+}
+
+/* Handle references inline */
+div.reference-wrapper {
+  @include clearfix;
+
+ 	p, dt { @include column(9); }
+  aside.reference { @include column(3); word-wrap: break-word; font-size: 11px; color: #777; font-style: italic; margin: 0 0 1em 0; }
+  a[href*="#refs"] { display: none; } /* Hide reference style links */
+}
+
+/* Code blocks */
+pre {
+	@include column-width(13); 
+	position: relative; margin: 1em 0em 1em -2.6em;
+}
+
+/* Up next */
+div#up-next {
+	@include skip-column(2);
+	@include column-width(9);
+}
+
+/* Footer */
+body .wrapper > footer {
+	@include skip-column(2);
+	@include column-width(10);
+}
+
+/* Global elements */
+ul, ol, dl { margin-bottom: 1em; }
+
+/* Global typographic regions */
+.note { @include column-width(10); }