关于handsome主题的一些修改记录

handsome是个非常成熟的主题，记录一下自己做的一些小修改。

风格修改

修补

文章边距问题

/* 文章正文 */
#postpage #post-content, #postpage .wrapper-lg { padding: 20px!important; }

左侧导航间距问题

/* 导航间距 */
#alllayout:not(.app-aside-folded, .app-aside-dock) .navi ul.nav li a { margin-bottom: 0; }

时光机页面图片显示效果

/* 时 光 机 */
.light-link img {
    border-radius: 6px;
    transition: transform 0.3s ease-in-out;
}
.light-link img:hover {
    transform: scale(1.06);
}

分享海报优化

/* 分享海报 */
.mdx-share-img {  }
.mdx-si-time {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 700;
    padding-top: 15px!important;
}
.mdx-si-time-2 {
    color: #FFFFFF;
    opacity: 1;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    padding-top: 1px;
}
.mdx-si-head p,.mdx-si-head span {
    color: #FFFFFF!important;
    font-weight: 700;
}
.mdx-si-box { background: #FFFFFF; }
.mdx-si-box,
.mdx-si-box .mdx-si-sum { color: #000000!important; }

重做

相册

/* 图片相册 */
.photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0 auto;
    width: 100%;
}
.image-thumb {
    aspect-ratio: 1;
    float: none!important;
    height: auto!important;
    margin: 0!important;
    transition: transform 0.3s ease-in-out;
    width: 100%!important;
}
.image-thumb:hover {
    transform: scale(1.06);
}

按钮

/* 按钮重做 */
.entry-content .btn-addon i {
    background-color: rgba(0, 0, 0, 0.03);
    margin-right: 5px!important;
}
.entry-content .btn-addon {
    border: none;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 19px;
    min-width: 100px;
    height: 34px;
    transition: transform 0.3s ease-in-out; 
}
.entry-content .btn-addon:before {
    background-color: rgba(255, 255, 255, 0.3);
    content: "";
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transition: left 0.3s ease-in-out;
    width: 100%;   
}
.entry-content .btn-addon:hover { transform: scale(0.85); }
.entry-content .btn-addon:hover:before { left: 100%; }
.entry-content .btn-addon:active { transform: scale(1.0); }
/* 灰　　色 */
.entry-content .btn-light {
    border-radius: 5px;
    background: #FFFFFF;
    color: #535353 !important;
}
/* 蓝　　色 */
.entry-content .btn-info { background: #3dc0fd; }
/* 青　　色 */
.entry-content .btn-dark { background: #1ae0d0; }
/* 绿　　色 */
.entry-content .btn-success { background: #5be01a; }
/* 黑　　色 */
.entry-content .btn-black { background: #434343; }
/* 黄　　色 */
.entry-content .btn-warning { background: #fddb3d; }
/* 紫　　色 */
.entry-content .btn-primary { background: #933dfd; }
/* 红　　色 */
.entry-content .btn-danger { background: #fd773d; }

选项卡

/* 选项标签 */
.tab-container,.post_tab { padding: 0 !important; }
/* 普通文字 */
.tab-container .nav>li>a.nav-link { color: #434343; }
/* 高亮文字 */
.tab-container .nav>li>a.nav-link:hover { color: #114f59; }
/* 当前线条 */
.tab-container .nav>li>a.nav-link::before {
    border-bottom-color: #114f59!important;
    color: #114f59;
}
/* 当前文字 */
.tab-container .nav>li.nav-item.active a { color: #114f59; }
/* 角标文字 */
.tab-container .nav sup {
    border-radius: 3px;
    background: #fd773d;
    color: #FFFFFF;
    padding: 1px 3px;
}
/* 选项内容 */
.tab-container .tab-content {
    margin: 0 !important;
    padding: 0 !important;
}
.tab-container .tab-content .tab-pane {
    margin: 0 !important;
    padding: 0 10px 1px !important;
}

标签

/* 标签重做 */
.entry-content .bg-light {
    background: #FFFFFF;
    border: 1px solid #F5F5F5;
    border-radius: 5px;
    box-shadow: 0 1px 3px #E5E5E5;
    color: #4CAF50;
}

新增

网格布局

/* 网格布局 */
.col-sm-6 { padding: 20px 10px 15px 10px; }
.list-A .row {
    margin: 0;
    padding: 0;
}
/* 文章卡片 */
.list-A .post-inser { margin: 0 !important; }
.list-A .post-inser:not(article) { transition: 0.3s ease-in-out; }
.list-A .post-inser:not(article):hover {
    background: none!important;
    box-shadow: 0 2px 15px rgb(0,0,0,0.1);
    cursor: pointer;
    transform: scale3d(1.06, 1.06, 1);
}
.list-A .inser-title { color: #434343; }
.list-A .inser-title:hover {
    color: #114f59;
}
/* 三列布局 */
.list-A .col-sm-4 {
    margin: 20px 0 0 0;
    padding: 0 10px;
}
.list-A .col-sm-4 .inner-image {
    height: 100px;
    width: 100px;
}
.list-A .col-sm-4 .inner-content {
    margin-left: 90px;
    padding-top: 5px;
}
@media (max-width:600px) {
    .list-A .col-sm-4 .inner-image { display:none }
    .list-A .col-sm-4 .inner-content { margin-left:10px }
}
.list-A .col-sm-12 {
    margin: 0;
    padding: 0 10px;
}
.list-A .col-sm-12 .btn-light { margin: 0; }

头图改为图标

/* 软件文章 */
.entry-content .img-A {
    cursor: default !important;
    display: block !important;
    margin: 0 auto !important;
}
.entry-content .share, .entry-content .warning { background: #FFFFFF; }

文件修改

时光机

1、修复时光机页面问题

component/headnav.php

<a href="'.BLOG_URL_PHP.'cross.html"

修改为

<a href="'.BLOG_URL_PHP.'cross/

cross.php

<?php echo BLOG_URL_PHP.'cross.html' ?>

修改为

<?php echo BLOG_URL_PHP.'cross/' ?>

2、隐藏时光机的“发自XXX”

component/say.php

<span class="text-muted">

修改为

<span class="text-muted" style="display:none">