diff --git a/src/assets/img/back.jpeg b/src/assets/img/back.jpeg
new file mode 100644
index 0000000..85e53e7
Binary files /dev/null and b/src/assets/img/back.jpeg differ
diff --git a/src/assets/img/widget-img.jpeg b/src/assets/img/widget-img.jpeg
new file mode 100644
index 0000000..d85bd81
Binary files /dev/null and b/src/assets/img/widget-img.jpeg differ
diff --git a/src/assets/img/widget-img1.jpg b/src/assets/img/widget-img1.jpg
new file mode 100644
index 0000000..a13c12f
Binary files /dev/null and b/src/assets/img/widget-img1.jpg differ
diff --git a/src/components/backtop/AlBackTop.vue b/src/components/backtop/AlBackTop.vue
index 7bd6b72..7a3e819 100644
--- a/src/components/backtop/AlBackTop.vue
+++ b/src/components/backtop/AlBackTop.vue
@@ -65,7 +65,7 @@
this.container.addEventListener('scroll', this.throttledScrollHandler);
window.onbeforeunload = function () {
- var scrollPos;
+ let scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
@@ -138,3 +138,6 @@
}
};
+
diff --git a/src/icons/svg/release.svg b/src/icons/svg/release.svg
new file mode 100644
index 0000000..f84902e
--- /dev/null
+++ b/src/icons/svg/release.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/svg/widget-email.svg b/src/icons/svg/widget-email.svg
new file mode 100644
index 0000000..c904404
--- /dev/null
+++ b/src/icons/svg/widget-email.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/svg/widget-github.svg b/src/icons/svg/widget-github.svg
new file mode 100644
index 0000000..8ab6518
--- /dev/null
+++ b/src/icons/svg/widget-github.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/svg/widget-music.svg b/src/icons/svg/widget-music.svg
new file mode 100644
index 0000000..380b72f
--- /dev/null
+++ b/src/icons/svg/widget-music.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/svg/widget-subscription.svg b/src/icons/svg/widget-subscription.svg
new file mode 100644
index 0000000..7589cd4
--- /dev/null
+++ b/src/icons/svg/widget-subscription.svg
@@ -0,0 +1 @@
+
diff --git a/src/styles/articles.scss b/src/styles/articles.scss
new file mode 100644
index 0000000..1ff7a31
--- /dev/null
+++ b/src/styles/articles.scss
@@ -0,0 +1,4422 @@
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+ .blur {
+ background: rgba(255, 255, 255, .85) !important;
+ -webkit-backdrop-filter: saturate(200%) blur(20px);
+ backdrop-filter: saturate(200%) blur(20px)
+ }
+}
+
+.shadow {
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
+}
+
+.shadow.floatable {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.shadow.floatable:hover {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+}
+
+@font-face {
+ font-family: 'Varela Round';
+ src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf);
+ font-weight: 400;
+ font-style: normal
+}
+
+* {
+ box-sizing: border-box;
+ outline: 0;
+ margin: 0;
+ padding: 0
+}
+
+html {
+ color: #444;
+ width: 100%;
+ height: 100%;
+ font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ text-rendering: optimizelegibility;
+ -webkit-tap-highlight-color: transparent
+}
+
+body {
+ background-color: #f4f4f4
+}
+
+body.modal-active {
+ overflow: hidden
+}
+
+@media screen and (max-width:680px) {
+ body.modal-active {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0
+ }
+}
+
+::-moz-selection {
+ background: rgba(33, 150, 243, .2)
+}
+
+::selection {
+ background: rgba(33, 150, 243, .2)
+}
+
+h1 {
+ font-size: 1.625rem
+}
+
+h2 {
+ font-size: 1.375rem
+}
+
+h3 {
+ font-size: 1.25rem
+}
+
+h4 {
+ font-size: 1.125rem
+}
+
+h5 {
+ font-size: 1rem
+}
+
+h6 {
+ font-size: 1rem
+}
+
+h1, h2, h3, h4, h6 {
+ font-weight: 400
+}
+
+a {
+ color: #2196f3;
+ cursor: pointer;
+ text-decoration: none;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+a:hover {
+ color: #ff5722
+}
+
+a:active, a:hover {
+ outline: 0
+}
+
+pre {
+ tab-size: 4;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ -webkit-tab-size: 4
+}
+
+img {
+ max-width: 100%
+}
+
+.clearfix {
+ zoom: 1
+}
+
+.clearfix:after, .clearfix:before {
+ content: " ";
+ display: table
+}
+
+.clearfix:after {
+ clear: both
+}
+
+.hidden {
+ text-indent: -9999px;
+ visibility: hidden;
+ display: none
+}
+
+.inner {
+ position: relative;
+ width: 80%;
+ max-width: 710px;
+ margin: 0 auto
+}
+
+.vertical {
+ display: table-cell;
+ vertical-align: middle
+}
+
+ol, ul {
+ padding-left: 0
+}
+
+li {
+ list-style: none
+}
+
+ul.h-list {
+ display: flex;
+ align-items: center;
+ height: 100%
+}
+
+ul.h-list > li {
+ height: 100%;
+ justify-content: center
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup,
+main, menu, nav, section, summary {
+ display: block
+}
+
+abbr[title] {
+ border-bottom: 1px dotted
+}
+
+b, strong {
+ font-weight: 700
+}
+
+dfn {
+ font-style: italic
+}
+
+h1 {
+ font-size: 2em;
+ margin: .67em 0
+}
+
+mark {
+ background: #ff0;
+ color: #000
+}
+
+small {
+ font-size: 80%
+}
+
+sub, sup {
+ font-size: 65%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sup {
+ top: -.6em
+}
+
+sub {
+ bottom: -.3em
+}
+
+img {
+ border: 0;
+ background: 0 0;
+ max-width: 100%
+}
+
+figure {
+ margin: 1em 40px
+}
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+ border: 0;
+ border-radius: 1px;
+ border-bottom: 1px solid rgba(68, 68, 68, .1)
+}
+
+pre {
+ overflow: auto
+}
+
+code, kbd, pre, samp {
+ font-family: monospace, monospace;
+ font-size: 1em
+}
+
+button, input, optgroup, select, textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0
+}
+
+button {
+ overflow: visible
+}
+
+button, select {
+ text-transform: none
+}
+
+button, html input[type=button], input[type=reset], input[type=submit] {
+ -webkit-appearance: button;
+ cursor: pointer
+}
+
+button[disabled], html input[disabled] {
+ cursor: default
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0
+}
+
+input {
+ line-height: normal
+}
+
+input[type=checkbox], input[type=radio] {
+ box-sizing: border-box;
+ padding: 0
+}
+
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+
+input[type=search] {
+ -webkit-appearance: textfield;
+ box-sizing: content-box
+}
+
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+fieldset {
+ border: 1px solid silver;
+ margin: 0 2px;
+ padding: .35em .625em .75em
+}
+
+legend {
+ border: 0;
+ padding: 0
+}
+
+textarea {
+ overflow: auto
+}
+
+optgroup {
+ font-weight: 700
+}
+
+table {
+ border-collapse: collapse;
+ margin-top: .7em;
+ margin-bottom: .7em;
+ width: 100%
+}
+
+table th {
+ background-color: #efefef
+}
+
+table td, table th {
+ padding: 4px 12px;
+ border: 1px solid #eaeaea
+}
+
+table tr {
+ background-color: #f9f9f9
+}
+
+table tbody > tr {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+table tbody > tr:hover {
+ background-color: #efefef
+}
+
+overflow table {
+ overflow: auto;
+ display: block
+}
+
+overflow table tr {
+ word-break: keep-all
+}
+
+td, th {
+ padding: 0
+}
+
+.highlight {
+ position: relative;
+ width: 100%;
+ margin: 1rem 0;
+ display: block;
+ background: #f6f6f6;
+ font-size: .8125rem;
+ font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
+ border-radius: 4px;
+ border: 1px solid #e7e7e7;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.highlight figcaption {
+ position: -webkit-sticky;
+ position: sticky;
+ left: 0;
+ padding: 4px 8px 4px 8px;
+ background-color: #eaeaea
+}
+
+.highlight table {
+ overflow: auto;
+ display: block;
+ margin: 0;
+ background-color: transparent;
+ border: none
+}
+
+.highlight table td, .highlight table th {
+ padding: 0;
+ border: none
+}
+
+.highlight table tr {
+ background-color: transparent
+}
+
+.highlight table tr:hover {
+ background-color: transparent
+}
+
+.highlight table .gutter {
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ padding: 0 12px;
+ text-align: right;
+ border-width: 0;
+ margin-left: 0;
+ position: -webkit-sticky;
+ position: sticky;
+ left: 0;
+ background-color: #eaeaea
+}
+
+.highlight table .gutter pre {
+ color: rgba(68, 68, 68, .65)
+}
+
+.highlight table pre {
+ background: 0 0;
+ margin: 0;
+ padding: 0;
+ border: none
+}
+
+.highlight table .code {
+ padding: 16px;
+ vertical-align: top;
+ background-color: transparent
+}
+
+.highlight table .code:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: rgba(68, 68, 68, .65);
+ font-size: .75rem;
+ padding: 4px 8px
+}
+
+.highlight.html .code:before {
+ content: "HTML"
+}
+
+.highlight.js .code:before {
+ content: "JS"
+}
+
+.highlight.bash .code:before {
+ content: "bash"
+}
+
+.highlight.shell .code:before {
+ content: "shell"
+}
+
+.highlight.css .code:before {
+ content: "css"
+}
+
+.highlight.less .code:before {
+ content: "less"
+}
+
+.highlight.stylus .code:before {
+ content: "stylus"
+}
+
+.highlight.swift .code:before {
+ content: "Swift"
+}
+
+.highlight.objc .code:before {
+ content: "ObjC"
+}
+
+.highlight.c .code:before {
+ content: "C"
+}
+
+.highlight.cpp .code:before {
+ content: "C++"
+}
+
+.highlight.java .code:before {
+ content: "Java"
+}
+
+.highlight.python .code:before {
+ content: "Python"
+}
+
+.highlight.yaml .code:before {
+ content: "YAML"
+}
+
+.highlight.plain .code:before {
+ content: ""
+}
+
+pre .line {
+ color: rgba(68, 68, 68, .9)
+}
+
+pre .marked {
+ background-color: rgba(254, 213, 66, .4);
+ padding: 2px 8px 2px 0;
+ border-radius: 2px;
+ width: 100%
+}
+
+pre .title {
+ color: #3f51b5
+}
+
+pre .comment {
+ color: rgba(68, 158, 72, .7)
+}
+
+pre .attr, pre .javascript .function, pre .keyword {
+ color: #9c27b0
+}
+
+pre .built_in, pre .tag .name, pre .type {
+ color: #4ba7ee
+}
+
+pre .attribute, pre .css .class, pre .css .id, pre .css .pseudo, pre .html .doctype,
+pre .regexp, pre .ruby .constant, pre .variable, pre .xml .doctype, pre .xml .pi,
+pre .xml .tag .title {
+ color: #fd8607
+}
+
+pre .constant, pre .literal, pre .number, pre .params, pre .preprocessor {
+ color: #fd8607
+}
+
+pre .class, pre .css .rules .attribute, pre .ruby .class .title {
+ color: #ff9800
+}
+
+pre .string {
+ color: #449e48
+}
+
+pre .header, pre .inheritance, pre .ruby .symbol, pre .value, pre .xml .cdata {
+ color: #4caf50
+}
+
+pre .css .hexcolor {
+ color: #6cc
+}
+
+pre .coffeescript .title, pre .function, pre .javascript .title, pre .perl .sub,
+pre .python .decorator, pre .python .title, pre .ruby .function .title,
+pre .ruby .title .keyword {
+ color: #69c
+}
+
+.html .tag .name {
+ color: #ee2b29
+}
+
+.alert {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 99999;
+ text-align: center;
+ padding: 30px 36px 29px 36px;
+ border-radius: 12px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ font-weight: 700;
+ font-size: 1.125rem
+}
+
+.alert.alert-success {
+ color: #247830;
+ background: #daf4de
+}
+
+.alert.alert-info {
+ color: #028baf;
+ background-color: #e4f9ff
+}
+
+.alert.alert-warning {
+ color: #c48700;
+ background-color: #fffdf7
+}
+
+.alert.alert-danger {
+ color: #ef0b01;
+ background-color: #fff
+}
+
+.highlight {
+ position: relative
+}
+
+.btn-copy {
+ display: inline-block;
+ cursor: pointer;
+ border: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ -webkit-appearance: none;
+ font-size: calc(.8125rem - 1px);
+ font-weight: 700;
+ padding: 4px 8px;
+ color: rgba(68, 68, 68, .65);
+ background: #fff;
+ border-bottom-left-radius: 4px;
+ border-top-right-radius: 4px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ position: absolute;
+ top: 0;
+ right: 0;
+ opacity: 0;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.btn-copy > i {
+ margin-right: 4px
+}
+
+.btn-copy:hover {
+ color: #ff5722;
+ background: #ffeee8
+}
+
+.highlight:hover .btn-copy {
+ opacity: 1
+}
+
+.article-entry div.info {
+ background-color: rgba(27, 205, 252, .2);
+ border-left: 4px solid #1bcdfc;
+ border-radius: 4px
+}
+
+.article-entry div.success {
+ background-color: rgba(61, 197, 80, .2);
+ border-left: 4px solid #3dc550;
+ border-radius: 4px
+}
+
+.article-entry div.warning {
+ background-color: rgba(255, 189, 43, .2);
+ border-left: 4px solid #ffbd2b;
+ border-radius: 4px
+}
+
+.article-entry div.danger {
+ background-color: rgba(254, 95, 88, .2);
+ border-left: 4px solid #fe5f58;
+ border-radius: 4px
+}
+
+fancybox {
+ display: flex;
+ justify-content: center;
+ align-items: center
+}
+
+fancybox a {
+ margin: 0 1px;
+ padding: 0
+}
+
+@media screen and (max-width:500px) {
+ fancybox a {
+ margin: 0 .5px
+ }
+}
+
+fancybox a > img {
+ margin: 0
+}
+
+.l_main #comments {
+ position: relative
+}
+
+.l_main #comments #valine_container img {
+ display: inline
+}
+
+.l_main #comments #valine_container .vwrap {
+ border-radius: 12px;
+ border-style: dashed;
+ border: 1px dashed rgba(68, 68, 68, .3);
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main #comments #valine_container .vwrap:hover {
+ border: 1px dashed #2196f3
+}
+
+.l_main #comments #valine_container .vwrap .vheader .vinput {
+ border-radius: 0;
+ border-bottom: 1px dashed rgba(68, 68, 68, .3)
+}
+
+.l_main #comments #valine_container .vwrap .vheader .vinput:hover {
+ border-bottom: 1px dashed #2196f3
+}
+
+.l_main #comments #valine_container .vwrap .vheader .vinput:focus {
+ border-bottom: 1px solid #2196f3
+}
+
+.l_main #comments #valine_container .vwrap .vedit .vctrl span {
+ color: #2196f3;
+ padding: 0;
+ margin: 10px
+}
+
+.l_main #comments #valine_container button {
+ border: none;
+ padding: 8px 2rem 7px 2rem;
+ border-radius: 4px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main #comments #valine_container button:hover {
+ color: #ff5722;
+ background: #ffeee8
+}
+
+.l_main #comments #valine_container blockquote {
+ padding: 16px;
+ border-left: 2px solid #2196f3;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main #comments #valine_container blockquote p {
+ text-align: left;
+ word-wrap: normal
+}
+
+.l_main #comments #valine_container pre code {
+ border: none
+}
+
+.l_main #comments #valine_container .vemoji-btn, .l_main #comments #valine_container .vpreview-btn,
+.l_main #comments #valine_container a {
+ color: #2196f3;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main #comments #valine_container .vemoji-btn:hover, .l_main #comments #valine_container .vpreview-btn:hover,
+.l_main #comments #valine_container a:hover {
+ color: #ff5722;
+ text-decoration: underline
+}
+
+.l_main #comments #valine_container div.info {
+ box-shadow: none
+}
+
+.l_main #comments #valine_container div.info > div.power, .l_main #comments #valine_container div.info > div.power a {
+ font-size: .75rem
+}
+
+.l_main #comments #valine_container .vhead span.vnick {
+ color: rgba(68, 68, 68, .65)
+}
+
+.l_main #comments #valine_container .vhead a.vnick {
+ color: #ff9800;
+ font-weight: 700
+}
+
+.l_main #comments #valine_container .vhead a.vnick:hover {
+ color: #ff5722;
+ text-decoration: underline
+}
+
+.l_main #comments #valine_container .vhead .vsys {
+ margin: 2px;
+ padding: 1px 8px;
+ background-color: rgba(68, 68, 68, .1)
+}
+
+.l_main #comments #valine_container .vcard .vquote {
+ border-left: none
+}
+
+.l_main #comments #valine_container .vcard .vh {
+ border-bottom: 1px dashed rgba(68, 68, 68, .1)
+}
+
+.l_main #comments #valine_container .vmeta .vat {
+ font-weight: 700;
+ color: #2196f3;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main #comments #valine_container .vmeta .vat:hover {
+ color: #ff5722;
+ text-decoration: underline
+}
+
+.l_main #comments #valine_container .vmeta .vat:active {
+ color: #ff5621
+}
+
+.l_main #comments #valine_container .vinput {
+ color: #444
+}
+
+.l_main #comments #valine_container p {
+ color: #444
+}
+
+.l_main #comments .vemojis {
+ justify-content: space-between
+}
+
+.l_main #comments .vemojis i {
+ width: auto;
+ height: 36px;
+ padding: 0;
+ margin: 8px 8px 0 8px
+}
+
+.l_main #comments .vemojis i #emoji {
+ height: 24px;
+ margin-top: 6px;
+ background: 0 0
+}
+
+.l_main #comments p #emoji {
+ display: inline;
+ max-height: 28px;
+ background: 0 0
+}
+
+#archive-page {
+ margin-bottom: 32px
+}
+
+#archive-page .archive .archive-year {
+ margin-top: 4em;
+ margin-bottom: 1em
+}
+
+#archive-page .archive .archive-year:first-child {
+ margin-top: 0;
+ padding-top: 0
+}
+
+#archive-page .archive .archive-year h2 {
+ margin-top: 1em
+}
+
+#archive-page .archive .archive-post a {
+ color: #444;
+ width: 100%;
+ display: inline-flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: flex-start;
+ background: 0 0;
+ border-left: 2px solid transparent;
+ border-radius: 2px;
+ vertical-align: middle;
+ text-decoration: none;
+ font-size: .875rem;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+#archive-page .archive .archive-post a.child {
+ padding-left: 32px
+}
+
+#archive-page .archive .archive-post a:hover {
+ background: #e8f4fd;
+ border-left: 2px solid #2196f3
+}
+
+#archive-page .archive .archive-post a:active {
+ border-left: 4px solid #2196f3
+}
+
+#archive-page .archive .archive-post time {
+ flex: none;
+ vertical-align: middle;
+ padding: .4em;
+ padding-left: 2em;
+ color: rgba(68, 68, 68, .65)
+}
+
+@media screen and (max-width:500px) {
+ #archive-page .archive .archive-post time {
+ padding-left: 1em
+ }
+}
+
+#archive-page .archive .archive-post .title {
+ flex: auto;
+ padding: .4em
+}
+
+#archive-page .archive .archive-post .title i {
+ color: #ff5722
+}
+
+#archive-page .archive .archive-post .title i.red {
+ color: #fe5f58
+}
+
+#archive-page .archive .archive-post .title i.green {
+ color: #3dc550
+}
+
+#archive-page .archive .archive-post .title i.yellow {
+ color: #ffbd2b
+}
+
+#archive-page .archive .archive-post .title i.blue {
+ color: #1bcdfc
+}
+
+#archive-page .archive .archive-post .title i.theme {
+ color: #2196f3
+}
+
+#archive-page .archive .archive-post .title i.accent {
+ color: #ff5722
+}
+
+#archive-page .archive .archive-post .title i.orange {
+ color: #ff5722
+}
+
+#archive-page .archive .all-categories time {
+ color: #444
+}
+
+#archive-page .archive .all-categories .title {
+ color: rgba(68, 68, 68, .65)
+}
+
+#archive-page .archive .all-tags {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+ align-items: baseline;
+ word-spacing: 8px;
+ text-align: center
+}
+
+#archive-page .archive .all-tags > a {
+ color: rgba(68, 68, 68, .65);
+ margin-right: 16px
+}
+
+#archive-page .archive .all-tags > a.active, #archive-page .archive .all-tags > a:active,
+#archive-page .archive .all-tags > a:hover {
+ color: #ff5722 !important
+}
+
+.article {
+ color: #555;
+ word-wrap: break-word
+}
+
+.article img {
+ position: relative;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+@media screen and (max-width:500px) {
+ .article img {
+ box-shadow: none
+ }
+}
+
+.article div > img, .article p > img {
+ display: block;
+ margin: auto;
+ border-radius: 4px
+}
+
+@media screen and (max-width:500px) {
+ .article div > img, .article p > img {
+ border-radius: 2px
+ }
+}
+
+.article span img {
+ display: inline;
+ margin: auto
+}
+
+.article center, .article center p {
+ text-align: center
+}
+
+.article .aplayer {
+ margin: 0;
+ display: inline-block;
+ width: 400px;
+ max-width: 100%;
+ border-radius: 4px;
+ color: #666
+}
+
+.article div.small-img img, .article p.small-img img {
+ width: auto;
+ max-width: 100%;
+ margin: 0;
+ box-shadow: none
+}
+
+.article s {
+ color: rgba(85, 85, 85, .75)
+}
+
+.article u {
+ color: #ff5722
+}
+
+.article p {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ text-align: justify;
+ max-width: 100%;
+ overflow: auto
+}
+
+.article p.has-jax {
+ font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
+ background: rgba(255, 255, 255, 0);
+ padding: 16px 8px;
+ border-radius: 4px
+}
+
+.article p.has-jax .mjx-chtml.MJXc-display {
+ margin: 0
+}
+
+.article ol, .article ul {
+ font-size: .9375rem;
+ list-style: initial;
+ padding-left: 8px;
+ margin-left: 16px;
+ margin-top: 1rem;
+ margin-bottom: 1rem
+}
+
+.article ol ol, .article ol ul, .article ul ol, .article ul ul {
+ margin-top: 0;
+ margin-bottom: 0
+}
+
+.article ol.task-list, .article ul.task-list {
+ padding-left: 0;
+ margin-left: 4px
+}
+
+.article ol.task-list li, .article ul.task-list li {
+ list-style: none
+}
+
+.article ol.task-list li input, .article ul.task-list li input {
+ margin-right: 4px
+}
+
+.article ul > li {
+ list-style: initial
+}
+
+.article ol > li {
+ list-style: decimal
+}
+
+.article a {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.article a:before {
+ display: none
+}
+
+.article a:hover {
+ color: #ff5722;
+ text-decoration: underline
+}
+
+.article a:active {
+ color: #d93400
+}
+
+.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
+ position: relative
+}
+
+.article h1:first-child, .article h2:first-child, .article h3:first-child,
+.article h4:first-child, .article h5:first-child, .article h6:first-child {
+ margin-top: 0;
+ padding-top: 0
+}
+
+.article h1.title, .article h2.title, .article h3.title, .article h4.title,
+.article h5.title, .article h6.title {
+ left: 0
+}
+
+.article h1.title:before, .article h2.title:before, .article h3.title:before,
+.article h4.title:before, .article h5.title:before, .article h6.title:before {
+ content: none
+}
+
+.article h1, .article h2 {
+ margin-top: 2.5em;
+ padding-bottom: .2em;
+ border-bottom: 1px solid rgba(68, 68, 68, .1)
+}
+
+.article h1 {
+ text-align: left;
+ color: #444
+}
+
+.article h2 {
+ text-align: left;
+ color: #444
+}
+
+.article h3 {
+ margin-top: 1.5em;
+ text-align: left;
+ color: #2196f3
+}
+
+.article h4 {
+ padding-top: 1em;
+ text-align: left;
+ margin-bottom: 1rem;
+ color: #444
+}
+
+.article h5 {
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: #444
+}
+
+.article h6 {
+ margin-bottom: 1rem;
+ color: #444
+}
+
+.article .subtitle h6 {
+ color: rgba(68, 68, 68, .9)
+}
+
+.article figure figcaption span {
+ display: inline-block;
+ margin-right: 5px
+}
+
+.article blockquote {
+ background: #e8f4fd;
+ border-left: 4px solid #2196f3;
+ border-radius: 4px
+}
+
+.article blockquote, .article div.danger, .article div.info, .article div.success,
+.article div.warning {
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ position: relative;
+ width: 100%;
+ padding: .7em 1.2em;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.article blockquote, .article blockquote ol, .article blockquote p,
+.article blockquote ul, .article div.danger, .article div.danger ol,
+.article div.danger p, .article div.danger ul, .article div.info, .article div.info ol,
+.article div.info p, .article div.info ul, .article div.success, .article div.success ol,
+.article div.success p, .article div.success ul, .article div.warning,
+.article div.warning ol, .article div.warning p, .article div.warning ul {
+ text-align: left;
+ word-wrap: normal;
+ font-size: .9375rem;
+ margin-top: .5rem;
+ margin-bottom: .5rem
+}
+
+.article blockquote footer, .article div.danger footer, .article div.info footer,
+.article div.success footer, .article div.warning footer {
+ padding: 0;
+ text-align: justify;
+ color: inherit;
+ font-style: italic;
+ margin: .5rem 0
+}
+
+.article blockquote footer cite, .article div.danger footer cite, .article div.info footer cite,
+.article div.success footer cite, .article div.warning footer cite {
+ color: rgba(68, 68, 68, .65);
+ margin-left: 1em
+}
+
+.article blockquote footer cite::before, .article div.danger footer cite::before,
+.article div.info footer cite::before, .article div.success footer cite::before,
+.article div.warning footer cite::before {
+ content: '----';
+ padding: 0 .3em
+}
+
+.article blockquote.pullquote.right, .article div.danger.pullquote.right,
+.article div.info.pullquote.right, .article div.success.pullquote.right,
+.article div.warning.pullquote.right {
+ border-left: none;
+ border-right: 4px solid #2196f3
+}
+
+.article blockquote.pullquote.right p, .article div.danger.pullquote.right p,
+.article div.info.pullquote.right p, .article div.success.pullquote.right p,
+.article div.warning.pullquote.right p {
+ text-align: right
+}
+
+.article pre {
+ display: block;
+ box-sizing: border-box;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ overflow: auto;
+ background: #f6f6f6;
+ font-size: .8125rem;
+ font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
+ border: 1px solid #ddd;
+ padding: 16px
+}
+
+.article div > pre {
+ border-radius: 4px
+}
+
+.article div > pre > code {
+ padding: 0;
+ margin: 0;
+ background: 0 0;
+ color: rgba(68, 68, 68, .9)
+}
+
+.article code {
+ font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
+ padding: 4px 2px 2px 2px;
+ margin: 0;
+ vertical-align: middle;
+ border-radius: 2px;
+ line-height: 1.45;
+ font-size: .8125rem;
+ color: #4f5a60;
+ background: #f7f8f8
+}
+
+@media screen and (max-width:500px) {
+ .article ol, .article ul {
+ font-size: .875rem
+ }
+
+ .article figure {
+ font-size: 13px;
+ line-height: 1.6em
+ }
+}
+
+.article .widget {
+ background: 0 0;
+ margin: 1rem 0;
+ box-shadow: none;
+ border-radius: 4px;
+ cursor: auto;
+ background: #f4f4f4;
+ padding: 8px 0;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.article .widget:hover {
+ box-shadow: none
+}
+
+.article .widget:active {
+ box-shadow: none
+}
+
+.article .widget header {
+ padding: 4px .6em;
+ padding-bottom: 0;
+ color: rgba(68, 68, 68, .85)
+}
+
+.article .widget.copyright, .article .widget.qrcode {
+ background: 0 0;
+ padding: 0
+}
+
+.article .widget.copyright header, .article .widget.qrcode header {
+ display: none
+}
+
+.article .widget.copyright .content, .article .widget.qrcode .content {
+ padding: 0
+}
+
+.article .widget .content {
+ padding: 0 .6em;
+ margin: 0
+}
+
+.article .widget .content ul.entry, .article .widget .content ul.popular-posts {
+ padding-left: 9px;
+ margin-left: 16px
+}
+
+.article .widget .content ul.entry a, .article .widget .content ul.popular-posts a {
+ display: inline;
+ border-left: none;
+ padding: 0;
+ padding-left: 4px;
+ color: #2196f3;
+ font-weight: 400
+}
+
+.article .widget .content ul.entry a.active, .article .widget .content ul.entry a:active,
+.article .widget .content ul.entry a:hover, .article .widget .content ul.popular-posts a.active,
+.article .widget .content ul.popular-posts a:active, .article .widget .content ul.popular-posts a:hover {
+ border-left: none;
+ background: 0 0;
+ color: #ff5722
+}
+
+.article .widget.qrcode > .content {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ padding-left: 16px;
+ padding-right: 16px;
+ margin-bottom: 4px
+}
+
+.article .widget.qrcode > .content > fancybox, .article .widget.qrcode > .content > img {
+ margin: 0 8px
+}
+
+.article .widget.qrcode > .content img {
+ margin-bottom: 4px
+}
+
+.article .widget-blur {
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none
+}
+
+article .readmore > a {
+ font-size: .875rem
+}
+
+article .readmore > a:hover {
+ text-decoration: none
+}
+
+.cover-wrapper .cover {
+ top: 0;
+ left: 0;
+ max-width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ align-items: center;
+ align-self: center;
+ align-content: center;
+ color: #555;
+ padding: 16px
+}
+
+.cover-wrapper .cover .white {
+ color: #fff;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.cover-wrapper .cover .cover-body div.b {
+ margin-top: 8vh;
+ margin-bottom: 8vh
+}
+
+.cover-wrapper .cover.half {
+ margin-bottom: -100px;
+ max-height: 640px;
+ min-height: 400px;
+ height: calc(36vh - 64px + 200px)
+}
+
+.cover-wrapper .cover.half .cover-body div.b {
+ margin-top: 10%
+}
+
+@media screen and (max-width:500px) {
+ .cover-wrapper .cover.half .cover-body div.a {
+ margin-top: 4vh
+ }
+}
+
+.cover-wrapper .cover .scroll-down {
+ width: 100%;
+ height: 64px;
+ position: absolute;
+ bottom: 0;
+ text-align: center;
+ cursor: pointer
+}
+
+.cover-wrapper .cover .scroll-down .scroll-down-effects {
+ color: #fff;
+ font-size: 24px;
+ line-height: 64px;
+ position: absolute;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+ -webkit-animation: scroll-down-effect 1.5s infinite;
+ animation: scroll-down-effect 1.5s infinite
+}
+
+@-webkit-keyframes scroll-down-effect {
+ 0% {
+ top: 0;
+ opacity: 1
+ }
+
+ 50% {
+ top: -16px;
+ opacity: .4
+ }
+
+ 100% {
+ top: 0;
+ opacity: 1
+ }
+}
+
+@keyframes scroll-down-effect {
+ 0% {
+ top: 0;
+ opacity: 1
+ }
+
+ 50% {
+ top: -16px;
+ opacity: .4
+ }
+
+ 100% {
+ top: 0;
+ opacity: 1
+ }
+}
+
+.cover-wrapper .cover .cover-body {
+ margin: auto
+}
+
+.cover-wrapper .cover .cover-body, .cover-wrapper .cover .cover-body div.a,
+.cover-wrapper .cover .cover-body div.b {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 100%
+}
+
+.cover-wrapper .cover .cover-body .title {
+ font-size: 3rem;
+ line-height: 1.2
+}
+
+.cover-wrapper .cover .cover-body .subtitle {
+ font-size: .875rem
+}
+
+.cover-wrapper .cover .cover-body .logo {
+ max-height: 100px;
+ max-width: calc(100% - 4 * 16px)
+}
+
+@media screen and (min-height:1024px) {
+ .cover-wrapper .cover .cover-body .title {
+ font-size: 3.6rem
+ }
+
+ .cover-wrapper .cover .cover-body .subtitle {
+ font-size: 1.05rem
+ }
+
+ .cover-wrapper .cover .cover-body .logo {
+ max-height: 150px
+ }
+}
+
+.cover-wrapper .cover .cover-body .m_search {
+ position: relative;
+ max-width: calc(100% - 16px);
+ width: 320px;
+ vertical-align: middle
+}
+
+.cover-wrapper .cover .cover-body .m_search .form {
+ position: relative;
+ display: block;
+ width: 100%
+}
+
+.cover-wrapper .cover .cover-body .m_search .icon, .cover-wrapper .cover .cover-body .m_search .input {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.cover-wrapper .cover .cover-body .m_search .icon {
+ position: absolute;
+ display: block;
+ line-height: 2.5rem;
+ width: 32px;
+ top: 0;
+ left: 1rem;
+ color: rgba(85, 85, 85, .75)
+}
+
+.cover-wrapper .cover .cover-body .m_search .input {
+ display: block;
+ height: 2.5rem;
+ width: 100%;
+ box-shadow: none;
+ box-sizing: border-box;
+ font-size: .875rem;
+ -webkit-appearance: none;
+ padding-left: 36px;
+ border-radius: 1.4rem;
+ background: rgba(255, 255, 255, .6);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ border: none;
+ color: #444
+}
+
+@media screen and (max-width:500px) {
+ .cover-wrapper .cover .cover-body .m_search .input {
+ padding-left: 36px
+ }
+}
+
+.cover-wrapper .cover .cover-body .m_search .input:hover {
+ background: rgba(255, 255, 255, .8)
+}
+
+.cover-wrapper .cover .cover-body .m_search .input:focus {
+ background: #fff
+}
+
+.cover-wrapper .cover .cover-body .menu {
+ margin-top: 16px
+}
+
+.cover-wrapper .cover .cover-body .menu ul {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ justify-content: center
+}
+
+.cover-wrapper .cover .cover-body .menu ul li {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ padding: 0;
+ height: auto
+}
+
+.cover-wrapper .cover .cover-body .menu ul > li > a {
+ font-size: .875rem;
+ padding: 2px;
+ margin: 4px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ color: #555;
+ border-bottom: 2px solid transparent
+}
+
+.cover-wrapper .cover .cover-body .menu ul > li > a.active, .cover-wrapper .cover .cover-body .menu ul > li > a:active,
+.cover-wrapper .cover .cover-body .menu ul > li > a:hover {
+ color: #2196f3;
+ border-bottom: 2px solid #2196f3
+}
+
+.cover-wrapper .cover .cover-body .menu ul > li > a.white {
+ color: rgba(255, 255, 255, .7);
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.cover-wrapper .cover .cover-body .menu ul > li > a.white.active, .cover-wrapper .cover .cover-body .menu ul > li > a.white:active,
+.cover-wrapper .cover .cover-body .menu ul > li > a.white:hover {
+ color: #fff;
+ border-bottom: 2px solid #fff
+}
+
+.cover-wrapper .cover .cover-body .switcher > li a:hover {
+ background: rgba(68, 68, 68, .15)
+}
+
+footer {
+ position: relative;
+ bottom: 10px;
+ padding: 10px 10px 10px 10px;
+ width: 100%;
+ color: rgba(68, 68, 68, .65);
+ margin: 0 auto;
+ overflow: hidden;
+ text-align: center
+}
+
+footer, footer p {
+ font-size: .8125rem
+}
+
+footer.white, footer.white a {
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+footer .codename {
+ text-decoration: underline
+}
+
+footer .social-wrapper {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin: 4px 8px;
+ font-size: 16px
+}
+
+footer a {
+ color: rgba(68, 68, 68, .65);
+ padding: 0;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+footer a.social {
+ position: relative;
+ display: inline-block;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ margin: 4px;
+ border-radius: 100px
+}
+
+footer a.social:hover {
+ background: #e8f4fd;
+ color: #2196f3
+}
+
+footer .copyright {
+ margin-top: 16px;
+ font-size: .75rem
+}
+
+@media screen and (max-width:768px) {
+ footer {
+ justify-content: center
+ }
+}
+
+.article.typo.l_friends .friends-group .friend-content {
+ display: flex;
+ flex-wrap: wrap;
+ margin: -8px;
+ border-radius: 12px;
+ align-items: flex-start;
+ line-height: 1.3
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card {
+ display: flex;
+ border-radius: 4px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ padding: 8px 0;
+ margin: 8px;
+ margin-top: calc(2.25 * 16px + 32px);
+ color: rgba(68, 68, 68, .65);
+ background: #f4f4f4;
+ justify-content: flex-start;
+ align-content: flex-start;
+ flex-direction: column;
+ width: calc(100% / 4 - 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .article.typo.l_friends .friends-group .friend-content .friend-card {
+ width: calc(100% / 4 - 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .article.typo.l_friends .friends-group .friend-content .friend-card {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .article.typo.l_friends .friends-group .friend-content .friend-card {
+ width: calc(100% / 2 - 16px)
+ }
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card:hover {
+ text-decoration: none
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card:hover .friend-left .avatar {
+ transform: scale(1.2) rotate(12deg);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-left {
+ display: flex;
+ align-self: center
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-left .avatar {
+ width: 64px;
+ height: 64px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ margin: 16px 8px 4px 8px;
+ margin-top: calc(-1.25 * 16px - 32px);
+ border-radius: 100%;
+ border: 2px solid #fff;
+ background: #fff
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right {
+ margin: 4px 8px;
+ display: flex;
+ flex-direction: column;
+ text-align: center
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p {
+ text-align: center
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right .friend-tags-wrapper {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ margin-left: -2px;
+ word-break: break-all
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p {
+ margin: 0
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p.friend-name {
+ font-size: .8125rem;
+ padding-top: 4px;
+ font-weight: 700
+}
+
+.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p.tags {
+ font-size: .75rem;
+ display: inline;
+ background: 0 0;
+ word-wrap: break-word;
+ padding-right: 4px
+}
+
+.l_body {
+ position: relative;
+ margin: 16px 16px 0 16px;
+}
+
+.l_body.nocover {
+ margin-top: 64px
+}
+
+@media screen and (max-width:425px) {
+ //.l_body {
+ // margin: 80px 0 16px
+ //}
+ //
+ //.l_body.nocover {
+ // margin-top: 48px
+ //}
+}
+
+.l_body .s-top {
+ transition: all .6s ease;
+ -moz-transition: all .6s ease;
+ -webkit-transition: all .6s ease;
+ -o-transition: all .6s ease;
+ z-index: 9;
+ position: fixed;
+ width: 48px;
+ height: 48px;
+ line-height: 48px;
+ border-radius: 100%;
+ bottom: 32px;
+ right: 32px;
+ transform: translateY(100px) scale(0);
+ transform-origin: bottom;
+ color: #444
+}
+
+@media screen and (max-width:768px) {
+ .l_body .s-top {
+ right: 16px
+ }
+}
+
+.l_body .s-top.show {
+ transform: translateY(0) scale(1)
+}
+
+.l_body .s-top.show.hl {
+ background: #2196f3;
+ color: #fff;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
+}
+
+@media screen and (min-width:768px) {
+ .l_body .s-top:hover {
+ transform: scale(1.2);
+ border-radius: 25%;
+ background: #2196f3;
+ color: #fff;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+ }
+
+ .l_body .s-top:hover.hl {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+ }
+}
+
+.l_main {
+ width: calc(100% - 1 * 285px);
+ padding-right: 16px;
+ float: left
+}
+
+@media screen and (max-width:1440px) {
+ .l_main {
+ width: calc(100% - 1 * 240px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .l_main {
+ width: 100%
+ }
+}
+
+.l_main.no_sidebar {
+ width: 100%;
+ padding-right: 0;
+ max-width: 795px;
+ margin: auto
+}
+
+.l_main.no_sidebar ~ .l_side {
+ display: none
+}
+
+.l_main .post-list {
+ position: relative;
+ margin: 16px auto;
+ -webkit-column-gap: 16px;
+ -moz-column-gap: 16px;
+ column-gap: 16px
+}
+
+.l_main .post-list.multiple-columns {
+ -webkit-columns: 320px;
+ -moz-columns: 320px;
+ columns: 320px
+}
+
+.l_main ul.popular-posts h3 {
+ padding: 0;
+ margin: 0;
+ font-size: 1rem
+}
+
+.l_main .post-wrapper {
+ column-break-inside: avoid;
+ -webkit-column-break-inside: avoid;
+ -moz-column-break-inside: avoid;
+ break-inside: avoid-column
+}
+
+.l_main .post-wrapper {
+ margin-bottom: 16px
+}
+
+.l_main .post-wrapper .post .meta {
+ margin-bottom: 16px
+}
+
+.l_main .post-wrapper .post .meta .title {
+ font-size: 1.375rem
+}
+
+.l_main .post-wrapper .post .meta .title a {
+ font-size: 1.375rem
+}
+
+@media screen and (max-width:500px) {
+ .l_main .post-wrapper .post .meta {
+ margin-bottom: 16px
+ }
+
+ .l_main .post-wrapper .post .meta .title {
+ font-size: 1.25rem
+ }
+}
+
+@media screen and (max-width:500px) and (max-width:500px) {
+ .l_main .post-wrapper .post {
+ padding: 24px 16px
+ }
+}
+
+.l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 8 - 0 * 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 7 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 6 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 5 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:425px) {
+ .l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 4 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:375px) {
+ .l_main .widget.grid .content .grid.fixed a {
+ width: calc(100% / 3 - 0 * 16px)
+ }
+}
+
+.l_main .post {
+ position: relative;
+ margin: 16px auto;
+ padding: 24px;
+ border-radius: 12px
+}
+
+@media screen and (max-width:425px) {
+ //.l_main .post {
+ // border-radius: 0
+ //}
+}
+
+.l_main .post h1 {
+ font-weight: 400;
+ font-size: 1.625rem
+}
+
+.l_main .post .meta {
+ color: rgba(68, 68, 68, .65)
+}
+
+.l_main .post .meta#header-meta {
+ margin-top: 0;
+ margin-bottom: 16px
+}
+
+.l_main .post .meta#footer-meta {
+ margin-top: 32px;
+ margin-bottom: 8px
+}
+
+.l_main .post .meta .aplayer, .l_main .post .meta .thumbnail {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ width: 65px;
+ height: 65px;
+ border-radius: 100%;
+ float: right;
+ margin: 4px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
+}
+
+.l_main .post .meta .aplayer:hover, .l_main .post .meta .thumbnail:hover {
+ border-radius: 25%;
+ transform: scale(1.1);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+}
+
+@media screen and (max-width:500px) {
+ .l_main .post .meta .aplayer:hover, .l_main .post .meta .thumbnail:hover {
+ border-radius: 100%;
+ transform: scale(1);
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
+ }
+}
+
+.l_main .post .meta .thumbnail {
+ width: auto;
+ border-radius: 4px;
+ box-shadow: none;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main .post .meta .thumbnail:hover {
+ border-radius: 4px;
+ transform: scale(1.1) rotate(4deg);
+ box-shadow: none
+}
+
+.l_main .post .meta .title {
+ transition: all .1s ease;
+ -moz-transition: all .1s ease;
+ -webkit-transition: all .1s ease;
+ -o-transition: all .1s ease;
+ margin: 0
+}
+
+.l_main .post .meta .title a {
+ display: inline;
+ font-weight: 400;
+ color: #444;
+ text-decoration: none
+}
+
+.l_main .post .meta .title a:hover {
+ color: #ff5722
+}
+
+.l_main .post .meta .new-meta-box {
+ transition: all .1s ease;
+ -moz-transition: all .1s ease;
+ -webkit-transition: all .1s ease;
+ -o-transition: all .1s ease;
+ padding-top: 4px;
+ padding-bottom: 8px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap
+}
+
+.l_main .post .meta .new-meta-box, .l_main .post .meta .new-meta-box i,
+.l_main .post .meta .new-meta-box p {
+ font-size: .875rem
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item {
+ color: rgba(68, 68, 68, .65);
+ line-height: 1.2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px;
+ margin: 0 8px 0 0;
+ border-radius: 4px
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn {
+ color: #fff;
+ padding: 1px 4px;
+ border-radius: 2px;
+ margin: 2px
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn, .l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn i,
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn p {
+ line-height: 1.5
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn i {
+ padding-left: 3px;
+ padding-top: 2px
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn p {
+ color: #fff
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover {
+ color: #fff
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover p {
+ color: #fff
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item .notlink {
+ cursor: default
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item .notlink:hover {
+ color: rgba(68, 68, 68, .65)
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item .notlink:hover p {
+ color: rgba(68, 68, 68, .65)
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item:last-child {
+ margin-right: 0
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item i, .l_main .post .meta .new-meta-box .new-meta-item img {
+ display: inline
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item i {
+ margin-right: 4px;
+ border-radius: 0
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item i.fas {
+ margin-right: 2px
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a, .l_main .post .meta .new-meta-box .new-meta-item p {
+ color: rgba(68, 68, 68, .65);
+ padding-left: 0;
+ padding-right: 4px
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a {
+ display: flex;
+ justify-content: center;
+ align-items: center
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a img {
+ height: 1.2em;
+ width: 1.2em;
+ margin-right: 5px;
+ transform: translateY(-1px)
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a p {
+ margin: 0;
+ padding-top: 2px;
+ font-weight: 400;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a:hover {
+ color: #ff5722;
+ text-decoration: none
+}
+
+.l_main .post .meta .new-meta-box .new-meta-item a:hover p {
+ color: #ff5722
+}
+
+.l_main .post .meta .new-meta-box .author i, .l_main .post .meta .new-meta-box .author img {
+ border-radius: 100%
+}
+
+.l_main .post .meta .new-meta-box .share-body {
+ display: flex
+}
+
+.l_main .post .meta .new-meta-box .share-body a {
+ padding: 0;
+ margin-right: 4px
+}
+
+.l_main .post .meta .new-meta-box .share-body a img {
+ height: 1.8em;
+ width: auto;
+ background: 0 0
+}
+
+.l_main .post span > img {
+ display: inline-block
+}
+
+.l_main .post a img {
+ display: inline
+}
+
+@media screen and (max-width:768px) {
+ .l_main {
+ padding-right: 0
+ }
+
+ .l_main .post .meta {
+ margin-bottom: 16px
+ }
+
+ .l_main .post .meta .title {
+ font-size: 1.25rem
+ }
+}
+
+@media screen and (max-width:768px) and (max-width:500px) {
+ .l_main {
+ width: 100%
+ }
+}
+
+@media screen and (max-width:768px) and (max-width:500px) {
+ .l_main .post {
+ padding: 24px 16px
+ }
+}
+
+details {
+ display: block;
+ background: #f4f4f4;
+ padding: 16px;
+ margin: 1rem 0;
+ border-radius: 4px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+details summary {
+ cursor: pointer;
+ padding: 16px;
+ margin: -16px;
+ color: rgba(85, 85, 85, .7);
+ font-size: .875rem;
+ font-weight: 700
+}
+
+details summary:hover {
+ color: rgba(85, 85, 85, .9)
+}
+
+details[blue] {
+ background: #e8f4fd
+}
+
+details[cyan] {
+ background: #e8fafe
+}
+
+details[green] {
+ background: #ebf9ed
+}
+
+details[yellow] {
+ background: #fff8e9
+}
+
+details[red] {
+ background: #feefee
+}
+
+.body-wrapper {
+ position: relative;
+ display: flex;
+ width: 100%;
+ max-width: 1080px;
+ margin: 0 auto;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: stretch
+}
+
+.container--flex {
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center
+}
+
+div.hoverbox {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center
+}
+
+div.hoverbox > div.target {
+ display: none;
+ position: absolute;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
+ padding: 8px;
+ margin-left: -4px;
+ margin-top: -108px
+}
+
+div.hoverbox > div.target > img {
+ margin: 0;
+ padding: 0;
+ height: 128px;
+ width: 128px
+}
+
+div.hoverbox:hover > div.target {
+ display: flex
+}
+
+.comments .article p[ct] {
+ margin-top: 0;
+ margin-bottom: .5rem;
+ font-size: 1.125rem;
+ color: #444
+}
+
+.comments .article p[cst] {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ font-size: .875rem
+}
+
+.white-box {
+ background: #fff
+}
+
+#loading-bar-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 2px;
+ width: 100%;
+ z-index: 99999
+}
+
+#loading-bar {
+ position: fixed;
+ width: 0;
+ height: 2px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ background-color: #2196f3
+}
+
+.l_header {
+ position: fixed;
+ z-index: 9999;
+ top: 0;
+ width: 100%;
+ line-height: 64px;
+ padding: 0 16px;
+ margin-bottom: 16px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ background: #fff
+}
+
+.l_header .wrapper {
+ padding: auto 16px;
+ max-width: 1080px;
+ margin: auto;
+ height: 64px;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_header .wrapper .nav-main {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ transform: translateY(-64px)
+}
+
+.l_header .wrapper .nav-sub {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ opacity: 0
+}
+
+.l_header .wrapper a:not([href]) {
+ cursor: default
+}
+
+.l_header .wrapper a.logo {
+ color: #444
+}
+
+.l_header.no_sidebar .wrapper {
+ max-width: 795px
+}
+
+@media screen and (max-width:500px) {
+ .l_header .wrapper.sub .logo {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ padding-left: 16px;
+ padding-right: 0
+ }
+}
+
+.l_header .wrapper.sub .nav-main {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ transform: translateY(-128px)
+}
+
+.l_header .wrapper.sub .nav-sub {
+ opacity: 1
+}
+
+.l_header .nav-main, .l_header .nav-sub {
+ height: 64px
+}
+
+.l_header.hide {
+ transform: translateY(100px) scale(0)
+}
+
+.l_header.show {
+ transform: translateY(0) scale(1)
+}
+
+.l_header, .l_header a {
+ height: 64px;
+ line-height: 64px
+}
+
+.l_header .logo {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 0 24px;
+ font-size: 1.25rem;
+ font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
+ letter-spacing: 0
+}
+
+@media screen and (max-width:500px) {
+ .l_header .logo {
+ padding: 0 16px
+ }
+}
+
+.l_header .logo.img {
+ padding: 0 16px 0 0
+}
+
+.l_header .logo img {
+ height: 100%
+}
+
+.l_header img.logo {
+ padding: 4px 0
+}
+
+.l_header .nav-sub .logo {
+ padding: 0 24px;
+ font-size: 1rem;
+ font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+
+@media screen and (max-width:500px) {
+ .l_header .nav-sub .logo {
+ padding: 0 16px;
+ letter-spacing: -.5px;
+ padding-top: 1px
+ }
+}
+
+.l_header .menu {
+ position: relative;
+ flex: 1 0 auto;
+ height: 64px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ margin: 0 16px 0 0
+}
+
+.l_header .menu li ul.submenu {
+ z-index: 1;
+ display: none;
+ position: absolute;
+ background: #fff;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
+ margin-top: -8px;
+ margin-left: 0;
+ border-radius: 6px;
+ border: 1px solid #e7e7e7;
+ padding: 8px 0
+}
+
+.l_header .menu li ul.submenu > hr {
+ margin-top: 8px;
+ margin-bottom: 8px
+}
+
+.l_header .menu li ul.submenu > li {
+ white-space: nowrap;
+ word-break: keep-all
+}
+
+.l_header .menu li ul.submenu > li.header {
+ font-size: .75rem;
+ font-weight: 700;
+ line-height: 2em;
+ color: rgba(68, 68, 68, .65);
+ margin: 8px 16px 4px
+}
+
+.l_header .menu li ul.submenu > li ul {
+ margin-left: 0;
+ display: none;
+ margin-top: -40px;
+ left: calc(100% - .5 * 16px)
+}
+
+.l_header .menu li ul.submenu > li > a {
+ font-size: .875rem;
+ font-weight: 700;
+ line-height: 33px;
+ padding: 0 16px;
+ height: 32px;
+ border-left: 2px solid transparent
+}
+
+.l_header .menu li ul.submenu > li > a.active, .l_header .menu li ul.submenu > li > a:active,
+.l_header .menu li ul.submenu > li > a:hover {
+ color: #2196f3;
+ border-left: 2px solid #2196f3;
+ border-bottom: none
+}
+
+.l_header .menu li ul.submenu > li > a > i {
+ margin-right: 4px
+}
+
+.l_header .menu li:hover > ul.submenu {
+ display: block
+}
+
+.l_header .menu ul > li > a {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ display: block;
+ padding: 0 8px;
+ color: rgba(68, 68, 68, .85)
+}
+
+.l_header .menu ul > li > a.current {
+ border-bottom: 2px solid rgba(33, 150, 243, .8)
+}
+
+.l_header .menu ul > li > a:hover {
+ color: #2196f3;
+ border-bottom: 2px solid #2196f3;
+ background: #e8f4fd
+}
+
+.l_header .menu ul > li > a.active, .l_header .menu ul > li > a:active {
+ color: #2196f3;
+ border-bottom: 2px solid #2196f3
+}
+
+@media screen and (max-width:500px) {
+ .l_header .menu {
+ display: none
+ }
+}
+
+.l_header .switcher {
+ display: none;
+ line-height: 64px
+}
+
+.l_header .switcher .s-toc {
+ display: none
+}
+
+@media screen and (max-width:768px) {
+ .l_header .switcher .s-toc {
+ display: flex
+ }
+}
+
+.l_header .switcher > li {
+ height: 48px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ margin: 2px
+}
+
+@media screen and (max-width:500px) {
+ .l_header .switcher > li {
+ margin: 0 1px;
+ height: 48px
+ }
+}
+
+.l_header .switcher > li a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 48px;
+ height: 48px;
+ padding: .85em 1.1em;
+ border-radius: 100px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ color: #2196f3
+}
+
+.l_header .switcher > li a.active, .l_header .switcher > li a:active {
+ background: #e8f4fd
+}
+
+@media screen and (max-width:500px) {
+ .l_header .switcher > li a {
+ width: 32px;
+ height: 48px
+ }
+}
+
+@media screen and (max-width:500px) {
+ .l_header .switcher {
+ display: flex;
+ padding-left: 8px;
+ padding-right: 10px
+ }
+}
+
+.l_header .nav-sub .switcher {
+ display: flex
+}
+
+.l_header .m_search {
+ position: relative;
+ display: flex;
+ width: 285px;
+ height: 64px
+}
+
+@media screen and (max-width:1440px) {
+ .l_header .m_search {
+ width: 240px
+ }
+}
+
+.l_header .m_search .form {
+ position: relative;
+ display: flex;
+ width: 100%;
+ margin: auto;
+ justify-content: flex-start;
+ align-items: center
+}
+
+.l_header .m_search .icon, .l_header .m_search .input {
+ transition: all .3s ease;
+ -moz-transition: all .3s ease;
+ -webkit-transition: all .3s ease;
+ -o-transition: all .3s ease
+}
+
+.l_header .m_search .icon {
+ position: absolute;
+ width: 32px;
+ left: 5px;
+ color: rgba(68, 68, 68, .7)
+}
+
+@media screen and (max-width:500px) {
+ .l_header .m_search .icon {
+ display: none
+ }
+}
+
+.l_header .m_search .input {
+ display: block;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ width: 100%;
+ color: #444;
+ background: rgba(242, 242, 242, .75);
+ box-shadow: none;
+ box-sizing: border-box;
+ padding-left: 36px;
+ font-size: .875rem;
+ border-radius: 8px;
+ border: 1px dashed transparent
+}
+
+@media screen and (max-width:500px) {
+ .l_header .m_search .input {
+ padding-left: 8px;
+ border: none
+ }
+
+ .l_header .m_search .input:focus, .l_header .m_search .input:hover {
+ border: none
+ }
+}
+
+.l_header .m_search .input:hover ~ .icon {
+ color: rgba(33, 150, 243, .8)
+}
+
+.l_header .m_search .input:focus ~ .icon {
+ color: #2196f3
+}
+
+@media (max-width:500px) {
+ .l_header {
+ padding: 0
+ }
+
+ .l_header .m_search {
+ width: 0;
+ overflow: hidden;
+ position: absolute;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ margin-left: 16px
+ }
+
+ .l_header.z_search-open .logo {
+ opacity: 0
+ }
+
+ .l_header.z_search-open .m_search {
+ width: calc(100% - 112px)
+ }
+}
+
+ul.menu-phone {
+ display: none;
+ position: fixed;
+ padding: 8px 0;
+ top: 80px;
+ right: 16px;
+ z-index: 10000;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
+ border-radius: 6px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ transform: scale(0, 0) rotate(12deg);
+ transform-origin: right top
+}
+
+@media screen and (max-width:500px) {
+ ul.menu-phone {
+ display: block
+ }
+}
+
+ul.menu-phone.show {
+ transform: scale(1, 1)
+}
+
+ul.menu-phone > li > a {
+ display: block;
+ font-size: 1rem;
+ color: #444;
+ line-height: 33px;
+ height: 32px;
+ padding: 0 16px;
+ border-left: 2px solid transparent
+}
+
+ul.menu-phone > li > a i {
+ margin-right: 4px
+}
+
+ul.menu-phone > li > a.active {
+ border-left: 2px solid #2196f3;
+ color: #2196f3
+}
+
+.cover-wrapper .l_header {
+ transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -o-transition: all .5s ease;
+ transform: translateY(-128px)
+}
+
+.cover-wrapper .l_header.show {
+ transform: translateY(0)
+}
+
+.l_main .prev-next {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ color: rgba(68, 68, 68, .65);
+ margin: 0;
+ font-size: 1rem
+}
+
+.l_main .prev-next .prev {
+ text-align: left;
+ border-top-right-radius: 32px;
+ border-bottom-right-radius: 32px
+}
+
+.l_main .prev-next .next {
+ text-align: right;
+ border-top-left-radius: 32px;
+ border-bottom-left-radius: 32px
+}
+
+.l_main .prev-next p {
+ margin: 16px
+}
+
+.l_main .prev-next section {
+ color: rgba(68, 68, 68, .65);
+ padding: 16px;
+ border-radius: 12px
+}
+
+.l_main .prev-next section:hover {
+ color: #ff5722
+}
+
+@media screen and (max-width:425px) {
+ .l_main .prev-next section {
+ border-radius: 0
+ }
+}
+
+.l_main .article .prev-next {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-content: flex-start
+}
+
+.l_main .article .prev-next > a {
+ width: 100%;
+ padding: 8px;
+ color: rgba(68, 68, 68, .65);
+ background: #f4f4f4;
+ border-radius: 4px
+}
+
+.l_main .article .prev-next > a:hover {
+ text-decoration: none;
+ background: #ffeee8
+}
+
+.l_main .article .prev-next > a:hover p.title {
+ color: #ff5722
+}
+
+.l_main .article .prev-next > a p.title {
+ margin: 8px .5rem;
+ font-weight: 700;
+ font-size: 1rem
+}
+
+.l_main .article .prev-next > a p.title > i {
+ width: 1rem
+}
+
+.l_main .article .prev-next > a p.content {
+ font-size: .875rem;
+ margin: 0 .5rem;
+ text-align: justify;
+ word-break: break-all
+}
+
+.l_main .article .prev-next > a:only-child {
+ margin-left: 0;
+ margin-right: 0
+}
+
+.l_main .article .prev-next .prev {
+ margin-left: 0;
+ margin-right: 8px
+}
+
+.l_main .article .prev-next .prev p.title {
+ text-align: left
+}
+
+.l_main .article .prev-next .next {
+ margin-left: 8px;
+ margin-right: 0
+}
+
+.l_main .article .prev-next .next p.title {
+ text-align: right
+}
+
+#u-search {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 60px 20px;
+ z-index: 999999
+}
+
+@media screen and (max-width:680px) {
+ #u-search {
+ padding: 0
+ }
+}
+
+#u-search .modal {
+ position: fixed;
+ height: 80%;
+ width: 100%;
+ max-width: 640px;
+ left: 50%;
+ top: 0;
+ margin: 64px 0 0 -320px;
+ background: #fff;
+ z-index: 3;
+ border-radius: 4px;
+ overflow: hidden
+}
+
+@media screen and (max-width:680px) {
+ #u-search .modal {
+ box-shadow: none;
+ max-width: none;
+ top: 0;
+ left: 0;
+ margin: 0;
+ height: 100%;
+ border-radius: 0
+ }
+}
+
+#u-search .modal-ajax-content {
+ opacity: 0;
+ visibility: hidden;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+#u-search .modal-ajax-content.loaded {
+ opacity: 1;
+ visibility: visible
+}
+
+#u-search .modal-header {
+ position: relative;
+ width: 100%;
+ height: 64px;
+ z-index: 3;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ font-size: 16px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ background: #f2f2f2;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+@media screen and (max-width:680px) {
+ #u-search .modal-header {
+ border-radius: 0;
+ padding: 0
+ }
+}
+
+#u-search .modal-header .btn-close {
+ display: block;
+ position: absolute;
+ width: 55px;
+ height: 64px;
+ top: 0;
+ right: 0;
+ color: #2196f3;
+ cursor: pointer;
+ text-align: center;
+ line-height: 64px;
+ vertical-align: middle;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ z-index: 2
+}
+
+#u-search .modal-header .btn-close:hover {
+ transform: rotate(90deg)
+}
+
+#u-search .modal-header .modal-loading {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: 0 0;
+ z-index: 1
+}
+
+#u-search .modal-header .modal-loading .modal-loading-bar {
+ display: block;
+ position: relative;
+ width: 0%;
+ height: 100%;
+ background: #2196f3;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+#u-search .modal-header #u-search-modal-form {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ z-index: 2
+}
+
+#u-search .modal-header #u-search-modal-form #u-search-modal-input {
+ margin: 16px 50px;
+ padding: 0 8px;
+ width: calc(100% - 100px - 16px);
+ line-height: 2rem;
+ border-radius: 4px;
+ vertical-align: middle;
+ border: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ box-shadow: none;
+ background: 0 0;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+@media screen and (max-width:680px) {
+ #u-search .modal-header #u-search-modal-form #u-search-modal-input {
+ padding: 0
+ }
+}
+
+#u-search .modal-header #u-search-modal-form #u-search-modal-input:focus {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px
+}
+
+#u-search .modal-header #u-search-modal-btn-submit {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 5px;
+ padding-top: 2px;
+ background: 0 0;
+ border: none;
+ width: 50px;
+ height: 64px;
+ vertical-align: middle;
+ color: #2196f3;
+ z-index: 2
+}
+
+#u-search .modal-footer {
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 50px;
+ padding: 0 15px;
+ background: #fff
+}
+
+#u-search .modal-footer .logo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ z-index: 0
+}
+
+#u-search .modal-footer .logo a {
+ display: inline-block;
+ height: 50px
+}
+
+#u-search .modal-footer .logo.google img {
+ height: 24px;
+ margin-top: 13px
+}
+
+#u-search .modal-footer .logo.baidu img {
+ height: 22px;
+ margin-top: 14px
+}
+
+#u-search .modal-footer .logo img {
+ position: relative;
+ display: inline-block;
+ width: auto;
+ height: 18px;
+ margin-top: 16px
+}
+
+#u-search .modal-footer .modal-error {
+ position: relative;
+ float: left;
+ vertical-align: middle;
+ line-height: 50px;
+ font-size: 13px;
+ z-index: 1
+}
+
+#u-search .modal-footer .modal-metadata {
+ position: relative;
+ float: left;
+ vertical-align: middle;
+ line-height: 50px;
+ font-size: 13px;
+ z-index: 1
+}
+
+#u-search .modal-footer .nav {
+ position: relative;
+ display: block;
+ float: right;
+ vertical-align: middle;
+ font-size: .875rem;
+ font-weight: 700;
+ line-height: 50px;
+ color: rgba(68, 68, 68, .65);
+ cursor: pointer;
+ z-index: 1
+}
+
+#u-search .modal-footer .nav:hover {
+ color: #ff5722
+}
+
+#u-search .modal-footer .nav.btn-next {
+ margin-left: 16px
+}
+
+#u-search .modal-footer .nav .icon {
+ font-size: .875rem
+}
+
+#u-search .modal-body {
+ position: absolute;
+ padding: 16px;
+ width: 100%;
+ height: calc(100% - 64px);
+ top: 64px;
+ left: 0;
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+ background: #fff;
+ border-radius: 4px
+}
+
+#u-search .modal-body .modal-results {
+ list-style: none
+}
+
+#u-search .modal-body .modal-results .result {
+ position: relative;
+ display: block;
+ padding: 16px;
+ text-decoration: none;
+ border-radius: 4px
+}
+
+#u-search .modal-body .modal-results .result b[mark] {
+ color: #0c7cd5;
+ text-decoration: underline
+}
+
+#u-search .modal-body .modal-results .result:hover {
+ background: #e8f4fd
+}
+
+#u-search .modal-body .modal-results .result .title {
+ display: inline-block;
+ max-width: 100%;
+ color: #5e5e5e;
+ font-weight: 700;
+ padding: 1px;
+ margin-bottom: 2px;
+ white-space: normal;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 1.125rem
+}
+
+#u-search .modal-body .modal-results .result .digest {
+ display: block;
+ white-space: inherit;
+ overflow: hidden;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ font-size: .8125rem;
+ color: rgba(68, 68, 68, .65)
+}
+
+#u-search .modal-body .modal-results .result .icon {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ margin-top: -4px;
+ font-size: 11px;
+ color: grey
+}
+
+#u-search .modal-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, .7);
+ z-index: 1
+}
+
+.l_side {
+ width: 285px;
+ float: right;
+ position: relative;
+ display: flex;
+ flex-direction: column
+}
+
+@media screen and (max-width:1440px) {
+ .l_side {
+ width: 240px
+ }
+}
+
+@media screen and (max-width:768px) {
+ .l_side {
+ width: 100%
+ }
+}
+
+.widget {
+ z-index: 0;
+ background: #fff;
+ margin-top: 16px;
+ border-radius: 12px;
+ width: 100%;
+ display: none
+}
+
+.widget.desktop {
+ display: block
+}
+
+@media screen and (max-width:768px) {
+ .widget {
+ display: none !important
+ }
+
+ .widget.mobile {
+ display: block !important
+ }
+}
+
+@media screen and (max-width:425px) {
+ .widget {
+ width: calc(100% - 2 * 16px);
+ margin: 16px 16px 0 16px;
+ display: none !important
+ }
+
+ .widget.mobile {
+ display: block !important
+ }
+}
+
+.widget header {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ font-weight: 700;
+ line-height: 1.5em;
+ padding: calc(16px - 2px);
+ padding-bottom: 0
+}
+
+.widget header, .widget header a {
+ color: #2196f3
+}
+
+.widget header > a:hover {
+ color: #ff5722
+}
+
+.widget header span.name {
+ margin-left: 8px
+}
+
+.widget .content {
+ text-align: justify;
+ font-size: .875rem;
+ padding: 8px 0;
+ max-height: calc(100% - 264px);
+ max-width: 100%
+}
+
+.widget .content p {
+ margin: .5rem 0
+}
+
+.widget .content ul > li a {
+ color: rgba(68, 68, 68, .65);
+ padding: 0 16px;
+ padding-left: 12px;
+ line-height: 2;
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ border-left: 2px solid transparent;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.widget .content ul.entry a .name, .widget .content ul.popular-posts a .name {
+ flex: auto;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: rgba(68, 68, 68, .8)
+}
+
+.widget .content ul.entry a .badge, .widget .content ul.popular-posts a .badge {
+ flex: none;
+ font-weight: 400;
+ font-size: .875rem;
+ color: rgba(68, 68, 68, .7)
+}
+
+.widget .content ul.entry a:hover, .widget .content ul.popular-posts a:hover {
+ border-left: 2px solid #2196f3;
+ background: rgba(33, 150, 243, .1)
+}
+
+.widget .content ul.entry a.active, .widget .content ul.popular-posts a.active {
+ border-left: 2px solid #2196f3
+}
+
+.widget .content ul.entry a.active .name, .widget .content ul.popular-posts a.active .name {
+ color: #2196f3
+}
+
+.widget .content ul.entry a.active .badge, .widget .content ul.popular-posts a.active .badge {
+ color: rgba(33, 150, 243, .9)
+}
+
+.widget .content ul.entry a:active, .widget .content ul.popular-posts a:active {
+ border-left: 4px solid #2196f3
+}
+
+.widget .content ul.entry a.child, .widget .content ul.popular-posts a.child {
+ padding-left: 32px
+}
+
+.widget.blogger {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.widget.blogger .content {
+ padding: 0
+}
+
+.widget.blogger .content div.avatar {
+ display: flex;
+ justify-content: center
+}
+
+.widget.blogger .content img {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ width: 285px;
+ height: 285px;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px
+}
+
+@media screen and (max-width:1440px) {
+ .widget.blogger .content img {
+ width: 240px;
+ height: 240px
+ }
+}
+
+@media screen and (max-width:768px) {
+ .widget.blogger .content img {
+ width: 96px;
+ height: 96px;
+ border-radius: 100%;
+ margin-top: 8px;
+ padding: 8px
+ }
+}
+
+.widget.blogger .content h2 {
+ text-align: center;
+ font-weight: 700;
+ margin: 8px;
+ margin-top: 16px
+}
+
+@media screen and (max-width:768px) {
+ .widget.blogger .content h2 {
+ margin: 8px
+ }
+}
+
+.widget.blogger .content p {
+ font-weight: 700;
+ text-align: center;
+ margin: 8px 8px 0 8px;
+ empty-cells: hide
+}
+
+.widget.blogger .content .social-wrapper {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin: 4px 4px
+}
+
+.widget.blogger .content .social-wrapper a {
+ color: rgba(68, 68, 68, .65);
+ padding: 0;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.widget.blogger .content .social-wrapper a:hover {
+ color: #ff5722
+}
+
+.widget.blogger .content .social-wrapper a.social {
+ font-size: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ margin: 4px;
+ border-radius: 100px
+}
+
+.widget.blogger .content .social-wrapper a.social:hover {
+ background: #e8f4fd;
+ color: #2196f3
+}
+
+@media screen and (max-width:768px) {
+ .widget.blogger .content .social-wrapper {
+ justify-content: center;
+ display: none
+ }
+}
+
+@media screen and (max-width:768px) {
+ .widget.blogger {
+ box-shadow: none;
+ background: 0 0 !important;
+ margin-top: 32px;
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none
+ }
+}
+
+.widget.text .content {
+ padding: 4px 16px
+}
+
+.widget.text .content, .widget.text .content p {
+ font-size: .875rem;
+ word-break: break-all
+}
+
+.widget.text .content a {
+ color: #2196f3;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.widget.text .content a:hover {
+ color: #ff5722;
+ text-decoration: underline
+}
+
+.widget.text .content a:active {
+ color: #d93400
+}
+
+.widget.list .content {
+ padding: 8px 0
+}
+
+.widget.list .content a {
+ font-size: .875rem;
+ font-weight: 700;
+ line-height: 2.4em
+}
+
+.widget.list .content a:hover {
+ text-decoration: none
+}
+
+.widget.list .content a i {
+ margin-left: 1px
+}
+
+.widget.list .content a img {
+ display: inline;
+ vertical-align: middle;
+ height: 2em;
+ width: 2em
+}
+
+.widget.list .content a img#round {
+ border-radius: 100%
+}
+
+.widget.grid .content .grid {
+ border: none;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ padding: 0 16px
+}
+
+.widget.grid .content .grid a {
+ text-align: center;
+ border-radius: 12px;
+ margin: 4px 0;
+ padding: 4px 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: .75rem;
+ font-weight: 700;
+ color: rgba(68, 68, 68, .7);
+ line-height: 1.5;
+ word-wrap: break-word;
+ border: 1px solid transparent
+}
+
+.widget.grid .content .grid a i {
+ margin-top: .3em;
+ margin-bottom: .3em;
+ font-size: 1.8em
+}
+
+.widget.grid .content .grid a img {
+ display: inline;
+ vertical-align: middle;
+ margin-bottom: 4px
+}
+
+.widget.grid .content .grid a img#round {
+ border-radius: 100%
+}
+
+.widget.grid .content .grid a:hover {
+ color: #2196f3;
+ background: #e8f4fd;
+ border-radius: 4px
+}
+
+.widget.grid .content .grid a:active {
+ color: #2196f3
+}
+
+.widget.grid .content .grid a.active {
+ color: #2196f3;
+ border: 1px solid #2196f3
+}
+
+.widget.grid .content .grid.fixed a {
+ width: calc(100% / 3 - 0 * 16px)
+}
+
+@media screen and (max-width:768px) {
+ .widget.grid .content .grid.fixed a {
+ width: calc(100% / 6 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .widget.grid .content .grid.fixed a {
+ width: calc(100% / 5 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:425px) {
+ .widget.grid .content .grid.fixed a {
+ width: calc(100% / 4 - 0 * 16px)
+ }
+}
+
+@media screen and (max-width:375px) {
+ .widget.grid .content .grid.fixed a {
+ width: calc(100% / 3 - 0 * 16px)
+ }
+}
+
+.widget.tagcloud .content {
+ text-align: justify;
+ padding: 8px 16px
+}
+
+.widget.tagcloud .content a {
+ display: inline-block;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ line-height: 1.6em
+}
+
+.widget.tagcloud .content a:hover {
+ color: #ff5722 !important;
+ text-decoration: underline
+}
+
+.widget.related_posts .content {
+ font-weight: 700
+}
+
+.widget.related_posts .content ul {
+ margin-top: 8px;
+ margin-bottom: 8px
+}
+
+.widget.related_posts .content h3 {
+ font-size: .875rem;
+ font-weight: 700;
+ margin: 0
+}
+
+.widget.related_posts .content h3 a {
+ line-height: inherit;
+ padding-top: 4px;
+ padding-bottom: 4px
+}
+
+.widget.qrcode .content {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ padding-left: 16px;
+ padding-right: 16px
+}
+
+.widget.qrcode .content, .widget.qrcode .content img {
+ margin-bottom: 4px
+}
+
+.l_side > .widget.page .content {
+ padding-top: 0;
+ padding-left: 12px;
+ padding-right: 12px
+}
+
+.aplayer-container {
+ display: flex;
+ justify-content: center;
+ min-height: 100px
+}
+
+.aplayer-container meting-js {
+ max-width: 100%
+}
+
+.aplayer {
+ max-width: 500px;
+ border-radius: 4px;
+ color: #444;
+ font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif
+}
+
+.aplayer .aplayer-list {
+ text-align: left
+}
+
+@media screen and (max-width:500px) {
+ .aplayer {
+ border-radius: 12px
+ }
+}
+
+div.tabs .highlight, div.tabs ol, div.tabs p, div.tabs ul {
+ margin-top: .5rem;
+ margin-bottom: .5rem
+}
+
+div.tabs {
+ display: block;
+ position: relative;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border-bottom: 0;
+ border-radius: 4px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
+}
+
+div.tabs ul.nav-tabs {
+ display: flex;
+ overflow-x: auto;
+ white-space: nowrap;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 0;
+ padding-top: 2px;
+ background: #efefef;
+ border-radius: 4px 4px 0 0;
+ padding: 0 4px
+}
+
+div.tabs ul.nav-tabs li.tab {
+ list-style-type: none;
+ border-radius: 4px 4px 0 0
+}
+
+div.tabs ul.nav-tabs li.tab a {
+ display: block;
+ padding: 8px;
+ margin: 0 2px;
+ text-align: center;
+ font-size: .875rem;
+ font-weight: 700;
+ color: rgba(68, 68, 68, .65);
+ border-top: 2px solid transparent;
+ border-bottom: 2px solid transparent
+}
+
+div.tabs ul.nav-tabs li.tab a:hover {
+ text-decoration: none;
+ color: #555;
+ border-bottom: 2px solid rgba(68, 68, 68, .65)
+}
+
+div.tabs ul.nav-tabs li.tab.active a {
+ cursor: default;
+ color: #555;
+ border-bottom: 2px solid rgba(68, 68, 68, .65)
+}
+
+div.tabs .tab-content {
+ overflow: hidden
+}
+
+div.tabs .tab-content .tab-pane {
+ background: #f9f9f9;
+ border-top: 0;
+ border-radius: 4px;
+ padding: .5rem 16px
+}
+
+div.tabs .tab-content .tab-pane:not(.active) {
+ display: none
+}
+
+div.tabs .tab-content .tab-pane.active {
+ display: block
+}
+
+div.tabs .tab-content .tab-pane.active:nth-of-type(1) {
+ border-radius: 0 4px 4px 4px
+}
+
+p[small] {
+ font-size: .875rem
+}
+
+p[large] {
+ font-size: 3rem;
+ line-height: 1.3
+}
+
+p[huge] {
+ font-size: 4rem;
+ line-height: 1.3
+}
+
+p[ultra] {
+ font-size: 6rem;
+ line-height: 1.3
+}
+
+p[huge], p[large], p[small], p[ultra] {
+ margin: 0;
+ padding: 0
+}
+
+p[bold] {
+ font-weight: 700
+}
+
+p[left] {
+ text-align: left
+}
+
+p[center] {
+ text-align: center
+}
+
+p[right] {
+ text-align: right
+}
+
+p[red], red {
+ color: #fe5f58
+}
+
+p[yellow], yellow {
+ color: #ffbd2b
+}
+
+green, p[green] {
+ color: #3dc550
+}
+
+cyan, p[cyan] {
+ color: #1bcdfc
+}
+
+blue, p[blue] {
+ color: #2196f3
+}
+
+gray, p[gray] {
+ color: #666
+}
+
+.article li > btn a, .article p > btn a {
+ line-height: 1.5em;
+ background: #2196f3;
+ color: #fff;
+ padding: 2px 3px 0 3px;
+ margin: 2px;
+ border-radius: 2px;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.article li > btn a:hover, .article p > btn a:hover {
+ color: #fff;
+ text-decoration: none;
+ background: #ff5722
+}
+
+.article li > btn[regular] a, .article p > btn[regular] a {
+ line-height: 3;
+ padding: 9px 16px 7px 16px
+}
+
+.article li > btn[regular] a i, .article p > btn[regular] a i {
+ margin-right: 2px
+}
+
+.article li > btn[large] a, .article p > btn[large] a {
+ line-height: 3;
+ padding: 11px 40px 9px 40px
+}
+
+.article li > btn[large] a i, .article p > btn[large] a i {
+ margin: 0 5px 0 -2px
+}
+
+.article li > btn[center], .article p > btn[center] {
+ display: block;
+ text-align: center
+}
+
+.article btns {
+ font-weight: 700;
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -8px;
+ align-items: flex-start
+}
+
+.article btns, .article btns a, .article btns b, .article btns p {
+ font-size: .875rem;
+ color: #555
+}
+
+.article btns[wide] a {
+ padding-left: 32px;
+ padding-right: 32px
+}
+
+.article btns[fill] a {
+ flex-grow: 1;
+ width: auto
+}
+
+.article btns[around] {
+ justify-content: space-around
+}
+
+.article btns[center] {
+ justify-content: center
+}
+
+.article btns[grid2] a {
+ width: calc(100% / 2 - 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .article btns[grid2] a {
+ width: calc(100% / 2 - 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .article btns[grid2] a {
+ width: calc(100% / 2 - 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .article btns[grid2] a {
+ width: calc(100% / 1 - 16px)
+ }
+}
+
+.article btns[grid3] a {
+ width: calc(100% / 3 - 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .article btns[grid3] a {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .article btns[grid3] a {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .article btns[grid3] a {
+ width: calc(100% / 1 - 16px)
+ }
+}
+
+.article btns[grid4] a {
+ width: calc(100% / 4 - 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .article btns[grid4] a {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .article btns[grid4] a {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .article btns[grid4] a {
+ width: calc(100% / 2 - 16px)
+ }
+}
+
+.article btns[grid5] a {
+ width: calc(100% / 5 - 16px)
+}
+
+@media screen and (max-width:1024px) {
+ .article btns[grid5] a {
+ width: calc(100% / 4 - 16px)
+ }
+}
+
+@media screen and (max-width:768px) {
+ .article btns[grid5] a {
+ width: calc(100% / 3 - 16px)
+ }
+}
+
+@media screen and (max-width:500px) {
+ .article btns[grid5] a {
+ width: calc(100% / 2 - 16px)
+ }
+}
+
+.article btns a {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ margin: 8px;
+ margin-top: calc(2.25 * 16px + 32px);
+ min-width: 120px;
+ font-weight: 700;
+ display: flex;
+ justify-content: flex-start;
+ align-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 8px;
+ text-align: center;
+ background: #f4f4f4;
+ border-radius: 4px
+}
+
+.article btns a > i:first-child, .article btns a > img:first-child {
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease;
+ height: 64px;
+ width: 64px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+ margin: 16px 8px 4px 8px;
+ margin-top: calc(-1.25 * 16px - 32px);
+ border: 2px solid #fff;
+ background: #fff;
+ line-height: 60px;
+ font-size: 28px
+}
+
+.article btns a > i:first-child[auto], .article btns a > img:first-child[auto] {
+ width: auto
+}
+
+.article btns a > i:first-child {
+ color: #fff;
+ background: #2196f3
+}
+
+.article btns a b, .article btns a p {
+ margin: .25em;
+ font-weight: 400;
+ line-height: 1.25;
+ word-wrap: break-word
+}
+
+.article btns a b {
+ font-weight: 700;
+ line-height: 1.3
+}
+
+.article btns a img {
+ margin: .4em auto
+}
+
+.article btns a:hover {
+ text-decoration: none
+}
+
+.article btns a:not([href]) {
+ cursor: default;
+ color: inherit
+}
+
+.article btns a[href]:hover {
+ background: rgba(255, 87, 34, .15)
+}
+
+.article btns a[href]:hover, .article btns a[href]:hover b {
+ color: #ff5722
+}
+
+.article btns a[href]:hover > i:first-child, .article btns a[href]:hover > img:first-child {
+ transform: scale(1.1) translateY(-8px);
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
+}
+
+.article btns a[href]:hover > i:first-child {
+ background: #ff5722
+}
+
+.article btns[circle] > a > i:first-child, .article btns[circle] > a > img:first-child {
+ border-radius: 32px
+}
+
+.article btns[rounded] > a > i:first-child, .article btns[rounded] > a > img:first-child {
+ border-radius: 16px
+}
+
+.l_side .toc-wrapper {
+ z-index: 1;
+ overflow: hidden;
+ border-radius: 12px;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 80px;
+ transition: all .28s ease;
+ transition: all .28s ease;
+ -moz-transition: all .28s ease;
+ -webkit-transition: all .28s ease;
+ -o-transition: all .28s ease
+}
+
+.l_side .toc-wrapper header {
+ position: -webkit-sticky;
+ position: sticky;
+ width: 100%;
+ top: 0;
+ padding-bottom: 4px
+}
+
+.l_side .toc-wrapper .content {
+ max-height: calc(100vh - 144px);
+ overflow: auto
+}
+
+.l_side .toc-wrapper .content a {
+ border-left: 2px solid transparent
+}
+
+.l_side .toc-wrapper .content a:hover {
+ background: #e8f4fd;
+ border-left: 2px solid #2196f3
+}
+
+.l_side .toc-wrapper .content a:active {
+ border-left: 4px solid #2196f3
+}
+
+.l_side .toc-wrapper .content a.active {
+ color: #2196f3;
+ border-left: 2px solid #2196f3
+}
+
+@media screen and (max-width:768px) {
+ .l_side .toc-wrapper {
+ position: fixed;
+ max-height: 1000px;
+ width: auto;
+ max-width: calc(100% - 2 * 16px);
+ top: 64px;
+ right: 16px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
+ visibility: hidden;
+ transform: scale(0, 0) rotate(12deg);
+ transform-origin: right top
+ }
+
+ .l_side .toc-wrapper.active {
+ visibility: visible;
+ transform: scale(1, 1)
+ }
+}
+
+@media screen and (max-width:425px) {
+ .l_side .toc-wrapper {
+ right: 0
+ }
+}
+
+.l_side .toc-wrapper a {
+ padding-left: 8px;
+ color: rgba(68, 68, 68, .65);
+ font-size: .875rem;
+ display: inline-block
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-1 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-1 .toc-child a {
+ padding-left: 12.8px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-2 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-2 .toc-child a {
+ padding-left: 25.6px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-3 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-3 .toc-child a {
+ padding-left: 38.4px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-4 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-4 .toc-child a {
+ padding-left: 51.2px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-5 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-5 .toc-child a {
+ padding-left: 64px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol .toc-item.toc-level-6 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-6 .toc-child a {
+ padding-left: 64px;
+ font-weight: 400
+}
+
+.l_side .toc-wrapper ol li, .l_side .toc-wrapper ul li {
+ width: auto;
+ text-align: left
+}
+
+.l_side .toc-wrapper ol li a, .l_side .toc-wrapper ul li a {
+ padding: 0 8px 0 11px;
+ font-weight: 700;
+ width: 100%
+}
+
+.l_side .toc-wrapper:empty {
+ display: none
+}
+
+.backstretch {
+ left: 0;
+ top: 0;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ height: 700px;
+ z-index: -999998;
+ position: absolute;
+}
+
+@media only screen and (max-width: 768px){
+ .backstretch {
+ left: -1000px;
+ }
+}
+
+@media only screen and (min-width: 768px){
+ .backstretch {
+ left: -888px;
+ }
+}
+
+@media only screen and (min-width: 992px){
+ .backstretch {
+ left: -768px;
+ }
+}
+
+@media only screen and (min-width: 1200px){
+ .backstretch {
+ left: -500px;
+ }
+}
+
+@media only screen and (min-width: 1440px){
+ .backstretch {
+ left: -300px;
+ }
+}
+
+//@media only screen and (min-width: 1920px){
+// .backstretch {
+// left: -300px;
+// }
+//}
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index 9f8c958..f1f0dd6 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -39,8 +39,8 @@
/* border-bottom: 1px solid #201c29; */
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
- -webkit-box-shadow: 0 0 30px #000;
- box-shadow: 0 0 30px #000;
+ -webkit-box-shadow: 4px -11px 20px #000;
+ box-shadow: 4px -11px 20px #000;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,0.72);
@@ -102,6 +102,52 @@
transform: translateY(-100%);
}
+
+.body-wrapper {
+ position: relative;
+ display: flex;
+ width: 100%;
+ max-width: 1080px;
+ min-height: 1000px;
+ margin: 0 auto;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: stretch;
+}
+
+/deep/ .v-note-wrapper {
+ position: unset;
+}
+
+.l_main {
+ padding: 70px 16px 16px;
+}
+
+.l_main {
+ width: calc(100% - 1 * 285px);
+ float: left;
+}
+
+@media screen and (max-width: 1440px){
+ .l_main {
+ width: calc(100% - 1 * 240px);
+ }
+}
+
+@media screen and (max-width: 768px){
+ .l_main {
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+@media screen and (max-width: 425px){
+ .l_main {
+ padding: 70px 0 16px 0;
+ }
+}
+
+
/deep/ .right-bj {
//top: 70px;
//background: rgba(255, 255, 255, 0.8);
@@ -406,5 +452,26 @@
border-radius: 8px;
opacity: 0.9;
}
+ pre code {
+ background: unset;
+ color: unset;
+ opacity: unset;
+ padding: unset;
+ }
+ .hljs code {
+ background: unset;
+ color: unset;
+ opacity: unset;
+ padding: unset;
+ }
+}
+
+.pre-numbering {
+}
+
+@media screen and (max-width: 425px){
+ .pre-numbering {
+ display: none;
+ }
}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f974c27..25b163d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,7 +3,7 @@
-
Login Form
+ 登录 jmalCloud
@@ -43,10 +43,10 @@
Login
-
- username: admin
- password: any
-
+
+
+
+
@@ -74,8 +74,8 @@ export default {
}
return {
loginForm: {
- username: 'jmal',
- password: '123456'
+ username: '',
+ password: ''
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index e18cf15..d10618d 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -8,9 +8,9 @@
-
+
-
深入理解JVM
+
{{pageTitle}}
@@ -41,6 +41,9 @@
+
@@ -55,7 +58,7 @@
data() {
return {
isLoading: true,
- pageTitle: "文章列表",
+ pageTitle: "文章",
showList: true,
toolbars: null,
toolbarsFlag: true,
@@ -83,16 +86,17 @@
markdownApi.getMarkdown({
mark: this.$route.query.mark
}).then((res) => {
- this.pageTitle = res.data.name
+ const filename = res.data.name
+ this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
this.content = res.data.contentText
- setTimeout(function () {
- // 刷新界面 回到上次滚动条的位置
- if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
- const arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
- document.documentElement.scrollTop = parseInt(arr[1]);
- document.body.scrollTop = parseInt(arr[1]);
- }
- },10)
+ // setTimeout(function () {
+ // // 刷新界面 回到上次滚动条的位置
+ // if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
+ // const arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
+ // document.documentElement.scrollTop = parseInt(arr[1]);
+ // document.body.scrollTop = parseInt(arr[1]);
+ // }
+ // },10)
this.$nextTick(()=>{ // DOM更新之后获取子元素
@@ -173,10 +177,10 @@
let $root = $('html, body');
$('.j-titleList li').on("click", function () {
console.log(typeof($(this).attr("first"))!=="undefined")
- let top = 20
+ let top = 70
if (typeof($(this).attr("first"))!=="undefined") {
// 点击第一个目录
- top = 50
+ top = 100
}
$root.animate({
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
@@ -187,7 +191,11 @@
const _this = this
setTimeout(function () {
- addCodeBtn();
+ // 添加行数
+ const clientWidth = document.documentElement.clientWidth;
+ if(clientWidth > 425){
+ addCodeBtn();
+ }
_this.isLoading = false
},150)
})
@@ -204,37 +212,11 @@
diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue
index 861324b..ffafe3a 100644
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@@ -1,172 +1,293 @@
- 
+
+
+