#12720

metro-hot/css/base.scss

@@ -938,4 +938,192 @@ pre.prettyprint {
   font-weight: normal;
 }
 
-/* end dynamic */
+/* end dynamic */
+
+@media (max-width: 860px) and (min-width: 460px) {
+  .wrapper {
+    width: 720px;
+  }
+
+  .main {
+    width: 460px;
+  }
+
+  .form {
+    width: auto;
+  }
+
+  .form input {
+    width: 395px;
+  }
+
+  .form textarea {
+    width: 434px;
+  }
+
+  #comments .vditor-reset {
+    width: 340px;
+  }
+
+  #dynamic #comments .vditor-reset {
+    width: 283px;
+  }
+
+  .most-comment,
+  .most-view {
+    width: 300px;
+    margin-bottom: 20px;
+    margin-top: 40px;
+  }
+
+  .most-comment .text,
+  .most-view .text {
+    width: 195px;
+  }
+
+  .tags-tile,
+  .links-tile,
+  .archives-tile {
+    width: 670px;
+  }
+
+  .tags-tile .text,
+  .links-tile .text,
+  .archives-tile .text {
+    width: 580px;
+  }
+
+  .links-tile,
+  .tags-tile {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 460px) {
+  .side,
+  .top-info,
+  .header > .fn-left,
+  .comment-main {
+    float: none;
+  }
+
+  .wrapper,
+  .article-list > div,
+  .main,
+  .side {
+    width: 300px;
+  }
+
+  .sub-nav > .pagination,
+  .footer,
+  #comments > div > img {
+    display: none;
+  }
+
+  #search {
+    width: 237px;
+  }
+
+
+  .side-tile {
+    width: 94px;
+  }
+
+  .online-count,
+  .user,
+  .notice-board,
+  .share,
+  .article-relative {
+    width: 249px;
+  }
+
+  .main .pagination,
+  .main > .vditor-reset,
+  .comment-disabled,
+  #comments > div {
+    margin-right: 0;
+  }
+
+  .side > div,
+  #comments .vditor-reset {
+    position: static !important;
+    width: auto !important;
+  }
+
+  .share div.text {
+    left: 173px;
+  }
+
+  .form {
+    width: auto;
+  }
+
+  .form input {
+    width: 240px;
+  }
+
+  .form textarea {
+    width: 285px;
+    height: 150px;
+  }
+
+  #dynamic .main {
+    margin-bottom: 20px;
+  }
+
+  .tags-tile {
+    margin-bottom: 50px;
+  }
+
+  .article-title {
+    width: 280px;
+  }
+
+  .archives {
+    margin-right: 0;
+  }
+
+  .article-info > a {
+    padding: 3px;
+    font-size: 12px;
+  }
+
+  #dynamic #comments {
+    padding-left: 15px;
+  }
+
+  .tags-tile .title,
+  .links-tile .title,
+  .most-comment .title,
+  .most-view .title {
+    float: right;
+    font-size: 15px;
+    font-weight: bold;
+    margin: 20px 0 0 40px;
+  }
+
+  .most-comment,
+  .most-view {
+    width: 249px;
+    margin-left: 0;
+  }
+
+  .most-comment .text,
+  .most-view .text {
+    margin-right: 0;
+    width: 274px;
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  .tags-tile,
+  .links-tile {
+    width: 249px;
+    margin-left: 0;
+  }
+
+  .tags-tile .text,
+  .links-tile .text {
+    width: 249px;
+  }
+}