first commits

public/css/hugo-easy-gallery.css

@@ -0,0 +1,186 @@
+/*
+Put this file in /static/css/hugo-easy-gallery.min.css
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+
+/*
+Grid Layout Styles
+*/
+.gallery {
+    overflow: hidden;
+    margin: 10px;
+    max-width: 768px;
+}
+
+.gallery .box {
+    float: left;
+    position: relative;
+    /* Default: 1 tile wide */
+    width: 100%;
+    padding-bottom: 100%;
+}
+
+@media only screen and (min-width : 365px) {
+
+    /* Tablet view: 2 tiles */
+    .gallery .box {
+        width: 50%;
+        padding-bottom: 50%;
+    }
+}
+
+@media only screen and (min-width : 480px) {
+
+    /* Small desktop / ipad view: 3 tiles */
+    .gallery .box {
+        width: 33.3%;
+        padding-bottom: 33.3%;
+        /*  */
+    }
+}
+
+@media only screen and (min-width : 9999px) {
+
+    /* Medium desktop: 4 tiles */
+    .box {
+        width: 25%;
+        padding-bottom: 25%;
+    }
+}
+
+/*
+Transition styles
+*/
+.gallery.hover-transition figure,
+.gallery.hover-effect-zoom .img,
+.gallery:not(.caption-effect-appear) figcaption,
+.fancy-figure:not(.caption-effect-appear) figcaption {
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+/*
+figure styles
+*/
+figure {
+    position: relative;
+    /* purely to allow absolution positioning of figcaption */
+    overflow: hidden;
+}
+
+.gallery figure {
+    position: absolute;
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+}
+
+.gallery.hover-effect-grow figure:hover {
+    transform: scale(1.05);
+}
+
+.gallery.hover-effect-shrink figure:hover {
+    transform: scale(0.95);
+}
+
+.gallery.hover-effect-slidedown figure:hover {
+    transform: translateY(5px);
+}
+
+.gallery.hover-effect-slideup figure:hover {
+    transform: translateY(-5px);
+}
+
+/*
+img / a styles
+*/
+
+.gallery .img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.gallery.hover-effect-zoom figure:hover .img {
+    transform: scale(1.05);
+}
+
+.gallery img {
+    display: none;
+    /* only show the img if not inside a gallery */
+}
+
+figure a {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+/*
+figcaption styles
+*/
+.gallery figcaption,
+.fancy-figure figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000;
+    color: #FFF;
+    text-align: center;
+    font-size: 75%;
+    /* change this if you want bigger text */
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+    cursor: pointer;
+}
+
+.gallery.caption-position-none figcaption,
+.fancy-figure.caption-position-none figcaption {
+    display: none;
+}
+
+.gallery.caption-position-center figcaption,
+.fancy-figure.caption-position-center figcaption {
+    top: 0;
+    padding: 40% 5px;
+}
+
+.gallery.caption-position-bottom figcaption,
+.fancy-figure.caption-position-bottom figcaption {
+    padding: 5px;
+}
+
+.gallery.caption-effect-fade figure:not(:hover) figcaption,
+.gallery.caption-effect-appear figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0;
+}
+
+.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
+    margin-bottom: -100%;
+}
+
+.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
+    top: 100%;
+}
+
+figcaption p {
+    margin: auto;
+    /* override style in theme */
+}

public/css/hugo-easy-gallery.min.css

@@ -0,0 +1 @@
+.gallery .box,figure{position:relative}.gallery,figure{overflow:hidden}.gallery{margin:10px;max-width:768px}.gallery .box{float:left;width:100%;padding-bottom:100%}@media only screen and (min-width :365px){.gallery .box{width:50%;padding-bottom:50%}}@media only screen and (min-width :480px){.gallery .box{width:33.3%;padding-bottom:33.3%}}@media only screen and (min-width :9999px){.box{width:25%;padding-bottom:25%}}.fancy-figure:not(.caption-effect-appear) figcaption,.gallery.hover-effect-zoom .img,.gallery.hover-transition figure,.gallery:not(.caption-effect-appear) figcaption{-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out}.gallery figure{position:absolute;left:5px;right:5px;top:5px;bottom:5px}.gallery .img,figure a{position:absolute;bottom:0;left:0;right:0}.gallery.hover-effect-grow figure:hover,.gallery.hover-effect-zoom figure:hover .img{transform:scale(1.05)}.gallery.hover-effect-shrink figure:hover{transform:scale(.95)}.gallery.hover-effect-slidedown figure:hover{transform:translateY(5px)}.gallery.hover-effect-slideup figure:hover{transform:translateY(-5px)}.gallery .img{top:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}.fancy-figure.caption-position-none figcaption,.gallery img,.gallery.caption-position-none figcaption{display:none}figure a{top:0}.fancy-figure figcaption,.gallery figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);color:#fff;text-align:center;font-size:75%;opacity:1;cursor:pointer}.fancy-figure.caption-position-center figcaption,.gallery.caption-position-center figcaption{top:0;padding:40% 5px}.fancy-figure.caption-position-bottom figcaption,.gallery.caption-position-bottom figcaption{padding:5px}.fancy-figure.caption-effect-appear figure:not(:hover) figcaption,.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,.gallery.caption-effect-appear figure:not(:hover) figcaption,.gallery.caption-effect-fade figure:not(:hover) figcaption{background:rgba(0,0,0,0);opacity:0}.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption{margin-bottom:-100%}.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption{top:100%}figcaption p{margin:auto}

public/css/hugo-theme-cleanwhite.css

@@ -0,0 +1,994 @@
+@media (min-width:1700px){
+    .container {
+        width: 1650px;
+    }
+    .sidebar-container .short-about .list-inline>li{
+        font-size:15px
+    }
+}
+@media (max-width:1700px){
+    .sidebar-container .short-about .list-inline>li{
+        font-size:13px
+    }
+}
+@media (min-width:1200px){
+    .post-container,.sidebar-container{
+        padding-right:5%
+    }
+}
+@media (min-width:768px){
+    .post-container,.sidebar-container{
+        padding-right:5%
+    }
+}
+.sidebar-container{
+    color:var(--sidebar-text);
+    font-size:15px
+}
+.sidebar-container h5{
+    color:var(--sidebar-heading);
+    padding-bottom:1em
+}
+.sidebar-container h5 a{
+    color:var(--sidebar-heading)!important;
+    text-decoration:none
+}
+.sidebar-container a{
+    color:var(--sidebar-text)!important
+}
+.sidebar-container a:hover,.sidebar-container a:active{
+    color:var(--color-primary)!important
+}
+.sidebar-container .tags a{
+    border-color:var(--sidebar-text)
+}
+.sidebar-container .tags a:hover,.sidebar-container .tags a:active{
+    border-color:var(--color-primary)
+}
+.sidebar-container .short-about img{
+    width:80%;
+    display:block;
+    border-radius:5px;
+    margin-bottom:20px
+}
+.sidebar-container .short-about p{
+    margin-top:0;
+    margin-bottom:20px
+}
+.sidebar-container .short-about .list-inline>li{
+    padding-left:0;
+    margin-right:-15px
+}
+body{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    font-size:17px;
+    color:var(--color-text-main);
+    background-color:var(--color-bg);
+    overflow-x:hidden
+}
+p{
+    margin:30px 0
+}
+h1,h2,h3,h4,h5,h6{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    line-height:1.1;
+    font-weight:700
+}
+h4{
+    font-size:21px
+}
+a{
+    color:var(--link-color)
+}
+a:hover,a:focus{
+    color:var(--link-hover)
+}
+a img:hover,a img:focus{
+    cursor:zoom-in
+}
+article{
+    overflow:hidden;
+}
+blockquote{
+    color:var(--color-text-muted);
+    font-style:italic;
+    font-size:.95em;
+    margin:20px 0 20px
+}
+blockquote p{
+    margin:0
+}
+small.img-hint{
+    display:block;
+    margin-top:-20px;
+    text-align:center
+}
+br+small.img-hint{
+    margin-top:-40px
+}
+img.shadow{
+    box-shadow:var(--shadow-color) 0 2px 5px 0
+}
+@media screen and (max-width:768px){
+    select{
+        -webkit-appearance:none;
+        margin-top:15px;
+        color:#337ab7;
+        border-color:#337ab7;
+        padding:0 .4em;
+        background:var(--bg-input)
+    }
+}
+.table th,.table td{
+    border:1px solid var(--color-border)!important
+}
+hr.small{
+    max-width:100px;
+    margin:15px auto;
+    border-width:4px;
+    border-color:var(--color-bg)
+}
+pre,.table-responsive{
+    -webkit-overflow-scrolling:touch
+}
+pre code{
+    display:block;
+    width:auto;
+    white-space:pre;
+    word-wrap:normal
+}
+.post-container a{
+    color:var(--link-color-post)
+}
+.post-container a:hover,.post-container a:focus{
+    color:var(--link-hover)
+}
+.post-container h1,.post-container h2,.post-container h3,.post-container h4,.post-container h5,.post-container h6{
+    margin:30px 0 10px;
+    color:var(--color-text-main)
+}
+.post-container h5{
+    font-size:19px;
+    font-weight:600;
+    color:var(--color-text-muted)
+}
+.post-container h5+p{
+    margin-top:5px
+}
+.post-container h6{
+    font-size:17px;
+    font-weight:600;
+    color:var(--color-text-muted)
+}
+.post-container h6+p{
+    margin-top:5px
+}
+.post-container ul,.post-container ol{
+    margin-bottom:40px
+}
+@media screen and (max-width:768px){
+    .post-container ul,.post-container ol{
+        padding-left:30px
+    }
+}
+@media screen and (max-width:500px){
+    .post-container ul,.post-container ol{
+        padding-left:20px
+    }
+}
+.post-container ol ol,.post-container ol ul,.post-container ul ol,.post-container ul ul{
+    margin-bottom:5px
+}
+.post-container li p{
+    margin:0;
+    margin-bottom:5px
+}
+.post-container li h1,.post-container li h2,.post-container li h3,.post-container li h4,.post-container li h5,.post-container li h6{
+    line-height:2;
+    margin-top:20px
+}
+@media only screen and (max-width:767px){
+    .navbar-default .navbar-collapse{
+        max-height:600px;
+        border:none;
+        background:var(--bg-mobile-menu);
+        box-shadow:0 5px 10px 2px var(--mobile-menu-shadow-2);
+        box-shadow:var(--mobile-menu-shadow) 0 1px 6px,var(--mobile-menu-shadow-2) 0 1px 4px;
+        border-radius:2px;
+        width:170px;
+        float:right;
+        margin:0
+    }
+    #huxblog_navbar{
+        opacity:0;
+        transform:scaleX(0);
+        transform-origin:top right;
+        transition:all .25s cubic-bezier(0.23,1,.32,1);
+        -webkit-transform:scaleX(0);
+        -webkit-transform-origin:top right;
+        -webkit-transition:all .25s cubic-bezier(0.23,1,.32,1)
+    }
+    #huxblog_navbar a{
+        font-size:13px;
+        line-height:28px
+    }
+    #huxblog_navbar .navbar-collapse{
+        height:0;
+        transform:scaleY(0);
+        transform-origin:top right;
+        transition:transform 500ms cubic-bezier(0.23,1,.32,1);
+        -webkit-transform:scaleY(0);
+        -webkit-transform-origin:top right;
+        -webkit-transition:-webkit-transform 500ms cubic-bezier(0.23,1,.32,1)
+    }
+    #huxblog_navbar li{
+        opacity:0;
+        transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms;
+        -webkit-transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms
+    }
+    #huxblog_navbar.in{
+        transform:scaleX(1);
+        -webkit-transform:scaleX(1);
+        opacity:1
+    }
+    #huxblog_navbar.in .navbar-collapse{
+        transform:scaleY(1);
+        -webkit-transform:scaleY(1)
+    }
+    #huxblog_navbar.in li{
+        opacity:1
+    }
+}
+.navbar-custom{
+    background:0 0;
+    border:none;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    z-index:3;
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7
+}
+.navbar-custom .navbar-brand{
+    font-weight:800;
+    color:#fff;
+    height:56px;
+    line-height:25px
+}
+.navbar-custom .navbar-brand:hover{
+    color:rgba(255,255,255,.8)
+}
+.navbar-custom .nav li a{
+    text-transform:uppercase;
+    font-size:12px;
+    line-height:20px;
+    font-weight:800;
+    letter-spacing:1px
+}
+.navbar-custom .nav li a:active{
+    background:rgba(0,0,0,.12)
+}
+@media only screen and (min-width:768px){
+    .navbar-custom{
+        background:0 0;
+        border-bottom:1px solid transparent
+    }
+    .navbar-custom body{
+        font-size:20px
+    }
+    .navbar-custom .navbar-brand{
+        color:#fff;
+        padding:20px;
+        line-height:20px
+    }
+    .navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus{
+        color:rgba(255,255,255,.8)
+    }
+    .navbar-custom .nav li a{
+        color:#fff;
+        padding:20px
+    }
+    .navbar-custom .nav li a:hover,.navbar-custom .nav li a:focus{
+        color:rgba(255,255,255,.8)
+    }
+    .navbar-custom .nav li a:active{
+        background:0 0
+    }
+}
+.navbar-custom.invert .navbar-toggle:active{
+    background-color:var(--bg-tag-invert)
+}
+.navbar-custom.invert .navbar-toggle .icon-bar{
+    background-color:var(--navbar-toggle-icon-invert)
+}
+.navbar-custom.invert .navbar-brand{
+    color:var(--navbar-toggle-icon-invert)
+}
+.navbar-custom.invert .navbar-brand:hover,.navbar-custom.invert .navbar-brand:focus{
+    color:var(--color-primary)
+}
+.navbar-custom.invert .nav li a{
+    color:var(--navbar-toggle-icon-invert)
+}
+.navbar-custom.invert .nav li a:hover,.navbar-custom.invert .nav li a:focus{
+    color:var(--color-primary)
+}
+@media only screen and (min-width:1170px){
+    .navbar-custom{
+        -webkit-transition:background-color .3s;
+        -moz-transition:background-color .3s;
+        transition:background-color .3s;
+        -webkit-transform:translate3d(0,0,0);
+        -moz-transform:translate3d(0,0,0);
+        -ms-transform:translate3d(0,0,0);
+        -o-transform:translate3d(0,0,0);
+        transform:translate3d(0,0,0);
+        -webkit-backface-visibility:hidden;
+        backface-visibility:hidden
+    }
+    .navbar-custom.is-fixed{
+        position:fixed;
+        top:-61px;
+        background-color:rgba(255,255,255,.9);
+        border-bottom:1px solid var(--color-border-light);
+        -webkit-transition:-webkit-transform .3s;
+        -moz-transition:-moz-transform .3s;
+        transition:transform .3s
+    }
+    .navbar-custom.is-fixed .navbar-brand{
+        color:var(--navbar-text)
+    }
+    .navbar-custom.is-fixed .navbar-brand:hover,.navbar-custom.is-fixed .navbar-brand:focus{
+        color:var(--navbar-text-hover)
+    }
+    .navbar-custom.is-fixed .nav li a{
+        color:var(--navbar-text)
+    }
+    .navbar-custom.is-fixed .nav li a:hover,.navbar-custom.is-fixed .nav li a:focus{
+        color:var(--navbar-text-hover)
+    }
+    .navbar-custom.is-visible{
+        -webkit-transform:translate3d(0,100%,0);
+        -moz-transform:translate3d(0,100%,0);
+        -ms-transform:translate3d(0,100%,0);
+        -o-transform:translate3d(0,100%,0);
+        transform:translate3d(0,100%,0)
+    }
+}
+.intro-header{
+    background:no-repeat center center;
+    background-color:#a3a3a3;
+    background-attachment:scroll;
+    -webkit-background-size:cover;
+    -moz-background-size:cover;
+    background-size:cover;
+    -o-background-size:cover;
+    margin-bottom:0
+}
+.intro-header.style-text{
+    background:0 0
+}
+.intro-header.style-text .site-heading,.intro-header.style-text .post-heading,.intro-header.style-text .page-heading{
+    padding:85px 0 20px;
+    color:var(--color-text-main)
+}
+.intro-header.style-text .site-heading .subheading,.intro-header.style-text .post-heading .subheading,.intro-header.style-text .page-heading .subheading{
+    margin-bottom:15px
+}
+.intro-header.style-text .post-heading .meta a,.intro-header.style-text .tags a,.intro-header.style-text .tags .tag{
+    border-color:var(--color-text-main);
+    color:var(--color-text-main)
+}
+.intro-header.style-text .tags a:hover,.intro-header.style-text .tags .tag:hover,.intro-header.style-text .tags a:active,.intro-header.style-text .tags .tag:active{
+    background-color:var(--bg-tag-invert)
+}
+@media only screen and (min-width:768px){
+    .intro-header{
+        margin-bottom:20px
+    }
+}
+.intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{
+    padding:85px 0 55px;
+    color:#fff
+}
+@media only screen and (min-width:768px){
+    .intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{
+        padding:150px 0
+    }
+}
+.intro-header .site-heading{
+    padding:95px 0 70px
+}
+@media only screen and (min-width:768px){
+    .intro-header .site-heading{
+        padding:150px 0
+    }
+}
+.intro-header .site-heading,.intro-header .page-heading{
+    text-align:center
+}
+.intro-header .site-heading h1,.intro-header .page-heading h1{
+    margin-top:0;
+    font-size:50px
+}
+.intro-header .site-heading .subheading,.intro-header .page-heading .subheading{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    font-size:18px;
+    line-height:1.1;
+    display:block;
+    font-weight:300;
+    margin:10px 0 0
+}
+@media only screen and (min-width:768px){
+    .intro-header .site-heading h1,.intro-header .page-heading h1{
+        font-size:80px
+    }
+}
+.intro-header .post-heading h1{
+    font-size:30px;
+    margin-bottom:24px
+}
+.intro-header .post-heading .subheading,.intro-header .post-heading .meta{
+    line-height:1.1;
+    display:block
+}
+.intro-header .post-heading .meta .a{
+    color: var(--color-text-main)
+}
+
+.intro-header .post-heading .subheading{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    font-size:17px;
+    line-height:1.4;
+    font-weight:400;
+    margin:10px 0 30px;
+    margin-top:-5px
+}
+.intro-header .post-heading .meta{
+    font-family:Lora,'Times New Roman',serif;
+    font-style:italic;
+    font-weight:300;
+    font-size:18px
+}
+.intro-header .post-heading .meta a{
+    color:#fff
+}
+@media only screen and (min-width:768px){
+    .intro-header .post-heading h1{
+        font-size:55px
+    }
+    .intro-header .post-heading .subheading{
+        font-size:30px
+    }
+    .intro-header .post-heading .meta{
+        font-size:20px
+    }
+}
+.post-preview>a{
+    color:var(--color-text-main)
+}
+.post-preview>a:hover,.post-preview>a:focus{
+    text-decoration:none;
+    color:var(--color-primary)
+}
+.post-preview>a>.post-title{
+    font-size:21px;
+    line-height:1.3;
+    margin-top:30px;
+    margin-bottom:8px
+}
+.post-preview>a>.post-subtitle{
+    font-size:15px;
+    line-height:1.3;
+    margin:0;
+    font-weight:300;
+    margin-bottom:10px
+}
+.post-preview>.post-meta>a, .post-preview>.post-meta{
+    font-family:Lora,'Times New Roman',serif;
+    color:var(--color-text-muted);
+    font-size:17px;
+    font-style:italic;
+    margin-top:0
+}
+
+.post-preview>.post-meta>a:hover,.post-preview>.post-meta>a:focus{
+    color:var(--color-primary);
+    text-decoration:none
+}
+@media only screen and (min-width:768px){
+    .post-preview>a>.post-title{
+        font-size:26px;
+        line-height:1.3;
+        margin-bottom:10px
+    }
+    .post-preview>a>.post-subtitle{
+        font-size:17px
+    }
+    .post-preview .post-meta{
+        font-size:18px
+    }
+}
+.post-content-preview{
+    font-size:13px;
+    font-style:italic;
+    color:var(--color-text-secondary)
+}
+.post-content-preview:hover{
+    color:var(--color-primary)
+}
+@media only screen and (min-width:768px){
+    .post-content-preview{
+        font-size:15px
+    }
+}
+.section-heading{
+    font-size:36px;
+    margin-top:60px;
+    font-weight:700
+}
+.caption{
+    text-align:center;
+    font-size:14px;
+    padding:10px;
+    font-style:italic;
+    margin:0;
+    display:block;
+    border-bottom-right-radius:5px;
+    border-bottom-left-radius:5px
+}
+footer{
+    font-size:20px;
+    padding:50px 0 65px
+}
+footer .list-inline{
+    margin:0;
+    padding:0
+}
+footer .copyright{
+    font-size:15px;
+    text-align:center;
+    margin-bottom:0
+}
+footer .copyright a{
+    color:var(--copyright-link)
+}
+footer .copyright a:hover,footer .copyright a:focus{
+    color:var(--color-primary)
+}
+.floating-label-form-group{
+    font-size:14px;
+    position:relative;
+    margin-bottom:0;
+    padding-bottom:.5em;
+    border-bottom:1px solid var(--color-border)
+}
+.floating-label-form-group input,.floating-label-form-group textarea{
+    z-index:1;
+    position:relative;
+    padding-right:0;
+    padding-left:0;
+    border:none;
+    border-radius:0;
+    font-size:1.5em;
+    background:0 0;
+    box-shadow:none!important;
+    resize:none
+}
+.floating-label-form-group label{
+    display:block;
+    z-index:0;
+    position:relative;
+    top:2em;
+    margin:0;
+    font-size:.85em;
+    line-height:1.764705882em;
+    vertical-align:middle;
+    vertical-align:baseline;
+    opacity:0;
+    -webkit-transition:top .3s ease,opacity .3s ease;
+    -moz-transition:top .3s ease,opacity .3s ease;
+    -ms-transition:top .3s ease,opacity .3s ease;
+    transition:top .3s ease,opacity .3s ease
+}
+.floating-label-form-group::not(:first-child){
+    padding-left:14px;
+    border-left:1px solid var(--color-border)
+}
+.floating-label-form-group-with-value label{
+    top:0;
+    opacity:1
+}
+.floating-label-form-group-with-focus label{
+    color:var(--color-primary)
+}
+form .row:first-child .floating-label-form-group{
+    border-top:1px solid var(--color-border)
+}
+.btn{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    text-transform:uppercase;
+    font-size:14px;
+    font-weight:800;
+    letter-spacing:1px;
+    border-radius:0;
+    padding:15px 25px
+}
+.btn-lg{
+    font-size:17px;
+    padding:25px 35px
+}
+.btn-default:hover,.btn-default:focus{
+    background-color:var(--btn-default-hover);
+    border:1px solid var(--btn-default-hover);
+    color:#fff
+}
+.pager{
+    margin:20px 0 0!important;
+    /*padding:0!important*/
+    padding:0 0 20px 0
+}
+.pager li>a,.pager li>span{
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7;
+    text-transform:uppercase;
+    font-size:13px;
+    font-weight:800;
+    letter-spacing:1px;
+    padding:10px;
+    background-color:var(--bg-pager);
+    border-radius:0
+}
+@media only screen and (min-width:768px){
+    .pager li>a,.pager li>span{
+        font-size:14px;
+        padding:15px 25px
+    }
+}
+.pager li>a{
+    color:var(--btn-default-text)
+}
+.pager li>a:hover,.pager li>a:focus{
+    color:#fff;
+    background-color:var(--color-primary);
+    border:1px solid var(--color-primary)
+}
+.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{
+    color:var(--pager-disabled);
+    background-color:var(--bg-disabled);
+    cursor:not-allowed
+}
+::-moz-selection{
+    color:var(--selection-text);
+    text-shadow:none;
+    background:var(--selection-bg)
+}
+::selection{
+    color:var(--selection-text);
+    text-shadow:none;
+    background:var(--selection-bg)
+}
+img::selection{
+    color:#fff;
+    background:0 0
+}
+img::-moz-selection{
+    color:#fff;
+    background:0 0
+}
+body{
+    webkit-tap-highlight-color:var(--color-primary)
+}
+.tags{
+    margin-bottom:-5px
+}
+.tags a,.tags .tag{
+    display:inline-block;
+    border:1px solid var(--tag-border);
+    border-radius:999em;
+    padding:0 10px;
+    color:var(--tag-text);
+    line-height:24px;
+    font-size:14px;
+    text-decoration:none;
+    margin:0 1px;
+    margin-bottom:6px
+}
+.tags a:hover,.tags .tag:hover,.tags a:active,.tags .tag:active{
+    color:var(--tag-text);
+    border-color:var(--tag-border-hover);
+    background-color:var(--bg-tag-active);
+    text-decoration:none
+}
+@media only screen and (min-width:768px){
+    .tags a,.tags .tag{
+        margin-right:5px
+    }
+}
+#tag-heading{
+    padding:70px 0 60px
+}
+@media only screen and (min-width:768px){
+    #tag-heading{
+        padding:55px 0
+    }
+}
+#tag_cloud{
+    margin:20px 0 15px 0
+}
+#tag_cloud a,#tag_cloud .tag{
+    font-size:14px;
+    border:none;
+    line-height:28px;
+    margin:0 2px;
+    margin-bottom:8px;
+    background:var(--bg-tag-cloud)
+}
+#tag_cloud a:hover,#tag_cloud .tag:hover,#tag_cloud a:active,#tag_cloud .tag:active{
+    background-color:var(--color-primary)!important
+}
+@media only screen and (min-width:768px){
+    #tag_cloud{
+        margin-bottom:25px
+    }
+}
+.tag-comments{
+    font-size:12px
+}
+@media only screen and (min-width:768px){
+    .tag-comments{
+        font-size:14px
+    }
+}
+.t:first-child{
+    margin-top:0
+}
+.listing-seperator{
+    color:var(--color-primary);
+    font-size:21px!important
+}
+.listing-seperator::before{
+    margin-right:5px
+}
+@media only screen and (min-width:768px){
+    .listing-seperator{
+        font-size:20px!important;
+        line-height:2!important
+    }
+}
+.one-tag-list .tag-text{
+    font-weight:200;
+    font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
+    line-height:1.7
+}
+.one-tag-list .post-preview{
+    position:relative
+}
+.one-tag-list .post-preview>a .post-title{
+    font-size:17px;
+    font-weight:500;
+    margin-top:20px
+}
+.one-tag-list .post-preview>a .post-subtitle{
+    font-size:12px
+}
+.one-tag-list .post-preview>.post-meta{
+    position:absolute;
+    right:5px;
+    bottom:0;
+    margin:0;
+    font-size:12px;
+    line-height:12px
+}
+@media only screen and (min-width:768px){
+    .one-tag-list .post-preview{
+        margin-left:20px
+    }
+    .one-tag-list .post-preview>a>.post-title{
+        font-size:18px;
+        line-height:1.3
+    }
+    .one-tag-list .post-preview>a>.post-subtitle{
+        font-size:14px
+    }
+    .one-tag-list .post-preview .post-meta{
+        font-size:18px
+    }
+}
+.post-container img{
+    display:block;
+    max-width:100%;
+    height:auto;
+    margin:1.5em auto 1.6em auto
+}
+.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{
+    background-color:inherit
+}
+.navbar-default .navbar-toggle:active{
+    background-color:rgba(255,255,255,.25)
+}
+.navbar-default .navbar-toggle{
+    border-color:transparent;
+    padding:19px 16px;
+    margin-top:2px;
+    margin-right:2px;
+    margin-bottom:2px;
+    border-radius:50%
+}
+.navbar-default .navbar-toggle .icon-bar{
+    width:18px;
+    border-radius:0;
+    background-color:var(--navbar-toggle-icon)
+}
+.navbar-default .navbar-toggle .icon-bar+.icon-bar{
+    margin-top:3px
+}
+.comment{
+    margin-top:20px
+}
+.comment #ds-thread #ds-reset a.ds-like-thread-button{
+    border:1px solid #ddd;
+    border-radius:0;
+    background:var(--bg-input);
+    box-shadow:none;
+    text-shadow:none
+}
+.comment #ds-thread #ds-reset li.ds-tab a.ds-current{
+    border:1px solid #ddd;
+    border-radius:0;
+    background:var(--bg-input);
+    box-shadow:none;
+    text-shadow:none
+}
+.comment #ds-thread #ds-reset .ds-textarea-wrapper{
+    background:0 0
+}
+.comment #ds-thread #ds-reset .ds-gradient-bg{
+    background:0 0
+}
+#ds-smilies-tooltip ul.ds-smilies-tabs li a{
+    background:var(--bg-input)!important
+}
+.page-fullscreen .intro-header{
+    position:fixed;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%
+}
+.page-fullscreen #tag-heading{
+    position:fixed;
+    left:0;
+    top:0;
+    padding-bottom:150px;
+    width:100%;
+    height:100%;
+    display:-webkit-box;
+    -webkit-box-orient:vertical;
+    -webkit-box-pack:center;
+    -webkit-box-align:center;
+    display:-webkit-flex;
+    -webkit-align-items:center;
+    -webkit-justify-content:center;
+    -webkit-flex-direction:column;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    flex-direction:column
+}
+.page-fullscreen footer{
+    position:absolute;
+    width:100%;
+    bottom:0;
+    padding-bottom:20px;
+    opacity:.6;
+    color:#fff
+}
+.page-fullscreen footer .copyright{
+    color:#fff
+}
+.page-fullscreen footer .copyright a{
+    color:#fff
+}
+.page-fullscreen footer .copyright a:hover{
+    color:var(--color-text-secondary)
+}
+
+.catalog-container {
+    padding: 0px;
+  }
+  .side-catalog {
+    display: block;
+    overflow: auto;
+    height: 100%;
+    padding-bottom: 40px;
+    width: 195px;
+  }
+  .side-catalog.fixed {
+    position: fixed;
+    top: -21px;
+  }
+  .side-catalog.fold .catalog-toggle::before {
+    content: "+";
+  }
+  .side-catalog.fold .catalog-body {
+    display: none;
+  }
+  .side-catalog .catalog-toggle::before {
+    content: "−";
+    position: relative;
+    margin-right: 5px;
+    bottom: 1px;
+  }
+  .side-catalog .catalog-body {
+    position: relative;
+    list-style: none;
+    height: auto;
+    overflow: hidden;
+    padding-left: 0px;
+    padding-right: 5px;
+    text-indent: 0;
+  }
+  .side-catalog .catalog-body li {
+    position: relative;
+    list-style: none;
+  }
+  .side-catalog .catalog-body li a {
+    padding-left: 10px;
+    max-width: 180px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .side-catalog .catalog-body .h1_nav {
+    margin-left: 0;
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .side-catalog .catalog-body .h2_nav {
+    margin-left: 6px;
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .side-catalog .catalog-body .h3_nav {
+    margin-left: 12px;
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .side-catalog .catalog-body .h4_nav {
+    margin-left: 18px;
+    font-size: 12px;
+  }
+  .side-catalog .catalog-body .h4_nav a {
+    max-width: 170px;
+  }
+  .side-catalog .catalog-body .h5_nav .h6_nav {
+    margin-left: 18px;
+    font-size: 12px;
+  }
+  .side-catalog .catalog-body .h5_nav .h6_nav a {
+    max-width: 170px;
+  }
+  .side-catalog .catalog-body .active {
+    border-radius: 4px;
+    background-color: var(--bg-catalog-active);
+  }
+  .side-catalog .catalog-body .active a {
+    color: var(--color-primary) !important;
+  }
+  @media (max-width: 1200px) {
+    .side-catalog {
+      display: none;
+    }
+  }

public/css/mindmap.css

@@ -0,0 +1,111 @@
+.km-view {
+    font-family: "STHeitiSC-Light", "STHeiti", "Hei", "Heiti SC", "Microsoft Yahei", Arial, sans-serif;
+    -webkit-user-select: none;
+    user-select: none;
+    position:  relative;
+}
+
+.km-view .km-receiver {
+    position: absolute;
+    left: -99999px;
+    top: -99999px;
+    width: 20px;
+    height: 20px;
+    outline: none;
+    margin: 0;
+}
+
+.km-view image {
+    cursor: zoom-in;
+}
+
+.km-image-viewer {
+    position: fixed;
+    z-index: 99999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .75);
+}
+
+.km-image-viewer .km-image-viewer-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    white-space: nowrap;
+    overflow: auto;
+}
+
+.km-image-viewer .km-image-viewer-container::before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    font-size: 0;
+    vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img {
+    cursor: zoom-out;
+    vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img.limited {
+    cursor: zoom-in;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+    z-index: 1;
+    background: rgba(0, 0, 0, .75);
+    text-align: right;
+    transition: all .25s;
+}
+
+.km-image-viewer .km-image-viewer-toolbar.hidden {
+    transform: translate(0, -100%);
+    opacity: 0;
+}
+
+.km-image-viewer .km-image-viewer-btn {
+    cursor: pointer;
+    outline: 0;
+    border: 0;
+    width: 44px;
+    height: 44px;
+    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY0IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMjY0IDg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5kZWZhdWx0LXNraW4gMjwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Zz48cGF0aCBkPSJNNjcuMDAyIDU5LjV2My43NjhjLTYuMzA3Ljg0LTkuMTg0IDUuNzUtMTAuMDAyIDkuNzMyIDIuMjItMi44MyA1LjU2NC01LjA5OCAxMC4wMDItNS4wOThWNzEuNUw3MyA2NS41ODUgNjcuMDAyIDU5LjV6IiBpZD0iU2hhcGUiIGZpbGw9IiNmZmYiLz48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTMgMjl2LTVoMnYzaDN2MmgtNXpNMTMgMTVoNXYyaC0zdjNoLTJ2LTV6TTMxIDE1djVoLTJ2LTNoLTN2LTJoNXpNMzEgMjloLTV2LTJoM3YtM2gydjV6IiBpZD0iU2hhcGUiLz48L2c+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTYyIDI0djVoLTJ2LTNoLTN2LTJoNXpNNjIgMjBoLTV2LTJoM3YtM2gydjV6TTcwIDIwdi01aDJ2M2gzdjJoLTV6TTcwIDI0aDV2MmgtM3YzaC0ydi01eiIvPjwvZz48cGF0aCBkPSJNMjAuNTg2IDY2bC01LjY1Ni01LjY1NiAxLjQxNC0xLjQxNEwyMiA2NC41ODZsNS42NTYtNS42NTYgMS40MTQgMS40MTRMMjMuNDE0IDY2bDUuNjU2IDUuNjU2LTEuNDE0IDEuNDE0TDIyIDY3LjQxNGwtNS42NTYgNS42NTYtMS40MTQtMS40MTRMMjAuNTg2IDY2eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMTEuNzg1IDY1LjAzTDExMCA2My41bDMtMy41aC0xMHYtMmgxMGwtMy0zLjUgMS43ODUtMS40NjhMMTE3IDU5bC01LjIxNSA2LjAzeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNTIuMjE1IDY1LjAzTDE1NCA2My41bC0zLTMuNWgxMHYtMmgtMTBsMy0zLjUtMS43ODUtMS40NjhMMTQ3IDU5bDUuMjE1IDYuMDN6IiBmaWxsPSIjZmZmIi8+PGc+PHBhdGggaWQ9IlJlY3RhbmdsZS0xMSIgZmlsbD0iI2ZmZiIgZD0iTTE2MC45NTcgMjguNTQzbC0zLjI1LTMuMjUtMS40MTMgMS40MTQgMy4yNSAzLjI1eiIvPjxwYXRoIGQ9Ik0xNTIuNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIGlkPSJPdmFsLTEiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTUwIDIxaDV2MWgtNXoiLz48L2c+PGc+PHBhdGggZD0iTTExNi45NTcgMjguNTQzbC0xLjQxNCAxLjQxNC0zLjI1LTMuMjUgMS40MTQtMS40MTQgMy4yNSAzLjI1eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDguNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA2IDIxaDV2MWgtNXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA5LjA0MyAxOS4wMDhsLS4wODUgNS0xLS4wMTcuMDg1LTV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+");
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.km-image-viewer .km-image-viewer-close {
+    background-position: 0 -44px;
+}
+
+.mindmap {
+	/*width: inherit;*/
+	width: 100%;
+	border: 1px solid #ccc;
+}
+
+.mindmap-sm {
+	height: 300px;
+}
+
+.mindmap-md {
+	height: 500px;
+}
+
+.mindmap-lg {
+	height: 800px;
+}

public/css/theme-variables.css

@@ -0,0 +1,745 @@
+/**
+ * Dark Mode CSS Variables for Hugo CleanWhite Theme
+ * Defines CSS custom properties for light and dark themes
+ */
+
+/* Prevent flash on theme switch */
+.theme-switching * {
+    transition: none !important;
+}
+
+/* ===== Light Mode (Default) ===== */
+:root {
+    /* Core colors */
+    --color-bg: #ffffff;
+    --color-text-main: #404040;
+    --color-text-secondary: #a3a3a3;
+    --color-text-muted: gray;
+    --color-primary: #0085a1;
+    --color-primary-light: #337ab7;
+    --color-border: #eee;
+    --color-border-light: #f2f2f2;
+    --color-border-dark: #ddd;
+
+    /* Background colors */
+    --bg-input: #ffffff;
+    --bg-tag-cloud: #D6D6D6;
+    --bg-catalog-active: #f5f5f5;
+    --bg-mobile-menu: #ffffff;
+    --bg-tag-active: rgba(255, 255, 255, 0.4);
+    --bg-tag-invert: rgba(0, 0, 0, 0.05);
+    --bg-pager: #ffffff;
+    --bg-disabled: #404040;
+
+    /* Sidebar colors */
+    --sidebar-text: #bfbfbf;
+    --sidebar-heading: gray;
+
+    /* Navbar colors */
+    --navbar-bg: transparent;
+    --navbar-text: #404040;
+    --navbar-text-hover: #0085a1;
+    --navbar-toggle-icon: #ffffff;
+    --navbar-toggle-icon-invert: #404040;
+
+    /* Link colors */
+    --link-color: #404040;
+    --link-color-post: #337ab7;
+    --link-hover: #0085a1;
+
+    /* Tag colors */
+    --tag-border: rgba(255, 255, 255, 0.8);
+    --tag-text: #ffffff;
+    --tag-border-hover: #ffffff;
+
+    /* Button colors */
+    --btn-default-bg: transparent;
+    --btn-default-hover: #0085a1;
+    --btn-default-text: #404040;
+
+    /* Other UI elements */
+    --caption-text: inherit;
+    --copyright-link: #337ab7;
+    --pager-disabled: gray;
+    --selection-bg: #0085a1;
+    --selection-text: #ffffff;
+    --shadow-color: rgba(0, 0, 0, 0.258824);
+    --mobile-menu-shadow: rgba(0, 0, 0, 0.117647);
+    --mobile-menu-shadow-2: rgba(0, 0, 0, 0.239216);
+    --tagcloud-start: #bbbbee;
+    --tagcloud-end: #0085a1;
+
+    /* Transition */
+    --theme-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
+}
+
+/* ===== System Preference Dark Mode (only applies when no manual theme is set) ===== */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+        /* Core colors - Jimmy Song's dark theme */
+        --color-bg: #040b1b;
+        --color-text-main: #c9d1d9;
+        --color-text-secondary: #a4b2ce;
+        --color-text-muted: #8b9db3;
+        --color-primary: #7fb4ff;
+        --color-primary-light: #9ec5ff;
+        --color-border: rgba(148, 197, 255, 0.18);
+        --color-border-light: rgba(148, 197, 255, 0.1);
+        --color-border-dark: rgba(148, 197, 255, 0.25);
+
+        /* Background colors */
+        --bg-input: #081123;
+        --bg-tag-cloud: rgba(7, 14, 30, 0.75);
+        --bg-catalog-active: rgba(8, 17, 35, 0.78);
+        --bg-mobile-menu: rgba(7, 14, 30, 0.84);
+        --bg-tag-active: rgba(126, 190, 255, 0.15);
+        --bg-tag-invert: rgba(126, 190, 255, 0.1);
+        --bg-pager: rgba(8, 17, 35, 0.78);
+        --bg-disabled: rgba(12, 21, 40, 0.68);
+
+        /* Sidebar colors */
+        --sidebar-text: #a4b2ce;
+        --sidebar-heading: #eff4ff;
+
+        /* Navbar colors */
+        --navbar-bg: transparent;
+        --navbar-text: #eff4ff;
+        --navbar-text-hover: #7fb4ff;
+        --navbar-toggle-icon: #ffffff;
+        --navbar-toggle-icon-invert: #eff4ff;
+
+        /* Link colors */
+        --link-color: #7fb4ff;
+        --link-color-post: #9ec5ff;
+        --link-hover: #7fb4ff;
+
+        /* Tag colors */
+        --tag-border: rgba(126, 190, 255, 0.4);
+        --tag-text: #eff4ff;
+        --tag-border-hover: #7fb4ff;
+
+        /* Button colors */
+        --btn-default-bg: transparent;
+        --btn-default-hover: #4f8cff;
+        --btn-default-text: #c9d1d9;
+
+        /* Other UI elements */
+        --caption-text: #a4b2ce;
+        --copyright-link: #7fb4ff;
+        --pager-disabled: rgba(164, 178, 206, 0.5);
+        --selection-bg: #4f8cff;
+        --selection-text: #ffffff;
+        --shadow-color: rgba(1, 4, 18, 0.58);
+        --mobile-menu-shadow: rgba(2, 6, 18, 0.62);
+        --mobile-menu-shadow-2: rgba(1, 5, 20, 0.68);
+        --tagcloud-start: rgba(164, 178, 206, 0.7);
+        --tagcloud-end: #7fb4ff;
+    }
+}
+
+/* ===== Manual Light Mode Override ===== */
+[data-theme="light"] {
+    /* Core colors */
+    --color-bg: #ffffff;
+    --color-text-main: #404040;
+    --color-text-secondary: #a3a3a3;
+    --color-text-muted: gray;
+    --color-primary: #0085a1;
+    --color-primary-light: #337ab7;
+    --color-border: #eee;
+    --color-border-light: #f2f2f2;
+    --color-border-dark: #ddd;
+
+    /* Background colors */
+    --bg-input: #ffffff;
+    --bg-tag-cloud: #D6D6D6;
+    --bg-catalog-active: #f5f5f5;
+    --bg-mobile-menu: #ffffff;
+    --bg-tag-active: rgba(255, 255, 255, 0.4);
+    --bg-tag-invert: rgba(0, 0, 0, 0.05);
+    --bg-pager: #ffffff;
+    --bg-disabled: #404040;
+
+    /* Sidebar colors */
+    --sidebar-text: #bfbfbf;
+    --sidebar-heading: gray;
+
+    /* Navbar colors */
+    --navbar-bg: transparent;
+    --navbar-text: #404040;
+    --navbar-text-hover: #0085a1;
+    --navbar-toggle-icon: #ffffff;
+    --navbar-toggle-icon-invert: #404040;
+
+    /* Link colors */
+    --link-color: #404040;
+    --link-color-post: #337ab7;
+    --link-hover: #0085a1;
+
+    /* Tag colors */
+    --tag-border: rgba(255, 255, 255, 0.8);
+    --tag-text: #ffffff;
+    --tag-border-hover: #ffffff;
+
+    /* Button colors */
+    --btn-default-bg: transparent;
+    --btn-default-hover: #0085a1;
+    --btn-default-text: #404040;
+
+    /* Other UI elements */
+    --caption-text: inherit;
+    --copyright-link: #337ab7;
+    --pager-disabled: gray;
+    --selection-bg: #0085a1;
+    --selection-text: #ffffff;
+    --shadow-color: rgba(0, 0, 0, 0.258824);
+    --mobile-menu-shadow: rgba(0, 0, 0, 0.117647);
+    --mobile-menu-shadow-2: rgba(0, 0, 0, 0.239216);
+    --tagcloud-start: #bbbbee;
+    --tagcloud-end: #0085a1;
+}
+
+/* ===== Manual Dark Mode Override ===== */
+[data-theme="dark"] {
+    /* Core colors - Jimmy Song's dark theme */
+    --color-bg: #040b1b;
+    --color-text-main: #c9d1d9;
+    --color-text-secondary: #a4b2ce;
+    --color-text-muted: #8b9db3;
+    --color-primary: #7fb4ff;
+    --color-primary-light: #9ec5ff;
+    --color-border: rgba(148, 197, 255, 0.18);
+    --color-border-light: rgba(148, 197, 255, 0.1);
+    --color-border-dark: rgba(148, 197, 255, 0.25);
+
+    /* Background colors */
+    --bg-input: #081123;
+    --bg-tag-cloud: rgba(7, 14, 30, 0.75);
+    --bg-catalog-active: rgba(8, 17, 35, 0.78);
+    --bg-mobile-menu: rgba(7, 14, 30, 0.84);
+    --bg-tag-active: rgba(126, 190, 255, 0.15);
+    --bg-tag-invert: rgba(126, 190, 255, 0.1);
+    --bg-pager: rgba(8, 17, 35, 0.78);
+    --bg-disabled: rgba(12, 21, 40, 0.68);
+
+    /* Sidebar colors */
+    --sidebar-text: #a4b2ce;
+    --sidebar-heading: #eff4ff;
+
+    /* Navbar colors */
+    --navbar-bg: transparent;
+    --navbar-text: #404040;
+    --navbar-text-hover: #0085a1;
+    --navbar-toggle-icon: #ffffff;
+    --navbar-toggle-icon-invert: #404040;
+
+    /* Link colors */
+    --link-color: #7fb4ff;
+    --link-color-post: #9ec5ff;
+    --link-hover: #7fb4ff;
+
+    /* Tag colors */
+    --tag-border: rgba(126, 190, 255, 0.4);
+    --tag-text: #eff4ff;
+    --tag-border-hover: #7fb4ff;
+
+    /* Button colors */
+    --btn-default-bg: transparent;
+    --btn-default-hover: #4f8cff;
+    --btn-default-text: #c9d1d9;
+
+    /* Other UI elements */
+    --caption-text: #a4b2ce;
+    --copyright-link: #7fb4ff;
+    --pager-disabled: rgba(164, 178, 206, 0.5);
+    --selection-bg: #4f8cff;
+    --selection-text: #ffffff;
+    --shadow-color: rgba(1, 4, 18, 0.58);
+    --mobile-menu-shadow: rgba(2, 6, 18, 0.62);
+    --mobile-menu-shadow-2: rgba(1, 5, 20, 0.68);
+    --tagcloud-start: rgba(164, 178, 206, 0.7);
+    --tagcloud-end: #7fb4ff;
+}
+
+/* ===== Apply smooth transitions ===== */
+* {
+    transition-property: color, background-color, border-color;
+    transition-duration: 0.3s;
+}
+
+/* Disable transitions during theme switch */
+.theme-switching * {
+    transition: none !important;
+}
+
+/* ===== Override Bootstrap hardcoded colors ===== */
+/* Only override body and navbar - preserve background images on other elements */
+body {
+    background-color: var(--color-bg) !important;
+}
+
+/* Override specific Bootstrap elements that don't have background images */
+.panel,
+.panel-heading,
+.panel-body,
+.panel-footer,
+.well,
+.thumbnail,
+.modal-content,
+.dropdown-menu {
+    background-color: var(--color-bg) !important;
+}
+
+/* Override input backgrounds */
+input,
+textarea,
+select {
+    background-color: var(--bg-input) !important;
+    color: var(--color-text-main) !important;
+}
+
+/* Override button backgrounds */
+.btn-default {
+    background-color: var(--btn-default-bg) !important;
+    color: var(--btn-default-text) !important;
+    border-color: var(--color-border) !important;
+}
+
+.btn-default:hover {
+    background-color: var(--btn-default-hover) !important;
+    color: #ffffff !important;
+}
+
+/* ===== Print styles - always light mode ===== */
+@media print {
+    :root,
+    [data-theme="dark"] {
+        --color-bg: #ffffff;
+        --color-text-main: #000000;
+        --color-text-secondary: #404040;
+        --color-text-muted: #404040;
+        --color-primary: #0085a1;
+        --color-border: #ddd;
+    }
+
+    * {
+        transition: none !important;
+    }
+}
+
+/* ===== Comment Section Dark Mode ===== */
+[data-theme="dark"] .comment,
+[data-theme="dark"] #ds-thread,
+[data-theme="dark"] .gitalk-container,
+[data-theme="dark"] .utterances,
+[data-theme="dark"] .vwrap,
+[data-theme="dark"] .v {
+    background: rgba(8, 17, 35, 0.6) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .ds-textarea-wrapper,
+[data-theme="dark"] .ds-thread,
+[data-theme="dark"] .ds-replybox,
+[data-theme="dark"] textarea,
+[data-theme="dark"] input[type="text"],
+[data-theme="dark"] input[type="email"],
+[data-theme="dark"] input[type="url"] {
+    background: rgba(7, 14, 30, 0.75) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] .ds-post-toolbar,
+[data-theme="dark"] .ds-actions,
+[data-theme="dark"] .ds-toolbar {
+    background: rgba(7, 14, 30, 0.75) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .ds-comment-body,
+[data-theme="dark"] .ds-comment-context,
+[data-theme="dark"] p,
+[data-theme="dark"] .comment-body {
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] .ds-comment-footer,
+[data-theme="dark"] .ds-time,
+[data-theme="dark"] .ds-comment-meta {
+    color: #a4b2ce !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] a,
+[data-theme="dark"] .ds-user-name,
+[data-theme="dark"] .ds-link {
+    color: #7fb4ff !important;
+}
+
+[data-theme="dark"] a:hover,
+[data-theme="dark"] .ds-user-name:hover {
+    color: #9ec5ff !important;
+}
+
+[data-theme="dark"] button,
+[data-theme="dark"] .ds-post-button,
+[data-theme="dark"] .ds-like-thread-button,
+[data-theme="dark"] .btn-primary {
+    background: #4f8cff !important;
+    border-color: #4f8cff !important;
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] button:hover,
+[data-theme="dark"] .ds-post-button:hover,
+[data-theme="dark"] .btn-primary:hover {
+    background: #7fb4ff !important;
+    border-color: #7fb4ff !important;
+}
+
+[data-theme="dark"] .ds-tab a,
+[data-theme="dark"] .ds-sort {
+    color: #a4b2ce !important;
+    background: transparent !important;
+}
+
+[data-theme="dark"] .ds-tab a.ds-current,
+[data-theme="dark"] .ds-tab a:hover {
+    color: #7fb4ff !important;
+    background: rgba(126, 190, 255, 0.1) !important;
+    border-color: rgba(126, 190, 255, 0.3) !important;
+}
+
+/* Gitalk specific dark mode */
+[data-theme="dark"] .gitalk-editor-area,
+[data-theme="dark"] .gitalk-markdown,
+[data-theme="dark"] .markdown-body {
+    background: rgba(7, 14, 30, 0.75) !important;
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] .gitalk-container .gitalk-header,
+[data-theme="dark"] .gitalk-container .gitalk-footer {
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .gitalk-container svg {
+    fill: #a4b2ce !important;
+}
+
+[data-theme="dark"] .gitalk-item {
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .markdown-body h1,
+[data-theme="dark"] .markdown-body h2,
+[data-theme="dark"] .markdown-body h3,
+[data-theme="dark"] .markdown-body h4,
+[data-theme="dark"] .markdown-body h5,
+[data-theme="dark"] .markdown-body h6 {
+    color: #eff4ff !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .markdown-body code,
+[data-theme="dark"] .markdown-body pre {
+    background: rgba(3, 8, 20, 0.95) !important;
+    border-color: rgba(148, 197, 255, 0.22) !important;
+    color: #93c5fd !important;
+}
+
+[data-theme="dark"] .markdown-body blockquote {
+    border-color: rgba(126, 190, 255, 0.3) !important;
+    color: #a4b2ce !important;
+    background: rgba(7, 14, 30, 0.5) !important;
+}
+
+[data-theme="dark"] .markdown-body hr {
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .markdown-body table {
+    background: rgba(8, 17, 35, 0.78) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .markdown-body table tr {
+    background: rgba(8, 17, 35, 0.78) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .markdown-body table tr:hover {
+    background: rgba(126, 190, 255, 0.1) !important;
+}
+
+/* ===== List Items in Dark Mode ===== */
+[data-theme="dark"] ul,
+[data-theme="dark"] ol,
+[data-theme="dark"] li {
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] .post-container ul,
+[data-theme="dark"] .post-container ol {
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] .post-container li,
+[data-theme="dark"] .post-container li p {
+    color: #c9d1d9 !important;
+}
+
+[data-theme="dark"] ul li::marker,
+[data-theme="dark"] ol li::marker {
+    color: #7fb4ff !important;
+}
+
+[data-theme="dark"] .post-container ul li::marker,
+[data-theme="dark"] .post-container ol li::marker {
+    color: #7fb4ff !important;
+}
+
+/* ===== Navbar - Dark Mode Styling ===== */
+/* Navbar background - default transparent */
+[data-theme="dark"] .navbar-custom:not(.is-fixed),
+[data-theme="dark"] .navbar-default:not(.is-fixed) {
+    background-color: transparent !important;
+}
+
+/* Default state (not scrolled) - white text on transparent background */
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-brand,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .nav li a,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle {
+    color: rgba(255, 255, 255, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-brand:hover,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a:hover,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .nav li a:hover,
+[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle:hover {
+    color: rgba(255, 255, 255, 1) !important;
+}
+
+[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-toggle .icon-bar {
+    background-color: #ffffff !important;
+}
+
+[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle i {
+    color: rgba(255, 255, 255, 0.95) !important;
+}
+
+/* Fixed/scrolling state - dark text on white background */
+[data-theme="dark"] .navbar-custom.is-fixed {
+    background-color: rgba(255, 255, 255, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand {
+    color: rgba(40, 40, 40, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:hover,
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:focus {
+    color: rgba(0, 0, 0, 1) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a {
+    color: rgba(40, 40, 40, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a:hover,
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a:focus,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a:hover,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a:focus {
+    color: rgba(0, 0, 0, 1) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed .navbar-toggle .icon-bar {
+    background-color: #404040 !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle,
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle i {
+    color: rgba(40, 40, 40, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:hover,
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:focus {
+    color: rgba(0, 0, 0, 1) !important;
+}
+
+/* Remove background from theme toggle button in dark mode */
+[data-theme="dark"] .navbar-custom #theme-toggle,
+[data-theme="dark"] .navbar-custom #theme-toggle:hover,
+[data-theme="dark"] .navbar-custom #theme-toggle:focus,
+[data-theme="dark"] .navbar-custom #theme-toggle:active,
+[data-theme="dark"] .nav li a#theme-toggle,
+[data-theme="dark"] .nav li a#theme-toggle:hover,
+[data-theme="dark"] .nav li a#theme-toggle:focus,
+[data-theme="dark"] .nav li a#theme-toggle:active {
+    background: transparent !important;
+}
+
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle,
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:hover,
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:focus,
+[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:active,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a#theme-toggle,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a#theme-toggle:hover,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a#theme-toggle:focus,
+[data-theme="dark"] .navbar-custom.is-fixed .nav li a#theme-toggle:active {
+    background: transparent !important;
+}
+
+/* ===== Pagination/Previous-Next Post Buttons in Dark Mode ===== */
+[data-theme="dark"] .pager,
+[data-theme="dark"] .pagination,
+[data-theme="dark"] .pager li > a,
+[data-theme="dark"] .pager li > span,
+[data-theme="dark"] .pagination > li > a,
+[data-theme="dark"] .pagination > li > span {
+    background: rgba(8, 17, 35, 0.78) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .pager li > a,
+[data-theme="dark"] .pagination > li > a {
+    color: #7fb4ff !important;
+}
+
+[data-theme="dark"] .pager li > a:hover,
+[data-theme="dark"] .pagination > li > a:hover {
+    background: rgba(126, 190, 255, 0.15) !important;
+    border-color: rgba(126, 190, 255, 0.3) !important;
+    color: #9ec5ff !important;
+}
+
+[data-theme="dark"] .pager .disabled > a,
+[data-theme="dark"] .pager .disabled > span,
+[data-theme="dark"] .pagination > .disabled > a,
+[data-theme="dark"] .pagination > .disabled > span {
+    background: rgba(8, 17, 35, 0.5) !important;
+    color: rgba(164, 178, 206, 0.5) !important;
+    border-color: rgba(148, 197, 255, 0.1) !important;
+}
+
+[data-theme="dark"] .pager li > span,
+[data-theme="dark"] .pagination > .active > a,
+[data-theme="dark"] .pagination > .active > span {
+    background: rgba(126, 190, 255, 0.2) !important;
+    color: #eff4ff !important;
+    border-color: rgba(126, 190, 255, 0.4) !important;
+}
+
+/* ===== Code Blocks in Dark Mode ===== */
+[data-theme="dark"] code,
+[data-theme="dark"] pre,
+[data-theme="dark"] pre code,
+[data-theme="dark"] .highlight,
+[data-theme="dark"] .chroma {
+    background: rgba(3, 8, 20, 0.95) !important;
+    color: #93c5fd !important;
+    border-color: rgba(148, 197, 255, 0.22) !important;
+}
+
+[data-theme="dark"] .post-container pre,
+[data-theme="dark"] .post-container code {
+    background: rgba(3, 8, 20, 0.95) !important;
+    border-color: rgba(148, 197, 255, 0.22) !important;
+}
+
+[data-theme="dark"] pre {
+    background: rgba(3, 8, 20, 0.95) !important;
+    border: 1px solid rgba(148, 197, 255, 0.22) !important;
+}
+
+[data-theme="dark"] code {
+    background: rgba(3, 8, 20, 0.8) !important;
+    color: #93c5fd !important;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+}
+
+[data-theme="dark"] pre code {
+    background: transparent !important;
+    padding: 0;
+}
+
+/* Code block header/footer if present */
+[data-theme="dark"] .code-header,
+[data-theme="dark"] .code-footer {
+    background: rgba(7, 14, 30, 0.75) !important;
+    border-color: rgba(148, 197, 255, 0.18) !important;
+}
+
+[data-theme="dark"] .filename,
+[data-theme="dark"] .lang {
+    color: #a4b2ce !important;
+}
+
+/* ===== Header Section - Keep Daylight Colors (for background image visibility) ===== */
+[data-theme="dark"] .intro-header,
+[data-theme="dark"] .intro-header * {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] .intro-header .site-heading h1,
+[data-theme="dark"] .intro-header .post-heading h1,
+[data-theme="dark"] .intro-header .page-heading h1 {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] .intro-header .subheading,
+[data-theme="dark"] .intro-header .meta,
+[data-theme="dark"] .intro-header .meta a {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] .intro-header .meta a:hover {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+[data-theme="dark"] .intro-header .tags a,
+[data-theme="dark"] .intro-header .tags .tag {
+    color: #ffffff !important;
+    border-color: #ffffff !important;
+}
+
+[data-theme="dark"] .intro-header .tags a:hover,
+[data-theme="dark"] .intro-header .tags .tag:hover {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+/* ===== Heading Colors in Dark Mode ===== */
+[data-theme="dark"] h1,
+[data-theme="dark"] h2,
+[data-theme="dark"] h3,
+[data-theme="dark"] h4,
+[data-theme="dark"] h5,
+[data-theme="dark"] h6 {
+    color: #eff4ff !important;
+}
+
+[data-theme="dark"] .post-container h1,
+[data-theme="dark"] .post-container h2,
+[data-theme="dark"] .post-container h3,
+[data-theme="dark"] .post-container h4,
+[data-theme="dark"] .post-container h5,
+[data-theme="dark"] .post-container h6 {
+    color: #eff4ff !important;
+}
+
+[data-theme="dark"] .post-title,
+[data-theme="dark"] .section-heading,
+[data-theme="dark"] .site-heading,
+[data-theme="dark"] .page-heading,
+[data-theme="dark"] .post-heading {
+    color: #eff4ff !important;
+}
+
+[data-theme="dark"] .subtitle,
+[data-theme="dark"] .subheading {
+    color: #a4b2ce !important;
+}

public/css/zanshang.css

@@ -0,0 +1,192 @@
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    line-height: 1.42857143;
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    vertical-align: middle;
+}
+img{vertical-align: middle;}
+.close {
+    float: right;
+    font-size: 21px;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .2
+}
+
+button.close {
+    -webkit-appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0
+}
+.entry-shang {
+    padding: 30px 0 20px;
+    text-align: center;
+}
+
+.entry-shang p {
+    font-size: 12px;
+}
+
+.btn-bred {
+    min-width: 80px;
+    border-color: #e26d6d;
+    background: #e26d6d;
+    color: #fff;
+}
+
+.zs-modal-bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    display: none;
+    z-index: 100;
+}
+
+.zs-modal-box {
+    width: 340px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin: -195px 0 0 -171px;
+    border: 1px solid #eee;
+    background: #fff;
+    border-radius: 6px;
+    z-index: 100;
+    display: none;
+}
+
+.zs-modal-head {
+    padding: 0 16px;
+    position: relative;
+}
+
+.zs-modal-head img {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+}
+
+.zs-modal-head .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 56px;
+    height: 56px;
+    text-align: center;
+}
+
+.zs-modal-head .author {
+    padding-top: 15px;
+    display: block;
+}
+.zs-modal-head .author a{
+    color: #333;
+    text-decoration: none;
+}
+
+.zs-modal-head .author img {
+    margin-right: 5px;
+}
+
+.zs-modal-head .tip {
+    background: #f6f6f6;
+    padding: 0 10px;
+    font-size: 12px;
+    color: gray;
+    border-radius: 3px;
+    margin-top: 10px;
+    position: relative;
+    line-height: 28px;
+    margin-bottom: 10px;
+}
+
+.zs-modal-head .tip i {
+    display: block;
+    border-width: 0 7px 7px 7px;
+    border-color: transparent  transparent #f6f6f6 transparent;
+    border-style: dashed dashed solid dashed;
+    content: "";
+    position: absolute;
+    left: 8px;
+    top: -7px;
+}
+
+.zs-modal-body {
+    padding: 0 15px;
+}
+
+.zs-modal-btns {
+    font-size: 0;
+}
+
+.zs-modal-btns .btn:nth-child(3n-2) {
+    margin-left: 0;
+}
+
+.zs-modal-btns .btn {
+    width: 28%;
+    margin-left: 8%;
+    margin-bottom: 24px;
+    display: inline-block;
+    font-size: 12px;
+}
+
+.zs-modal-btns .btn-blink {
+    background: #fff;
+    border-color: #e26d6d;
+    color: #e26d6d;
+    font-weight: bold;
+}
+
+.zs-modal-btns .btn-blink:hover, .zs-btns .btn-blink:active {
+    background: rgba(226,109,109,.06);
+    box-shadow: none;
+}
+
+.zs-modal-btns .btn-blink:focus {
+    background: #e26d6d;
+    border-color: #e26d6d;
+    color: #fff;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .zs-modal-body ul {
+        letter-spacing: -5px;
+    }
+}
+
+.zs-modal-footer {
+    padding: 0 15px 15px;
+}
+
+.zs-modal-footer label {
+    margin: 0 10px;
+}
+
+.zs-modal-footer img {
+    height: 30px;
+    min-width: 85px;
+}
+
+.zs-modal-pay {
+    text-align: center;
+    padding: 15px 0;
+    display: none;
+}

public/css/zanshang.min.css

@@ -0,0 +1,203 @@
+.btn,
+img {
+    vertical-align: middle
+}
+
+.zs-modal-bg,
+.zs-modal-box {
+    position: fixed;
+    z-index: 100
+}
+
+.btn,
+.entry-shang,
+.zs-modal-pay {
+    text-align: center
+}
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    line-height: 1.42857143;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 4px
+}
+
+.close {
+    float: right;
+    font-size: 21px;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .2
+}
+
+button.close {
+    -webkit-appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0
+}
+
+.entry-shang {
+    padding: 30px 0 20px
+}
+
+.entry-shang p {
+    font-size: 12px
+}
+
+.btn-bred {
+    min-width: 80px;
+    border-color: #e26d6d;
+    background: #e26d6d;
+    color: #fff
+}
+
+.zs-modal-bg {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .2);
+    display: none
+}
+
+.zs-modal-box {
+    width: 340px;
+    left: 50%;
+    top: 50%;
+    margin: -195px 0 0 -171px;
+    border: 1px solid #eee;
+    background: #fff;
+    border-radius: 6px;
+    display: none
+}
+
+.zs-modal-head {
+    padding: 0 16px;
+    position: relative
+}
+
+.zs-modal-head img {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%
+}
+
+.zs-modal-head .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 56px;
+    height: 56px;
+    text-align: center
+}
+
+.zs-modal-head .author {
+    padding-top: 15px;
+    display: block
+}
+
+.zs-modal-head .author a {
+    color: #333;
+    text-decoration: none
+}
+
+.zs-modal-head .author img {
+    margin-right: 5px
+}
+
+.zs-modal-head .tip {
+    background: #f6f6f6;
+    padding: 0 10px;
+    font-size: 12px;
+    color: gray;
+    border-radius: 3px;
+    margin-top: 10px;
+    position: relative;
+    line-height: 28px;
+    margin-bottom: 10px
+}
+
+.zs-modal-head .tip i {
+    display: block;
+    border-width: 0 7px 7px;
+    border-color: transparent transparent #f6f6f6;
+    border-style: dashed dashed solid;
+    content: "";
+    position: absolute;
+    left: 8px;
+    top: -7px
+}
+
+.zs-modal-body {
+    padding: 0 15px
+}
+
+.zs-modal-btns {
+    font-size: 0
+}
+
+.zs-modal-btns .btn:nth-child(3n-2) {
+    margin-left: 0
+}
+
+.zs-modal-btns .btn {
+    width: 28%;
+    margin-left: 8%;
+    margin-bottom: 24px;
+    display: inline-block;
+    font-size: 12px
+}
+
+.zs-modal-btns .btn-blink {
+    background: #fff;
+    border-color: #e26d6d;
+    color: #e26d6d;
+    font-weight: 700
+}
+
+.zs-btns .btn-blink:active,
+.zs-modal-btns .btn-blink:hover {
+    background: rgba(226, 109, 109, .06);
+    box-shadow: none
+}
+
+.zs-modal-btns .btn-blink:focus {
+    background: #e26d6d;
+    border-color: #e26d6d;
+    color: #fff
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .zs-modal-body ul {
+        letter-spacing: -5px
+    }
+}
+
+.zs-modal-footer {
+    padding: 0 15px 15px
+}
+
+.zs-modal-footer label {
+    margin: 0 10px
+}
+
+.zs-modal-footer img {
+    height: 30px;
+    min-width: 85px
+}
+
+.zs-modal-pay {
+    padding: 15px 0;
+    display: none
+}