💯 子模块目录调整

metro-hot/css/metro-hot-responsive.css

@@ -0,0 +1,215 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/*
+* skin metro-hot responsive style
+*
+* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+* @version 1.0.0.6, Sep 30, 2013
+*/
+@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;
+    }
+
+    .em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+        margin-right: 4px;
+    }
+
+    #comments .article-body {
+        width: 340px;
+    }
+
+    #dynamic #comments .article-body {
+        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,
+    #emotions {
+        display: none;
+    }
+
+    #search {
+        width: 237px;
+    }
+
+
+    .side-tile {
+        width: 94px;
+    }
+
+    .online-count, 
+    .user, 
+    .notice-board,
+    .share,
+    .article-relative {
+        width: 249px;   
+    }
+
+    .main .pagination,
+    .main > .article-body,
+    .comment-disabled,
+    #comments > div {
+        margin-right: 0;
+    }
+
+    .side > div,
+    #comments .article-body {
+        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;
+    }
+}

metro-hot/css/metro-hot-responsive.min.css

@@ -0,0 +1,18 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@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}.em00,.em01,.em02,.em03,.em04,.em05,.em06,.em07,.em08,.em09,.em10,.em11,.em12,.em13,.em14{margin-right:4px}#comments .article-body{width:340px}#dynamic #comments .article-body{width:283px}.most-comment,.most-view{width:300px;margin-bottom:20px;margin-top:40px}.most-comment .text,.most-view .text{width:195px}.archives-tile,.links-tile,.tags-tile{width:670px}.archives-tile .text,.links-tile .text,.tags-tile .text{width:580px}.links-tile,.tags-tile{margin-left:0}}@media (max-width:460px){#comments>div,.archives,.comment-disabled,.main .pagination,.main>.article-body{margin-right:0}.comment-main,.header>.fn-left,.side,.top-info{float:none}.article-list>div,.main,.side,.wrapper{width:300px}#comments>div>img,#emotions,.footer,.sub-nav>.pagination{display:none}#search{width:237px}.side-tile{width:94px}.article-relative,.notice-board,.online-count,.share,.user{width:249px}#comments .article-body,.side>div{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}.article-info>a{padding:3px;font-size:12px}#dynamic #comments{padding-left:15px}.links-tile .title,.most-comment .title,.most-view .title,.tags-tile .title{float:right;font-size:15px;font-weight:700;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:400}.links-tile,.tags-tile{width:249px;margin-left:0}.links-tile .text,.tags-tile .text{width:249px}}

metro-hot/css/metro-hot.css

@@ -0,0 +1,988 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@charset "utf-8";
+/*
+* skin metro-hot style
+*
+* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+* @version 1.1.0.0, Sep 21, 2017
+*/
+/* start base */
+@font-face {
+    font-family: 'IcoMoon';
+    src: url('font/IcoMoon.eot');
+    src: url('font/IcoMoon.eot?#iefix') format('embedded-opentype'),
+        url('font/IcoMoon.svg#IcoMoon') format('svg'),
+        url('font/IcoMoon.woff') format('woff'),
+        url('font/IcoMoon.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icos */
+[data-ico]:before {
+    font-family: 'IcoMoon';
+    content: attr(data-ico);
+    speak: none;
+    cursor: pointer;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+body {
+    font-family: Verdana, arial, '\5fae\8f6f\96c5\9ed1';
+    font-size: 12px;
+    background-color: #292929;
+    min-height: 1990px;
+    margin: 0;
+    color: #D1D2D1;
+}
+
+a {
+    outline: 0;
+    text-decoration: none;
+    color: #BDBEBD;
+}
+
+a:hover {
+    color: #FFF;
+}
+
+a:focus {
+    color: #9E0B0E !important;
+}
+
+sub,
+sup {
+    position: relative;
+    font-size: 70%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle;
+    font-family: '\5fae\8f6f\96c5\9ed1';
+    outline: none;
+}
+
+button,
+input {
+    line-height: normal;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+
+input[type="search"] {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+::selection {
+    background-color: #D5D5D5;
+    color: #FCFCFC;
+}
+
+::-moz-selection {
+    background-color: #D5D5D5;
+    color: #FCFCFC;
+}
+
+.fn-clear:before,
+.fn-clear:after {
+    display: table;
+    content: "";
+}
+
+.fn-clear:after {
+    clear: both;
+}
+
+.fn-left {
+    float: left;
+}
+
+.fn-right {
+    float: right;
+}
+
+.fn-none {
+    display: none;
+}
+
+.fn-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+}
+
+
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, 
+.em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../../../images/emotions/emotions.png");
+    background-size: 120px;
+    float: left;
+    height: 24px;
+    margin-right: 8px;
+    width: 24px;
+    transition: all .2s ease-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+}
+
+#emotions span:hover {
+    transform: scale(1.2) rotate(360deg);
+    -webkit-transform: scale(1.2) rotate(360deg);
+    -moz-transform: scale(1.2) rotate(360deg);
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+.em02 {
+    background-position: -48px 0;
+}
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 1px;
+}
+.em05 {
+    background-position: 0 -24px;
+}
+.em06 {
+    background-position: -24px -24px;
+}
+.em07 {
+    background-position: -48px -24px;
+}
+.em08 {
+    background-position: -72px -24px;
+}
+.em09 {
+    background-position: -96px -24px;
+}
+.em10 {
+    background-position: 0 -48px;
+}
+.em11 {
+    background-position: -24px -48px ;
+}
+.em12 {
+    background-position: -48px -48px;
+}
+.em13 {
+    background-position: -72px -48px;
+}
+.em14 {
+    background-position: -96px -48px;
+}
+
+.footer a:hover,
+.article-relative a:hover,
+.article-abstract .article-title a:hover,
+.article-abstract .article-tags a:hover,
+.article-body a {
+    text-decoration: underline;
+}
+
+.article-body a:hover {
+    text-decoration: none;
+}
+/* end base */
+
+/* start frame */
+.wrapper {
+    height: auto;
+    margin: 30px auto 10px;
+    width: 1190px;
+}
+
+.footer {
+    background-color: #141414;
+    color: #FFF;
+    padding: 30px;
+    margin-right: 10px;
+}
+
+.main {
+    float: left;
+    width: 920px;
+}
+
+/* end frame */
+
+/* start header */
+.header {
+    position: relative;
+}
+
+.header .title {
+    color: #E61E1E;
+    padding: 30px 0;
+}
+
+.header .title:hover {
+    color: #CA1B1E;
+}
+
+.header .title > span:before {
+    color: inherit;
+}
+
+.top-info {
+    font-size: 38px;
+    height: 46px;
+    line-height: 46px;
+}
+
+.top-info > hr {
+    background-color: #7B7B7B;
+    border: 0 none;
+    display: inline-block;
+    height: 42px;
+    margin: 2px 10px;
+    padding: 0;
+    vertical-align: top;
+    width: 1px;
+}
+
+.top-info a {
+    color: #FFF;
+}
+
+.top-info a:hover {
+    color: #CA1B1E;
+}
+
+#showTop {
+    display: none;
+}
+
+.sub-nav {
+    background-color: #E61E1E;
+    color: #FFF;
+    padding: 30px;
+    margin: 30px 0;
+}
+
+.sub-nav > h2 {
+    float: left;
+    margin: 0;
+}
+
+.pagination {
+    float: right;
+    margin-top: 5px;
+}
+
+.pagination > a,
+.pagination > span {
+    background-color: #EA4040;
+    color: #FFF;
+    padding: 6px 7px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.pagination > a:hover,
+.pagination > span {
+    color: #E61E1E;
+    background-color: #FFF;
+}
+
+.navigation {
+    background-color: #FFF;
+    border: 2px solid #BABABA;
+    left: 0;
+    list-style: none outside none;
+    margin: 0;
+    min-width: 223px;
+    padding: 0;
+    position: absolute;
+    top: 63px;
+    z-index: 1;
+    display: none;
+}
+
+.navigation a {
+    background-color: #FFF;
+    border-bottom: 1px solid #BABABA;
+    color: #333;
+    display: block;
+    padding: 10px 15px;
+}
+
+.navigation a:hover {
+    background-color: #E61E1E;
+    color: #FFFFFF;
+}
+
+.navigation a.lats {
+    border-bottom-width: 0;
+}
+
+.navigation .page-icon {
+    float: left;
+    height: 14px;
+    width: 14px;
+    margin: 2px 5px 0 0;
+}
+/* end header */
+
+/* start article list */
+.main .pagination {
+    float: none;
+    padding: 20px 0 25px;
+    text-align: right;
+    margin-right: 10px;
+    line-height: 34px;
+}
+
+.article-list > div {
+    background-color: #323232;
+    float: left;
+    height: 220px;
+    margin: 5px 10px 5px 0;
+    overflow: hidden;
+    position: relative;
+    width: 450px;
+}
+
+.article-abstract {
+    background-color: #3E3E3E;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: all 1.2s;
+    height: 100%;
+}
+
+.article-image {
+    top: 151px;
+}
+
+.article-list > div:hover .article-image {
+    top: 0;
+}
+
+.article-list > div > img {
+    max-width: 100%;
+    transition: all 1.2s;
+    display: block;
+    margin: 0 auto;
+}
+
+.article-list > div:hover > img {
+    transform: scale(1.2);
+}
+
+.article-date {
+    float: left;
+    margin: 10px;
+}
+
+.article-title {
+    height: 24px;
+    line-height: 24px;
+    margin: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 430px;
+    font-weight: normal;
+}
+
+.article-title span {
+    color: #E61E1E;
+}
+
+.article-title a {
+    color: #F8F7F7;
+}
+
+.article-title sup {
+    color: #9E0B0E;
+}
+
+.article-abstract .fn-right {
+    display: none;
+    position: absolute;
+    right: 0;
+}
+
+.article-abstract:hover .fn-right {
+    display: block;
+}
+
+.article-abstract .fn-right > a {
+    background-color: #FFF;
+    color: #E61E1E;
+    float: left;
+    padding: 10px;
+    transition: all 0.8s;
+}
+
+.article-abstract .fn-right > a:hover {
+    color: #FFF;
+    background-color: #E61E1E;
+}
+
+.article-abstract > .article-tags {
+    margin: 10px 0 0 10px;
+}
+
+.article-abstract > .article-body {
+    margin: 10px;
+    overflow: hidden;
+    white-space: inherit;
+    word-wrap: break-word;
+    padding: 10px;
+    height: 95px;
+}
+/* end article list */
+
+/* start side */
+.side {
+    float: right;
+    width: 240px;
+}
+
+#search {
+    background-color: #FFF;
+    border: 0 none;
+    color: #3A3A3A;
+    height: 50px;
+    margin-top: 5px;
+    padding: 0 10px;
+    width: 177px;
+    transition: all 0.3s ease-out 0s;
+}
+
+.side form > span {
+    background-color: #FFF;
+    color: #3A3A3A;
+    float: right;
+    font-size: 25px;
+    height: 32px;
+    margin-top: 5px;
+    padding: 9px;
+}
+
+.side-tile {
+    color: #FFF;
+    float: left;
+    margin-top: 20px;
+    padding: 15px 25px 15px 25px;
+    position: relative;
+    background-color: #F09609;
+    width: 65px;
+    transition: all 0.3s ease-out 0s;
+}
+
+.side-tile:hover,
+.side form input:focus,
+.form input:focus,
+.form textarea:focus,
+.form button:hover,
+#dynamic .footer:hover {
+    outline: 3px solid #BABABA;
+}
+
+.side-tile > span {
+    display: block;
+    font-size: 60px;
+    text-align: center;
+    width: 60px;;
+}
+
+.side-tile > .title {
+    line-height: 17px;
+}
+
+.side-tile > .text {
+    font-size: 15px;
+    font-weight: bold;
+    left: 93px;
+    line-height: 30px;
+    position: absolute;
+    top: 20px;
+}
+
+.side-tile > .text a {
+    color: #FFF;
+}
+
+.online-count,
+.user,
+.notice-board,
+.share,
+.article-relative {
+    width: 188px;
+}
+
+.translate,
+.register,
+.logout,
+.prev,
+.prev-disabled {
+    margin-left: 10px;
+}
+
+.translate {
+    background-color: #2E8BCC;
+}
+
+.login,
+.settings {
+    background-color: #008641;
+}
+
+.logout,
+.register {
+    background-color: #7B4F9D;
+}
+
+.next,
+.prev {
+    background-color: #E61E1E;
+}
+
+.next-disabled,
+.prev-disabled {
+    color: #BDBEBD;
+    background-color: #EA4040;
+}
+
+.user {
+    background-color: #393;
+}
+
+.user img {
+    margin: 0 10px 10px 0;
+    height: 60px;
+    width: 60px;
+}
+
+.online-count,
+.share {
+    background-color: #20608E;
+}
+
+.share div.text {
+    color: #BDBEBD;
+    font-size: 43px;
+    font-weight: normal;
+    left: 128px;
+    line-height: 54px;
+    top: 5px;
+    width: 105px;
+}
+
+.share .text span:hover {
+    color: #FFF;
+}
+
+.online-count .text,
+.article-relative .text {
+    font-size: 12px;
+    font-weight: normal;
+    left: 104px;
+    line-height: 19px;
+    text-align: left;
+    top: 12px;
+}
+
+.article-relative .text { 
+    left: 70px;
+    overflow: hidden;
+    top: 10px;
+    white-space: nowrap;
+    width: 158px;
+    word-break: keep-all;
+}
+
+.article-relative .text ul {
+    margin: 0;
+} 
+
+.notice-board {
+    background-color: #2E8BCC;
+    overflow: hidden;
+    height: auto;
+}
+
+.user .text,
+.notice-board .text {
+    top: 36px;
+}
+/* end side */
+
+/* start others */
+#goCmt,
+#goTop {
+    background-color: #141414;
+    bottom: 10px;
+    font-size: 30px;
+    height: 35px;
+    padding: 5px 7px;
+    position: fixed;
+    right: 30px;
+    width: 30px;
+    z-index: 10;
+}
+
+#goCmt {
+    bottom: 55px;
+}
+
+.archives {
+    background-color: #323232;
+    padding: 10px;
+    margin: 5px 10px 30px 0;
+}
+
+.archives li {
+    list-style: none;
+    float: left;
+}
+
+.archives a {
+    background-color: #E61E1E;
+    color: #FFF;
+	line-height: 15px;
+    float: left;
+    margin: 10px;
+    padding: 10px 15px;
+    white-space: nowrap;
+    transition: all 0.8s;
+}
+
+.archives a:hover {
+    background-color: #FFF;
+    color: #E61E1E;
+}
+/* end others */
+
+/* start article */
+.article-header {
+    background-color: #E61E1E;
+    margin: 30px 0;
+    padding: 20px 30px;
+    position: relative;
+}
+
+.article-info {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.article-info > a {
+    background-color: #FFF;
+    color: #E61E1E;
+    transition: all 0.8s;
+    font-size: 14px;
+    float: left;
+    padding: 14px;
+    border-bottom: 1px solid #FFF;
+    border-left: 1px solid #FFF;
+}
+
+.article-info > a:hover {
+    background-color: #E61E1E;
+    color: #FFF;
+}
+
+.article-header h2 {
+    color: #FFF;
+}
+
+.article-header h2 > span {
+    font-weight: normal;    
+    color: #D1D2D1;
+}
+
+.article-header .article-date {
+    float: none;
+    margin: 0;
+}
+
+.article-body {
+    background-color: #323232;
+    margin-bottom: 30px;
+    overflow: hidden;
+    padding: 10px;
+    white-space: normal;
+    word-break: break-all;
+    font-size: 14px;
+    word-wrap: break-word;
+}
+
+.main > .article-body {
+    margin-right: 10px;
+    margin-top: 20px;
+}
+
+pre.prettyprint {
+    background-color: #F7F7F7;
+}
+/* end article */
+
+/* start comment */
+#comments {
+    position: relative;
+}
+
+#comments > div {
+    margin-bottom: 20px;
+    margin-right: 10px;
+}
+
+#comments > div.fn-clear > img {
+    width: 80px;
+}
+
+#comments .article-body {
+    margin: 10px 0;
+    width: 800px;
+}
+
+#comments .user-name {
+    color: #E61E1E;
+    font-weight: bold;
+}
+
+#comments .user-name:hover {
+    color: #CA1B1E;
+}
+
+.comment-info a {
+    color: #F8F7F7;
+}
+
+.at {
+    font-size: 15px;
+    color: #FFF;
+    font-weight: bold;
+}
+
+.comment-main {
+    float: right;
+}
+
+.comment-body-ref {
+    background-color: #EA4040;
+    left: 79px;
+    padding: 10px;
+    position: absolute;
+    width: 900px;
+    z-index: 1;
+}
+
+.comment-disabled {
+    background-color: #EA4040;
+    color: #FFFFFF;
+    margin: 0 10px 30px 0;
+    padding: 5px 20px;
+}
+
+.form  {
+    width: 600px;
+    margin-bottom: 30px;
+}
+
+.form input,
+.form textarea {
+    height: 30px;
+    margin: 5px 10px 5px 0;
+    padding: 0 5px;
+    transition: all 0.3s ease-out 0s;
+    width: 456px;
+}
+
+.form textarea {
+    width: 600px;
+    height: 300px;
+    margin: 0 0 10px;
+}
+
+.form button {
+    background-color: #E61E1E;
+    border: 0 none;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 15px;
+    transition: all 0.3s ease-out 0s;
+    padding: 10px 50px;
+}
+
+.tip {
+    color: #CA1B1E;
+}
+/* end comment */
+
+/* start dynamic */
+#dynamic #comments {
+    background-color: #EA4040;
+    margin-top: 5px;
+    padding: 25px 15px 15px 25px;
+}
+
+#dynamic #comments .article-body {
+    width: 743px;
+}
+
+#dynamic .article-relative .text {
+    left: 110px;
+}
+
+#dynamic .footer {
+    margin: 20px 0 10px;
+    float: left;
+    transition: all 0.3s ease-out 0s;
+}
+
+.most-comment,
+.most-view,
+.links-tile,
+.tags-tile {
+    position: static;
+    background-color: #F09609;
+    width: 535px;
+    margin-top: 20px;
+}
+
+.most-view {
+    margin-left: 20px;
+    background-color: #2E8BCC;
+}
+
+.tags-tile {
+    margin-left: 20px;
+    background-color: #339933;
+}
+
+.links-tile {
+    background-color: #7B4F9D;
+}
+
+.tags-tile span,
+.links-tile span,
+.most-comment span,
+.most-view span {
+    font-size: 60px;
+}
+
+.tags-tile .text,
+.links-tile .text,
+.most-comment .text,
+.most-view .text {
+    position: static;
+    width: 430px;
+}
+
+.tags-tile a,
+.links-tile a {
+    background-color: #EA4040;
+    color: #D1D2D1;
+    float: left;
+    font-size: 12px;
+    line-height: 20px;
+    margin: 6px;
+    padding: 5px 10px;
+    transition: all 0.8s ease 0s;
+    white-space: nowrap;
+}
+
+.tags-tile a:hover,
+.links-tile a:hover {
+    background-color: #FFF;
+    color: #EA4040;
+}
+
+.most-comment .text,
+.most-view .text {
+    margin-right: 20px;
+    line-height: 24px;
+}
+
+.most-comment .text a:hover,
+.most-view .text a:hover {
+    text-decoration: underline;
+}
+
+.most-comment .text span,
+.most-view .text span {
+    color: #D1D2D1;
+    font-size: 13px;
+    font-weight: normal;
+}
+/* end dynamic */