better homepage with nav bar on top

3 files changed, 64 insertions, 24 deletions

diff --git a/data/CMakeLists.txt b/data/CMakeLists.txt
index 9eb59933..34676cf0 100644
--- a/data/CMakeLists.txt
+++ b/data/CMakeLists.txt
@@ -1,5 +1,5 @@
 INSTALL( 
-    FILES bg.png bot.gif busywidget.gif closed.png loading.mng open.png tile.gif top.png webkit-icon.png    
+    FILES bg.png bot.gif busywidget.gif closed.png loading.mng open.png tile.gif top.png webkit-icon.png category.png   
     DESTINATION ${DATA_INSTALL_DIR}/rekonq/pics
 )
 
diff --git a/data/category.png b/data/category.png
new file mode 100644
index 00000000..52df230d
--- /dev/null
+++ b/data/category.png
diff --git a/data/home.html b/data/home.html
index d709a1dc..c2953e40 100644
--- a/data/home.html
+++ b/data/home.html
@@ -9,17 +9,16 @@
 /* ------------------------------------------------------- */
 /* generic styles */
 
-html{
+html, body, div, h1, h2, h3, h4, a, p{
 margin:0;
 padding:0;
+border:0;
 }
 
 body{
 background: url(%1/tile.gif) repeat-x #fff;
-margin:0;
-padding:0;
 font-family: sans-serif;
-font-size: 100%;
+font-size: 90%;
 text-align: center;
 }
 
@@ -28,7 +27,8 @@ font: normal bold 2em sans-serif;
 text-align:right;
 color: #3F7AB7;
 margin-right:3%;
-margin-bottom: 20px;
+margin-top: 0.5%;
+float:right;
 }
 
 h2{
@@ -37,6 +37,27 @@ color: #3F7AB7;
 margin-top: 2em;
 }
 
+h3{
+background: url(%1/category.png) no-repeat;
+padding: 0.2em;
+margin-top: 1em;
+margin-bottom: 0.5em;
+padding-left: 0.4em;
+}
+
+h4{
+font-size: 1em;
+margin-top: 0.5em;
+}
+
+a{
+color: #3F7AB7;
+text-decoration: none;
+}
+a:hover{
+color: black;
+}
+
 /* ------------------------------------------------------- */
 /* page sections */
 
@@ -45,47 +66,58 @@ width: 100%;
 }
 
 #navigation {
-float: right;
-width: 20%;
-text-align:center;
+margin-top: 1%;
+text-align: center;
 }
 
 #content {
-width: 80%;
 text-align: left;
-margin: 20px;
+margin: 2%;
 }
 
-.link {
-width:96%;
-margin: 10px 0;
-background-color:#3F7AB7;
-}
 /* -------------------------------------------------------- */
 /* div navigations styles */
 
-div.link a{
-color:#FFF;
+.link{
+display: inline-block;
+padding: 0 2%;
+}
+
+.link img{
+float:left;
+}
+
+.link a{
+color: black;
 text-decoration:none;
 font: normal bold 1.2em/2.5em sans-serif;
+vertical-align: middle;
 }
 
-div.link a:hover{
-color: #ff0;
+#navigation .link:not(.current):not(.link:hover){
+-webkit-opacity: 0.3;
 }
 
+
 /* -------------------------------------------------------- */
 /* Thumbnail class */
 
 .thumbnail {
-background: url(%1/bg.png) no-repeat;
 text-align: center;
 float:left;
-width:228px;
-padding: 11px 0px 0px 0px;
-margin: 10px 10px 10px 0;
+width: 25%;
+min-width: 235px;
+margin-bottom: 3%;
 }
 
+.thumbnail object{
+background: url(%1/bg.png) no-repeat;
+text-align: center;
+padding: 14px 16px;
+-webkit-background-size: 100% 100%;
+-webkit-background-clip: padding;
+cursor: pointer;
+}
 .thumbnail a {
 display: block;
 text-align: center;
@@ -95,6 +127,14 @@ text-decoration:none;
 }
 
 /* -------------------------------------------------------- */
+/* Bookmarks page*/
+
+.bookfolder{
+margin-left: 2em;
+margin-bottom: 0.5em;
+}
+
+/* -------------------------------------------------------- */
 </style>
 </head>