HTML5 elements
This commit is contained in:
parent
6cb31e1299
commit
c1f73c6258
10 changed files with 133 additions and 131 deletions
|
@ -183,7 +183,7 @@ class Layout {
|
|||
$title_link = "<h1 id='site-title'><a href='".make_link($main_page)."'>$site_name</a></h1>";
|
||||
|
||||
if($page->left_enabled) {
|
||||
$left = "<div id='nav'>$left_block_html</div>";
|
||||
$left = "<nav>$left_block_html</nav>";
|
||||
$withleft = "withleft";
|
||||
}
|
||||
else {
|
||||
|
@ -204,23 +204,22 @@ $header_html
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
$title_link
|
||||
<ul id="navbar" class="flat-list">
|
||||
$custom_links
|
||||
</ul>
|
||||
<ul id="subnavbar" class="flat-list">
|
||||
$custom_sublinks
|
||||
</ul>
|
||||
</div>
|
||||
<header>
|
||||
$title_link
|
||||
<ul id="navbar" class="flat-list">
|
||||
$custom_links
|
||||
</ul>
|
||||
<ul id="subnavbar" class="flat-list">
|
||||
$custom_sublinks
|
||||
</ul>
|
||||
</header>
|
||||
$subheading
|
||||
$sub_block_html
|
||||
|
||||
$left
|
||||
<div id="body" class="$withleft">$main_block_html</div>
|
||||
|
||||
<div id="footer">
|
||||
<em>
|
||||
<article class="$withleft">
|
||||
$main_block_html
|
||||
</article>
|
||||
<footer><em>
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
<a href="http://www.shishnet.org/">Shish</a> &
|
||||
|
@ -229,8 +228,7 @@ $header_html
|
|||
based on the Danbooru concept.
|
||||
$debug
|
||||
$contact
|
||||
</em>
|
||||
</div>
|
||||
</em></footer>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
|
|
|
@ -1,36 +1,36 @@
|
|||
.noleft{
|
||||
padding-left:20px;
|
||||
}
|
||||
div#header {
|
||||
HEADER {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
div#header #site-title {
|
||||
HEADER #site-title {
|
||||
padding:10px 20px 0;
|
||||
}
|
||||
div#header ul#navbar {
|
||||
HEADER ul#navbar {
|
||||
margin:0;
|
||||
padding:5px 20px 2px 10px;
|
||||
}
|
||||
div#header ul#navbar li {
|
||||
HEADER ul#navbar li {
|
||||
font-size:120%;
|
||||
margin:0;
|
||||
padding:0 10px 2px;
|
||||
}
|
||||
div#header ul#navbar li.current-page {
|
||||
HEADER ul#navbar li.current-page {
|
||||
background-color:#F7F7FF;
|
||||
}
|
||||
div#header ul#navbar li.current-page a {
|
||||
HEADER ul#navbar li.current-page a {
|
||||
font-weight:bold;
|
||||
}
|
||||
div#header ul#subnavbar {
|
||||
HEADER ul#subnavbar {
|
||||
background-color:#F7F7FF;
|
||||
margin:0 0 1em;
|
||||
padding:5px 20px 5px 15px;
|
||||
}
|
||||
div#header ul#subnavbar li {
|
||||
HEADER ul#subnavbar li {
|
||||
padding:0 5px;
|
||||
}
|
||||
div#header #site-title {
|
||||
HEADER #site-title {
|
||||
padding:10px 20px 0;
|
||||
}
|
||||
body {
|
||||
|
@ -87,13 +87,13 @@ margin:auto;
|
|||
text-align:center;
|
||||
width:256px;
|
||||
}
|
||||
#body select {
|
||||
ARTICLE select {
|
||||
width:150px;
|
||||
}
|
||||
td > input[type="submit"] {width: 100%;}
|
||||
td > input[type="text"] {width: 100%;}
|
||||
td > input[type="password"] {width: 100%;}
|
||||
#footer {
|
||||
FOOTER {
|
||||
clear:both;
|
||||
color:#CCCCCC;
|
||||
font-size:0.9em;
|
||||
|
@ -115,27 +115,27 @@ text-decoration:none;
|
|||
a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
#nav {
|
||||
NAV {
|
||||
float:left;
|
||||
text-align:left;
|
||||
width:150px;
|
||||
padding:5px 20px 2px 10px;
|
||||
}
|
||||
#nav table {
|
||||
NAV table {
|
||||
width:150px;
|
||||
}
|
||||
#nav td {
|
||||
NAV td {
|
||||
vertical-align:middle;
|
||||
}
|
||||
#nav input {
|
||||
NAV input {
|
||||
padding:0;
|
||||
width:100%;
|
||||
}
|
||||
#nav select {
|
||||
NAV select {
|
||||
padding:0;
|
||||
width:100%;
|
||||
}
|
||||
#nav h3 {
|
||||
NAV h3 {
|
||||
text-align:left;
|
||||
}
|
||||
#comments p {
|
||||
|
@ -233,10 +233,10 @@ background:#FFAAAA none repeat scroll 0 0;
|
|||
font-size:1.5em;
|
||||
font-weight:bold;
|
||||
}
|
||||
div#header {
|
||||
HEADER {
|
||||
text-align:left;
|
||||
}
|
||||
div#header h1 {
|
||||
HEADER h1 {
|
||||
text-align:left;
|
||||
}
|
||||
* {
|
||||
|
|
|
@ -61,14 +61,17 @@ $header_html
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1$wrapper>{$page->heading}</h1>
|
||||
|
||||
$sub_block_html
|
||||
|
||||
<div id="nav">$left_block_html</div>
|
||||
<div id="body">$main_block_html</div>
|
||||
|
||||
<div id="footer">
|
||||
<header>
|
||||
<h1$wrapper>{$page->heading}</h1>
|
||||
$sub_block_html
|
||||
</header>
|
||||
<nav>
|
||||
$left_block_html
|
||||
</nav>
|
||||
<article>
|
||||
$main_block_html
|
||||
</article>
|
||||
<footer>
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
<a href="http://www.shishnet.org/">Shish</a> &
|
||||
|
@ -77,7 +80,7 @@ $header_html
|
|||
based on the Danbooru concept.
|
||||
$debug
|
||||
$contact
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
|
|
|
@ -29,7 +29,7 @@ H3 {
|
|||
background: #DDD;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
.brr, .hrr, H1, #footer, .thumb {
|
||||
.brr, .hrr, H1, FOOTER, .thumb {
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 12px; /* standard, webkit, opera */
|
||||
|
@ -45,7 +45,7 @@ TD {
|
|||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
#body SELECT {width: 150px;}
|
||||
ARTICLE SELECT {width: 150px;}
|
||||
INPUT, TEXTAREA {box-sizing: border-box;}
|
||||
TD>INPUT[type="button"] {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 TH {text-align: right; padding-right: 4px;}
|
||||
|
||||
#footer {
|
||||
FOOTER {
|
||||
clear: both;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
|
@ -89,28 +89,28 @@ UL {
|
|||
* the navigation bar, and all its blocks *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#nav {
|
||||
NAV {
|
||||
width: 200px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#nav .blockbody {
|
||||
NAV .blockbody {
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#nav TABLE {
|
||||
NAV TABLE {
|
||||
width: 150px;
|
||||
}
|
||||
#nav TD {
|
||||
NAV TD {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#nav INPUT {
|
||||
NAV INPUT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav SELECT {
|
||||
NAV SELECT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
@ -143,14 +143,14 @@ UL {
|
|||
* the main part of each page *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#body {
|
||||
ARTICLE {
|
||||
margin-left: 226px;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
height: 1%;
|
||||
}
|
||||
#body TABLE {
|
||||
ARTICLE TABLE {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
@ -168,11 +168,11 @@ UL {
|
|||
padding: 8px 4px 8px 4px;
|
||||
}
|
||||
|
||||
#nav .thumbblock {
|
||||
NAV .thumbblock {
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
#nav .thumb {
|
||||
NAV .thumb {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.thumbblock {
|
||||
|
|
|
@ -47,7 +47,7 @@ class Layout {
|
|||
}
|
||||
|
||||
if($page->left_enabled) {
|
||||
$left = "<div id='nav'>$left_block_html</div>";
|
||||
$left = "<nav>$left_block_html</nav>";
|
||||
$withleft = "withleft";
|
||||
}
|
||||
else {
|
||||
|
@ -68,14 +68,16 @@ $header_html
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>{$page->heading}</h1>
|
||||
$subheading
|
||||
$sub_block_html
|
||||
|
||||
<header>
|
||||
<h1>{$page->heading}</h1>
|
||||
$subheading
|
||||
$sub_block_html
|
||||
</header>
|
||||
$left
|
||||
<div id="body" class="$withleft">$main_block_html</div>
|
||||
|
||||
<div id="footer">
|
||||
<article class="$withleft">
|
||||
$main_block_html
|
||||
</article>
|
||||
<footer>
|
||||
<hr>
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
|
@ -86,7 +88,7 @@ $header_html
|
|||
<br>Futaba theme based on 4chan's layout and CSS :3
|
||||
$debug
|
||||
$contact
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
|
|
|
@ -21,7 +21,7 @@ H1 {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#footer {
|
||||
FOOTER {
|
||||
clear: both;
|
||||
padding-top: 8px;
|
||||
font-size: 0.7em;
|
||||
|
@ -35,26 +35,26 @@ A, A:visited {text-decoration: none; color: #0000EE;}
|
|||
A:hover {text-decoration: underline; color: #DD0000;}
|
||||
HR {border: none; border-top: 1px solid #D9BFB7; height: 0px; clear: both;}
|
||||
|
||||
#nav {
|
||||
NAV {
|
||||
width: 150px;
|
||||
float: left;
|
||||
text-align:left;
|
||||
}
|
||||
#nav TABLE {
|
||||
NAV TABLE {
|
||||
width: 150px;
|
||||
}
|
||||
#nav TD {
|
||||
NAV TD {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#nav INPUT {
|
||||
NAV INPUT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav SELECT {
|
||||
NAV SELECT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav H3 {
|
||||
NAV H3 {
|
||||
text-align: left;
|
||||
}
|
||||
.withleft {
|
||||
|
|
|
@ -153,10 +153,10 @@ class Layout {
|
|||
}
|
||||
if($page->left_enabled==false) {
|
||||
$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 {
|
||||
$left_block_html = "<div id='nav'>$left_block_html</div>";
|
||||
$main_block_html = "<div id='body'>$main_block_html</div>";
|
||||
$left_block_html = "<nav>$left_block_html</nav>";
|
||||
$main_block_html = "<article>$main_block_html</article>";
|
||||
}
|
||||
|
||||
print <<<EOD
|
||||
|
@ -171,17 +171,14 @@ class Layout {
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
$menu
|
||||
$custom_sublinks
|
||||
|
||||
$sub_block_html
|
||||
|
||||
<header>
|
||||
$menu
|
||||
$custom_sublinks
|
||||
$sub_block_html
|
||||
</header>
|
||||
$left_block_html
|
||||
$main_block_html
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<footer>
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
<a href="http://www.shishnet.org/">Shish</a> &
|
||||
|
@ -191,7 +188,7 @@ class Layout {
|
|||
Lite Theme by <a href="http://seemslegit.com">Zach</a>
|
||||
$debug
|
||||
$contact
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
|
|
|
@ -133,7 +133,7 @@ CODE {
|
|||
border-top: none;
|
||||
background: #DDD;
|
||||
}
|
||||
#body SELECT {width: 150px;}
|
||||
ARTICLE SELECT {width: 150px;}
|
||||
TD>INPUT[type="submit"] {width: 100%;}
|
||||
TD>INPUT[type="text"] {width: 100%;}
|
||||
TD>INPUT[type="password"] {width: 100%;}
|
||||
|
@ -164,7 +164,7 @@ INPUT:hover, TEXTAREA:hover {
|
|||
text-decoration:none;
|
||||
}
|
||||
|
||||
#footer {
|
||||
FOOTER {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
font-size: 0.7em;
|
||||
|
@ -193,27 +193,27 @@ UL {
|
|||
* the navigation bar, and all its blocks *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#nav {
|
||||
NAV {
|
||||
width: 200px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#nav .blockbody {
|
||||
NAV .blockbody {
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
}
|
||||
#nav TABLE {
|
||||
NAV TABLE {
|
||||
width: 190px;
|
||||
}
|
||||
#nav TD {
|
||||
NAV TD {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#nav INPUT {
|
||||
NAV INPUT {
|
||||
width: 95%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav SELECT {
|
||||
NAV SELECT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
@ -264,13 +264,13 @@ UL {
|
|||
* the main part of each page *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#body {
|
||||
ARTICLE {
|
||||
margin-left: 226px;
|
||||
margin-right: 16px;
|
||||
text-align: left;
|
||||
height: 1%;
|
||||
}
|
||||
#body_noleft {
|
||||
ARTICLE_noleft {
|
||||
margin-left: 4px;
|
||||
margin-right: 16px;
|
||||
margin-bottom:16px;
|
||||
|
@ -279,7 +279,7 @@ UL {
|
|||
text-align: left;
|
||||
height: 1%;
|
||||
}
|
||||
#body TABLE {
|
||||
ARTICLE TABLE {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
@ -332,11 +332,11 @@ UL {
|
|||
background: #FAA;
|
||||
}
|
||||
|
||||
#nav .thumbblock {
|
||||
NAV .thumbblock {
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
#nav .thumb {
|
||||
NAV .thumb {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.thumbblock {
|
||||
|
|
|
@ -67,23 +67,25 @@ $header_html
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<table id="header" class="bgtop" width="100%" height="113px">
|
||||
<tr>
|
||||
<td><center>
|
||||
<h1><a href="$data_href/$main_page">{$site_name}</a></h1>
|
||||
<p>[Navigation links go here]
|
||||
</center></td>
|
||||
$head_block_html
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
$sub_block_html
|
||||
|
||||
|
||||
<div id="nav">$left_block_html</div>
|
||||
<div id="body">$main_block_html</div>
|
||||
|
||||
<div id="footer">
|
||||
<header>
|
||||
<table id="header" class="bgtop" width="100%" height="113px">
|
||||
<tr>
|
||||
<td><center>
|
||||
<h1><a href="$data_href/$main_page">{$site_name}</a></h1>
|
||||
<p>[Navigation links go here]
|
||||
</center></td>
|
||||
$head_block_html
|
||||
</tr>
|
||||
</table>
|
||||
$sub_block_html
|
||||
</header>
|
||||
<nav>
|
||||
$left_block_html
|
||||
</nav>
|
||||
<article>
|
||||
$main_block_html
|
||||
</article>
|
||||
<footer>
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
<a href="http://www.shishnet.org/">Shish</a> &
|
||||
|
@ -92,7 +94,7 @@ $header_html
|
|||
based on the Danbooru concept.
|
||||
$debug
|
||||
$contact
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
|
|
|
@ -9,7 +9,7 @@ BODY {
|
|||
font-size: 14px;
|
||||
margin: 0px;
|
||||
}
|
||||
#header {
|
||||
HEADER {
|
||||
border-bottom: 1px solid #B89F7C;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 16px;
|
||||
|
@ -50,7 +50,7 @@ CODE {
|
|||
border-top: none;
|
||||
background: #DDD;
|
||||
}
|
||||
#body SELECT {width: 150px;}
|
||||
ARTICLE SELECT {width: 150px;}
|
||||
TD>INPUT[type="submit"] {width: 100%;}
|
||||
TD>INPUT[type="text"] {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(even) {background: #DABC92;}
|
||||
|
||||
#footer {
|
||||
FOOTER {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
font-size: 0.7em;
|
||||
|
@ -95,27 +95,27 @@ UL {
|
|||
* the navigation bar, and all its blocks *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#nav {
|
||||
NAV {
|
||||
width: 250px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#nav .blockbody {
|
||||
NAV .blockbody {
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
}
|
||||
#nav TABLE {
|
||||
NAV TABLE {
|
||||
width: 150px;
|
||||
}
|
||||
#nav TD {
|
||||
NAV TD {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#nav INPUT {
|
||||
NAV INPUT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav SELECT {
|
||||
NAV SELECT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
@ -152,13 +152,13 @@ UL {
|
|||
* the main part of each page *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#body {
|
||||
ARTICLE {
|
||||
margin-left: 276px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
height: 1%;
|
||||
}
|
||||
#body TABLE {
|
||||
ARTICLE TABLE {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
@ -204,11 +204,11 @@ UL {
|
|||
background: #FAA;
|
||||
}
|
||||
|
||||
#nav .thumbblock {
|
||||
NAV .thumbblock {
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
#nav .thumb {
|
||||
NAV .thumb {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.thumbblock {
|
||||
|
|
Reference in a new issue