Permalink
Browse files

mobile stylesheet

  • Loading branch information...
1 parent 765c3ba commit 0046745c7bb448ed93ddfad404176c2790530e15 Mark Pilgrim committed Jan 5, 2010
Showing with 171 additions and 13 deletions.
  1. +2 −1 about.html
  2. +2 −1 canvas.html
  3. +2 −1 detect.html
  4. +2 −1 forms.html
  5. +2 −1 geolocation.html
  6. +2 −1 index.html
  7. +2 −1 legal.html
  8. +142 −0 mobile.css
  9. +6 −2 publish
  10. +2 −1 semantics.html
  11. +3 −2 table-of-contents.html
  12. +2 −0 util/lesscss.py
  13. +2 −1 video.html
View
@@ -12,6 +12,7 @@
abbr{font-variant:none;text-transform:none;letter-spacing:0}
#belong p{font-size:medium}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html>Dive Into HTML5</a> <span class=u>&#8227;</span>
@@ -31,7 +32,7 @@
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <!--<a href=colophon.html>-->Mark Pilgrim<!--</a>-->
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <!--<a href=colophon.html>-->Mark Pilgrim<!--</a>-->
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -8,6 +8,7 @@
<style>
body{counter-reset:h1 4}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#canvas>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>Let&#8217;s Call It A Draw(ing Surface)</h1>
@@ -641,7 +642,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
View
@@ -8,6 +8,7 @@
<style>
body{counter-reset:h1 2}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#detect>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>Detecting <abbr>HTML5</abbr> Features</h1>
@@ -569,7 +570,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -8,6 +8,7 @@
<style>
body{counter-reset:h1 10}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#forms>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>A Form of Madness</h1>
@@ -415,7 +416,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -8,6 +8,7 @@
<style>
body{counter-reset:h1 6}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#geolocation>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>You Are Here (And So Is Everybody Else)</h1>
@@ -163,7 +164,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -16,6 +16,7 @@
.number{margin:0;float:right;padding-left:3px}
.f{margin-top:6.224em}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<hgroup>
<h1>Dive Into HTML5</h1>
@@ -49,7 +50,7 @@
<p class=c>&#8220;If you&#8217;re good at something, never do it for free.&#8221; <span class=u>&mdash;</span><cite>The Joker</cite><br>(but that doesn&#8217;t mean you should keep it to yourself)
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -7,6 +7,7 @@
<style>
h1:before{content:""}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html>Dive Into HTML5</a> <span class=u>&#8227;</span>
@@ -303,7 +304,7 @@ <h2 id=essays>Essays 1743</h2>
<p class=a>&#x2042;
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -0,0 +1,142 @@
+/*
+
+"Dive Into HTML5" mobile stylesheet for iPhone, Android,
+and other small-screen devices
+
+Copyright (c) 2009, Mark Pilgrim, All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS'
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+
+Acknowledgements & Inspirations
+
+"Return of the Mobile Style Sheet" ....................... http://www.alistapart.com/articles/returnofthemobilestylesheet
+"Optimizing Web Content Using Conditional CSS" ........... http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/chapter_3_section_2.html
+*/
+
+/* basics */
+
+html {
+ color:#000;
+}
+body {
+ margin:4px 2px 0 2px;
+}
+
+/* typography */
+
+body, .c, span, pre span, .c, .note, p, ul, ol {
+ font:normal 12px/18px sans-serif;
+}
+pre, kbd, samp, code, var {
+ font:normal 12px/18px monospace;
+}
+.baa {
+ font:normal 14px/18px serif;
+}
+.c, .note, p, ul, ol, h2, h3 {
+ margin:1.75em 0;
+}
+
+/* links */
+
+a:link, a:visited {
+ text-decoration: underline;
+ border: 0;
+}
+a:link:hover, a:visited:hover {
+ border: 0;
+}
+pre a {
+ text-decoration:none;
+}
+
+/* headers and pullquotes */
+
+h1, h2, h3, h4, pre, caption, .legend, thead th {
+ padding:0;
+ border:0;
+ letter-spacing:0;
+ text-shadow:0 0 0;
+}
+h1 {
+ margin:0;
+}
+h1, h1 code {
+ font:normal 18px/18px serif;
+}
+h2, h2 code {
+ font:normal 16px/18px serif;
+}
+h3, h3 code, .legend, caption, thead th {
+ font:normal 14px/18px serif;
+}
+h4, h4 code {
+ font:normal 12px/18px serif;
+}
+h1:before {
+ content:"";
+}
+
+/* overrides */
+
+.nm, .w, aside, form, form+p, .note span, .q span, .a, .ss img, .arrow {
+ display:none;
+}
+dd {
+ margin:0 0 0 1.75em;
+}
+.f img {
+ width: 4em;
+ height: 4em;
+}
+.pf .inner {
+ background: white;
+ min-height: inherit;
+ margin: 0;
+ padding: .25em;
+}
+.pf .moneybags {
+ background: white;
+ min-height: inherit;
+ margin: 0;
+ padding: 0;
+}
+pre {
+ white-space: pre-wrap;
+ float: none !important;
+}
+.legend {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100%;
+ font-weight: bold;
+}
+strong, b, em, i {
+ text-transform: inherit;
+}
+strong, b {
+ font-weight: bold;
+}
+em, i {
+ font-style: oblique;
+}
View
@@ -50,7 +50,9 @@ java -jar util/compiler.jar -js build/j/html5-video.js > build/j/html5-video.min
echo "minimizing CSS"
sed -i -e "s|url(i/|url(//d.wearehugh.com/dih5/|g" build/screen.css || die "Failed to inline CSS"
java -jar util/yuicompressor-2.4.2.jar build/screen.css > build/$revision.css && \
- sed -i -e "s|;}|}|g" build/$revision.css || die "Failed to minimize CSS"
+ java -jar util/yuicompressor-2.4.2.jar build/mobile.css > build/m-$revision.css && \
+ sed -i -e "s|;}|}|g" build/$revision.css && \
+ sed -i -e "s|;}|}|g" build/m-$revision.css || die "Failed to minimize CSS"
# combine jQuery, Modernizr, other 3rd party scripts, and our own scripts
echo "combining JS"
@@ -61,6 +63,7 @@ cat build/j/legal.js build/j/flowplayer-3.1.4.min.js build/j/html5-video.min.js
# consolidate JS links, inline CSS, minimize URLs, add Google Analytics script
echo "inlining CSS, minimizing URLs, adding new-and-improved evil tracking code"
css=`cat build/$revision.css`
+mobilecss=`cat build/m-$revision.css`
ga=`cat j/ga.js`
sed -i -e "s|<script src=j/jquery.js></script>||g" \
-e "s|<script src=j/modernizr.js></script>||g" \
@@ -71,6 +74,7 @@ sed -i -e "s|<script src=j/jquery.js></script>||g" \
-e "s|<script src=j/html5-video.js>|<script src=j/${revision}-video.js>|g" \
-e "s|<script src=j/dih5.js>|<script src=j/${revision}.js>|g" \
-e "s|<link rel=stylesheet href=screen.css>|<style>${css}</style>|g" \
+ -e "s|<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>|<style>@media screen and (max-device-width:480px){${mobilecss}}</style>|g" \
-e "s|</style><style>||g" \
-e "s|</style>|</style>${ga}|g" \
-e "s|=http:|=|g" \
@@ -87,7 +91,7 @@ done
chmod 755 build/examples build/j build/i build/f build/fonts-original && \
chmod 644 build/*.html build/*.txt build/*.ico build/examples/* build/examples/.htaccess build/j/* build/j/.htaccess build/i/* build/i/.htaccess build/f/* build/f/.htaccess build/.htaccess build/fonts-original/*.tar.gz || die "Failed to reset file permissions"
-#die "Intentionally aborting without publishing"
+die "Intentionally aborting without publishing"
# ship it!
echo -n "publishing"
rsync -essh -a --exclude="*.mp4" --exclude="*.ogv" build/i/* build/i/.htaccess diveintomark.org:~/web/wearehugh.com/dih5/ && \
View
@@ -11,6 +11,7 @@
dl.col dd{margin-left:7em}
dl.col dt,dl.col dd{padding-bottom:1.75em}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#semantics>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>What Does It All Mean?</h1>
@@ -831,7 +832,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -13,6 +13,7 @@
ol{margin:0;padding:0;list-style:none}
li ol{width:95%;padding-left:5%}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> Dive Into <abbr>HTML5</abbr> <span class=u>&#8227;</span>
<h1>Table of Contents</h1>
@@ -109,15 +110,15 @@
<li><dl><dt><a href=forms.html#stuff-that-doesnt-work-yet>More stuff that doesn&#8217;t work</a><dd>xii</dl>
<li><dl><dt><a href=forms.html#further-reading>Further Reading</a><dd>xiii</dl>
</ol>
-<li>&#8220;Distributed Extensibility&#8221; And Other Fancy Words
+<li>&#8220;Distributed,&#8221; &#8220;Extensibility,&#8221; And Other Fancy Words
</ol>
<!-- /toc -->
<p class=a>&#x2042;
<p class=c>&#8220;If you&#8217;re good at something, never do it for free.&#8221; <span class=u>&mdash;</span><cite>The Joker</cite><br>(but that doesn&#8217;t mean you should keep it to yourself)
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>
View
@@ -24,6 +24,8 @@ def keep(s):
original_css = raw_data.split('<style>', 1)[1].split('</style>', 1)[0]
new_css = ''
for rule in original_css.split('}')[:-1]:
+ rule = rule.strip()
+ if not rule: continue
selectors, properties = rule.split('{', 1)
if selectors.count('@') == 0:
selectors = ','.join([s for s in selectors.split(',') if keep(s) or pqd(s.split(':', 1)[0])])
View
@@ -8,6 +8,7 @@
<style>
body{counter-reset:h1 5}
</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<div id=zz>
<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#video>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
<h1>Video on the Web</h1>
@@ -598,7 +599,7 @@ <h2 id=further-reading>Further Reading</h2>
</div>
</div>
-<p class=c>Copyright MMIX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
</div>

0 comments on commit 0046745

Please sign in to comment.