/* ========================================================= Yuweisha Personal Homepage GitHub-inspired / Version 2 ========================================================= */ /* ========================================================= 1. Color System ========================================================= */ :root { --bg: #f6f8fa; --bg-soft: #eef2f6; --surface: #ffffff; --surface-hover: #f8fafc; --header: #161b22; --header-light: #21262d; --text: #1f2328; --text-secondary: #57606a; --text-muted: #6e7781; --border: #d0d7de; --border-light: #e6ebf0; --blue: #0969da; --blue-hover: #0550ae; --blue-soft: #ddf4ff; --purple: #8250df; --purple-soft: #fbefff; --green: #1a7f37; --green-soft: #dafbe1; --orange: #bc4c00; --orange-soft: #fff1e5; --red: #cf222e; --red-soft: #ffebe9; --shadow-small: 0 1px 2px rgba(31, 35, 40, 0.06); --shadow: 0 3px 8px rgba(31, 35, 40, 0.08); --shadow-large: 0 8px 24px rgba(31, 35, 40, 0.10); --radius-small: 6px; --radius: 10px; --radius-large: 14px; --max-width: 1280px; } /* ========================================================= 2. Reset ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: linear-gradient( 180deg, #eef2f6 0, #f6f8fa 320px, #f6f8fa 100% ); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); text-decoration: underline; } button, input { font: inherit; } /* ========================================================= 3. Header ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; height: 64px; background: linear-gradient( 135deg, #161b22, #1d232c ); border-bottom: 1px solid #30363d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .header-inner { width: min(var(--max-width), calc(100% - 40px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 18px; } /* GitHub icon */ .github-mark { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; transition: background 0.2s ease, transform 0.2s ease; } .github-mark:hover { background: rgba(255, 255, 255, 0.10); transform: scale(1.05); text-decoration: none; } .github-mark svg { width: 30px; height: 30px; fill: currentColor; } /* Header search */ .header-search { height: 36px; width: 300px; display: flex; align-items: center; padding: 0 12px; gap: 9px; color: #8b949e; border: 1px solid #30363d; border-radius: 7px; background: rgba(255, 255, 255, 0.05); transition: width 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .header-search:hover { border-color: #6e7681; background: rgba(255, 255, 255, 0.08); } .search-icon { font-size: 18px; line-height: 1; } /* Header navigation */ .header-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; } .header-nav a { color: #f0f6fc; font-size: 14px; font-weight: 600; opacity: 0.9; transition: opacity 0.2s ease, color 0.2s ease; } .header-nav a:hover { color: white; opacity: 1; text-decoration: none; } /* ========================================================= 4. Main Layout ========================================================= */ .profile-layout { width: min(var(--max-width), calc(100% - 40px)); margin: 38px auto 80px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start; } /* ========================================================= 5. Sidebar ========================================================= */ .profile-sidebar { position: sticky; top: 94px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow); overflow: hidden; } /* Decorative top line */ .profile-sidebar::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, var(--blue), var(--purple) ); } /* Avatar */ .avatar-wrapper { margin-bottom: 18px; } .avatar { width: 150px; height: 150px; margin: 0 auto; object-fit: cover; border-radius: 50%; border: 4px solid white; box-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(31, 35, 40, 0.12); } /* Name */ .profile-name { margin: 0; color: var(--text); font-size: 25px; font-weight: 700; line-height: 1.25; text-align: center; } .profile-username { margin: 5px 0 18px; color: var(--text-secondary); font-size: 16px; text-align: center; } /* Bio */ .profile-bio { margin: 0 0 20px; padding: 14px 15px; color: var(--text-secondary); background: linear-gradient( 135deg, #f6f8fa, #eef2f6 ); border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 13px; line-height: 1.7; } /* Edit button */ .edit-profile { width: 100%; padding: 8px 16px; color: var(--text); background: #f6f8fa; border: 1px solid var(--border); border-radius: var(--radius-small); font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .edit-profile:hover { background: #ffffff; border-color: #8c959f; box-shadow: var(--shadow-small); } /* Profile links */ .profile-links { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-light); } .profile-item { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px; color: var(--text-secondary); font-size: 13px; } .profile-item:last-child { margin-bottom: 0; } .item-icon { width: 18px; flex: 0 0 18px; color: var(--text-muted); text-align: center; } .profile-item a { word-break: break-word; } /* Stats */ .profile-stats { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; gap: 7px; } .profile-stats a { display: flex; align-items: baseline; gap: 4px; color: var(--text-secondary); font-size: 13px; } .profile-stats a:hover { color: var(--blue); text-decoration: none; } .profile-stats strong { color: var(--text); font-size: 14px; } .separator { color: var(--text-muted); } /* ========================================================= 6. Main Content ========================================================= */ .profile-content { min-width: 0; } /* ========================================================= 7. Profile Tabs ========================================================= */ .profile-tabs { display: flex; align-items: stretch; margin-bottom: 28px; padding: 0 6px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-small); overflow-x: auto; } .profile-tabs a { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 20px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; transition: color 0.2s ease, background 0.2s ease; } .profile-tabs a:hover { color: var(--text); text-decoration: none; background: #f6f8fa; } .profile-tabs a.active { color: var(--text); } .profile-tabs a.active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient( 90deg, var(--blue), var(--purple) ); } /* ========================================================= 8. Content Sections ========================================================= */ .content-section { margin-bottom: 34px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow); } .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .section-heading h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 650; line-height: 1.3; } .section-heading h2::before { content: ""; display: inline-block; width: 5px; height: 20px; margin-right: 10px; vertical-align: -3px; border-radius: 5px; background: linear-gradient( 180deg, var(--blue), var(--purple) ); } .section-heading > a { font-size: 13px; font-weight: 500; } /* ========================================================= 9. About ========================================================= */ .about-box { padding: 22px; background: linear-gradient( 135deg, #f0f7ff, #f8f5ff ); border: 1px solid #cdd9e5; border-radius: var(--radius); position: relative; overflow: hidden; } .about-box::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -80px; border-radius: 50%; background: radial-gradient( circle, rgba(130, 80, 223, 0.10), transparent 70% ); pointer-events: none; } .about-box p { position: relative; z-index: 1; margin: 0 0 13px; color: var(--text-secondary); line-height: 1.8; } .about-box p:last-child { margin-bottom: 0; } .about-box strong { color: var(--text); } /* ========================================================= 10. Repository Section ========================================================= */ .repository-heading { margin-bottom: 18px; } .repository-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } /* Repository card */ .repository-card { position: relative; min-width: 0; padding: 20px; background: linear-gradient( 180deg, #ffffff, #fbfcfe ); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-small); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .repository-card:hover { transform: translateY(-3px); border-color: #8c959f; box-shadow: var(--shadow-large); } /* Colored top border */ .repository-card:nth-child(4n + 1)::before, .repository-card:nth-child(4n + 2)::before, .repository-card:nth-child(4n + 3)::before, .repository-card:nth-child(4n + 4)::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 3px; border-radius: 0 0 4px 4px; } .repository-card:nth-child(4n + 1)::before { background: var(--blue); } .repository-card:nth-child(4n + 2)::before { background: var(--purple); } .repository-card:nth-child(4n + 3)::before { background: var(--green); } .repository-card:nth-child(4n + 4)::before { background: var(--orange); } /* Repository title */ .repository-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 11px; } .repo-icon { flex: 0 0 auto; font-size: 15px; } .repo-name { min-width: 0; overflow: hidden; color: var(--blue); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .repo-name:hover { color: var(--blue-hover); } .repo-visibility { flex: 0 0 auto; padding: 1px 7px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 500; } /* Repository description */ .repository-description { min-height: 45px; margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; } /* Repository metadata */ .repository-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; color: var(--text-muted); font-size: 12px; } .repository-meta > span { display: inline-flex; align-items: center; gap: 5px; } /* Language dots */ .language-dot { width: 11px; height: 11px; display: inline-block; border-radius: 50%; background: var(--blue); } .language-csharp { background: var(--purple); } .language-cpp { background: var(--green); } .language-js { background: #f1c40f; } /* Show more */ .show-more { margin-top: 17px; text-align: center; } .show-more a { display: inline-block; padding: 9px 16px; background: #f6f8fa; border: 1px solid var(--border); border-radius: var(--radius-small); font-size: 13px; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease; } .show-more a:hover { background: white; border-color: #8c959f; text-decoration: none; } /* ========================================================= 11. Blog ========================================================= */ .blog-list { position: relative; padding-left: 27px; } /* Timeline */ .blog-list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: linear-gradient( 180deg, var(--blue), var(--purple), transparent ); } .blog-item { position: relative; display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 20px; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border-light); } .blog-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* Timeline dot */ .blog-item::before { content: ""; position: absolute; left: -26px; top: 5px; width: 12px; height: 12px; background: white; border: 3px solid var(--blue); border-radius: 50%; box-shadow: 0 0 0 3px #e8f3ff; } .blog-item time { color: var(--text-muted); font-size: 12px; } .blog-item a { color: var(--text); font-size: 15px; font-weight: 650; } .blog-item a:hover { color: var(--blue); } .blog-item p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; } /* ========================================================= 12. Skills ========================================================= */ .tag-list { display: flex; flex-wrap: wrap; gap: 9px; } .tag { display: inline-flex; align-items: center; padding: 6px 12px; color: var(--blue); background: var(--blue-soft); border: 1px solid #b6e3ff; border-radius: 20px; font-size: 12px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; } .tag:nth-child(3n + 2) { color: var(--purple); background: var(--purple-soft); border-color: #e1c5ff; } .tag:nth-child(3n + 3) { color: var(--green); background: var(--green-soft); border-color: #a7e3b5; } .tag:hover { transform: translateY(-2px); box-shadow: var(--shadow-small); } /* ========================================================= 13. Footer ========================================================= */ .site-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px 8px 10px; color: var(--text-muted); font-size: 12px; } .footer-links { display: flex; gap: 18px; } .footer-links a { color: var(--text-secondary); } .footer-links a:hover { color: var(--blue); } /* ========================================================= 14. Scrollbar ========================================================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #eef1f4; } ::-webkit-scrollbar-thumb { background: #c4cbd3; border-radius: 10px; border: 2px solid #eef1f4; } ::-webkit-scrollbar-thumb:hover { background: #9da7b2; } /* ========================================================= 15. Selection ========================================================= */ ::selection { background: #b6e3ff; color: #1f2328; } /* ========================================================= 16. Responsive — Tablet ========================================================= */ @media (max-width: 1000px) { .profile-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; } .profile-sidebar { padding: 20px; } .avatar { width: 125px; height: 125px; } .header-search { width: 240px; } } /* ========================================================= 17. Responsive — Small Tablet ========================================================= */ @media (max-width: 800px) { .profile-layout { grid-template-columns: 1fr; margin-top: 24px; } .profile-sidebar { position: static; } .avatar { width: 130px; height: 130px; } .profile-bio { max-width: 600px; margin-left: auto; margin-right: auto; } .profile-content { width: 100%; } .repository-grid { grid-template-columns: 1fr; } } /* ========================================================= 18. Responsive — Mobile ========================================================= */ @media (max-width: 650px) { .site-header { height: auto; } .header-inner { width: calc(100% - 24px); min-height: 60px; padding: 10px 0; flex-wrap: wrap; } .header-search { flex: 1; min-width: 0; width: auto; } .header-nav { width: 100%; margin-left: 0; justify-content: center; gap: 25px; padding-top: 3px; } .profile-layout { width: calc(100% - 24px); margin-top: 18px; } .content-section { padding: 20px; } .profile-tabs { overflow-x: auto; } .profile-tabs a { padding-left: 15px; padding-right: 15px; } .blog-item { grid-template-columns: 1fr; gap: 4px; } .site-footer { flex-direction: column; gap: 10px; text-align: center; } } /* ========================================================= 19. Responsive — Very Small Mobile ========================================================= */ @media (max-width: 420px) { body { font-size: 13px; } .header-nav { gap: 16px; } .header-nav a { font-size: 13px; } .profile-sidebar { padding: 18px; } .content-section { padding: 17px; } .section-heading h2 { font-size: 18px; } .about-box { padding: 17px; } .repository-card { padding: 17px; } .repository-description { min-height: auto; } }

/* =========================================================
   页眉品牌区（与 UMA Live Studio 页面同款：圆形头像 + 名称）
   ========================================================= */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #f0f6fc; }
.brand:hover { text-decoration: none; }
.brand-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; background: #0d1117;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brand:hover .brand-avatar {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32), 0 0 0 3px rgba(9, 105, 218, 0.28), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.brand-name { font-size: 14px; font-weight: 650; letter-spacing: 0.2px; }
@media (max-width: 700px) { .brand-name { font-size: 13px; } }

/* =========================================================
   20. 卡片叠放（点标签只显示对应卡片，配合 index.html 里的内联脚本）
   ========================================================= */
.content-section[hidden] { display: none !important; }
.content-section.pane-on { animation: pane-in 0.18s ease; }
@keyframes pane-in {
  from { opacity: 0.35; transform: translateY(4px); }
  to   { opacity: 1;    transform: none; }
}

/* =========================================================
   21. 底部信息条固定 + 消除底部色阶
   ========================================================= */
/* 画布底色兜住整屏：body 的渐变在页面比视口短时会被重复铺一次，形成明显色阶 */
html { background: #f6f8fa; }
/* 渐变只画一次（顶部 320px 柔和过渡），其余交给上面的底色 */
body {
  min-height: 100vh;
  padding-bottom: 64px;            /* 给固定条让位，内容不会被压住 */
  background: linear-gradient(180deg, #eef2f6 0, #f6f8fa 320px) no-repeat;
}
/* 页脚：贴视口底部的固定条，左右与页眉同宽 */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  margin: 0;
  padding: 12px max(20px, calc((100% - var(--max-width)) / 2 + 20px));
  background: rgba(246, 248, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -1px 3px rgba(31, 35, 40, 0.04);
}
@media (max-width: 650px) {
  body { padding-bottom: 96px; }   /* 窄屏下页脚会折成两行 */
}

/* =========================================================
   22. 顶栏统一：三项导航 + 当前页蓝色横条（与 generator/mixer 完全同一套）
   ========================================================= */
.header-nav a {
  padding: 4px 0;                    /* 让横条只到文字宽度 */
  transition: opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.header-nav a.active {
  color: #ffffff;
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--blue);
}
/* 站点名后的暗色说明（与 generator/mixer 的 .brand-sub 同款） */
.brand-sub { color: #8b949e; font-size: 12px; font-weight: 500; }
@media (max-width: 700px) { .brand-sub { display: none; } }