Skip to content

Commit 10f1d38

Browse files
dennisresearchnotedennisresearchnote
committed
-
1 parent 184f3f2 commit 10f1d38

File tree

3 files changed

+322
-1
lines changed

3 files changed

+322
-1
lines changed

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<link href="{{ '/assets/vendor/aos/aos.css' | relative_url }}" rel="stylesheet">
2323
<link href="{{ '/assets/vendor/glightbox/css/glightbox.min.css' | relative_url }}" rel="stylesheet">
2424
<link href="{{ '/assets/vendor/swiper/swiper-bundle.min.css' | relative_url }}" rel="stylesheet">
25+
<link href="{{ '/assets/css/markdown.css' | relative_url }}" rel="stylesheet">
2526

2627
<!-- Main CSS File -->
2728
<link href="{{ '/assets/css/main.css' | relative_url }}" rel="stylesheet">

‎_layouts/post.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ <h2 class="title">{{ page.title }}</h2>
7070
</ul>
7171
</div><!-- End meta top -->
7272

73-
<div class="content">
73+
<div class="content post-content">
7474
{{ content }}
7575
</div><!-- End post content -->
7676

‎assets/css/markdown.css‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
/* =========================================================
2+
Chirpy-style markdown layer
3+
Scope: only blog post body
4+
========================================================= */
5+
6+
.blog-details .post-content {
7+
font-size: 1.08rem;
8+
line-height: 1.85;
9+
color: #34343c;
10+
letter-spacing: -0.01em;
11+
word-break: break-word;
12+
overflow-wrap: break-word;
13+
}
14+
15+
.blog-details .post-content > *:first-child {
16+
margin-top: 0 !important;
17+
}
18+
19+
.blog-details .post-content > *:last-child {
20+
margin-bottom: 0 !important;
21+
}
22+
23+
/* headings */
24+
.blog-details .post-content h1,
25+
.blog-details .post-content h2,
26+
.blog-details .post-content h3,
27+
.blog-details .post-content h4,
28+
.blog-details .post-content h5,
29+
.blog-details .post-content h6 {
30+
font-family: Lato, "Pretendard", "Noto Sans KR", sans-serif;
31+
font-weight: 700;
32+
line-height: 1.35;
33+
color: #1f1f28;
34+
letter-spacing: -0.02em;
35+
margin: 1.8em 0 0.8em;
36+
}
37+
38+
.blog-details .post-content h1 {
39+
font-size: 2.15rem;
40+
}
41+
42+
.blog-details .post-content h2 {
43+
font-size: 1.75rem;
44+
padding-bottom: 0.55rem;
45+
border-bottom: 1px solid #e9ecef;
46+
}
47+
48+
.blog-details .post-content h3 {
49+
font-size: 1.45rem;
50+
}
51+
52+
.blog-details .post-content h4 {
53+
font-size: 1.2rem;
54+
}
55+
56+
.blog-details .post-content h5 {
57+
font-size: 1rem;
58+
}
59+
60+
.blog-details .post-content h6 {
61+
font-size: 0.92rem;
62+
color: #6b7280;
63+
}
64+
65+
/* paragraph */
66+
.blog-details .post-content p {
67+
margin: 0 0 1.25rem;
68+
}
69+
70+
/* links */
71+
.blog-details .post-content a {
72+
color: #007bc1;
73+
text-decoration: none;
74+
border-bottom: 1px solid rgba(0, 123, 193, 0.35);
75+
transition: color 0.2s ease, border-color 0.2s ease;
76+
}
77+
78+
.blog-details .post-content a:hover {
79+
color: #005f96;
80+
border-bottom-color: rgba(0, 95, 150, 0.8);
81+
}
82+
83+
/* lists */
84+
.blog-details .post-content ul,
85+
.blog-details .post-content ol {
86+
margin: 0 0 1.25rem 1.25rem;
87+
padding-left: 1rem;
88+
}
89+
90+
.blog-details .post-content li {
91+
margin-bottom: 0.35rem;
92+
}
93+
94+
.blog-details .post-content li > ul,
95+
.blog-details .post-content li > ol {
96+
margin-top: 0.35rem;
97+
margin-bottom: 0.35rem;
98+
}
99+
100+
/* blockquote */
101+
.blog-details .post-content blockquote {
102+
margin: 1.5rem 0;
103+
padding: 0.75rem 1rem 0.75rem 1.25rem;
104+
color: #5c6370;
105+
background: #f8f9fa;
106+
border-left: 4px solid #cfd8e3;
107+
border-radius: 0.35rem;
108+
}
109+
110+
.blog-details .post-content blockquote p:last-child {
111+
margin-bottom: 0;
112+
}
113+
114+
/* horizontal rule */
115+
.blog-details .post-content hr {
116+
margin: 2rem 0;
117+
border: 0;
118+
border-top: 1px solid #e5e7eb;
119+
opacity: 1;
120+
}
121+
122+
/* inline code */
123+
.blog-details .post-content code.language-plaintext,
124+
.blog-details .post-content p code,
125+
.blog-details .post-content li code,
126+
.blog-details .post-content td code,
127+
.blog-details .post-content th code,
128+
.blog-details .post-content blockquote code {
129+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
130+
font-size: 0.875em;
131+
color: #c92a2a;
132+
background-color: #f3f4f6;
133+
border-radius: 0.35rem;
134+
padding: 0.12rem 0.38rem;
135+
}
136+
137+
/* filepath */
138+
.blog-details .post-content code.filepath {
139+
color: #0f766e;
140+
background-color: #ecfeff;
141+
}
142+
143+
/* code block wrapper from Rouge */
144+
.blog-details .post-content div.highlighter-rouge,
145+
.blog-details .post-content .highlight {
146+
margin: 0 0 1.5rem;
147+
border-radius: 0.7rem;
148+
overflow: hidden;
149+
background: #1e1e1e;
150+
}
151+
152+
/* code block */
153+
.blog-details .post-content pre,
154+
.blog-details .post-content .highlight pre {
155+
margin: 0;
156+
padding: 1rem 1.2rem;
157+
overflow-x: auto;
158+
line-height: 1.65;
159+
background: #1e1e1e;
160+
color: #f8f8f2;
161+
border-radius: 0.7rem;
162+
}
163+
164+
.blog-details .post-content pre code,
165+
.blog-details .post-content .highlight pre code {
166+
display: block;
167+
background: transparent !important;
168+
color: inherit !important;
169+
padding: 0;
170+
border-radius: 0;
171+
font-size: 0.92rem;
172+
line-height: inherit;
173+
white-space: pre;
174+
}
175+
176+
/* tables */
177+
.blog-details .post-content table {
178+
width: 100%;
179+
margin: 0 0 1.5rem;
180+
border-collapse: collapse;
181+
font-size: 0.96rem;
182+
display: block;
183+
overflow-x: auto;
184+
white-space: nowrap;
185+
}
186+
187+
.blog-details .post-content table th,
188+
.blog-details .post-content table td {
189+
padding: 0.75rem 1rem;
190+
border: 1px solid #e5e7eb;
191+
}
192+
193+
.blog-details .post-content table th {
194+
background: #f8fafc;
195+
font-weight: 700;
196+
color: #111827;
197+
}
198+
199+
.blog-details .post-content table tr:nth-child(even) td {
200+
background: #fcfcfd;
201+
}
202+
203+
/* images */
204+
.blog-details .post-content img {
205+
display: block;
206+
max-width: 100%;
207+
height: auto;
208+
margin: 1.5rem auto;
209+
}
210+
211+
.blog-details .post-content img.left {
212+
float: left;
213+
margin: 0.25rem 1rem 0.75rem 0;
214+
}
215+
216+
.blog-details .post-content img.right {
217+
float: right;
218+
margin: 0.25rem 0 0.75rem 1rem;
219+
}
220+
221+
.blog-details .post-content img.shadow {
222+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
223+
}
224+
225+
.blog-details .post-content img.rounded-10 {
226+
border-radius: 10px;
227+
}
228+
229+
/* caption pattern */
230+
.blog-details .post-content p > img + em {
231+
display: block;
232+
margin-top: -0.5rem;
233+
text-align: center;
234+
font-style: normal;
235+
font-size: 0.92rem;
236+
color: #6b7280;
237+
}
238+
239+
/* footnotes */
240+
.blog-details .post-content .footnotes {
241+
margin-top: 2rem;
242+
padding-top: 1rem;
243+
border-top: 1px solid #e5e7eb;
244+
color: #4b5563;
245+
font-size: 0.95rem;
246+
}
247+
248+
.blog-details .post-content .footnotes ol {
249+
margin-bottom: 0;
250+
}
251+
252+
.blog-details .post-content a.footnote,
253+
.blog-details .post-content a.reversefootnote {
254+
border-bottom: 0;
255+
}
256+
257+
/* kbd */
258+
.blog-details .post-content kbd {
259+
display: inline-block;
260+
padding: 0.12rem 0.42rem;
261+
font-size: 0.85em;
262+
line-height: 1.2;
263+
color: #111827;
264+
background-color: #f3f4f6;
265+
border: 1px solid #d1d5db;
266+
border-bottom-width: 2px;
267+
border-radius: 0.3rem;
268+
}
269+
270+
/* mark */
271+
.blog-details .post-content mark {
272+
padding: 0.08em 0.25em;
273+
background: #fff3bf;
274+
border-radius: 0.2rem;
275+
}
276+
277+
/* details */
278+
.blog-details .post-content details {
279+
margin: 0 0 1.25rem;
280+
padding: 0.9rem 1rem;
281+
border: 1px solid #e5e7eb;
282+
border-radius: 0.5rem;
283+
background: #fafafa;
284+
}
285+
286+
.blog-details .post-content summary {
287+
cursor: pointer;
288+
font-weight: 600;
289+
}
290+
291+
/* clear floated images */
292+
.blog-details .post-content::after {
293+
content: "";
294+
display: block;
295+
clear: both;
296+
}
297+
298+
@media (max-width: 768px) {
299+
.blog-details .post-content {
300+
font-size: 1rem;
301+
line-height: 1.75;
302+
}
303+
304+
.blog-details .post-content h1 {
305+
font-size: 1.8rem;
306+
}
307+
308+
.blog-details .post-content h2 {
309+
font-size: 1.5rem;
310+
}
311+
312+
.blog-details .post-content h3 {
313+
font-size: 1.28rem;
314+
}
315+
316+
.blog-details .post-content pre,
317+
.blog-details .post-content .highlight pre {
318+
padding: 0.9rem 1rem;
319+
}
320+
}

0 commit comments

Comments
 (0)