diff options
Diffstat (limited to 'src/data/home.html')
| -rw-r--r-- | src/data/home.html | 239 |
1 files changed, 152 insertions, 87 deletions
diff --git a/src/data/home.html b/src/data/home.html index 9d8f390f..25236743 100644 --- a/src/data/home.html +++ b/src/data/home.html @@ -6,134 +6,170 @@ <style type="text/css"> -/* ------------------------------------------------------- */ -/* generic styles */ - -html, body, div, h1, h2, h3, h4, a, p{ -margin:0; -padding:0; -border:0; +/* -------------------------------------------------------- */ +/* css reset */ +* { +border: 0; padding: 0; margin: 0; } -body{ +/* -------------------------------------------------------- */ +/* generic styles */ + +body { background: url(%2/tile.gif) repeat-x #fff; -font-family: sans-serif; -font-size: 0.8em; -text-align: center; +font-family: sans-serif; font-size: 0.8em; } -h1{ -font: normal bold 2em sans-serif; -text-align:right; -color: #3F7AB7; -margin-right:3%; -margin-top: 0.5%; -float:right; +#rekonq-newtabpage { +width: 100%; +text-align: center; /* center #navigation */ } -h2{ -font: normal bold 1.2em sans-serif; -color: #3F7AB7; -margin-top: 2em; +#content { +text-align: left; +margin: 0 1% 2% 1%; } -h3{ +h3 { border-bottom-width: 1px; -webkit-border-image: url(%2/category.png) 1 1 1 1 stretch stretch; -padding: 0.2em; -margin-top: 0.5em; -margin-bottom: 0.5em; -font: normal bold 1em sans-serif; +padding: 0.2em; margin: 0.5em 0; +font: normal bold 1em; } -h4{ -font-size: 1em; -margin-top: 0.5em; -} - -a{ +a { color: #3F7AB7; text-decoration: none; +-webkit-transition-property: color; +-webkit-transition-duration: 0.5s; +-webkit-transition-timing-function: ease; } -a:hover{ +a:hover { color: black; } -/* ------------------------------------------------------- */ -/* page sections */ +/* -------------------------------------------------------- */ +/* Top bar */ -#container { -width: 100%; +#top { +margin: 20px; } -#navigation { +.topBar { display: inline-block; -margin-top: 2%; -margin-bottom: 2%; -text-align: center; border-width: 5px; --webkit-border-image: url(%2/bg2.png) 12 12 12 12 stretch stretch; } -#content { -text-align: left; -margin: 2%; +#navigation { +-webkit-border-image: url(%2/bg2.png) 12 12 12 12 stretch stretch; +max-width: 55%; } -/* -------------------------------------------------------- */ -/* div navigations styles */ +#actions, #balance { +margin-top: 12px; +width: 20%; +} -.link{ -display: inline-block; +#actions { +float: right; } -.link img{ -vertical-align: middle; -margin-right: 5px; +#balance { +display: hidden; float: left; +height: 16px; } -.link a{ +.link { +display: inline-block; +} +.link img, .link span { +vertical-align: middle; display: inline-block; +} +.link a, .link span { color: black; -text-decoration:none; -font: normal 1em sans-serif; +} + +#actions .link { +-webkit-transition-property: opacity; +-webkit-transition-duration: 0.8s; +-webkit-transition-timing-function: ease; +opacity: 0.2; +} +#actions .link:hover { +opacity: 1; +} +#actions .link img { +margin-right: 3px; width: 16px; } .current{ border-width: 6px; -webkit-border-image: url(%2/button.png) 6 stretch stretch; } - -#navigation .link:not(.current){ -margin-right: 10px; -margin-left: 10px; +.link:not(.current){ +margin: 0 10px; } +/* -------------------------------------------------------- */ +/* Previews */ -.favorites{ +#content.favorites, #content.closedTabs { text-align: center; -margin-top: -5%; } -/* -------------------------------------------------------- */ -/* Thumbnail class */ - .thumbnail { -text-align: center; display: inline-block; -width:25%; -margin-top: 7%; -min-width:250px; -min-height:192px; +width: 25%; min-width: 240px; +height: 170px; +margin: 3% 0 3% 0; } -.thumbnail object{ -text-align: center; -width:228px; -height:192px; +.thumb-inner { +width: 232px; /* 200 + 16*2 */ +margin: auto; +} + +.preview { +display: table-cell; vertical-align: middle; +width: 200px; height: 150px; +padding: 14px 16px 12px; +background: url(%2/bg.png) no-repeat; +-webkit-background-size: 100% 100%; +} + +.title { +padding: 0 12px; +} + +.thumbnail:hover .preview , +.thumbnail:hover .button img { +opacity: 0.8; +} +.button img, .preview { +-webkit-transition-property: opacity; +-webkit-transition-duration: 0.8s; +-webkit-transition-timing-function: ease-in-out; +} + +.button img { +display: inline-block; +width: 16px; +height: 16px; +opacity: 0; +} +.remove { +float: right; +} +.modify { +float: left; +} + +.thumbnail a:hover, .thumbnail span { +color:#3F7AB7; } /* -------------------------------------------------------- */ -/* Bookmarks page*/ +/* Bookmarks page */ .bookfolder{ margin-left: 2em; @@ -141,39 +177,68 @@ margin-bottom: 0.5em; } /* -------------------------------------------------------- */ +/* Downloads page */ + +.download{ +margin: 1.5em 0; +} + +.download img{ +float: left; +margin-right: 5px; +} + +/* -------------------------------------------------------- */ +/* Empty pages : in the end : need to overwrite */ +#content.empty { +margin-top: 10%; +text-align: center; +} + + </style> </head> <body> -<div id="container"> - <div id="navigation"> +<div id="rekonq-newtabpage"> + <div id="top"> + <div class="topBar" id="balance"></div> <!-- This # is the same size as #actions to center #navigation --> + <div class="topBar" id="navigation"></div> + <div class="topBar" id="actions"></div> </div> - <div id="content"> - </div> </div> <div id="models" style="display:none"> + <div></div> <div class="link"> <a href=""> <img src="" /> + <span></span> </a> </div> <div class="thumbnail"> - <object type="application/image-preview" data=""> - <param name="title" /> - <param name="index" /> - <param name="isFavorite" /> - </object> + <div class ="thumb-inner"> + <a> + <div class ="preview"> + <img /> + </div> + </a> + <div class="title"> + <a class="button modify"><img /></a> + <span><a></a></span> + <a class="button remove"><img /></a> + </div> + </div> </div> <h3></h3> <a></a> - </br> - <p class="bookfolder"></h3> + <br /> + <img /> + <p class="bookfolder"></p> </div> - </body> </html> |