|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | + <title>Some Recent Drawings - Situ E. Chen</title> |
| 7 | + <link rel="icon" type="image/svg+xml" href="../images/site/favicon.svg" /> |
| 8 | + <link rel="alternate icon" type="image/png" href="../images/site/favicon.ico" /> |
| 9 | + <link rel="apple-touch-icon" href="../images/site/apple-touch-icon.png" /> |
| 10 | + <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 11 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 12 | + <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| 13 | + <link rel="stylesheet" href="../assets/css/site.css" /> |
| 14 | + <style> |
| 15 | + .single-line-title { |
| 16 | + font-size: 2.2em; |
| 17 | + } |
| 18 | + /* A small exhibition — each drawing titled like a gallery plate. */ |
| 19 | + .gallery { |
| 20 | + margin-top: 2.5em; |
| 21 | + } |
| 22 | + .artwork { |
| 23 | + margin: 0 0 3.2em; |
| 24 | + } |
| 25 | + .artwork-title { |
| 26 | + font-style: italic; |
| 27 | + font-weight: 400; |
| 28 | + font-size: 1.35em; |
| 29 | + color: var(--ink); |
| 30 | + margin: 0 0 0.7em; |
| 31 | + } |
| 32 | + .artwork img { |
| 33 | + display: block; |
| 34 | + width: 100%; |
| 35 | + height: auto; |
| 36 | + border-radius: 8px; |
| 37 | + box-shadow: 0 4px 14px rgba(0,0,0,0.09); |
| 38 | + } |
| 39 | + .artwork.portrait img { |
| 40 | + width: 58%; |
| 41 | + margin: 0 auto; |
| 42 | + } |
| 43 | + .ps-note { |
| 44 | + font-style: italic; |
| 45 | + color: var(--ink-soft); |
| 46 | + margin: 0 0 0.9em; |
| 47 | + } |
| 48 | + @media (max-width: 640px) { |
| 49 | + .artwork { margin-bottom: 2.4em; } |
| 50 | + .artwork.portrait img { width: 86%; } |
| 51 | + } |
| 52 | + </style> |
| 53 | +</head> |
| 54 | +<body> |
| 55 | + |
| 56 | + <header class="topbar"> |
| 57 | + <div class="topbar-inner"> |
| 58 | + <a href="../index.html" class="brand"> |
| 59 | + <span class="brand-name"> |
| 60 | + <span class="brand-en">Situ E. Chen</span> |
| 61 | + <span class="mono">situchen.me</span> |
| 62 | + </span> |
| 63 | + </a> |
| 64 | + <nav> |
| 65 | + <ul class="nav"> |
| 66 | + <li><a href="../index.html#top">Top</a></li> |
| 67 | + <li><a href="../index.html#work">Work</a></li> |
| 68 | + <li><a href="../index.html#portfolio">Portfolio</a></li> |
| 69 | + <li><a href="../blog.html" class="active">Blog</a></li> |
| 70 | + <li><a href="../causes.html">Things I Care About</a></li> |
| 71 | + <li><a href="../index.html#contact">Contact</a></li> |
| 72 | + </ul> |
| 73 | + <button class="nav-toggle" id="nav-toggle" aria-label="Menu" aria-expanded="false"><span class="bars"></span></button> |
| 74 | + </nav> |
| 75 | + </div> |
| 76 | + </header> |
| 77 | + |
| 78 | + <main> |
| 79 | + <article class="wrapper style2"> |
| 80 | + <div class="container"> |
| 81 | + <div class="row"> |
| 82 | + <div class="col-8 col-12-medium" style="margin: 0 auto; max-width: 800px;"> |
| 83 | + <article class="box style1" style="padding: 3em;"> |
| 84 | + <h2 class="single-line-title">Some Recent Drawings</h2> |
| 85 | + <p class="post-meta">Posted on February 23, 2026</p> |
| 86 | + |
| 87 | + <div class="gallery"> |
| 88 | + <figure class="artwork"> |
| 89 | + <figcaption class="artwork-title">Drowning</figcaption> |
| 90 | + <img src="../images/blog/drawings/drowning.jpg" alt="Drowning — a small figure suspended between dark tangled currents above and bright jagged peaks below" /> |
| 91 | + </figure> |
| 92 | + |
| 93 | + <figure class="artwork"> |
| 94 | + <figcaption class="artwork-title">Inevitability</figcaption> |
| 95 | + <img src="../images/blog/drawings/inevitability.jpg" alt="Inevitability — a girl with tear-streaked cheeks beside a long road drawn in perspective lines" /> |
| 96 | + </figure> |
| 97 | + |
| 98 | + <figure class="artwork"> |
| 99 | + <figcaption class="artwork-title">Metamorphosis</figcaption> |
| 100 | + <img src="../images/blog/drawings/metamorphosis.jpg" alt="Metamorphosis — a boy sitting in speckled rain, shielding his eyes from a radiating sun" /> |
| 101 | + </figure> |
| 102 | + |
| 103 | + <figure class="artwork"> |
| 104 | + <figcaption class="artwork-title">Redemption</figcaption> |
| 105 | + <img src="../images/blog/drawings/redemption.jpg" alt="Redemption — a girl with crossed arms, her braid streaming into wind-swept lines" /> |
| 106 | + </figure> |
| 107 | + |
| 108 | + <figure class="artwork"> |
| 109 | + <figcaption class="artwork-title">Haunted</figcaption> |
| 110 | + <img src="../images/blog/drawings/haunted.jpg" alt="Haunted — a girl wading through swirling waves toward a distant figure on the horizon" /> |
| 111 | + </figure> |
| 112 | + |
| 113 | + <figure class="artwork"> |
| 114 | + <figcaption class="artwork-title">Generation</figcaption> |
| 115 | + <img src="../images/blog/drawings/generation.jpg" alt="Generation — a tearful face before a harvested field and a single bare tree" /> |
| 116 | + </figure> |
| 117 | + |
| 118 | + <figure class="artwork"> |
| 119 | + <figcaption class="artwork-title">Tedo</figcaption> |
| 120 | + <img src="../images/blog/drawings/tedo.jpg" alt="Tedo — a page of pencil sketches of a small dog playing, sleeping and making faces" /> |
| 121 | + </figure> |
| 122 | + |
| 123 | + <figure class="artwork portrait"> |
| 124 | + <figcaption class="ps-note">P.S. Tedo is my 3-year-old poodle :）</figcaption> |
| 125 | + <img src="../images/blog/drawings/tedo-real.jpg" alt="A photo of Tedo, a grey toy poodle, resting his paws on the sofa" /> |
| 126 | + </figure> |
| 127 | + </div> |
| 128 | + |
| 129 | + <a href="../blog.html" class="button small" style="margin-top: 2em;">← Back to Blog</a> |
| 130 | + </article> |
| 131 | + </div> |
| 132 | + </div> |
| 133 | + </div> |
| 134 | + </article> |
| 135 | + </main> |
| 136 | + |
| 137 | + <footer class="site-foot"> |
| 138 | + <div class="wrap foot-inner"> |
| 139 | + <div class="sig">© Situ E. Chen. All rights reserved.</div> |
| 140 | + <div><a href="../blog.html" class="link">← Back to Blog</a></div> |
| 141 | + </div> |
| 142 | + </footer> |
| 143 | + <script> |
| 144 | + (function(){ |
| 145 | + const t = document.getElementById('nav-toggle'); |
| 146 | + const n = document.querySelector('.nav'); |
| 147 | + if (!t || !n) return; |
| 148 | + t.addEventListener('click', () => { |
| 149 | + const open = n.classList.toggle('open'); |
| 150 | + t.classList.toggle('open', open); |
| 151 | + t.setAttribute('aria-expanded', open ? 'true' : 'false'); |
| 152 | + }); |
| 153 | + n.addEventListener('click', e => { |
| 154 | + if (e.target.tagName === 'A') { |
| 155 | + n.classList.remove('open'); |
| 156 | + t.classList.remove('open'); |
| 157 | + t.setAttribute('aria-expanded', 'false'); |
| 158 | + } |
| 159 | + }); |
| 160 | + })(); |
| 161 | + </script> |
| 162 | + |
| 163 | +</body> |
| 164 | +</html> |
0 commit comments