v1.0 beta init

public/css/blog/p.css

@@ -120,6 +120,7 @@ a:hover {
   height: auto;
   margin-top: 3px;
   border-color: #ccc;
+  float: right;
 }
 #keywords:focus {
   outline: none;
@@ -154,7 +155,7 @@ a:hover {
 }
 .thumbnails {
   padding: 0;
-  margin: 35px 0 0;
+  margin: 25px 0 0;
 }
 .thumbnails > li {
   position: relative;
@@ -163,13 +164,20 @@ a:hover {
   padding-bottom: 15px;
   border-bottom: 1px dashed #d9d9d9;
 }
+a:hover {
+  color: #2a6496;
+}
 .article .title {
-  padding-right: 40px;
+  display: inline-block;
+  margin-right: 40px;
   color: #3b3b3b;
   font-size: 24px;
   font-weight: bold;
   line-height: 36px;
 }
+.article .title:hover {
+  color: #2a6496;
+}
 .article .content {
   color: #717171;
   font-size: 14px;
@@ -178,6 +186,7 @@ a:hover {
 }
 .article .article-info {
   margin-top: 5px;
+  color: #999999;
 }
 .article .article-info a {
   color: #999999;
@@ -185,7 +194,7 @@ a:hover {
 .article .article-info > a {
   margin-right: 10px;
 }
-.article .avatar {
+.avatar {
   position: absolute;
   top: 1px;
   right: 1px;
@@ -196,7 +205,7 @@ a:hover {
   -moz-border-radius: 50%;
   border-radius: 50%;
 }
-.article .avatar img {
+.avatar img {
   max-height: 32px;
   border: 2px solid white;
   -webkit-border-radius: 50%;
@@ -236,3 +245,94 @@ a:hover {
 #footer a {
   color: #ccc;
 }
+#navbarUser {
+  float: right;
+  line-height: 50px;
+  margin-right: 10px;
+}
+#navbarUser a {
+  color: #666;
+}
+#navbarUser .my-logo {
+  max-height: 32px;
+  border: 2px solid white;
+  max-width: 100px;
+  border-radius: 50%;
+  margin-top: -3px;
+}
+.dropdown-menu:before {
+  content: "";
+  width: 20px;
+  height: 12px;
+  position: absolute;
+  top: -12px;
+  right: 20px;
+  background-image: url("../../images/triangle_2x.png");
+  background-size: 20px 12px;
+}
+.open > .dropdown-menu,
+.dropdown-submenu:hover > .dropdown-menu {
+  opacity: 1;
+  transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  -o-transform: scale(1, 1);
+}
+.dropdown-menu {
+  opacity: 0;
+  display: block;
+  -webkit-transform: scale(0, 0);
+  -webkit-transform-origin: top;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+  -o-transform: scale(0, 0);
+  -o-transform-origin: top;
+  -o-animation-fill-mode: forwards;
+  -o-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+  -moz-transform: scale(0, 0);
+  -moz-transform-origin: top;
+  -moz-animation-fill-mode: forwards;
+  -moz-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+  transform: scale(0, 0);
+  transform-origin: top;
+  animation-fill-mode: forwards;
+  transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+}
+a:focus {
+  text-decoration: none;
+}
+@media screen and (max-width: 780px) {
+  #navbarUser {
+    display: none;
+  }
+  #keywords {
+    float: none;
+    width: 100%;
+  }
+  #navbar {
+    padding: 0 10px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 600px) {
+  #content {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+#searchInfo {
+  margin-top: 20px;
+}
+#searchInfo .keywords-info,
+#searchInfo .keywords-title {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 18px;
+}
+#searchInfo .keywords-title {
+  font-weight: bold;
+}
+#searchInfo .clear-search {
+  display: inline-block;
+  color: #a94442;
+}