version 3.1:

* entirely new design (looks a lot better. Thanks to @not_eden and @agoptron for their advice)
* multi-author support (I won't use it yet)
* blogstyle.css serves as the "source" for blog.css
* displaying article eDate and author on entry page

6 files changed, 153 insertions, 138 deletions

diff --git a/TODO b/TODO
index fdb963dd790a..30448cf66704 100644
--- a/TODO
+++ b/TODO
@@ -1 +1,2 @@
 * Bootstrap: http://twitter.github.com/bootstrap/index.html
+* use forM_ ( http://jaspervdj.be/blaze/tutorial.html )
\ No newline at end of file
diff --git a/res/blog.css b/res/blog.css
new file mode 100644
index 000000000000..8ab3522d74b1
--- /dev/null
+++ b/res/blog.css
@@ -0,0 +1 @@
+@charset UTF-8;@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;src:local('PT Sans'), local(PTSans-Regular), url(http://themes.googleusercontent.com/static/fonts/ptsans/v2/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff) format(woff);}html,body{margin:0;padding:0;}body{padding-top:10px;font-family:'PT Sans', sans-serif;min-height:850px;background-color:#4A525A;color:#EEE;}a{color:#000;}input,textarea,select{border:1px solid #555;font-size:15px;line-height:1.2em;width:550px;background:#F9F9F9;-webkit-border-radius:.5em;padding:.5em;}.header{z-index:4;padding-left:20px;padding-bottom:70px;padding-top:30px;position:relative;box-shadow:0 6px 5px 1px #848F9A;}.link{color:#EEE;}.middle{position:relative;z-index:2;display:block;width:100%;padding-top:40px;background-color:#EEE;color:#000;}.footer{z-index:4;position:relative;background-color:#4A525A;margin-top:30px;padding-top:20px;box-shadow:0 -6px 5px 1px #848F9A;color:#EEE;}.btitle{text-decoration:none;color:#EEE;font-size:x-large;font-weight:700;margin-top:15px;margin-bottom:10px;}.contacts{float:left;}.righttext{float:right;padding-right:20px;}.rightbox{text-align:right;padding-right:14px;}.innerTitle{margin-left:10px;font-weight:700;}.innerBoxComments{margin-left:10px;}.innerContainer{padding-right:20px;}.centerbox{text-align:center;min-height:45px;}.cInput{margin-left:15px;}.tt{font-family:"courier new",courier,monospace;font-size:13px;}.cl{text-decoration:none;color:#000;}.cHead{font-size:large;font-weight:700;}.notFoundFace{text-align:center;font-size:100px;}.notFoundText{text-align:center;font-size:24px;font-weight:700;}
diff --git a/res/blogstyle.css b/res/blogstyle.css
index 3a5070ab342a..d58c405cdaf8 100644
--- a/res/blogstyle.css
+++ b/res/blogstyle.css
@@ -8,51 +8,118 @@
   src: local('PT Sans'), local('PTSans-Regular'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v2/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
 }
 
+html, body{
+	margin: 0;
+	padding: 0;
+}
+
 body {
-	padding-top: 20px;
+	padding-top: 10px;
 	font-family: 'PT Sans', sans-serif;
 	min-height: 850px;
-	background-image: linear-gradient(bottom, rgb(245,245,245) 66%, rgb(239,239,239) 83%);
-	background-image: -o-linear-gradient(bottom, rgb(245,245,245) 66%, rgb(239,239,239) 83%);
-	background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 66%, rgb(239,239,239) 83%);
-	background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 66%, rgb(239,239,239) 83%);
-	background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 66%, rgb(239,239,239) 83%);
-	background-image: -webkit-gradient(
-		linear,
-		left bottom,
-		left top,
-		color-stop(0.66, rgb(245,245,245)),
-		color-stop(0.83, rgb(239,239,239))
-	);
+	background-color: #4A525A;
+	color: #EEE;
 }
 
-.mainshell {
-	width: 98%;
-	margin: auto;
+a {
+	color: black;
 }
 
-.gradBox {
-	width: 98%;
-	margin: auto;
+input, textarea, select {
+   border: 1px solid #555;
+   padding: 0.5em;
+   font-size: 15px;
+   line-height: 1.2em;
+   width: 550px;
+   background: #F9F9F9;
+   -webkit-border-radius: 0.5em;
+ }
+
+/* site sections */
+.header {
+	z-index: 4;
+	padding-left: 20px;
+	padding-bottom: 70px;
+	padding-top:  30px;
+	position: relative;
+	box-shadow: 0 6px 5px 1px #848F9A;
 }
 
-.myclear {
-	clear: both;
-	height: 20px;
+.link {
+	color: #EEE;
 }
 
-.centerbox {
-	text-align:center;
-    min-height: 45px;
+.middle {
+	position: relative;
+	z-index: 2;
+	display: block;
+	width: 100%;
+	padding-top: 40px;
+	background-color: #EEE;
+	color: black;
+}
+
+.footer {
+	z-index: 4;
+	position: relative;
+	background-color: #4A525A;
+	margin-top: 30px;
+	padding-top: 20px;
+	box-shadow: 0 -6px 5px 1px #848F9A;
+	color: #EEE;
+}
+
+/* header elements */ 
+
+.btitle {
+	text-decoration:none;
+	color: #EEE;
+	font-size:x-large;
+	font-weight:bold;
+	margin-top: 15px;
+	margin-bottom: 10px;
+}
+
+.contacts {
+	float: left;
+}
+
+.righttext {
+	float:right;
+	padding-right: 20px;
 }
 
 .rightbox {
 	text-align:right;
+	padding-right: 14px;
 }
 
-.innerBox {
-	width: 100%;
-	margin-top: 20px;
+/* middle elements */
+.innerTitle {
+	margin-left: 10px;
+	font-weight: bold;
+}
+
+.innerBoxComments{
+	margin-left: 10px;
+}
+
+.innerContainer {
+	padding-right: 20px;
+
+}
+
+/* common elements */
+.centerbox {
+	text-align:center;
+    min-height: 45px;
+}
+
+
+/* style elements */
+
+.cInput {
+	margin-left: 15px;
 }
 
 .tt { 
@@ -69,56 +136,6 @@ body {
     font-weight:bold;
 }
 
-.innerBoxTop {
-	height: 28px;
-	color: #000000;
-	font-weight: bold;
-	font-size: 16px;
-	padding-left: 20px;
-	padding-top: 11px;
-	border: 1px solid #b6b6b6;
-	border-top-left-radius: 6px;
-	border-top-right-radius: 6px;
-	-moz-border-radius-topleft: 6px;
-	-moz-border-radius-topright: 6px;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-top-right-radius: 6px;	
-	border-bottom: 1px solid #dcdcdc;
-	background-image: linear-gradient(bottom, rgb(246,246,246) 31%, rgb(234,234,234) 83%);
-	background-image: -o-linear-gradient(bottom, rgb(246,246,246) 31%, rgb(234,234,234) 83%);
-	background-image: -moz-linear-gradient(bottom, rgb(246,246,246) 31%, rgb(234,234,234) 83%);
-	background-image: -webkit-linear-gradient(bottom, rgb(246,246,246) 31%, rgb(234,234,234) 83%);
-	background-image: -ms-linear-gradient(bottom, rgb(246,246,246) 31%, rgb(234,234,234) 83%);
-	
-	background-image: -webkit-gradient(
-		linear,
-		left bottom,
-		left top,
-		color-stop(0.31, rgb(246,246,246)),
-		color-stop(0.83, rgb(234,234,234))
-	);
-}
-
-.innerBoxMiddle {
-	border: 1px solid #b6b6b6;
-	border-bottom-left-radius: 6px;
-	border-bottom-right-radius: 6px;
-	-moz-border-radius-bottomleft: 6px;
-	-moz-border-radius-bottomright: 6px;
-	-webkit-border-bottom-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	border-top: 0px hidden;
-	background-color: #FFFFFF;
-	min-height: 500px;
-	height: auto;
-	padding-top: 21px;
-	padding-right: 2px;
-}
-
-.innerBoxComments {
-	padding-left: 20px
-}
-
 .notFoundFace {
 	text-align: center;
 	font-size: 100px;
@@ -129,12 +146,3 @@ body {
 	font-size: 24px;
 	font-weight: bold;
 }
-
-label span {
-    width: 6%;
-    float: left;
-}
-
-label input {
-    display: block;
-}
diff --git a/src/Blog.hs b/src/Blog.hs
index fd69d4df5fa4..33d7c37793ed 100644
--- a/src/Blog.hs
+++ b/src/Blog.hs
@@ -43,45 +43,43 @@ blogTemplate lang t_append body = H.docTypeHtml $ do --add body
     H.head $ do
         H.title $ (toHtml $ blogTitle lang t_append)
         H.link ! A.rel "alternate" ! A.type_ "application/rss+xml" ! A.title "RSS-Feed" ! A.href "/rss"
-        H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href "/res/blogstyle.css" ! A.media "all"
+        H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href "/res/blog.css" ! A.media "all"
         H.meta ! A.httpEquiv "content-type" ! A.content "text/html;charset=UTF-8"
         --H.style ! A.type_ "text/css" ! A.title "iOS iMessage" ! A.media "screen and (max-device-width: 1024px)" $ "#cosx{display:none;}"
         preEscapedText analytics
     H.body $ do
-        H.div ! A.class_ "mainshell" $ H.div ! A.class_ "gradBox" $ do
-            H.div ! A.class_ "header" $ do
-                H.a ! A.href (toValue $ "/" ++ show lang) ! 
-                    A.style "text-decoration:none;color:black;font-size:x-large;font-weight:bold;" $
-                        toHtml $ blogTitle lang ""
-                H.p ! A.style "clear: both;" $ do
-                    H.span ! A.style "float: left;" ! A.id "cosx" $ H.b $ contactInfo iMessage
-                   -- H.span ! A.id "cios" ! A.style "display:none;" $ H.b $ contactInfo "sms:tazjin@me.com"
-                    H.span ! A.style "float:right;" $ preEscapedText $ rightText lang
-            H.div ! A.class_ "myclear" $ mempty
+        H.div ! A.class_ "header" $ do
+            H.a ! A.class_ "btitle" ! A.href (toValue $ "/" ++ show lang) $ 
+                toHtml $ blogTitle lang ""
+            H.p ! A.style "clear: both;" $ do
+                H.span ! A.class_ "contacts" ! A.id "cosx" $ H.b $ contactInfo iMessage
+                -- H.span ! A.id "cios" ! A.style "display:none;" $ H.b $ contactInfo "sms:tazjin@me.com"
+                H.span ! A.class_ "righttext" $ preEscapedText $ rightText lang
+        H.div ! A.class_ "middle" $ do
             body
-            H.div ! A.class_ "myclear" $ mempty
-            showFooter lang $ T.pack version
-        H.div ! A.class_ "centerbox" $
-            H.img ! A.src "http://getpunchd.com/img/june/idiots.png" ! A.alt ""
+            H.div ! A.class_ "footer" $ do
+                showFooter lang $ T.pack version
+                H.div ! A.class_ "centerbox" $
+                    H.span ! A.style "font-size: 17px; font-family: Helvetica;" $ "ಠ_ಠ"
+                    --H.img ! A.src "http://cl.ly/F9m4/idiots.png" ! A.alt ""
     where
         contactInfo (imu :: Text) = do
             toHtml $ contactText lang
-            H.a ! A.href (toValue mailTo) $ "Mail"
+            H.a ! A.class_ "link" ! A.href (toValue mailTo) $ "Mail"
             ", "
-            H.a ! A.href (toValue twitter) ! A.target "_blank" $ "Twitter"
+            H.a ! A.class_ "link" ! A.href (toValue twitter) ! A.target "_blank" $ "Twitter"
             toHtml $ orText lang
-            H.a ! A.href (toValue imu) ! A.target "_blank" $ "iMessage"
+            H.a ! A.class_ "link" ! A.href (toValue imu) ! A.target "_blank" $ "iMessage"
             "."
 
 renderEntries :: Bool -> [Entry] -> Text -> Maybe Html -> Html
-renderEntries showAll entries topText footerLinks = 
-    H.div ! A.class_ "innerBox" $ do
-        H.div ! A.class_ "innerBoxTop" $ toHtml topText
-        H.div ! A.class_ "innerBoxMiddle" $ do
-            H.ul $ if' showAll
-                (sequence_ $ map showEntry entries)
-                (sequence_ . take 6 $ map showEntry entries)
-            getFooterLinks footerLinks
+renderEntries showAll entries topText footerLinks = do
+    H.span ! A.class_ "innerTitle" $ toHtml topText
+    H.div ! A.class_ "innerContainer" $ do
+        H.ul $ if' showAll
+            (sequence_ $ map showEntry entries)
+            (sequence_ . take 6 $ map showEntry entries)
+        getFooterLinks footerLinks
     where
         showEntry :: Entry -> Html
         showEntry e = H.li $ do 
@@ -99,9 +97,10 @@ renderEntries showAll entries topText footerLinks =
         getFooterLinks Nothing = mempty
 
 renderEntry :: Entry -> Html
-renderEntry (Entry{..}) = H.div ! A.class_ "innerBox" $ do
-    H.div ! A.class_ "innerBoxTop" $ toHtml $ title
-    H.div ! A.class_ "innerBoxMiddle" $ do
+renderEntry (Entry{..}) = do
+    H.span ! A.class_ "innerTitle" $ toHtml $ title
+    H.span ! A.class_ "righttext" $ H.i $ toHtml $ woText
+    H.div ! A.class_ "innerContainer" $ do
         H.article $ H.ul $ H.li $ do
             preEscapedText $ btext
             H.p $ preEscapedText $ mtext
@@ -109,18 +108,17 @@ renderEntry (Entry{..}) = H.div ! A.class_ "innerBox" $ do
             H.div ! A.class_ "cHead" $ toHtml $ cHead lang -- ! A.style "font-size:large;font-weight:bold;"
             H.ul $ renderComments comments lang
             renderCommentBox lang entryId
+  where
+    woText = flip T.append author $ T.pack $ (formatTime defaultTimeLocale (eTimeFormat lang) edate) 
 
 renderCommentBox :: BlogLang -> EntryId -> Html
 renderCommentBox cLang cId = do
     H.div ! A.class_ "cHead" $ toHtml $ cwHead cLang
     H.form ! A.method "POST" ! A.action (toValue $ "/" ++ (show cLang) ++  "/postcomment/" ++ show cId) $ do
-        H.p $ H.label $ do
-            H.span $ "Name:" --toHtml ("Name:" :: String)
-            H.input ! A.name "cname"
-        H.p $ H.label $ do
-            H.span $ toHtml $ cSingle cLang -- toHtml (cSingle lang)
-            H.textarea ! A.name "ctext" ! A.cols "50" ! A.rows "13" $ mempty
-        H.p $ H.input ! A.type_ "submit" ! A.value (toValue $ cSend cLang)
+        H.p $ H.input ! A.name "cname" ! A.placeholder "Name" ! A.class_ "cInput"
+        H.p $ H.label $ H.textarea ! A.name "ctext" ! A.cols "50" ! A.rows "13" ! A.class_ "cInput" !
+                        A.placeholder (toValue $ cTextPlaceholder cLang) $ mempty
+        H.p $ H.input ! A.class_ "cInput" ! A.style "width: 120px;" ! A.type_ "submit" ! A.value (toValue $ cSend cLang)
 
 renderComments :: [Comment] -> BlogLang -> Html
 renderComments [] lang = H.li $ toHtml $ noComments lang
@@ -149,14 +147,14 @@ showLinks Nothing lang = H.div ! A.class_ "centerbox" $
 showFooter :: BlogLang -> Text -> Html
 showFooter l v = H.div ! A.class_ "rightbox" ! A.style "text-align:right;" $ do
     toHtml ("Proudly made with " :: Text)
-    H.a ! A.href "http://haskell.org" $ "Haskell"
+    H.a ! A.class_ "link" ! A.href "http://haskell.org" $ "Haskell"
     toHtml (", " :: Text)
-    H.a ! A.href "http://hackage.haskell.org/package/acid-state-0.6.3" $ "Acid-State"
+    H.a ! A.class_ "link" ! A.href "http://hackage.haskell.org/package/acid-state-0.6.3" $ "Acid-State"
     toHtml (" and without PHP, Java, Perl, MySQL and Python." :: Text)
     H.br
-    H.a ! A.href (toValue repoURL) $ toHtml $ T.append "Version " v
+    H.a ! A.class_ "link" ! A.href (toValue repoURL) $ toHtml $ T.append "Version " v
     preEscapedText " "
-    H.a ! A.href "/notice" $ toHtml $ noticeText l
+    H.a ! A.class_ "link" ! A.href "/notice" $ toHtml $ noticeText l
 
 showSiteNotice :: Html
 showSiteNotice = H.docTypeHtml $ do
@@ -190,7 +188,7 @@ adminLogin = adminTemplate "Login" $
     H.div ! A.class_ "loginBoxMiddle" $ H.form ! A.action "/dologin" ! A.method "post" $ do
         H.p $ "Account ID"
         H.p $ H.input ! A.type_ "text" ! A.style "font-size: 2;" 
-            ! A.name "account" ! A.value "tazjin" ! A.readonly "1"
+            ! A.name "account" -- ! A.value "tazjin" ! A.readonly "1"
         H.p $ "Passwort"
         H.p $ H.input ! A.type_ "password" ! A.style "font-size: 2;" ! A.name "password"
         H.p $ H.input ! A.alt "Anmelden" ! A.type_ "image" ! A.src "/res/signin.gif"
@@ -250,9 +248,8 @@ editPage (Entry{..}) = adminTemplate "Index" $
 
 -- Error pages
 showError :: BlogError -> BlogLang -> Html
-showError NotFound l = blogTemplate l (T.append ": " $ notFoundTitle l) $ 
-  H.div ! A.class_ "innerBox" $ do
-    H.div ! A.class_ "innerBoxTop" $ toHtml $ notFoundTitle l
-    H.div ! A.class_ "innerBoxMiddle" $ do
-        H.p ! A.class_ "notFoundFace" $ toHtml (":'(" :: Text)
-        H.p ! A.class_ "notFoundText" $ toHtml $ notFoundText l
+showError NotFound l = blogTemplate l (T.append ": " $ notFoundTitle l) $ do
+  H.span ! A.class_ "innerTitle" $ toHtml $ notFoundTitle l
+  H.div ! A.class_ "innerContainer" $ do
+    H.p ! A.class_ "notFoundFace" $ toHtml (":'(" :: Text)
+    H.p ! A.class_ "notFoundText" $ toHtml $ notFoundText l
diff --git a/src/Locales.hs b/src/Locales.hs
index 7d36b2d2b138..b73321f4f60b 100644
--- a/src/Locales.hs
+++ b/src/Locales.hs
@@ -13,7 +13,7 @@ import    BlogDB (BlogLang (..))
 
 data BlogError = NotFound | DBError
 
-version = "3.0"
+version = "3.1"
 
 allLang = [EN, DE]
 
@@ -76,6 +76,10 @@ readMore :: BlogLang -> Text
 readMore DE = "Weiterlesen"
 readMore EN = "Read more"
 
+eTimeFormat :: BlogLang -> String
+eTimeFormat DE = "Geschrieben am %d.%m.%y von "
+eTimeFormat EN = "Written on %D by "
+
 -- contact information
 contactText :: BlogLang -> Text
 contactText DE = "Wer mich kontaktieren will: "
@@ -115,6 +119,10 @@ cSend :: BlogLang -> Text
 cSend DE = "Absenden"
 cSend EN = "Submit"
 
+cTextPlaceholder :: BlogLang -> Text
+cTextPlaceholder DE = "Kommentartext hier eingeben :]"
+cTextPlaceholder EN = "Enter your comment here :]"
+
 -- errors
 notFoundTitle :: BlogLang -> Text
 notFoundTitle DE = "Nicht gefunden"
@@ -126,8 +134,8 @@ notFoundText EN = "The requested object could unfortunately not be found."
 
 -- right side text (this is inserted AS IS. Escape HTML!)
 rightText :: BlogLang -> Text
-rightText DE = "English version <a href=\"/en\" style=\"color: black;\">available here</a>."
-rightText EN = "Deutsche Version <a href=\"/de\" style=\"color: black;\">hier verf&uuml;gbar</a>."
+rightText DE = "English version <a href=\"/en\" class=\"link\">available here</a>."
+rightText EN = "Deutsche Version <a href=\"/de\" class=\"link\">hier verf&uuml;gbar</a>."
 
 -- static information
 repoURL   :: Text = "https://bitbucket.org/tazjin/tazblog-haskell"
diff --git a/src/Main.hs b/src/Main.hs
index ce423f932d9f..d376f9ef0995 100644
--- a/src/Main.hs
+++ b/src/Main.hs
@@ -146,7 +146,7 @@ postEntry acid = do
     nMtext <- lookText' "mtext"
     nEntry <- Entry <$> pure eId
                     <*> getLang lang
-                    <*> lookText' "author"
+                    <*> readCookieValue "sUser"
                     <*> lookText' "title"
                     <*> pure (entryEscape nBtext)
                     <*> pure (entryEscape nMtext)