fix: [roadmap] 로드맵 문서 마크다운 렌더링 스타일 개선
- Tailwind prose 클래스 → 커스텀 .markdown-body CSS로 변경 - 테이블 보더, 코드 블록, 제목 계층, 인용문 스타일 추가
This commit is contained in:
김보곤
@@ -25,22 +25,7 @@
|
||||
<!-- 문서 본문 -->
|
||||
@if($content)
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
||||
<article class="prose prose-sm max-w-none
|
||||
prose-headings:text-gray-900 prose-headings:font-bold
|
||||
prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-3 prose-h1:mb-6
|
||||
prose-h2:text-xl prose-h2:mt-8 prose-h2:mb-4
|
||||
prose-h3:text-lg prose-h3:mt-6 prose-h3:mb-3
|
||||
prose-p:text-gray-700 prose-p:leading-relaxed
|
||||
prose-a:text-indigo-600 prose-a:no-underline hover:prose-a:underline
|
||||
prose-code:text-indigo-700 prose-code:bg-indigo-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
|
||||
prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:rounded-lg prose-pre:overflow-x-auto
|
||||
prose-table:text-sm
|
||||
prose-th:bg-gray-50 prose-th:px-4 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:text-gray-700
|
||||
prose-td:px-4 prose-td:py-2 prose-td:border-t prose-td:border-gray-200
|
||||
prose-blockquote:border-indigo-300 prose-blockquote:bg-indigo-50 prose-blockquote:rounded-r-lg prose-blockquote:py-1 prose-blockquote:px-4
|
||||
prose-strong:text-gray-900
|
||||
prose-li:text-gray-700
|
||||
prose-hr:border-gray-200 prose-hr:my-8">
|
||||
<article class="markdown-body">
|
||||
{!! $content !!}
|
||||
</article>
|
||||
</div>
|
||||
@@ -54,3 +39,157 @@
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #1f2937;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 제목 */
|
||||
.markdown-body h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
padding-bottom: 0.6rem;
|
||||
margin: 2rem 0 1.2rem;
|
||||
}
|
||||
.markdown-body h1:first-child { margin-top: 0; }
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
padding-bottom: 0.4rem;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 1.5rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
margin: 1.2rem 0 0.5rem;
|
||||
}
|
||||
|
||||
/* 단락 */
|
||||
.markdown-body p {
|
||||
margin: 0.6rem 0;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* 강조 */
|
||||
.markdown-body strong { color: #111827; }
|
||||
|
||||
/* 링크 */
|
||||
.markdown-body a {
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover { text-decoration: underline; }
|
||||
|
||||
/* 인라인 코드 */
|
||||
.markdown-body code {
|
||||
background: #f3f4f6;
|
||||
color: #7c3aed;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||
}
|
||||
|
||||
/* 코드 블록 */
|
||||
.markdown-body pre {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.2rem;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* 테이블 */
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.markdown-body thead th {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 0.55rem 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.markdown-body tbody td {
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #475569;
|
||||
}
|
||||
.markdown-body tbody tr:hover { background: #f8fafc; }
|
||||
|
||||
/* 인용 */
|
||||
.markdown-body blockquote {
|
||||
border-left: 4px solid #818cf8;
|
||||
background: #eef2ff;
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0 6px 6px 0;
|
||||
color: #3730a3;
|
||||
}
|
||||
.markdown-body blockquote p {
|
||||
color: #3730a3;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
.markdown-body blockquote strong { color: #312e81; }
|
||||
|
||||
/* 리스트 */
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.markdown-body li {
|
||||
margin: 0.25rem 0;
|
||||
color: #374151;
|
||||
}
|
||||
.markdown-body ul li { list-style-type: disc; }
|
||||
.markdown-body ol li { list-style-type: decimal; }
|
||||
.markdown-body li > ul, .markdown-body li > ol { margin: 0.15rem 0; }
|
||||
|
||||
/* 구분선 */
|
||||
.markdown-body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* 이미지 */
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user