www: new design

2 files changed, 53 insertions, 63 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index bad1d415..321de92d 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -214,7 +214,7 @@ function wsIncomingReply(msg) {
     li.innerHTML = msgContHtml;
     li.addEventListener('click', newReply);
     li.addEventListener('mouseover', newReply);
-    li.querySelector('.msg-menu > a').addEventListener('click', function (e) {
+    li.querySelector('.msg-menu').addEventListener('click', function (e) {
         showMessageLinksDialog(msg.mid, msg.rid);
         e.preventDefault();
     });
@@ -715,7 +715,7 @@ ready(function () {
         }
     }
 
-    document.querySelectorAll('.msg-menu a').forEach(function (el) {
+    document.querySelectorAll('.msg-menu').forEach(function (el) {
         el.addEventListener('click', function (e) {
             var reply = e.target.closest('li');
             var rid = reply ? parseInt(reply.id) : 0;
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index cf90bae9..acc0eaf0 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -21,12 +21,18 @@ textarea {
     -webkit-font-smoothing: subpixel-antialiased;
 }
 html {
-    background: #EEEEE5;
+    background: #eaeadf;
     color: #222;
 }
 #wrapper {
     margin: 0 auto;
     width: 1000px;
+    margin-top: 50px;
+}
+#header_wrapper {
+    margin: 0 auto;
+    width: 1000px;
+    display: flex;
 }
 h1,
 h2 {
@@ -68,20 +74,25 @@ pre::-moz-selection {
 }
 #content {
     float: right;
-    margin: 25px 0 0 0;
+    margin: 12px 0 0 0;
     width: 728px;
 }
 #topwrapper {
     clear: both;
     position: relative;
 }
+body > header {
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+    background: #f2f2ec;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
 body > header a {
-    border-bottom: 1px dotted #666;
-    color: #222;
+    color: #069;
     font-size: 13pt;
 }
 #logo {
-    float: left;
     height: 36px;
     margin: 7px 25px 0 20px;
     width: 110px;
@@ -103,14 +114,13 @@ body > header a {
     }
 }
 #global {
-    float: left;
+    flex-grow: 1;
 }
 #global li {
     display: inline-block;
     margin: 14px 12px 0 0;
 }
 #search {
-    float: right;
     margin: 12px 20px 12px 0;
 }
 #search input {
@@ -119,17 +129,12 @@ body > header a {
     padding: 4px;
 }
 #headdiv {
-    background: #DDDDD5;
     border-bottom: 1px solid #D5D5D0;
-    border-top: 1px solid #D5D5D0;
-    clear: both;
-    margin: 0 0 5px 0;
     padding: 0 20px;
-    position: relative;
 }
-#headdiv li {
-    display: inline-block;
-    margin: 12px 12px 12px 0;
+#headdiv p {
+    padding: 12px;
+    text-align: center;
 }
 #actions {
     position: absolute;
@@ -138,7 +143,7 @@ body > header a {
 }
 body > header nav li:after {
     color: #AAA;
-    content: "/";
+    content: "|";
     display: inline-block;
     margin-left: 12px;
 }
@@ -187,8 +192,9 @@ body > header p {
 }
 article {
     background: #fff;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     line-height: 140%;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     padding: 20px;
 }
 article aside {
@@ -202,7 +208,6 @@ article aside img {
     width: 48px;
 }
 article time {
-    border-bottom: 1px dotted #999;
     color: #999;
     font-size: 10pt;
 }
@@ -226,12 +231,13 @@ article .ir a {
 article .ir img {
     max-width: 100%;
 }
-article > nav.l {
-    display: inline-block;
+article > nav.l,
+.msg-cont > nav.l {
+    display: flex;
     font-size: 10pt;
 }
-article > nav.l a {
-    border-bottom: 1px dotted #AAA;
+article > nav.l a,
+.msg-cont > nav.l a {
     color: #888;
     margin-right: 15px;
 }
@@ -278,7 +284,7 @@ article .tags {
 }
 article .tags > a,
 .msg-tags > a {
-    border: 1px dotted #ccc;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     color: #888;
     display: inline-block;
     font-size: 10pt;
@@ -313,24 +319,12 @@ article .tags > a,
 }
 .msg-cont {
     background: #FFF;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     line-height: 140%;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     padding: 20px;
     width: 640px;
 }
-.msg-menu {
-    float: right;
-    height: 16px;
-    margin-left: 10px;
-    margin-top: 2.4px;
-    width: 16px;
-}
-.msg-menu > a {
-    color: #666;
-    display: block;
-    height: 16px;
-    width: 16px;
-}
 .msg-ts,
 article .t {
     float: right;
@@ -434,24 +428,7 @@ q {
     padding-left: 10px;
 }
 .toolbar {
-    background: #E5E5DD;
     border-top: 1px solid #CCC;
-    width: 680px;
-}
-.toolbar ul,
-.toolbar a {
-    padding: 5px;
-}
-.toolbar li {
-    display: inline;
-}
-.toolbar div {
-    background: url("toolbar-icons.png") no-repeat;
-    display: inline-block;
-    height: 16px;
-    margin: 5px;
-    vertical-align: middle;
-    width: 16px;
 }
 #replies .msg-txt,
 #private-messages .msg-txt {
@@ -538,8 +515,15 @@ q {
 #column hr {
     margin: 10px 0;
 }
-#column li {
-    margin: 6px 0;
+#column li > a {
+    display: block;
+    height: 100%;
+    padding: 6px;
+}
+#column li > a:hover {
+    background-color: #f2f2ec;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s ease-in;
 }
 #column .margtop {
     margin-top: 15px;
@@ -564,6 +548,7 @@ q {
 #ctitle img {
     margin-right: 5px;
     vertical-align: middle;
+    width: 48px;
 }
 #ustats li {
     font-size: 10pt;
@@ -837,6 +822,9 @@ article.nsfw .ir img:hover {
         min-width: 310px;
         width: auto;
     }
+    #wrapper {
+        margin-top: 50px;
+    }
     body > header {
         margin-bottom: 15px;
     }
@@ -884,11 +872,13 @@ article.nsfw .ir img:hover {
     article p {
         margin: 10px 0 8px 0;
     }
-    article > nav.l {
-        display: block;
-        float: left;
-        line-height: 15pt;
-        width: 80%;
+    article > nav.l,
+    .msg-cont > nav.l {
+        flex-direction: column;
+    }
+    article > nav.l a,
+    .msg-cont > nav.l a {
+        padding: 6px;
     }
     article > nav.s {
         display: block;