Restyle home to match neubrutalism.com grammar.

Yellow hero band, pink divider, filled cards, boxed labels, black footer. Light/dark switch stays.

Author: alzza

assets/style.css

@@ -161,6 +161,28 @@ button:focus-visible {
   box-shadow: none;
 }
 
+.theme-switch {
+  display: inline-flex;
+  border: var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+}
+.theme-switch button {
+  appearance: none;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font: 700 13px/1 var(--font-heading);
+  cursor: pointer;
+}
+.theme-switch button + button { border-left: var(--border-thin); }
+.theme-switch button.is-on {
+  background: var(--yellow);
+  color: var(--black);
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -186,6 +208,33 @@ button:focus-visible {
 .btn-accent:hover { background: var(--yellow); color: var(--black); }
 
 .hero { padding: 28px 0 24px; }
+.hero-band {
+  background: var(--yellow);
+  color: var(--black);
+  border-bottom: var(--border-thick);
+  padding: 36px 0 40px;
+}
+.hero-band h1 {
+  margin: 0 0 12px;
+  font-family: var(--font-display);
+  font-size: clamp(28px, 5.5vw, 46px);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1.14;
+  padding-bottom: 4px;
+  color: var(--black);
+}
+.hero-band h1 em {
+  color: var(--black);
+  font-style: italic;
+}
+.hero-band p {
+  margin: 0;
+  max-width: 46ch;
+  color: #1a1a1a;
+  font-size: 16px;
+}
+
 .badge {
   display: inline-block;
   margin-bottom: 12px;
@@ -200,6 +249,18 @@ button:focus-visible {
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
+.badge-pink { background: var(--pink); }
+
+.divider-band {
+  display: block;
+  height: 16px;
+  margin: 0;
+  border: 0;
+  border-top: var(--border-thick);
+  border-bottom: var(--border-thick);
+  background: var(--pink);
+}
+
 .hero h1 {
   margin: 0 0 12px;
   font-family: var(--font-display);
@@ -226,7 +287,12 @@ button:focus-visible {
 }
 
 .sec-label {
-  margin: 8px 0 12px;
+  display: inline-block;
+  margin: 28px 0 16px;
+  padding: 0.35rem 0.75rem;
+  border: var(--border-thin);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
@@ -270,15 +336,21 @@ button:focus-visible {
 .card:hover {
   transform: translate(-2px, -2px);
   box-shadow: var(--shadow-lg);
-  background: var(--yellow);
-  color: var(--black);
 }
-.card:hover p,
-.card:hover .kicker { color: var(--black); }
-.card:nth-child(2) { background: var(--yellow-light); }
-.card:nth-child(3) { background: var(--pink-light); }
-.card:nth-child(4) { background: var(--blue-light); }
-.card.alt { background: var(--yellow-light); }
+.card.fill-paper { background: var(--surface); }
+.card.fill-yellow,
+.card.fill-pink,
+.card.fill-blue { color: var(--black); }
+.card.fill-yellow { background: var(--yellow); }
+.card.fill-pink { background: var(--pink); }
+.card.fill-blue { background: var(--blue); }
+.card.fill-yellow p,
+.card.fill-pink p,
+.card.fill-blue p,
+.card.fill-yellow .kicker,
+.card.fill-pink .kicker,
+.card.fill-blue .kicker { color: #1a1a1a; }
+.card.alt { background: var(--yellow); color: var(--black); }
 .kicker {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -301,6 +373,13 @@ button:focus-visible {
   font-size: 13px;
   font-family: var(--font-mono);
 }
+.site-foot.band {
+  margin-top: 8px;
+  padding: 22px 0;
+  background: var(--black);
+  color: #c9c9d1;
+  border-top: var(--border-thick);
+}
 
 .day {
   margin: 0 0 22px;

index.html

@@ -37,37 +37,40 @@
     </div>
   </header>
 
-  <div class="wrap">
-    <section class="hero">
-      <span class="badge">프로젝트</span>
+  <section class="hero-band">
+    <div class="wrap">
+      <span class="badge badge-pink">프로젝트</span>
       <h1>무료한 일상에 생기를 불어넣은 <em>프로젝트들.</em></h1>
       <p>주로 관심 갖는 분야만 올립니다. 페이지는 사이트로, 나머지는 GitHub 저장소로 이동합니다.</p>
-    </section>
+    </div>
+  </section>
+  <hr class="divider-band" />
 
+  <div class="wrap">
     <p class="sec-label">Public repos</p>
     <section class="grid">
-      <a class="card" href="https://alzza.github.io/sc2-conveyor-profiler/">
+      <a class="card fill-paper" href="https://alzza.github.io/sc2-conveyor-profiler/">
         <span class="kicker">PLC / SC2</span>
         <h2>sc2-conveyor-profiler</h2>
         <p>Sheet Conveyor 2 파라미터 오토튠. Trend CSV와 시뮬.</p>
         <span class="go">페이지 열기 →</span>
       </a>
 
-      <a class="card" href="https://github.com/alzza/t2-can-board">
+      <a class="card fill-yellow" href="https://github.com/alzza/t2-can-board">
         <span class="kicker">Tesla / CAN</span>
         <h2>t2-can-board</h2>
         <p>LILYGO T2-CAN, Tesla HW3 듀얼 CAN 펌웨어.</p>
         <span class="go">GitHub →</span>
       </a>
 
-      <a class="card" href="https://github.com/alzza/tesla-can-moniter">
+      <a class="card fill-pink" href="https://github.com/alzza/tesla-can-moniter">
         <span class="kicker">Tesla / CAN</span>
         <h2>tesla-can-moniter</h2>
         <p>테슬라 CAN 모니터.</p>
         <span class="go">GitHub →</span>
       </a>
 
-      <a class="card" href="https://orca-lime.vercel.app">
+      <a class="card fill-blue" href="https://orca-lime.vercel.app">
         <span class="kicker">Fork</span>
         <h2>orca_mode_studio</h2>
         <p>reallygood83/orca fork. 데모는 Vercel.</p>
@@ -84,9 +87,11 @@ <h2>orca_mode_studio</h2>
       <strong>테마 토큰</strong>
       <span>라이트/다크와 코드 블록 쓰는 법</span>
     </a>
-
-    <footer class="site-foot">alzza.github.io</footer>
   </div>
+
+  <footer class="site-foot band">
+    <div class="wrap">alzza.github.io</div>
+  </footer>
   <script src="assets/theme.js"></script>
 </body>
 </html>