1 files changed, 55 insertions, 26 deletions

diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 24108030..69c29f07 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -85,6 +85,11 @@ html {
     margin: 12px 0 0 0;
     width: 728px;
 }
+#minimal_content {
+    margin: 0 auto;
+    min-width: 310px;
+    width: auto;
+}
 body > header {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
     background: #fff;
@@ -92,11 +97,26 @@ body > header {
     top: 0;
     width: 100%;
     z-index: 10;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transition-property: -webkit-transform;
+    transition-property: transform;
 }
 #header_wrapper {
     margin: 0 auto;
     width: 1000px;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 4px;
+}
+.header--hidden {
+    -webkit-transform: translateY(-100%);
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%);
 }
 #footer {
     clear: both;
@@ -142,7 +162,6 @@ body > header {
 
 #logo {
     height: 36px;
-    margin: 7px 25px 0 20px;
     width: 110px;
 }
 #logo a {
@@ -157,7 +176,6 @@ body > header {
     width: 110px;
 }
 #global {
-    flex-grow: 1;
     display: flex;
 }
 #global a {
@@ -169,31 +187,24 @@ body > header {
 #global li {
     display: inline-block;
 }
+#ctitle a {
+    padding: 14px;
+}
 #global li:hover,
+#ctitle a:hover,
 .l a:hover {
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     cursor: pointer;
     transition: box-shadow 0.2s ease-in;
 }
-#search {
-    margin: 12px 20px 12px 0;
-}
 #search input {
     background: #FFF;
-    border: 1px solid #DDDDD5;
+    border: 1px solid #ccc;
     outline: none !important;
     padding: 4px;
-}
-@media screen and (max-width: 850px) {
-    #logo {
-        display: none;
-    }
-    #search {
-        display: inline-block;
-        float: none;
-        margin: 10px 10px;
-    }
+    -webkit-appearance: none;
+    border-radius: 0;
 }
 
 /* #endregion */
@@ -262,10 +273,12 @@ body > header {
 /* #endregion */
 
 /* #region main content */
-
 #content > p,
 #content > h1,
-#content > h2 {
+#content > h2,
+#minimal_content > p,
+#minimal_content > h1,
+#minimal_content > h2 {
     margin: 1em 0;
 }
 .page {
@@ -331,10 +344,11 @@ article .tags {
     margin-top: 3px;
 }
 .msg-tags {
-    margin-top: 5px;
-    min-height: 30px;
+    margin-top: 12px;
+    min-height: 1px;
 }
 article .tags > a,
+.badge,
 .msg-tags > a {
     background: #eee;
     border: 1px solid #eee;
@@ -382,7 +396,6 @@ article .tags > a,
     border-right: 5px solid #0C0;
 }
 .msg-ts {
-    float: right;
     font-size: small;
     vertical-align: top;
 }
@@ -478,6 +491,16 @@ article .tags > a,
 }
 
 @media screen and (max-width: 850px) {
+    #header_wrapper {
+        width: auto;
+    }
+    #global {
+        justify-content: space-around;
+        flex-grow: 1;
+    }
+    #search {
+        padding: 4px;
+    }
     article {
         overflow: auto;
     }
@@ -509,12 +532,18 @@ article .tags > a,
 }
 
 @media screen and (max-width: 480px) {
-    .msg-ts {
-        float: none;
+    #wrapper {
+        margin-top: 104px;
+    }
+    #search {
+        display: none;
+    }
+    #global a {
+        padding: 14px 2px;
     }
-    .msg-tags {
-        margin-top: 10px;
-        min-height: 1px;
+    .msg-cont > nav.l,
+    article > nav.l {
+        font-size: 9pt;
     }
     .msg-txt {
         padding-top: 5px;