diff --git a/src/App.css b/src/App.css index 0303ce3..02f3f36 100644 --- a/src/App.css +++ b/src/App.css @@ -55,4 +55,174 @@ input::-webkit-inner-spin-button { /* Remove input number arrows Firefox */ input[type=number] { --moz-appearance: textfield; +} + +/* Markdown Content Styles */ +.markdown-content { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; + background: #ffffff; + border-radius: 12px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + border: 1px solid #e5e7eb; + text-align: left; +} + +.markdown-content h1 { + font-size: 2.5rem; + font-weight: 700; + color: #1f2937; + margin-bottom: 1.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-bottom: 3px solid #3b82f6; + text-align: left; +} + +.markdown-content h2 { + font-size: 2rem; + font-weight: 600; + color: #374151; + margin-top: 2rem; + margin-bottom: 1rem; + padding-bottom: 0.25rem; + border-bottom: 2px solid #e5e7eb; +} + +.markdown-content h3 { + font-size: 1.5rem; + font-weight: 600; + color: #4b5563; + margin-top: 1.5rem; + margin-bottom: 0.75rem; +} + +.markdown-content h4, .markdown-content h5, .markdown-content h6 { + font-size: 1.25rem; + font-weight: 600; + color: #6b7280; + margin-top: 1.25rem; + margin-bottom: 0.5rem; +} + +.markdown-content p { + font-size: 1.1rem; + line-height: 1.7; + color: #374151; + margin-bottom: 1.25rem; + text-align: left; +} + +.markdown-content ul, .markdown-content ol { + margin-bottom: 1.25rem; + padding-left: 1.5rem; +} + +.markdown-content li { + font-size: 1.1rem; + line-height: 1.6; + color: #374151; + margin-bottom: 0.5rem; +} + +.markdown-content blockquote { + border-left: 4px solid #3b82f6; + background: #f8fafc; + padding: 1rem 1.5rem; + margin: 1.5rem 0; + border-radius: 0 8px 8px 0; + font-style: italic; + color: #4b5563; +} + +.markdown-content code { + background: #f1f5f9; + color: #e11d48; + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.9rem; +} + +.markdown-content pre { + background: #1e293b; + color: #e2e8f0; + padding: 1.5rem; + border-radius: 8px; + overflow-x: auto; + margin: 1.5rem 0; + border: 1px solid #334155; +} + +.markdown-content pre code { + background: transparent; + color: inherit; + padding: 0; + border-radius: 0; +} + +.markdown-content a { + color: #3b82f6; + text-decoration: none; + border-bottom: 1px solid transparent; + transition: all 0.2s ease; +} + +.markdown-content a:hover { + color: #1d4ed8; + border-bottom-color: #1d4ed8; +} + +.markdown-content table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.markdown-content th, .markdown-content td { + padding: 0.75rem 1rem; + text-align: left; + border-bottom: 1px solid #e5e7eb; +} + +.markdown-content th { + background: #f8fafc; + font-weight: 600; + color: #374151; +} + +.markdown-content hr { + border: none; + height: 2px; + background: linear-gradient(90deg, transparent, #e5e7eb, transparent); + margin: 2rem 0; +} + +.markdown-content img { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + margin: 1rem 0; +} + +@media (max-width: 768px) { + .markdown-content { + padding: 1.5rem; + margin: 1rem; + } + .markdown-content h1 { + font-size: 2rem; + } + .markdown-content h2 { + font-size: 1.75rem; + } + .markdown-content p, .markdown-content li { + font-size: 1rem; + } } \ No newline at end of file diff --git a/src/components/app-body/user-data-review.js b/src/components/app-body/user-data-review.js index cc03653..3bccb5d 100644 --- a/src/components/app-body/user-data-review.js +++ b/src/components/app-body/user-data-review.js @@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react' import { useParams } from 'react-router-dom' import { Container, Row, Col, Spinner, Carousel } from 'react-bootstrap' import ReactMarkdown from 'react-markdown' +import '../../App.css' function UserDataReview (props) { const appData = props.appData @@ -108,7 +109,7 @@ function UserDataReview (props) { {/** Markdown Content */} {markdown ? ( -