New theme, updated to HTML5

New style.css to reflect the update to html5
several changes in index.php as the html has been updated.
Had to delete icons support in base.php as they where conflicting with
the new theme.
This commit is contained in:
Thomas Severinsen 2013-02-28 15:41:21 +01:00
parent 02c25705cf
commit 6a58a81b21
3 changed files with 203 additions and 286 deletions

View file

@ -165,15 +165,6 @@ class Entry
public $localUpdated;
private static $updated = NULL;
public static $icons = array(
Author::ALL_AUTHORS_ID => 'images/author.png',
Serie::ALL_SERIES_ID => 'images/serie.png',
Book::ALL_RECENT_BOOKS_ID => 'images/recent.png',
Tag::ALL_TAGS_ID => 'images/tag.png',
CustomColumn::ALL_CUSTOMS_ID => 'images/tag.png',
"calibre:books$" => 'images/allbook.png',
"calibre:books:letter" => 'images/allbook.png'
);
public function getUpdatedTime () {
if (!is_null ($this->localUpdated)) {
@ -193,16 +184,6 @@ class Entry
$this->contentType = $pcontentType;
$this->linkArray = $plinkArray;
if ($config['cops_show_icons'] == 1)
{
foreach (self::$icons as $reg => $image)
{
if (preg_match ("/" . $reg . "/", $pid)) {
array_push ($this->linkArray, new Link (getUrlWithVersion ($image), "image/png", Link::OPDS_THUMBNAIL_TYPE));
break;
}
}
}
}
}

View file

@ -45,10 +45,9 @@
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
<title><?php echo htmlspecialchars ($currentPage->title) ?></title>
@ -59,6 +58,7 @@
<link rel="icon" type="image/vnd.microsoft.icon" href="<?php echo $currentPage->favicon ?>" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.3" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" />
<link rel="stylesheet" href="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<script type="text/javascript">
$(document).ready(function() {
// Handler for .ready() called.
@ -147,21 +147,14 @@
<p><img src="images/ajax-loader.gif" alt="waiting" /> Please Wait</p>
</div>
<div class="container">
<div class="head">
<div class="headleft">
<a href="<?php echo $_SERVER["SCRIPT_NAME"] ?>">
<header>
<a class="headleft" href="<?php echo $_SERVER["SCRIPT_NAME"] ?>">
<img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="Home" />
</a>
</div>
<div class="headright">
<img id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
</div>
<div class="headcenter">
<p><?php echo htmlspecialchars ($currentPage->title) ?></p>
</div>
</div>
<div class="clearer" />
<div class="menu">
<img class="headright" id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
<h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
</header>
<aside>
<div id="search" class="search">
<form action="index.php?page=9" method="get">
<input type="text" name="query" />
@ -182,10 +175,10 @@
<img id="sort" src="images/sort32.png" alt="Sort" />
</form>
</div>
</div>
<div class="clearer" />
</aside>
<div id="content" style="display: none;"></div>
<div class="entries">
<section>
<?php
if ($page == Base::PAGE_BOOK_DETAIL)
{
@ -194,33 +187,29 @@
foreach ($currentPage->entryArray as $entry) {
if (get_class ($entry) != "EntryBook") {
?>
<div class="entry">
<div class="entryTitle"><?php echo htmlspecialchars ($entry->title) ?></div>
<div class="entryContent"><?php echo htmlspecialchars ($entry->content) ?></div>
<?php
foreach ($entry->linkArray as $link) {
?>
<a href="<?php echo $link->hrefXhtml () ?>" class="navigation">nav</a>
<?php
}
?>
<article>
<div class="frontpage">
<?php foreach ($entry->linkArray as $link) {?> <a href="<?php echo $link->hrefXhtml () ?>">
<h2><?php echo htmlspecialchars ($entry->title) ?></h2>
<?php } ?>
<h4><?php echo htmlspecialchars ($entry->content) ?></h4>
</a>
</div>
</article>
<?php
}
else
{
?>
<div class="book">
<div class="cover">
<article>
<div class="books">
<?php
if ($entry->book->hasCover) {
?>
<a rel="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a>
<span class="cover"><a rel="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a></span>
<?php
}
?>
</div>
<div class="download">
<?php
$i = 0;
foreach ($config['cops_prefered_format'] as $format)
@ -229,49 +218,44 @@
if ($data = $entry->book->getDataFormat ($format)) {
$i++;
?>
<div class="button buttonEffect"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a></div>
<h2 class="download"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a></h2>
<?php
}
}
?>
</div>
<div class="bookdetail">
<a class="navigation" href="<?php echo $entry->book->getDetailUrl () ?>" />
<div class="entryTitle st"><?php echo htmlspecialchars ($entry->title) ?>
<h2><?php echo htmlspecialchars ($entry->title) ?>
<?php
if ($entry->book->getPubDate() != "")
{
?>
<span class="sp">(<?php echo $entry->book->getPubDate() ?>)</span>
(<?php echo $entry->book->getPubDate() ?>)
<?php
}
?>
<span class="sr"><?php echo $entry->book->getRating () ?></span>
</div>
<div class="entryContent sa"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></div>
<div class="entryContent"><?php echo localize("tags.title") . " : " . htmlspecialchars ($entry->book->getTagsName ()) ?></div>
<?php echo $entry->book->getRating () ?></h2>
<h4><?php echo localize("authors.title") . " : </h4>" . htmlspecialchars ($entry->book->getAuthorsName ()) ?><br />
<h4><?php echo localize("tags.title") . " : </h4>" . htmlspecialchars ($entry->book->getTagsName ()) ?><br />
<?php
$serie = $entry->book->getSerie ();
if (!is_null ($serie)) {
?>
<div class="entryContent ss"><?php echo localize("series.title") . " : " . htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?></div>
<h4><?php echo localize("series.title") . " :</h4> " . htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?><br />
<?php
}
?>
</div>
</div>
</article>
<?php
}
?>
<div class="clearer" />
<?php
}
?>
</div>
<div class="foot">
<div class="footright">
<a class="fancyabout" href="about.xml"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="Home" /></a>
</div>
</section>
<footer>
<a href="about.xml"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="Home" /></a>
<?php
if ($currentPage->isPaginated ()) {
?>
@ -296,7 +280,7 @@
<?php
}
?>
</div>
</footer>
</div>
</body>
</html>

362
style.css
View file

@ -1,225 +1,159 @@
html
{
font-family: sans-serif;
font-size: 1em;
padding:0px;
margin:0px;
background-color:lightgray;
/* Global Box Sizing and Font-Smoothing */
*, *:after, *:before {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body
{
margin-top:0px;
html { font-size: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; /* Serve Helvetica Neue, with Helvetica fallbacks to Arial */
font-size: 0.75em;/*12px/16px */
font-weight:300; /* Better supported than 'lighter' attribute */
line-height:18px;
color: #1c1c1c; /* Lighter on the eyes than #000 Black */
margin: 0px; background: #cccccc; background-size: cover;
}
.container
{
margin:auto;
width:100%;
max-width:800px;
img {
border: 0px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.head
{
color:white;
background-color:black;
width:100%;
height:64px;
}
/* ==========================================================================
Typography stuff goes here
========================================================================== */
h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
/*h1 see mediaqueries*/
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em; }
h5 {font-size: 0.83em;}
h6 {font-size: 0.75em;}
.foot
{
color:white;
background-color:black;
width:100%;
height:32px;
}
a:hover, a:active { outline: none; }
a { color: #2f4f4f ; text-decoration: none;}
a:visited { color:#414141 ; }
a:hover { color: black; text-decoration: underline; }
.frontpage a:hover { display:inline-block; width: 100%; background-color: #778899;}
img
{
margin:0;
padding:0;
border:0;
}
/* =============================================================================
Main container stuff goes here
========================================================================== */
.container{
background: #414141; border:1px solid #000; border-radius:10px;
max-width:800px;width:95%;margin:0 auto;position:relative; }
.headleft
{
float:left;
height:64px;
}
.headright
{
float:right;
height:64px;
cursor:pointer;
}
.footright
{
float:right;
height:32px;
}
.headcenter
{
margin:auto;
text-align:center;
font-size: 1.5em;
font-weight:bold;
height:64px;
display:table;
}
.footcenter
{
margin:auto;
text-align:center;
font-size: 1.3em;
font-weight:bold;
height:32px;
display:table;
}
.headcenter p, .footcenter p, .footcenter a
{
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 100%;
}
.clearer
{
/* =============================================================================
Header stuff goes here
========================================================================== */
header {
clear:both;
}
.entries
{
background-color:lightgray;
margin-top: 5px;
}
.entry
{
background-color:white;
border-bottom:1px double black;
color:white;
text-align:center;
text-transform:uppercase;
display:block;
padding:2px;
cursor: pointer;
margin-bottom:5px;
box-shadow:inset 0px -5px 8px #000000;
min-height:70px;
border-radius: 10px 10px 0px 0px;
}
.book
{
background-color:white;
border-bottom:1px double black;
min-height:80px;
margin-bottom:5px;
}
.navigation
{
display:none;
}
.entryTitle
{
font-weight:bold;
font-size: 1.1em;
}
.entryContent
{
font-style:italic;
font-size: 0.9em;
margin-left: 10px;
}
.cover
{
.headleft {
float: left;
padding:5px 10px;
}
header h1{
float:none;
padding-top:25px;
}
.headright {
float: right;
}
/* =============================================================================
Section and Article stuff goes here
========================================================================== */
section {
clear:both;
background-color: #fff;
}
article {
border-bottom: 1px solid black;
}
/*-------------frontpage article-------------*/
.frontpage h2 {
padding: 5px 0 0 5px;
}
.frontpage h4 {
padding: 5px 0 5px 20px;
font-style: italic;
}
/*-------------books article-------------*/
.books {
clear: both;
padding: 10px;
}
.cover {
float:left;
padding: 0 10px 0 0;
min-width: 56px;
min-height: 70px;
}
.download
{
.download {
float: right;
}
.button
{
height:36px;
display: table;
width:80px;
margin:2px;
}
.button p, .button a
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#loading
{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
}
.entrySection
{
margin-top: 8px;
margin-bottom: 18px;
line-height: 1.5em;
}
.entrySection span
{
font-style:italic;
font-size: 1em;
}
.buttonEffect a
{
.download a {
border-radius: 6px;
box-shadow:0 0 10px #000;
background: darkgray;
background: -moz-radial-gradient(#666, black);
background: -webkit-radial-gradient(#666, black);
background: -ms-radial-gradient(#666, black);
background: radial-gradient(#666, black);
color: #EEE;
text-decoration : none;
font-weight: bold;
padding: 5px;
}
.pad6 a
{
padding: 6px;
}
.pad6
{
.books h4{
display: inline;
font-style: italic;
}
.menu
/* =============================================================================
Footer stuff goes here
========================================================================== */
footer
{
clear:both;
box-shadow:inset 0px 5px 8px #000000;
border-radius: 0px 0px 10px 10px;
height:32px;
}
footer a{
float: right;
}
/* =============================================================================
Aside stuff goes here
========================================================================== */
aside
{
float: right;
width : 250px;
@ -233,6 +167,7 @@ position: absolute;
background: white;
}
/*-------------Search Aside-------------*/
.search form
{
background-color: black;
@ -253,26 +188,43 @@ float:right;
padding: 3px 2px;
}
.bookdetail
#loading
{
color:black;
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
}
.bookpopup
{
min-width: 400px;
color:black;
/* =============================================================================
Mediaquerie stuff goes here
========================================================================== */
/* 100px and greater */
@media only screen and (min-width: 100px) {
h1 {font-size: 1em;}
.container { width:100%; }
}
.entries > .bookpopup, .entries > .bookdetail
{
background-color: white;
margin-bottom: 5px;
padding: 6px;
/* 320px and greater */
@media only screen and (min-width: 320px) {
h1 {font-size: 1.2em;}
}
.content
{
line-height: 110%;
/* 480px and greater */
@media only screen and (min-width: 480px) {
h1 {font-size: 1.5em;}
}
/* 810px and greater */
@media only screen and (min-width: 768px) {
h1 {font-size: 2em;}
.container { box-shadow:0 0 20px #000; }
body { margin: 5px; }
}