Skip to content

Commit 92d395f

Browse files
mdeenoclaude
mdeeno
and
claude
committed
feat: 404 페이지 생성 + 색상 대비 WCAG AA 미달 잔여분 수정
- 커스텀 404.html 생성 (홈/계산기 CTA, 보조 링크, 반응형) - static/css/custom.css: #6b7684→#4e5968, --md-muted #6b7280→#4b5563, --md-subtle #9ca3af→#6b7280, #ccc→#6b7280 - lab-style.css: #777→#9ca3af, #666→#9ca3af, #888→#9ca3af (다크 배경 대비) - post_views.html: #888→#4b5563, 폰트 13px 보장 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 9a8575b commit 92d395f

4 files changed

Lines changed: 137 additions & 11 deletions

File tree

‎assets/css/lab-style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@
374374

375375
.email-note {
376376
font-size: 0.8125rem;
377-
color: #777;
377+
color: #9ca3af;
378378
margin-top: 10px;
379379
line-height: 1.4;
380380
}
@@ -549,7 +549,7 @@
549549
.hero-trust {
550550
margin-top: 12px;
551551
font-size: 0.9rem;
552-
color: #666;
552+
color: #9ca3af;
553553
text-align: center;
554554
}
555555
.hero-trust p {
@@ -625,7 +625,7 @@
625625
}
626626
.stat-item p {
627627
font-size: 0.9rem;
628-
color: #888;
628+
color: #9ca3af;
629629
margin-top: 5px;
630630
}
631631

‎layouts/404.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{{- define "main" }}
2+
<div class="not-found-wrap">
3+
<div class="not-found-code">404</div>
4+
<h1 class="not-found-title">페이지를 찾을 수 없습니다</h1>
5+
<p class="not-found-desc">
6+
요청하신 페이지가 삭제되었거나, 주소가 변경되었을 수 있습니다.<br>
7+
아래 버튼으로 원하는 페이지로 이동해 주세요.
8+
</p>
9+
<div class="not-found-btns">
10+
<a href="/" class="not-found-btn not-found-btn--home">홈으로 돌아가기</a>
11+
<a href="https://mdeeno.com/member?utm_source=blog&utm_medium=404&utm_campaign=recovery&utm_content=404_page"
12+
target="_blank" rel="noopener noreferrer"
13+
onclick="typeof gtag !== 'undefined' && gtag('event', '404_cta_click', {event_category: 'CTA', event_label: '404_page'})"
14+
class="not-found-btn not-found-btn--calc">내 분담금 추정하기 →</a>
15+
</div>
16+
<div class="not-found-links">
17+
<a href="/archives/">전체 글 보기</a>
18+
<span class="not-found-sep">·</span>
19+
<a href="/calculators/">무료 계산기</a>
20+
<span class="not-found-sep">·</span>
21+
<a href="/posts/reconstruction/">재건축 분석</a>
22+
</div>
23+
</div>
24+
25+
<style>
26+
.not-found-wrap {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
justify-content: center;
31+
min-height: 60vh;
32+
padding: 3rem 1.5rem;
33+
text-align: center;
34+
}
35+
.not-found-code {
36+
font-size: clamp(80px, 15vw, 140px);
37+
font-weight: 900;
38+
color: #1e40af;
39+
line-height: 1;
40+
margin-bottom: 0.5rem;
41+
opacity: 0.15;
42+
}
43+
.not-found-title {
44+
font-size: clamp(1.25rem, 3vw, 1.75rem);
45+
font-weight: 800;
46+
color: #111827;
47+
margin: 0 0 0.75rem;
48+
word-break: keep-all;
49+
}
50+
.not-found-desc {
51+
font-size: 1rem;
52+
color: #374151;
53+
line-height: 1.7;
54+
margin: 0 0 2rem;
55+
max-width: 480px;
56+
word-break: keep-all;
57+
}
58+
.not-found-btns {
59+
display: flex;
60+
gap: 12px;
61+
flex-wrap: wrap;
62+
justify-content: center;
63+
margin-bottom: 2rem;
64+
}
65+
.not-found-btn {
66+
display: inline-flex;
67+
align-items: center;
68+
justify-content: center;
69+
padding: 14px 28px;
70+
min-height: 48px;
71+
font-size: 1rem;
72+
font-weight: 700;
73+
border-radius: 8px;
74+
text-decoration: none;
75+
transition: all 0.2s;
76+
box-sizing: border-box;
77+
}
78+
.not-found-btn--home {
79+
background: #f1f5f9;
80+
color: #1e293b;
81+
border: 1px solid #e2e8f0;
82+
}
83+
.not-found-btn--home:hover {
84+
background: #e2e8f0;
85+
border-color: #cbd5e1;
86+
}
87+
.not-found-btn--calc {
88+
background: #1e40af;
89+
color: #fff;
90+
border: 1px solid #1e40af;
91+
}
92+
.not-found-btn--calc:hover {
93+
background: #1e3a8a;
94+
border-color: #1e3a8a;
95+
}
96+
.not-found-links {
97+
font-size: 0.9rem;
98+
color: #4b5563;
99+
}
100+
.not-found-links a {
101+
color: #1e40af;
102+
text-decoration: none;
103+
font-weight: 600;
104+
}
105+
.not-found-links a:hover {
106+
text-decoration: underline;
107+
}
108+
.not-found-sep {
109+
margin: 0 8px;
110+
color: #d1d5db;
111+
}
112+
@media (max-width: 480px) {
113+
.not-found-btns {
114+
flex-direction: column;
115+
width: 100%;
116+
}
117+
.not-found-btn {
118+
width: 100%;
119+
text-align: center;
120+
}
121+
.not-found-wrap {
122+
padding: 2rem 1rem;
123+
}
124+
}
125+
</style>
126+
{{- end }}

‎layouts/partials/post_views.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{/* GoatCounter 페이지 뷰 카운터 */}}
2-
<span class="post-views" id="gc-views" style="font-size:0.78rem;color:#888;margin-left:8px;">
2+
<span class="post-views" id="gc-views" style="font-size:0.8125rem;color:#4b5563;margin-left:8px;">
33
<span id="gc-count">…</span> views
44
</span>
55
<script>

‎static/css/custom.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
.logo-text {
1313
font-size: 0.8125rem;
1414
font-weight: 700;
15-
color: #6b7684;
15+
color: #4e5968;
1616
letter-spacing: 0.08em;
1717
}
1818

@@ -39,8 +39,8 @@
3939
--md-card: #ffffff;
4040
--md-border: #e4e7ec;
4141
--md-text: #111827;
42-
--md-muted: #6b7280;
43-
--md-subtle: #9ca3af;
42+
--md-muted: #4b5563;
43+
--md-subtle: #6b7280;
4444
}
4545

4646
/* ── PaperMod Light Mode Override ──────────────────────── */
@@ -963,7 +963,7 @@ nav#TableOfContents a:hover { color: var(--md-blue); }
963963
border-radius: 8px;
964964
background: #f8fafc;
965965
border: 1px solid #e4e7ec;
966-
color: #6b7280;
966+
color: #4b5563;
967967
text-decoration: none;
968968
transition: all 0.15s;
969969
flex-shrink: 1;
@@ -1520,7 +1520,7 @@ article.post-single .post-content {
15201520
}
15211521
.post-disclaimer .copyright-text {
15221522
font-size: 0.8125rem;
1523-
color: #6b7280;
1523+
color: #4b5563;
15241524
margin: 0;
15251525
text-align: center;
15261526
}
@@ -1581,7 +1581,7 @@ article.post-single .post-content {
15811581
.blog-cpa-box .blog-cpa__desc {
15821582
margin-bottom: 15px;
15831583
font-size: 0.9rem;
1584-
color: #6b7280;
1584+
color: #4b5563;
15851585
}
15861586
.blog-cpa__link {
15871587
display: inline-block;
@@ -1636,7 +1636,7 @@ article.post-single .post-content {
16361636
/* ── 공정위 공시 ─── */
16371637
.blog-disclosure {
16381638
font-size: 0.8125rem;
1639-
color: #ccc;
1639+
color: #6b7280;
16401640
margin-bottom: 10px;
16411641
text-align: right;
16421642
}

0 commit comments

Comments
 (0)