Skip to content

Commit b283495

Browse files
author
y-yamasaki
committed
Merge branch 'develop'
2 parents f39a2be + d970828 commit b283495

11 files changed

Lines changed: 896 additions & 136 deletions

File tree

‎assets/css/base.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,42 @@ h6 {
105105
letter-spacing: -0.02em;
106106
}
107107

108+
/* デスクトップ向け基本サイズ */
109+
h1 {
110+
font-size: 2.5rem;
111+
}
112+
h2 {
113+
font-size: 2rem;
114+
}
115+
h3 {
116+
font-size: 1.75rem;
117+
}
118+
h4 {
119+
font-size: 1.5rem;
120+
}
121+
h5 {
122+
font-size: 1.25rem;
123+
}
124+
h6 {
125+
font-size: 1rem;
126+
}
127+
128+
/* スマホ向けサイズ調整 */
129+
@media (max-width: 768px) {
130+
h1 {
131+
font-size: 2rem;
132+
}
133+
h2 {
134+
font-size: 1.75rem;
135+
}
136+
h3 {
137+
font-size: 1.5rem;
138+
}
139+
h4 {
140+
font-size: 1.25rem;
141+
}
142+
}
143+
108144
p {
109145
margin-top: 0;
110146
margin-bottom: 1em;

‎assets/css/blog.css‎

Lines changed: 202 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -193,41 +193,49 @@
193193
margin: 0 auto;
194194
background: var(--color-panel);
195195
border-radius: var(--radius-lg);
196-
padding: 2.5rem;
196+
padding: 3rem;
197197
border: 1px solid var(--color-border);
198198
box-shadow: var(--shadow-lg);
199199
}
200200

201201
.post-detail__header {
202-
margin-bottom: 2rem;
203-
padding-bottom: 1.5rem;
202+
margin-bottom: 2.5rem;
203+
padding-bottom: 2rem;
204204
border-bottom: 1px solid var(--color-border-soft);
205+
text-align: center; /* タイトル周りを中央寄せに */
205206
}
206207

207208
.post-detail__meta {
208-
font-size: 0.9rem;
209-
color: var(--color-text-muted);
210-
margin-bottom: 0.4rem;
209+
font-size: 0.95rem;
210+
color: var(
211+
--color-accent
212+
); /* 日付などをアクセントカラーに */
213+
font-weight: 600;
214+
margin-bottom: 0.8rem;
215+
letter-spacing: 0.05em;
211216
}
212217

213218
.post-detail__title {
214-
font-size: 2.2rem;
219+
font-size: 2.4rem;
215220
color: var(--color-heading);
216-
margin-bottom: 0.8rem;
217-
line-height: 1.2;
221+
margin-bottom: 1.2rem;
222+
line-height: 1.25;
218223
}
219224

220225
.post-detail__description {
221-
font-size: 1.05rem;
226+
font-size: 1.1rem;
222227
color: var(--color-text-muted);
223228
line-height: 1.6;
229+
max-width: 90%;
230+
margin: 0 auto 1.5rem;
224231
}
225232

226233
.post-detail__tags {
227-
margin-top: 1rem;
234+
margin-top: 1.5rem;
228235
display: flex;
229236
flex-wrap: wrap;
230-
gap: 0.4rem;
237+
gap: 0.5rem;
238+
justify-content: center; /* タグも中央寄せ */
231239
align-items: center;
232240
}
233241

@@ -247,17 +255,32 @@
247255
4. Markdown 本文 (.markdown-body)
248256
========================================================================== */
249257
.markdown-body {
250-
line-height: 1.7;
251-
font-size: 1rem;
258+
line-height: 1.8;
259+
font-size: 1.05rem;
252260
color: var(--color-text);
253261
}
262+
254263
.markdown-body > *:first-child {
255264
margin-top: 0;
256265
}
257266
.markdown-body > *:last-child {
258267
margin-bottom: 0;
259268
}
260269

270+
/* リンク */
271+
.markdown-body a {
272+
color: var(--color-accent);
273+
text-decoration: underline;
274+
text-decoration-thickness: 1px;
275+
text-underline-offset: 4px;
276+
transition: var(--transition-smooth);
277+
}
278+
.markdown-body a:hover {
279+
color: var(--color-accent-dark);
280+
text-decoration-thickness: 2px;
281+
}
282+
283+
/* 見出し */
261284
.markdown-body h1,
262285
.markdown-body h2,
263286
.markdown-body h3,
@@ -266,28 +289,52 @@
266289
.markdown-body h6 {
267290
color: var(--color-heading);
268291
font-family: var(--font-heading);
269-
margin-top: 2.5rem;
270-
margin-bottom: 1rem;
271-
line-height: 1.3;
292+
margin-top: 3rem;
293+
margin-bottom: 1.5rem;
294+
line-height: 1.4;
295+
position: relative;
272296
}
297+
273298
.markdown-body h2 {
274299
font-size: 1.8rem;
275-
border-left: 4px solid var(--color-accent);
276-
padding-left: 0.8rem;
300+
padding: 0.5rem 0 0.5rem 1rem;
301+
border-left: 5px solid var(--color-accent);
302+
background: linear-gradient(
303+
to right,
304+
rgba(var(--color-accent-rgb), 0.1),
305+
transparent
306+
);
307+
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
277308
}
309+
278310
.markdown-body h3 {
279-
font-size: 1.4rem;
280-
border-bottom: 1px dashed var(--color-border-soft);
281-
padding-bottom: 0.3rem;
311+
font-size: 1.5rem;
312+
padding-bottom: 0.4rem;
313+
border-bottom: 2px solid var(--color-border-soft);
314+
}
315+
.markdown-body h3::after {
316+
/* アクセントの下線を追加 */
317+
content: "";
318+
display: block;
319+
width: 60px;
320+
height: 2px;
321+
background: var(--color-accent);
322+
margin-top: 0.4rem;
282323
}
283324

325+
.markdown-body h4 {
326+
font-size: 1.25rem;
327+
margin-top: 2rem;
328+
}
329+
330+
/* 段落・リスト */
284331
.markdown-body p {
285-
margin: 1rem 0;
332+
margin: 1.5rem 0;
286333
}
287334
.markdown-body ul,
288335
.markdown-body ol {
289336
padding-left: 1.5rem;
290-
margin: 1rem 0;
337+
margin: 1.5rem 0;
291338
}
292339
.markdown-body ul {
293340
list-style: disc;
@@ -297,48 +344,141 @@
297344
}
298345
.markdown-body li {
299346
margin-bottom: 0.5rem;
347+
padding-left: 0.2rem;
348+
}
349+
.markdown-body li::marker {
350+
color: var(
351+
--color-accent
352+
); /* リストマーカーに色をつける */
300353
}
301354

355+
/* 定義リスト（dl, dt, dd） */
356+
.markdown-body dl {
357+
margin: 2rem 0;
358+
display: grid;
359+
grid-template-columns: max-content 1fr;
360+
gap: 0.5rem 1.5rem;
361+
align-items: baseline;
362+
}
363+
.markdown-body dt {
364+
font-weight: 700;
365+
color: var(--color-heading);
366+
grid-column: 1;
367+
position: relative;
368+
}
369+
.markdown-body dt::after {
370+
content: ":";
371+
margin-left: 0.2rem;
372+
color: var(--color-text-muted);
373+
}
374+
.markdown-body dd {
375+
grid-column: 2;
376+
margin: 0;
377+
color: var(--color-text-muted);
378+
}
379+
/* スマホなどで崩れる場合は縦並びに */
380+
@media (max-width: 600px) {
381+
.markdown-body dl {
382+
display: block;
383+
}
384+
.markdown-body dt {
385+
margin-top: 1rem;
386+
font-size: 1.1rem;
387+
}
388+
.markdown-body dd {
389+
margin-left: 1rem;
390+
margin-bottom: 1rem;
391+
}
392+
}
393+
394+
/* 引用 */
302395
.markdown-body blockquote {
303-
margin: 1.5rem 0;
304-
padding: 0.8rem 1.2rem;
305-
border-left: 4px solid;
306-
border-image-source: linear-gradient(
307-
to bottom,
308-
var(--color-accent),
309-
var(--color-accent-dark)
310-
);
311-
border-image-slice: 1;
396+
margin: 2rem 0;
397+
padding: 1rem 1.5rem;
398+
border-left: 4px solid var(--color-accent);
312399
background: var(--color-surface);
313400
color: var(--color-text-muted);
314-
border-radius: var(--radius-sm);
315-
font-size: 0.95rem;
401+
border-radius: 0 var(--radius-md) var(--radius-md) 0;
402+
font-style: italic;
403+
}
404+
.markdown-body blockquote > *:first-child {
405+
margin-top: 0;
406+
}
407+
.markdown-body blockquote > *:last-child {
408+
margin-bottom: 0;
316409
}
317410

411+
/* コードブロック */
318412
.markdown-body code {
319413
font-family:
320414
"Fira Code", "Cascadia Code", "JetBrains Mono",
321415
Consolas, monospace;
322416
font-size: 0.9em;
323-
background: var(--color-accent-soft);
324-
color: var(--color-text);
417+
background: rgba(var(--color-accent-rgb), 0.15);
418+
color: var(--color-heading);
325419
padding: 0.2em 0.5em;
326420
border-radius: var(--radius-sm);
327421
white-space: pre-wrap;
328422
}
329423

330424
.markdown-body pre {
331425
position: relative;
332-
background: var(--color-surface);
333-
padding: 1rem 1.2rem;
426+
background: #0d1117; /* GitHub Dark Dimmed 風 */
427+
padding: 1.25rem;
334428
border-radius: var(--radius-md);
335429
overflow-x: auto;
336430
font-size: 0.9em;
337-
line-height: 1.4;
338-
margin: 1.5rem 0;
431+
line-height: 1.5;
432+
margin: 2rem 0;
433+
border: 1px solid var(--color-border);
434+
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
435+
}
436+
.markdown-body pre code {
437+
background: transparent;
438+
padding: 0;
439+
color: #c9d1d9; /* 標準的なコード色 */
440+
border-radius: 0;
441+
}
442+
443+
/* 画像 */
444+
.markdown-body img {
445+
max-width: 100%;
446+
height: auto;
447+
display: block;
448+
margin: 2rem auto;
449+
border-radius: var(--radius-md);
450+
box-shadow: var(--shadow-lg);
339451
border: 1px solid var(--color-border-soft);
340-
box-shadow: var(--shadow-sm);
341-
white-space: pre-wrap;
452+
}
453+
454+
/* 水平線 */
455+
.markdown-body hr {
456+
height: 0;
457+
border: 0;
458+
border-top: 2px dashed var(--color-border);
459+
margin: 3rem 0;
460+
}
461+
462+
/* テーブル */
463+
.markdown-body table {
464+
width: 100%;
465+
border-collapse: collapse;
466+
margin: 2rem 0;
467+
font-size: 0.95rem;
468+
}
469+
.markdown-body th,
470+
.markdown-body td {
471+
padding: 0.75rem;
472+
border: 1px solid var(--color-border);
473+
}
474+
.markdown-body th {
475+
background: var(--color-surface);
476+
font-weight: 700;
477+
color: var(--color-heading);
478+
text-align: left;
479+
}
480+
.markdown-body tr:nth-child(even) {
481+
background: rgba(255, 255, 255, 0.02);
342482
}
343483

344484
/* ==========================================================================
@@ -360,6 +500,24 @@
360500
height: auto;
361501
}
362502
.post-detail {
363-
padding: 1.5rem;
503+
padding: 1.5rem; /* スマホでは余白を詰める */
504+
border-radius: 0; /* 画面幅いっぱいの場合は角丸なしも一案だが、page-shellがあるので維持 */
505+
border-left: none;
506+
border-right: none;
507+
box-shadow: none; /* シンプルに */
508+
background: transparent; /* 背景を抜いて馴染ませる手もあるが、ここではpanel維持 */
509+
background: var(--color-panel);
510+
}
511+
.post-detail__title {
512+
font-size: 1.8rem;
513+
}
514+
.post-detail__tags {
515+
justify-content: flex-start; /* スマホでは左寄せに戻す */
516+
}
517+
.post-detail__header {
518+
text-align: left;
519+
}
520+
.markdown-body h2 {
521+
font-size: 1.5rem;
364522
}
365523
}

0 commit comments

Comments
 (0)