站点优化日志~

首页 / 网站🥩 / 正文

2023/9/2

部署CDN加快响应速度

2023/9/4

显示器大小导致的页面溢出问题

解决方法:

@media (max-width: 1500px){
}

通过css样式判断屏幕分辨率大小并且调整显示布局。

2025/10/15

优化css设置使目录边框上移河狸

.dropdown-menu{ position: relative; }
.dropdown-menu::before{ z-index: 0; }
.dropdown-menu .dropdown-item{ position: relative; z-index: 1; }

2025/10/24

目录栏追加当前阅读部分显示功能,绿色为已预读,黄色为正在阅读,红色为未阅读

/* === 目录整体样式 === */
.index-menu {
  font-weight: 500;
  font-size: 14px;       /* ← 原15px → 14px,更细致 */
  color: #212529;
  line-height: 1.5;      /* ← 稍微收紧行距 */
  letter-spacing: 0.1px; /* ← 字距更自然 */

  --dot-size: 10px;
  --gutter: 18px;
}


/* 去掉原生 marker,用自定义圆点 */
.index-menu li {
  list-style: none;
  position: relative;
  padding-left: var(--gutter);
}

/* 链接过渡 */
.index-menu-item a,
.index-menu li a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  vertical-align: middle;
  transition: color 1.2s ease, text-shadow 1.2s ease;
  font-size: 0.94em;  
}

/* 默认圆点样式 */
.index-menu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em; 
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: #f25f5c; /* 默认粉红 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  transition: all 0.4s ease;
}

/* 禁用所有动画 */
.index-menu li::before,
.index-menu li::after {
  animation: none !important;
}
.index-menu li::after {
  content: none !important;
}

/* 子级尺寸调整 */
.index-menu li li { --dot-size: 8px; }
.index-menu li li li { --dot-size: 7px; }

/* === 红绿灯状态色 === */

/* 🟢 已过(past) */
.index-menu li.past::before {
  background-color: #62c370;
  box-shadow: 0 0 6px rgba(98,195,112,0.6);
}

/* 🟡 当前(current) */
@keyframes softPulseCurrent {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 6px rgba(242,177,52,0.5);
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 14px rgba(242,177,52,0.8);
  }
  100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 6px rgba(242,177,52,0.5);
  }
}
.index-menu li.current::before {
  background-color: #f2b134;
  box-shadow: 0 0 8px rgba(242,177,52,0.6);
  animation: softPulseCurrent 3s ease-in-out infinite !important;
}

/* 🔴 未到(future) */
.index-menu li.future::before {
  background-color: #f25f5c;
  box-shadow: 0 0 6px rgba(242,95,92,0.5);
}

/* === 文字颜色 === */
.index-menu li.past > a {
  color: #62c370;
  text-shadow: 0 0 6px rgba(98,195,112,0.4);
}
.index-menu li.current > a {
  color: #f2b134;
  text-shadow: 0 0 6px rgba(242,177,52,0.4);
}
.index-menu li.future > a {
  color: #f25f5c;
  text-shadow: 0 0 6px rgba(242,95,92,0.4);
}

/* 层级缩进微调 */
.index-menu li li {
  --dot-size: 8px;
  padding-left: calc(var(--gutter) - 8px);
}
.index-menu li li::before {
  left: -4px;
}
.index-menu li li li {
  --dot-size: 7px;
  padding-left: calc(var(--gutter) - 10px);
}
.index-menu li li li::before {
  left: -6px;
}
    /* 优化菜单 */
    /*  */
    /*  */

评论区
头像