moris/moris-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: markdownのデザイン修正

Browse Source
This commit is contained in:
moris 2024-12-22 11:56:02 +09:00
parent 4e3b33d7fd
commit 50abc892c7
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/Markdown.css
View File

@ -1,13 +1,11 @@
.markdown { .markdown {
width: 100%; width: 100%;
&>* { @media (width>480px) {
max-width: 100%; font-size: 1.125em;
overflow: scroll;
} }
& h1 { & h1 {
font-size: 2em;
@media(width>999px){padding-top:50px;margin-top:0;} @media(width>999px){padding-top:50px;margin-top:0;}
} }
& h1::before { & h1::before {
@ -45,7 +43,6 @@
line-height: 2em; line-height: 2em;
@media (width>480px) { @media (width>480px) {
margin: 1em 2em; margin: 1em 2em;
font-size: 1.125em;
} }
} }
@ -66,6 +63,7 @@
& img { & img {
display: block; display: block;
margin: 1em auto; margin: 1em auto;
max-width: 100%;
max-height: 60vh; max-height: 60vh;
} }
@ -77,15 +75,15 @@
background-color: var(--code-color); background-color: var(--code-color);
} }
& pre { & pre {
margin: 16px; margin: 1em;
padding: 16px; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
background-color: var(--code-block); background-color: var(--code-block);
color: #d1d9e1; color: #d1d9e1;
overflow-x: scroll; overflow-x: scroll;
@media (width<480px) { @media (width<480px) {
margin: 0; margin: 1em 0;
} }
& code { & code {
margin: 0; margin: 0;
@ -96,7 +94,7 @@
} }
& table { & table {
margin: 1rem auto; margin: 1rem auto;
font-size: 1.2em; font-size: 1.2rem;
border-collapse: collapse; border-collapse: collapse;
& thead tr { & thead tr {
@ -115,7 +113,8 @@
position: relative; position: relative;
font-style: italic; font-style: italic;
width: fit-content; width: fit-content;
padding: 1em; max-width: 100%;
margin: 1em auto;
border-top: 1px solid var(--font-color); border-top: 1px solid var(--font-color);
border-bottom: 1px solid var(--font-color); border-bottom: 1px solid var(--font-color);