yifangchen7.github.io/index.html at main · yifangchen7/yifangchen7.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="color-scheme" content="light dark" />
  <title>Home</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='80'>👻</text></svg>">
  <style>
  /* ---------- Tokens (light site) ---------- */
  :root{
    --bg:#f8fafc; --panel:#ffffff; --ink:#0f172a; --muted:#475569;
    --accent:#2563eb; --border:#e5e7eb; --max:980px;
    --avatar-bg:#e5e7eb;   /* light circle */
    --avatar-ink:#0f172a;  /* dark letters */
  }

  /* ---------- Base ---------- */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
  a{color:var(--accent); text-underline-offset:3px}
  img{max-width:100%; height:auto; display:block}

  /* Skip link + focus */
  .skip-link{position:absolute; left:-9999px; top:auto; background:var(--panel); color:var(--ink);
             padding:8px 12px; border:1px solid var(--border); border-radius:10px}
  .skip-link:focus{left:12px; top:12px; z-index:9999}
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
  }

  /* ---------- Header (dark) ---------- */
  .header{background:#202b3b; color:#f8fafc; border-bottom:2px solid #cbd5e1}
  .header .inner{display:flex; align-items:center; gap:18px; padding:16px 24px; margin:0 auto; max-width:var(--max)}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
  .brand .avatar{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--avatar-bg); color:var(--avatar-ink)}
  .brand h1{font-size:20px; margin:0}
  .brand p{margin:0; color:#ffffff; font-size:14px}

  /* Nav in dark header */
  .nav{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
  .nav a{display:inline-block; padding:10px 12px; border-radius:10px; text-decoration:none; background:transparent; color:#f8fafc; border:1px solid rgba(255,255,255,.25)}
  .nav a:hover{background:rgba(255,255,255,.08)}
  .nav a[aria-current="page"]{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35)}

  /* ---------- Layout ---------- */
  .container{max-width:var(--max); margin:0 auto; padding:24px}
  .main{display:grid; grid-template-columns:280px 1fr; gap:24px; margin-top:24px}
  @media (max-width:860px){ .main{grid-template-columns:1fr} .sidebar{position:static} .container{padding:16px} }

  h1{font-size:clamp(20px, 2.2vw, 26px)}
  .small{font-size:13px; color:var(--muted)}
  .lead{color:var(--muted)}

  /* Sidebar */
  .sidebar{position:sticky; top:16px; align-self:start}
  .sidebar .card{padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:14px}
  .sidebar h2{font-size:16px; margin:0 0 8px}
  .sidebar ul{list-style:none; margin:0; padding:0}
  .sidebar li{margin:6px 0}

  /* Content cards */
  .content{background:var(--bg)}
  .content .section{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:18px; box-shadow:0 1px 0 rgba(15,23,42,.02), 0 8px 24px rgba(15,23,42,.06)}
  .content h2{margin:0 0 10px; font-weight:700}

  /* Footer */
  .footer{border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:16px}

  /* Hide empty sections (modern browsers) */
  .section:has(> ul:empty), .section:has(> ol:empty){display:none}
  </style>
</head>
<body>
  <a class="skip-link" href="#content">Skip to main content</a>

  <header class="header">
    <div class="inner">
      <a class="brand" href="/">
        <span class="avatar" aria-hidden="true">YC</span>
        <div>
          <h1>Yifang Chen</h1>
          <p>Currently a PhD student in computational biophysics</p>
        </div>
      </a>
      <nav class="nav" aria-label="Primary">
        <a href="/index.html" aria-current="page">Home</a>
        <a href="/research.html">Research</a>
        <a href="/education.html">Education</a>
      </nav>
    </div>
  </header>

  <main class="content" id="content" tabindex="-1">
    <div class="container main">
      <aside class="sidebar">
        <div class="card">
          <h2>Contact</h2>
          <ul>
            <li>Email: <a href="mailto:yc638@cam.ac.uk">yc638@cam.ac.uk</a></li>
            <li>GitHub: <a href="https://github.com/yifangchen7" target="_blank" rel="noopener noreferrer">@yifangchen7</a></li>
            <li>LinkedIn: <a href="https://www.linkedin.com/in/yifang-chen-671aa1235/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
          </ul>
        </div>
      </aside>

      <section class="section">
        <h2>News</h2>
        <ul></ul>
      </section>

      <section class="section">
        <h2>News</h2>
        <p class="lead">Nope</p>
      </section>
    </div>
  </main>

  <footer class="footer">
    <p>© <span id="2025"></span>Yifang Chen</p>
  </footer>

  <script>document.getElementById('y').textContent = new Date().getFullYear()</script>
</body>
</html>