diff server_css/blog.css @ 702:d94feb0d849e

server_side: give a better look to the static blog
author souliane <souliane@mailoo.org>
date Mon, 11 May 2015 14:54:41 +0200
parents 3eb3a2c0c011
children
line wrap: on
line diff
--- a/server_css/blog.css	Wed May 27 19:11:25 2015 +0200
+++ b/server_css/blog.css	Mon May 11 14:54:41 2015 +0200
@@ -16,16 +16,30 @@
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.mblog_title, .mblog_title a {
-    text-align: center;
-    text-decoration: none;
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    background: url("../media/icons/dokuwiki/tpl/page-gradient.png") repeat-x scroll left top #FBFAF9;
+}
+
+.mblog_title {
     font-size: x-large;
     font-weight: bold;
-    margin-bottom: 40px;
+    margin: 20px;
     font-family: FreeSans, Liberation Sans, Arial, sans-serif;
     color: rgb(51, 51, 51);
 }
 
+.mblog_title a {
+    text-decoration: none;
+    color: rgb(51, 51, 51);
+}
+
 .mblog_entry {
     width: 60%;
     text-align: justify;
@@ -41,6 +55,8 @@
 }
 
 .mblog_comments{
+    background: url("../media/icons/dokuwiki_plugins/include/comment.gif") no-repeat scroll 0px 2px transparent;
+    padding: 0px 0px 0px 18px;
 }
 
 .mblog_comment {
@@ -51,7 +67,7 @@
 
 .mblog_header {
     font-size: small;
-    border-bottom: 1px dashed LightGrey;
+    border-bottom: 1px dotted #ccc;
     color: gray;
     display: table;
     width: 100%;
@@ -66,7 +82,7 @@
 
 .mblog_footer {
     font-size: small;
-    border-top: 1px dashed LightGrey;
+    border-top: 1px dotted #ccc;
     color: gray;
     display: table;
     width: 100%;
@@ -90,7 +106,9 @@
 
 .mblog_timestamp {
     display: table-cell;
-    text-align: right;
+    float: right;
+    background: url("../media/icons/dokuwiki_plugins/include/date.gif") no-repeat scroll 0px 1px transparent;
+    padding: 0px 0px 0px 18px;
 }
 
 .mblog_content {
@@ -108,36 +126,37 @@
     display: block;
 }
 
-.header {
-    width: 60%;
-    margin: auto;
-    margin-bottom: 20px;
+.header, .footer {
+    margin: 20px;
+    height: 20px;
     text-align: center;
+    border-top: 1px solid #CCC;
+    border-bottom: 1px solid #CCC;
 }
 
-.footer {
-    width: 100%;
-    text-align:center;
+.header_content, .footer_content {
+    margin: 0px 20%;
 }
 
 .later_message {
     text-decoration: none;
     float: left;
-}
-
-.later_messages {
-    text-decoration: none;
-    text-align:center;
+    color: #2B73B7;
+    font-size: smaller;
 }
 
 .older_message {
     text-decoration: none;
     float: right;
+    color: #2B73B7;
+    font-size: smaller;
 }
 
-.older_messages {
+.later_messages, .older_messages {
     text-decoration: none;
     text-align:center;
+    color: #2B73B7;
+    font-size: smaller;
 }
 
 .mblog_entry h1, h2, h3, h4, h5, h6 {
@@ -156,4 +175,7 @@
 .mblog_title img {
     max-width: 800px;
     max-height: 150px;
+    vertical-align: middle;
+    margin-right: 10px;
+    border-radius: 5px;
 }
\ No newline at end of file