細かいデザインの修正

src/lib/components/Markdown.css

@@ -1,5 +1,4 @@
 .markdown {
-    width: 100%;
     overflow-wrap: anywhere;
 
     @media (width>480px) {
@@ -9,7 +8,10 @@
     & h1, h2 {
         font-weight: 600;
         padding-top: 25px;
-        @media(width>999px){padding-top:50px; margin-top:0;}
+        @media(width>999px){
+            padding-top: 50px;
+            margin-top: 0;
+        }
 
         &::before {
             display: inline-block;
@@ -20,9 +22,17 @@
             background-color: var(--theme-color);
         }
     }
+    & h3 {
+        font-weight: 600;
+        padding-top: 25px;
+        @media(width>999px){
+            padding-top: 50px;
+            margin-top: -25px;
+        }
+    }
 
     & p {
-        margin: 0 0.5em;
+        margin: 1em 0.5em;
         line-height: 2em;
         @media (width>480px) {
             margin: 1em 2em;
@@ -67,18 +77,18 @@
         background-color: var(--code-color);
     }
     & details {
-        margin: 0 0.5em;
+        margin: 1em 2em;
         padding: 0 .5em;
         border: dashed #8888 2px;
         border-radius: 6px;
         line-height: 2em;
-        @media (width>480px) {
+        @media (width<480px) {
-            margin: 1em 2em;
+            margin: 1em 0;
         }
     }
     & pre {
         position: relative;
-        margin: 1em;
+        margin: 1em 2em;
         padding: 1em;
         box-sizing: border-box;
         border-radius: 8px;
@@ -111,7 +121,6 @@
     }
     & table {
         margin: 1em auto;
-        font-size: 1.125em;
         border-collapse: collapse;
 
         & thead tr {
@@ -123,22 +132,21 @@
         }
         & td,th {
             border-width: 0px;
-            padding: .5em 1em;
+            padding: .5em;
         }
-        & th:first-child, td:first-child {
+        @media(width>640px) {
-            padding-left: 2em;
+            font-size: 1.125em;
+            & td,th {
+                border-width: 0px;
+                padding: .5em 1em;
+            }
+            & th:first-child, td:first-child {
+                padding-left: 2em;
+            }
+            & th:last-child, td:last-child {
+                padding-right: 2em;
+            }
         }
-        & th:last-child, td:last-child {
-            padding-right: 2em;
-        }
-
-    }
-    & blockquote {
-        padding: 8px 16px;
-        border-left: solid #d1d9e0 4px;
-        margin: 1em 0;
-        color: var(--font-gray);
-        & p {margin: 0;}
     }
     & iframe {
         display: block;
@@ -179,12 +187,27 @@
         }
     }
     & math[display="block"] {
-        margin: 1rem;
+        margin: 1rem auto;
         font-size: 1.5rem;
     }
+
+    & blockquote {
+        padding: 8px 16px;
+        border-left: solid #d1d9e0 4px;
+        margin: 1em 0.5em;
+        @media (width>480px) {
+            margin: 1em 2em;
+        }
+        color: var(--font-gray);
+        & p {margin: 0;}
+    }
     & .markdown-alert {
         padding: 8px 16px;
-        margin: 1em 0;
+        margin: 1em 0.5em;
+        @media (width>480px) {
+            margin: 1em 2em;
+        }
+        & p {margin: 0;}
 
         & .markdown-alert-title {
             display: flex;
@@ -194,39 +217,26 @@
                 margin-right: 8px;
             }
         }
-        & p {
-            margin: 0;
-        }
 
         &.markdown-alert-note {
             border-left: solid #0969da 4px;
-            & .markdown-alert-title {
+            & .markdown-alert-title {color: #0969da;}
-                color: #0969da;
-            }
         }
         &.markdown-alert-tip {
             border-left: solid #1a7f37 4px;
-            & .markdown-alert-title {
+            & .markdown-alert-title {color: #1a7f37;}
-                color: #1a7f37;
-            }
         }
         &.markdown-alert-important {
             border-left: solid #8250df 4px;
-            & .markdown-alert-title {
+            & .markdown-alert-title {color: #8250df;}
-                color: #8250df;
-            }
         }
         &.markdown-alert-warning {
             border-left: solid #9a6700 4px;
-            & .markdown-alert-title {
+            & .markdown-alert-title {color: #9a6700;}
-                color: #9a6700;
-            }
         }
         &.markdown-alert-caution {
             border-left: solid #cf222e 4px;
-            & .markdown-alert-title {
+            & .markdown-alert-title {color: #cf222e;}
-                color: #cf222e;
-            }
         }
     }
 

src/routes/(DefaultStyle)/post/[slug]/+page.server.ts

@@ -10,7 +10,7 @@ export async function load({params}) {
     let persed = Perser(md.post)
 
     let mdast = remark().parse(md.post)
-    let headers = mdast.children.filter((i) => i.type=='heading').map((i)=>{
+    let headers = mdast.children.filter((i) => i.type=='heading' && i.depth<4).map((i)=>{
         let title = i.children[0].value
         return {"depth": i.depth, "title": title}
     })

src/routes/(DefaultStyle)/post/[slug]/+page.svelte

@@ -160,8 +160,10 @@
 <style>
 	#blog {
 		display: flex;
-        margin: 25px 2.5%;
 		gap: 20px;
+		@media(width>999px) {
+			margin: 25px 2.5%;
+		}
 	}
 	aside {
 		min-width: 280px;
@@ -203,14 +205,14 @@
 		flex-grow: 1;
 		padding: 0 20px;
 		border-radius: 8px;
-		@media(width<480px){
+		@media(width<640px){
 			padding: 0;
 		}
 
 		& .title {
 			font-size: 2em;
 			font-weight: 600;
-			margin: 0;
+			margin: 12px;
 			padding: 5px;
 			border-bottom: 1px solid;
 			@media(width<480px) {
@@ -223,7 +225,6 @@
 			max-height: 50vh;
 		}
 		& img.thumbnail {
-			height: 50vh;
 			max-width: 100%;
 			object-fit: contain;
 		}
@@ -239,14 +240,12 @@
 			}
 		}
 		& .markdown {
-			margin: 25px 0;
+			margin: 1em;
-			@media (width<480px) {
-				margin: 8px;
-			}
 		}
 		& .data {
 			display: flex;
 			padding: 8px;
+			margin: 12px;
 			border-top: solid 1px;
 			font-weight: 200;
 			font-size: 1.2em;
@@ -270,7 +269,7 @@
 		grid-template-columns: auto auto 1fr auto;
 		gap: 8px;
 		font-size: 0.95em;
-		margin: 8px;
+		margin: 12px;
 		white-space: nowrap;
 
 		@media(width<1000px) {