HTML5 elements

This commit is contained in:
Shish 2012-03-11 16:18:37 +00:00
parent 6cb31e1299
commit c1f73c6258
10 changed files with 133 additions and 131 deletions

View file

@ -183,7 +183,7 @@ class Layout {
$title_link = "<h1 id='site-title'><a href='".make_link($main_page)."'>$site_name</a></h1>"; $title_link = "<h1 id='site-title'><a href='".make_link($main_page)."'>$site_name</a></h1>";
if($page->left_enabled) { if($page->left_enabled) {
$left = "<div id='nav'>$left_block_html</div>"; $left = "<nav>$left_block_html</nav>";
$withleft = "withleft"; $withleft = "withleft";
} }
else { else {
@ -204,7 +204,7 @@ $header_html
</head> </head>
<body> <body>
<div id="header"> <header>
$title_link $title_link
<ul id="navbar" class="flat-list"> <ul id="navbar" class="flat-list">
$custom_links $custom_links
@ -212,15 +212,14 @@ $header_html
<ul id="subnavbar" class="flat-list"> <ul id="subnavbar" class="flat-list">
$custom_sublinks $custom_sublinks
</ul> </ul>
</div> </header>
$subheading $subheading
$sub_block_html $sub_block_html
$left $left
<div id="body" class="$withleft">$main_block_html</div> <article class="$withleft">
$main_block_html
<div id="footer"> </article>
<em> <footer><em>
Images &copy; their respective owners, Images &copy; their respective owners,
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy; <a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy;
<a href="http://www.shishnet.org/">Shish</a> &amp; <a href="http://www.shishnet.org/">Shish</a> &amp;
@ -229,8 +228,7 @@ $header_html
based on the Danbooru concept. based on the Danbooru concept.
$debug $debug
$contact $contact
</em> </em></footer>
</div>
</body> </body>
</html> </html>
EOD; EOD;

View file

@ -1,36 +1,36 @@
.noleft{ .noleft{
padding-left:20px; padding-left:20px;
} }
div#header { HEADER {
margin-bottom:1em; margin-bottom:1em;
} }
div#header #site-title { HEADER #site-title {
padding:10px 20px 0; padding:10px 20px 0;
} }
div#header ul#navbar { HEADER ul#navbar {
margin:0; margin:0;
padding:5px 20px 2px 10px; padding:5px 20px 2px 10px;
} }
div#header ul#navbar li { HEADER ul#navbar li {
font-size:120%; font-size:120%;
margin:0; margin:0;
padding:0 10px 2px; padding:0 10px 2px;
} }
div#header ul#navbar li.current-page { HEADER ul#navbar li.current-page {
background-color:#F7F7FF; background-color:#F7F7FF;
} }
div#header ul#navbar li.current-page a { HEADER ul#navbar li.current-page a {
font-weight:bold; font-weight:bold;
} }
div#header ul#subnavbar { HEADER ul#subnavbar {
background-color:#F7F7FF; background-color:#F7F7FF;
margin:0 0 1em; margin:0 0 1em;
padding:5px 20px 5px 15px; padding:5px 20px 5px 15px;
} }
div#header ul#subnavbar li { HEADER ul#subnavbar li {
padding:0 5px; padding:0 5px;
} }
div#header #site-title { HEADER #site-title {
padding:10px 20px 0; padding:10px 20px 0;
} }
body { body {
@ -87,13 +87,13 @@ margin:auto;
text-align:center; text-align:center;
width:256px; width:256px;
} }
#body select { ARTICLE select {
width:150px; width:150px;
} }
td > input[type="submit"] {width: 100%;} td > input[type="submit"] {width: 100%;}
td > input[type="text"] {width: 100%;} td > input[type="text"] {width: 100%;}
td > input[type="password"] {width: 100%;} td > input[type="password"] {width: 100%;}
#footer { FOOTER {
clear:both; clear:both;
color:#CCCCCC; color:#CCCCCC;
font-size:0.9em; font-size:0.9em;
@ -115,27 +115,27 @@ text-decoration:none;
a:hover { a:hover {
text-decoration:underline; text-decoration:underline;
} }
#nav { NAV {
float:left; float:left;
text-align:left; text-align:left;
width:150px; width:150px;
padding:5px 20px 2px 10px; padding:5px 20px 2px 10px;
} }
#nav table { NAV table {
width:150px; width:150px;
} }
#nav td { NAV td {
vertical-align:middle; vertical-align:middle;
} }
#nav input { NAV input {
padding:0; padding:0;
width:100%; width:100%;
} }
#nav select { NAV select {
padding:0; padding:0;
width:100%; width:100%;
} }
#nav h3 { NAV h3 {
text-align:left; text-align:left;
} }
#comments p { #comments p {
@ -233,10 +233,10 @@ background:#FFAAAA none repeat scroll 0 0;
font-size:1.5em; font-size:1.5em;
font-weight:bold; font-weight:bold;
} }
div#header { HEADER {
text-align:left; text-align:left;
} }
div#header h1 { HEADER h1 {
text-align:left; text-align:left;
} }
* { * {

View file

@ -61,14 +61,17 @@ $header_html
</head> </head>
<body> <body>
<header>
<h1$wrapper>{$page->heading}</h1> <h1$wrapper>{$page->heading}</h1>
$sub_block_html $sub_block_html
</header>
<div id="nav">$left_block_html</div> <nav>
<div id="body">$main_block_html</div> $left_block_html
</nav>
<div id="footer"> <article>
$main_block_html
</article>
<footer>
Images &copy; their respective owners, Images &copy; their respective owners,
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy; <a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy;
<a href="http://www.shishnet.org/">Shish</a> &amp; <a href="http://www.shishnet.org/">Shish</a> &amp;
@ -77,7 +80,7 @@ $header_html
based on the Danbooru concept. based on the Danbooru concept.
$debug $debug
$contact $contact
</div> </footer>
</body> </body>
</html> </html>
EOD; EOD;

View file

@ -29,7 +29,7 @@ H3 {
background: #DDD; background: #DDD;
border: 1px solid #CCC; border: 1px solid #CCC;
} }
.brr, .hrr, H1, #footer, .thumb { .brr, .hrr, H1, FOOTER, .thumb {
margin: 8px; margin: 8px;
padding: 8px; padding: 8px;
border-radius: 12px; /* standard, webkit, opera */ border-radius: 12px; /* standard, webkit, opera */
@ -45,7 +45,7 @@ TD {
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
} }
#body SELECT {width: 150px;} ARTICLE SELECT {width: 150px;}
INPUT, TEXTAREA {box-sizing: border-box;} INPUT, TEXTAREA {box-sizing: border-box;}
TD>INPUT[type="button"] {width: 100%;} TD>INPUT[type="button"] {width: 100%;}
TD>INPUT[type="submit"] {width: 100%;} TD>INPUT[type="submit"] {width: 100%;}
@ -67,7 +67,7 @@ TABLE.form TD, TABLE.form TH {vertical-align: center;}
TABLE.form TBODY TD {text-align: left;} TABLE.form TBODY TD {text-align: left;}
TABLE.form TBODY TH {text-align: right; padding-right: 4px;} TABLE.form TBODY TH {text-align: right; padding-right: 4px;}
#footer { FOOTER {
clear: both; clear: both;
font-size: 0.7em; font-size: 0.7em;
text-align: center; text-align: center;
@ -89,28 +89,28 @@ UL {
* the navigation bar, and all its blocks * * the navigation bar, and all its blocks *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav { NAV {
width: 200px; width: 200px;
float: left; float: left;
text-align: center; text-align: center;
margin-left: 16px; margin-left: 16px;
} }
#nav .blockbody { NAV .blockbody {
font-size: 0.85em; font-size: 0.85em;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
#nav TABLE { NAV TABLE {
width: 150px; width: 150px;
} }
#nav TD { NAV TD {
vertical-align: middle; vertical-align: middle;
} }
#nav INPUT { NAV INPUT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
#nav SELECT { NAV SELECT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
@ -143,14 +143,14 @@ UL {
* the main part of each page * * the main part of each page *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#body { ARTICLE {
margin-left: 226px; margin-left: 226px;
margin-right: 16px; margin-right: 16px;
margin-top: 16px; margin-top: 16px;
text-align: center; text-align: center;
height: 1%; height: 1%;
} }
#body TABLE { ARTICLE TABLE {
width: 90%; width: 90%;
margin: auto; margin: auto;
} }
@ -168,11 +168,11 @@ UL {
padding: 8px 4px 8px 4px; padding: 8px 4px 8px 4px;
} }
#nav .thumbblock { NAV .thumbblock {
float: none; float: none;
height: auto; height: auto;
} }
#nav .thumb { NAV .thumb {
margin-bottom: 0px; margin-bottom: 0px;
} }
.thumbblock { .thumbblock {

View file

@ -47,7 +47,7 @@ class Layout {
} }
if($page->left_enabled) { if($page->left_enabled) {
$left = "<div id='nav'>$left_block_html</div>"; $left = "<nav>$left_block_html</nav>";
$withleft = "withleft"; $withleft = "withleft";
} }
else { else {
@ -68,14 +68,16 @@ $header_html
</head> </head>
<body> <body>
<header>
<h1>{$page->heading}</h1> <h1>{$page->heading}</h1>
$subheading $subheading
$sub_block_html $sub_block_html
</header>
$left $left
<div id="body" class="$withleft">$main_block_html</div> <article class="$withleft">
$main_block_html
<div id="footer"> </article>
<footer>
<hr> <hr>
Images &copy; their respective owners, Images &copy; their respective owners,
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy; <a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy;
@ -86,7 +88,7 @@ $header_html
<br>Futaba theme based on 4chan's layout and CSS :3 <br>Futaba theme based on 4chan's layout and CSS :3
$debug $debug
$contact $contact
</div> </footer>
</body> </body>
</html> </html>
EOD; EOD;

View file

@ -21,7 +21,7 @@ H1 {
display: none; display: none;
} }
#footer { FOOTER {
clear: both; clear: both;
padding-top: 8px; padding-top: 8px;
font-size: 0.7em; font-size: 0.7em;
@ -35,26 +35,26 @@ A, A:visited {text-decoration: none; color: #0000EE;}
A:hover {text-decoration: underline; color: #DD0000;} A:hover {text-decoration: underline; color: #DD0000;}
HR {border: none; border-top: 1px solid #D9BFB7; height: 0px; clear: both;} HR {border: none; border-top: 1px solid #D9BFB7; height: 0px; clear: both;}
#nav { NAV {
width: 150px; width: 150px;
float: left; float: left;
text-align:left; text-align:left;
} }
#nav TABLE { NAV TABLE {
width: 150px; width: 150px;
} }
#nav TD { NAV TD {
vertical-align: middle; vertical-align: middle;
} }
#nav INPUT { NAV INPUT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
#nav SELECT { NAV SELECT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
#nav H3 { NAV H3 {
text-align: left; text-align: left;
} }
.withleft { .withleft {

View file

@ -153,10 +153,10 @@ class Layout {
} }
if($page->left_enabled==false) { if($page->left_enabled==false) {
$left_block_html = ""; $left_block_html = "";
$main_block_html = "<div id='body_noleft'>$main_block_html</div>"; $main_block_html = "<article id='body_noleft'>$main_block_html</article>";
} else { } else {
$left_block_html = "<div id='nav'>$left_block_html</div>"; $left_block_html = "<nav>$left_block_html</nav>";
$main_block_html = "<div id='body'>$main_block_html</div>"; $main_block_html = "<article>$main_block_html</article>";
} }
print <<<EOD print <<<EOD
@ -171,17 +171,14 @@ class Layout {
</head> </head>
<body> <body>
<header>
$menu $menu
$custom_sublinks $custom_sublinks
$sub_block_html $sub_block_html
</header>
$left_block_html $left_block_html
$main_block_html $main_block_html
<footer>
<div id="footer">
Images &copy; their respective owners, Images &copy; their respective owners,
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy; <a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy;
<a href="http://www.shishnet.org/">Shish</a> &amp; <a href="http://www.shishnet.org/">Shish</a> &amp;
@ -191,7 +188,7 @@ class Layout {
Lite Theme by <a href="http://seemslegit.com">Zach</a> Lite Theme by <a href="http://seemslegit.com">Zach</a>
$debug $debug
$contact $contact
</div> </footer>
</body> </body>
</html> </html>
EOD; EOD;

View file

@ -133,7 +133,7 @@ CODE {
border-top: none; border-top: none;
background: #DDD; background: #DDD;
} }
#body SELECT {width: 150px;} ARTICLE SELECT {width: 150px;}
TD>INPUT[type="submit"] {width: 100%;} TD>INPUT[type="submit"] {width: 100%;}
TD>INPUT[type="text"] {width: 100%;} TD>INPUT[type="text"] {width: 100%;}
TD>INPUT[type="password"] {width: 100%;} TD>INPUT[type="password"] {width: 100%;}
@ -164,7 +164,7 @@ INPUT:hover, TEXTAREA:hover {
text-decoration:none; text-decoration:none;
} }
#footer { FOOTER {
clear: both; clear: both;
padding: 8px; padding: 8px;
font-size: 0.7em; font-size: 0.7em;
@ -193,27 +193,27 @@ UL {
* the navigation bar, and all its blocks * * the navigation bar, and all its blocks *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav { NAV {
width: 200px; width: 200px;
float: left; float: left;
text-align: center; text-align: center;
margin-left: 16px; margin-left: 16px;
} }
#nav .blockbody { NAV .blockbody {
font-size: 0.85em; font-size: 0.85em;
text-align: center; text-align: center;
} }
#nav TABLE { NAV TABLE {
width: 190px; width: 190px;
} }
#nav TD { NAV TD {
vertical-align: middle; vertical-align: middle;
} }
#nav INPUT { NAV INPUT {
width: 95%; width: 95%;
padding: 0px; padding: 0px;
} }
#nav SELECT { NAV SELECT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
@ -264,13 +264,13 @@ UL {
* the main part of each page * * the main part of each page *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#body { ARTICLE {
margin-left: 226px; margin-left: 226px;
margin-right: 16px; margin-right: 16px;
text-align: left; text-align: left;
height: 1%; height: 1%;
} }
#body_noleft { ARTICLE_noleft {
margin-left: 4px; margin-left: 4px;
margin-right: 16px; margin-right: 16px;
margin-bottom:16px; margin-bottom:16px;
@ -279,7 +279,7 @@ UL {
text-align: left; text-align: left;
height: 1%; height: 1%;
} }
#body TABLE { ARTICLE TABLE {
width: 90%; width: 90%;
} }
@ -332,11 +332,11 @@ UL {
background: #FAA; background: #FAA;
} }
#nav .thumbblock { NAV .thumbblock {
float: none; float: none;
height: auto; height: auto;
} }
#nav .thumb { NAV .thumb {
margin-bottom: 0px; margin-bottom: 0px;
} }
.thumbblock { .thumbblock {

View file

@ -67,6 +67,7 @@ $header_html
</head> </head>
<body> <body>
<header>
<table id="header" class="bgtop" width="100%" height="113px"> <table id="header" class="bgtop" width="100%" height="113px">
<tr> <tr>
<td><center> <td><center>
@ -76,14 +77,15 @@ $header_html
$head_block_html $head_block_html
</tr> </tr>
</table> </table>
$sub_block_html $sub_block_html
</header>
<nav>
<div id="nav">$left_block_html</div> $left_block_html
<div id="body">$main_block_html</div> </nav>
<article>
<div id="footer"> $main_block_html
</article>
<footer>
Images &copy; their respective owners, Images &copy; their respective owners,
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy; <a href="http://code.shishnet.org/shimmie2/">Shimmie</a> &copy;
<a href="http://www.shishnet.org/">Shish</a> &amp; <a href="http://www.shishnet.org/">Shish</a> &amp;
@ -92,7 +94,7 @@ $header_html
based on the Danbooru concept. based on the Danbooru concept.
$debug $debug
$contact $contact
</div> </footer>
</body> </body>
</html> </html>
EOD; EOD;

View file

@ -9,7 +9,7 @@ BODY {
font-size: 14px; font-size: 14px;
margin: 0px; margin: 0px;
} }
#header { HEADER {
border-bottom: 1px solid #B89F7C; border-bottom: 1px solid #B89F7C;
margin-top: 0px; margin-top: 0px;
margin-bottom: 16px; margin-bottom: 16px;
@ -50,7 +50,7 @@ CODE {
border-top: none; border-top: none;
background: #DDD; background: #DDD;
} }
#body SELECT {width: 150px;} ARTICLE SELECT {width: 150px;}
TD>INPUT[type="submit"] {width: 100%;} TD>INPUT[type="submit"] {width: 100%;}
TD>INPUT[type="text"] {width: 100%;} TD>INPUT[type="text"] {width: 100%;}
TD>INPUT[type="password"] {width: 100%;} TD>INPUT[type="password"] {width: 100%;}
@ -64,7 +64,7 @@ TABLE.zebra TD {border-top: 1px solid #B89F7C;}
TABLE.zebra TR:nth-child(odd) {background: #FCD9A9;} TABLE.zebra TR:nth-child(odd) {background: #FCD9A9;}
TABLE.zebra TR:nth-child(even) {background: #DABC92;} TABLE.zebra TR:nth-child(even) {background: #DABC92;}
#footer { FOOTER {
clear: both; clear: both;
padding: 8px; padding: 8px;
font-size: 0.7em; font-size: 0.7em;
@ -95,27 +95,27 @@ UL {
* the navigation bar, and all its blocks * * the navigation bar, and all its blocks *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav { NAV {
width: 250px; width: 250px;
float: left; float: left;
text-align: center; text-align: center;
margin-left: 16px; margin-left: 16px;
} }
#nav .blockbody { NAV .blockbody {
font-size: 0.85em; font-size: 0.85em;
text-align: center; text-align: center;
} }
#nav TABLE { NAV TABLE {
width: 150px; width: 150px;
} }
#nav TD { NAV TD {
vertical-align: middle; vertical-align: middle;
} }
#nav INPUT { NAV INPUT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
#nav SELECT { NAV SELECT {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
@ -152,13 +152,13 @@ UL {
* the main part of each page * * the main part of each page *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#body { ARTICLE {
margin-left: 276px; margin-left: 276px;
margin-right: 16px; margin-right: 16px;
text-align: center; text-align: center;
height: 1%; height: 1%;
} }
#body TABLE { ARTICLE TABLE {
width: 90%; width: 90%;
margin: auto; margin: auto;
} }
@ -204,11 +204,11 @@ UL {
background: #FAA; background: #FAA;
} }
#nav .thumbblock { NAV .thumbblock {
float: none; float: none;
height: auto; height: auto;
} }
#nav .thumb { NAV .thumb {
margin-bottom: 0px; margin-bottom: 0px;
} }
.thumbblock { .thumbblock {