extends /layouts/page.pug

block pageContent
  .about-container
    h1 关于我们
    p 我们致力于打造一个基于 Koa3 的现代 Web 示例项目，帮助开发者快速上手高效、可扩展的 Web 应用开发。
    .about-section
      h2 我们的愿景
      p 推动 Node.js 生态下的现代 Web 技术发展，降低开发门槛，提升开发体验。
    .about-section
      h2 技术栈
      ul
        li Koa3
        li Pug 模板引擎
        li 现代前端技术（如 ES6+、CSS3）
    .about-section
      h2 联系我们
      p 如有建议或合作意向，欢迎通过
        a(href="mailto:1549469775@qq.com") 联系方式
        |  与我们取得联系。

  style.
    .about-container {
      margin: 32px auto 0 auto;
      padding: 56px 40px 44px 40px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(18px);
      
      //- max-width: 900px;
      //- min-width: 340px;
    }
    .about-container h1 {
      font-size: 2.7em;
      color: rgb(80, 168, 255);
      margin-bottom: 28px;
      text-align: center;
      font-weight: 900;
      letter-spacing: 2.5px;
      text-shadow: 0 2px 16px rgba(33,150,243,0.10);
      background: linear-gradient(90deg,rgb(80, 168, 255) 30%, #7ec6f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .about-container p {
      font-size: 1.18em;
      color: #fff;
      margin-bottom: 26px;
      line-height: 1.85;
    }
    .about-section {
      margin-bottom: 38px;
      padding-bottom: 14px;
      border-bottom: 1px dashed #b2ebf2;
    }
    .about-section:last-child {
      border-bottom: none;
    }
    .about-section h2 {
      font-size: 1.22em;
      color:rgb(80, 168, 255);
      margin-bottom: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      background: linear-gradient(90deg,rgb(80, 168, 255) 60%, #7ec6f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .about-section ul {
      padding-left: 28px;
      margin-bottom: 0;
    }
    .about-section li {
      font-size: 1.08em;
      color: #fff;
      margin-bottom: 8px;
      line-height: 1.7;
    }
    .about-container a {
      color:rgb(80, 168, 255);
      text-decoration: underline;
      font-weight: 600;
      transition: color 0.2s, background 0.2s;
      border-radius: 8px;
      padding: 1px 4px;
    }
    .about-container a:hover {
      color: #fff;
      background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
      text-decoration: none;
    }
    @media (max-width: 900px) {
      .about-container {
        max-width: 98vw;
        padding: 18px 4vw 18px 4vw;
      }
      .about-container h1 {
        font-size: 1.5em;
      }
    }