Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Use more HTML5 elements.

  • Loading branch information...
commit 09adbbe44c1898d248119a958ad33304ff178a0f 1 parent 19a5dc0
@myakura myakura authored
Showing with 38 additions and 45 deletions.
  1. +10 −13 css/reset.css
  2. +19 −22 css/style.css
  3. +6 −6 index.html
  4. +3 −4 src/style.sass
View
23 css/reset.css
@@ -10,18 +10,15 @@ Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
+html, body, div, span, iframe,
+h1, h2, h3, p,
+em, img,
+small,
b, i,
dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
+label,
+aside,
+footer, header, nav, section {
margin:0;
padding:0;
border:0;
@@ -33,8 +30,8 @@ time, mark, audio, video {
body { line-height:1; }
-article,aside,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section { display:block; }
+article,aside,
+footer,header,nav,section { display:block; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
@@ -59,7 +56,7 @@ html { overflow-y: scroll; }
body, select, input, textarea { color:#444; /* looks better than black: http://twitter.com/H_FJ/statuses/11800719859 */ }
-strong, th, h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+strong, th, h1,h2,h3 { font-weight: bold; }
h3 { font-size:107%; margin:13px 0 3px; }
h2 { font-size:122%; margin:15px 0 3px; }
View
41 css/style.css
@@ -10,18 +10,15 @@ Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
+html, body, div, span, iframe,
+h1, h2, h3, p,
+em, img,
+small,
b, i,
dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
+label,
+aside,
+footer, header, nav, section {
margin:0;
padding:0;
border:0;
@@ -33,8 +30,8 @@ time, mark, audio, video {
body { line-height:1; }
-article,aside,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section { display:block; }
+article,aside,
+footer,header,nav,section { display:block; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
@@ -59,7 +56,7 @@ html { overflow-y: scroll; }
body, select, input, textarea { color:#444; /* looks better than black: http://twitter.com/H_FJ/statuses/11800719859 */ }
-strong, th, h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+strong, th, h1,h2,h3 { font-weight: bold; }
h3 { font-size:107%; margin:13px 0 3px; }
h2 { font-size:122%; margin:15px 0 3px; }
@@ -212,18 +209,18 @@ li b { display: inline-block; width: 20px; height: 20px; border-radius: 20em; }
#ray-29 { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; }
#ray-29 i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }
-#header h1, #header h3 { text-align: center; text-transform: uppercase; font-size: 3em; font-weight: bold; margin: 0 1em; padding: 0.5em 0 0; text-shadow: 1px 1px 0px black; }
-#header h1 b, #header h3 b { color: #362f34; }
-#header h1 i, #header h3 i { color: #bed364; font-style: normal; }
-#header h3 { margin-top: 5px; font-size: 1.5em; }
-#header h3 a { text-shadow: none; }
-#header aside { position: fixed; top: 40px; right: 40px; width: 160px; z-index: 10; }
+header h1, header h3 { text-align: center; text-transform: uppercase; font-size: 3em; font-weight: bold; margin: 0 1em; padding: 0.5em 0 0; text-shadow: 1px 1px 0px black; }
+header h1 b, header h3 b { color: #362f34; }
+header h1 i, header h3 i { color: #bed364; font-style: normal; }
+header h3 { margin-top: 5px; font-size: 1.5em; }
+header h3 a { text-shadow: none; }
+header aside { position: fixed; top: 40px; right: 40px; width: 160px; z-index: 10; }
/* quick kills */
-#body .twenty13 .ff36, #body .twenty10 .ie9, #footer p label { display: none !important; }
+#body .twenty13 .ff36, #body .twenty10 .ie9, footer p label { display: none !important; }
-#footer { margin-top: 26px; width: 100%; }
-#footer p { text-align: center; text-transform: uppercase; }
+footer { margin-top: 26px; width: 100%; }
+footer p { text-align: center; text-transform: uppercase; }
::-moz-selection { background: #ff5e99; color: white; text-shadow: none; }
View
12 index.html
@@ -12,7 +12,7 @@
<script>
// http://paulirish.com/2009/avoiding-the-fouc-v3/ && http://remysharp.com/2009/01/07/html5-enabling-script
// alternatively using Moderizr does both of these.
- (function(B,C){B[C]=B[C].replace(/\bno-js\b/,'js');if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})(document.documentElement,'className');
+ (function(B,C){B[C]=B[C].replace(/\bno-js\b/,'js');if(!/*@cc_on!@*/0)return;var e = "aside,footer,header,nav".split(','),i=e.length;while(i--){document.createElement(e[i])}})(document.documentElement,'className');
</script>
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
@@ -22,7 +22,7 @@
<!--[if !IE]><!--> <body> <!--<![endif]-->
<div id="container">
- <div id="header">
+ <header>
<h1><b>HTML5</b> &amp; <i>CSS3</i> Readiness</h1>
<h3>
<a href="#" class="twenty08">2008</a> /
@@ -106,7 +106,7 @@
<p>Many of these features are ready to implement <em>today</em>.
<p>We don't have to wait for entire specs to be completed, we can start using some hawtness now. <small>data from <a href="http://caniuse.com">caniuse.com</a></small>
</aside>
- </div>
+ </header>
<div id="body">
<div class="css-chart">
@@ -372,11 +372,11 @@
</div>
</div>
- <div id="footer">
+ <footer>
<p>Maintained by <a href="http://profiles.google.com/myakura.web">Masataka Yakura</a> | <a href="http://nimbupani.com/notes-from-html5-readiness-hacking.html">About this site</a>
<p>(Created by <a href="http://paulirish.com">Paul Irish</a> &amp; <a href="http://nimbupani.com">Divya Manian</a>)
- <p><img id=html5logo src="assets/HTML5_Logo.svg" width="80">
- </div>
+ <p><img id="html5logo" src="assets/HTML5_Logo.svg" width="80">
+ </footer>
</div>
<!-- JavaScript -->
View
7 src/style.sass
@@ -64,7 +64,6 @@ div.css-chart
padding: 0 0 0 200px
+transition(background, 0.2s, ease-out)
-
&:hover
background: rgba(74, 65, 70, 1)
@@ -211,7 +210,7 @@ $rays: 29
i
+transform(((180deg / ($rays - 1))*($i - 1)), 50%, 50%)
-#header
+header
h1, h3
text-align: center
text-transform: uppercase
@@ -243,10 +242,10 @@ $rays: 29
/* quick kills */
#body .twenty13 .ff36,
#body .twenty10 .ie9,
-#footer p label
+footer p label
display: none !important
-#footer
+footer
margin-top: 26px
width: 100%
p
Please sign in to comment.
Something went wrong with that request. Please try again.