Skip to content

Commit c275629

Browse files
2REBCat2REBCat
committed
Contact 아이콘, 변경, 검색 기능 추가, 상단 바 UI 개편
1 parent d366219 commit c275629

6 files changed

Lines changed: 566 additions & 14 deletions

File tree

‎content/about/_index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ social_links:
5757
- type: "github"
5858
label: "github.com/2REBCat"
5959
url: "https://github.com/2REBCat"
60-
# - type: "x"
61-
# label: "x.com/your-handle"
62-
# url: "https://x.com/your-handle"
63-
# - type: "linkedin"
64-
# label: "linkedin.com/in/your-handle"
65-
# url: "https://linkedin.com/in/your-handle"
60+
- type: "x"
61+
label: "x.com/your-handle"
62+
url: "#"
63+
- type: "linkedin"
64+
label: "linkedin.com/in/your-handle"
65+
url: "#"
6666
---
6767

6868
웹 개발, 정보보안, 서버 운영을 따로 떨어진 분야로 보지 않고 하나의 흐름 안에서 이해하려고 노력합니다. 기능을 구현하는 일과 기록을 남기는 일을 같은 비중으로 다루며, 시간이 지나도 다시 읽히는 구조를 만드는 데 관심이 많습니다.

‎hugo.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ title = "2RebCat | Knowledge Archive"
44
theme = "2rebcat-academic"
55
disableKinds = ["taxonomy", "term", "RSS", "sitemap", "robotsTXT"]
66

7+
[outputs]
8+
home = ["HTML", "JSON"]
9+
710
[params]
811
description = "2RebCat knowledge archive. A blog-first site for study notes, security and operations memos, and portfolio build logs."
912
author = "2RebCat"

‎themes/2rebcat-academic/assets/css/main.css‎

Lines changed: 300 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@ img {
5151
position: sticky;
5252
top: 12px;
5353
z-index: 30;
54-
display: flex;
54+
display: grid;
55+
grid-template-columns: minmax(0, 1fr) auto minmax(220px, 1fr);
5556
align-items: center;
56-
justify-content: flex-start;
57+
justify-content: center;
5758
gap: 16px;
5859
padding: 10px 14px;
5960
margin-bottom: 24px;
@@ -65,6 +66,53 @@ img {
6566
transition: transform 220ms ease, opacity 220ms ease, background-color 180ms ease, box-shadow 180ms ease;
6667
}
6768

69+
.site-header-spacer {
70+
min-width: 0;
71+
}
72+
73+
.site-brand {
74+
display: inline-flex;
75+
align-items: center;
76+
justify-self: start;
77+
align-self: center;
78+
min-height: 42px;
79+
font-family: "JetBrains Mono", monospace;
80+
padding-left: 8px;
81+
font-size: 1.08rem;
82+
font-weight: 800;
83+
letter-spacing: 0.08em;
84+
text-transform: uppercase;
85+
color: var(--ink);
86+
}
87+
88+
.site-brand:hover,
89+
.site-brand:focus-visible {
90+
color: var(--accent);
91+
}
92+
93+
.menu-toggle {
94+
display: none;
95+
align-items: center;
96+
justify-content: center;
97+
gap: 4px;
98+
width: 44px;
99+
height: 44px;
100+
padding: 0;
101+
border: 1px solid rgba(199, 212, 229, 0.9);
102+
border-radius: 999px;
103+
background: rgba(255, 255, 255, 0.96);
104+
cursor: pointer;
105+
}
106+
107+
.menu-toggle span {
108+
display: block;
109+
width: 16px;
110+
height: 1.8px;
111+
border-radius: 999px;
112+
background: var(--ink);
113+
transition: transform 180ms ease, opacity 180ms ease;
114+
}
115+
68116
.site-header.is-condensed {
69117
background: rgba(248, 251, 255, 0.94);
70118
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
@@ -93,7 +141,104 @@ img {
93141
.site-nav {
94142
display: flex;
95143
align-items: center;
144+
justify-content: center;
96145
gap: 6px;
146+
width: auto;
147+
}
148+
149+
.site-search {
150+
position: relative;
151+
width: min(100%, 280px);
152+
justify-self: end;
153+
}
154+
155+
.search-input {
156+
width: 100%;
157+
min-height: 42px;
158+
padding: 0 14px;
159+
border: 1px solid rgba(199, 212, 229, 0.9);
160+
border-radius: 999px;
161+
background: rgba(255, 255, 255, 0.96);
162+
color: var(--ink);
163+
font: inherit;
164+
font-size: 0.94rem;
165+
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
166+
}
167+
168+
.search-input::placeholder {
169+
color: var(--muted);
170+
}
171+
172+
.search-input:focus {
173+
outline: none;
174+
border-color: rgba(37, 99, 235, 0.38);
175+
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
176+
background: #ffffff;
177+
}
178+
179+
.search-results {
180+
position: absolute;
181+
top: calc(100% + 10px);
182+
right: 0;
183+
left: 0;
184+
width: 100%;
185+
padding: 14px;
186+
border: 1px solid var(--line);
187+
border-radius: 20px;
188+
background: rgba(255, 255, 255, 0.98);
189+
box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14);
190+
backdrop-filter: blur(18px);
191+
}
192+
193+
.search-helper {
194+
color: var(--muted);
195+
font-size: 0.88rem;
196+
line-height: 1.5;
197+
}
198+
199+
.search-results-list {
200+
display: grid;
201+
gap: 8px;
202+
margin: 12px 0 0;
203+
padding: 0;
204+
list-style: none;
205+
}
206+
207+
.search-result-item {
208+
display: grid;
209+
gap: 4px;
210+
padding: 12px 14px;
211+
border: 1px solid transparent;
212+
border-radius: 16px;
213+
background: var(--panel-soft);
214+
transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
215+
}
216+
217+
.search-result-item:hover,
218+
.search-result-item:focus-visible {
219+
border-color: rgba(37, 99, 235, 0.18);
220+
background: #ffffff;
221+
transform: translateY(-1px);
222+
}
223+
224+
.search-result-item strong {
225+
color: var(--ink);
226+
font-size: 0.95rem;
227+
line-height: 1.45;
228+
}
229+
230+
.search-result-item span {
231+
color: var(--muted);
232+
font-size: 0.88rem;
233+
line-height: 1.55;
234+
}
235+
236+
.search-result-meta {
237+
font-family: "JetBrains Mono", monospace;
238+
font-size: 0.76rem;
239+
letter-spacing: 0.04em;
240+
text-transform: uppercase;
241+
color: var(--accent);
97242
}
98243

99244
.nav-link {
@@ -165,6 +310,35 @@ img {
165310
gap: 4px;
166311
}
167312

313+
.hero-copy h1,
314+
.blog-hero-copy h1,
315+
.hero-copy p,
316+
.blog-hero-copy p,
317+
.hero-support {
318+
max-width: none;
319+
}
320+
321+
.hero-copy h1,
322+
.blog-hero-copy h1 {
323+
word-break: normal;
324+
overflow-wrap: break-word;
325+
text-wrap: pretty;
326+
}
327+
328+
.hero-copy .intro-copy,
329+
.blog-hero-copy .intro-copy,
330+
.hero-support {
331+
max-width: 100%;
332+
}
333+
334+
.hero-copy .intro-copy p,
335+
.blog-hero-copy .intro-copy p,
336+
.hero-support {
337+
word-break: normal;
338+
overflow-wrap: break-word;
339+
text-wrap: pretty;
340+
}
341+
168342
.hero-role {
169343
color: var(--ink);
170344
font-size: 0.96rem;
@@ -263,6 +437,18 @@ p {
263437
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
264438
}
265439

440+
.sr-only {
441+
position: absolute;
442+
width: 1px;
443+
height: 1px;
444+
padding: 0;
445+
margin: -1px;
446+
overflow: hidden;
447+
clip: rect(0, 0, 0, 0);
448+
white-space: nowrap;
449+
border: 0;
450+
}
451+
266452
.button:hover,
267453
.social-links a:hover,
268454
.inline-link:hover {
@@ -490,6 +676,58 @@ p {
490676
padding: 28px;
491677
}
492678

679+
.contact-actions {
680+
align-items: center;
681+
justify-content: flex-end;
682+
}
683+
684+
.contact-icon-button {
685+
position: relative;
686+
display: inline-flex;
687+
align-items: center;
688+
justify-content: center;
689+
width: 52px;
690+
height: 52px;
691+
border: 1px solid var(--line-strong);
692+
border-radius: 999px;
693+
background: rgba(255, 255, 255, 0.94);
694+
color: var(--ink);
695+
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
696+
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
697+
}
698+
699+
.contact-icon-button:hover,
700+
.contact-icon-button:focus-visible {
701+
transform: translateY(-2px);
702+
color: var(--accent);
703+
border-color: rgba(37, 99, 235, 0.28);
704+
background: var(--panel-soft);
705+
box-shadow: 0 16px 28px rgba(37, 99, 235, 0.14);
706+
}
707+
708+
.contact-icon-button:focus-visible {
709+
outline: 2px solid rgba(37, 99, 235, 0.22);
710+
outline-offset: 3px;
711+
}
712+
713+
.contact-icon-button svg {
714+
width: 22px;
715+
height: 22px;
716+
}
717+
718+
.contact-icon-button[data-platform="email"] {
719+
background: var(--ink);
720+
color: #ffffff;
721+
border-color: var(--ink);
722+
}
723+
724+
.contact-icon-button[data-platform="email"]:hover,
725+
.contact-icon-button[data-platform="email"]:focus-visible {
726+
color: #ffffff;
727+
background: #1e293b;
728+
border-color: #1e293b;
729+
}
730+
493731
.blog-side-panel {
494732
display: grid;
495733
gap: 14px;
@@ -669,22 +907,79 @@ main.blog-layout:not(#top):not(#blog-home) .article-list {
669907

670908
.site-header {
671909
position: static;
672-
flex-direction: column;
673-
align-items: flex-start;
910+
grid-template-columns: minmax(0, 1fr) auto;
911+
align-items: stretch;
674912
border-radius: var(--radius-md);
675913
transform: none;
676914
opacity: 1;
677915
pointer-events: auto;
678916
}
679917

918+
.site-brand {
919+
justify-self: start;
920+
padding-left: 4px;
921+
font-size: 1rem;
922+
}
923+
924+
.menu-toggle {
925+
display: inline-flex;
926+
justify-self: end;
927+
flex-direction: column;
928+
}
929+
930+
.site-header.is-menu-open .menu-toggle span:nth-child(1) {
931+
transform: translateY(5.8px) rotate(45deg);
932+
}
933+
934+
.site-header.is-menu-open .menu-toggle span:nth-child(2) {
935+
opacity: 0;
936+
}
937+
938+
.site-header.is-menu-open .menu-toggle span:nth-child(3) {
939+
transform: translateY(-5.8px) rotate(-45deg);
940+
}
941+
680942
.brand-logo {
681943
width: 40px;
682944
height: 40px;
683945
}
684946

685947
.site-nav {
948+
display: none;
949+
width: 100%;
950+
grid-column: 1 / -1;
951+
flex-direction: column;
952+
align-items: stretch;
953+
gap: 8px;
954+
padding-top: 4px;
955+
}
956+
957+
.site-header.is-menu-open .site-nav {
958+
display: flex;
959+
}
960+
961+
.nav-link {
962+
width: 100%;
963+
justify-content: center;
964+
padding: 10px 12px;
965+
background: rgba(255, 255, 255, 0.9);
966+
}
967+
968+
.site-search {
969+
display: none;
970+
width: 100%;
971+
justify-self: stretch;
972+
grid-column: 1 / -1;
973+
}
974+
975+
.site-header.is-menu-open .site-search {
976+
display: block;
977+
}
978+
979+
.search-results {
980+
position: static;
686981
width: 100%;
687-
flex-wrap: wrap;
982+
margin-top: 10px;
688983
}
689984

690985
.nav-link {

0 commit comments

Comments
 (0)