fix images and font bold styles

axum_server/styles/input.css

@@ -78,13 +78,16 @@ a {
 
 .article-body {
   h1 {
-    @apply px-4 text-2xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
+    @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
   }
   h2 {
-    @apply px-4 text-xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
+    @apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
   }
   p {
-    @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-2xl;
+    @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
+  }
+  strong {
+    @apply font-medium;
   }
   pre {
     @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
@@ -93,7 +96,7 @@ a {
     @apply p-4;
 
     img {
-      @apply rounded shadow-md mx-auto max-w-image;
+      @apply rounded shadow-md mx-auto lg:max-w-image;
     }
   }
   figcaption {

axum_server/styles/output.css

@@ -1156,6 +1156,9 @@ a {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+  h1 {
+    font-weight: 600;
+  }
   h1 {
     --tw-text-opacity: 1;
     color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1193,6 +1196,9 @@ a {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+  h2 {
+    font-weight: 600;
+  }
   h2 {
     --tw-text-opacity: 1;
     color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1265,10 +1271,15 @@ a {
   }
   @media (min-width: 1024px) {
     p {
-      font-size: 1.5rem;
+      font-size: 1.75rem;
-      line-height: 2rem;
+      line-height: 2.25rem;
+      letter-spacing: -0.015em;
+      font-weight: 400;
     }
   }
+  strong {
+    font-weight: 500;
+  }
   pre {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
@@ -1298,9 +1309,6 @@ a {
       margin-left: auto;
       margin-right: auto;
     }
-    img {
-      max-width: 70rem;
-    }
     img {
       border-radius: 0.25rem;
     }
@@ -1309,6 +1317,11 @@ a {
       --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     }
+    @media (min-width: 1024px) {
+      img {
+        max-width: min(70rem, 95vw);
+      }
+    }
   }
   figcaption {
     margin-top: 0.5rem;
@@ -1348,7 +1361,7 @@ a {
     margin-bottom: 1rem;
   }
   table {
-    max-width: 70rem;
+    max-width: min(70rem, 95vw);
   }
   table {
     table-layout: auto;
@@ -1562,7 +1575,7 @@ a {
   margin-left: auto;
   margin-right: auto;
   aspect-ratio: 16 / 9;
-  max-width: 70rem;
+  max-width: min(70rem, 95vw);
 }
 
 .hover\:bg-pink-200:hover {

axum_server/tailwind.config.js

@@ -19,15 +19,25 @@ module.exports = {
 			spacing: {
 				note: "60rem",
 				read: "64rem",
-				image: "70rem",
+				image: "min(70rem, 95vw)",
 				maxindex: "100rem",
 			},
 			width: {
 				note: "60rem",
 				read: "64rem",
-				image: "70rem",
+				image: "min(70rem, 95vw)",
 				maxindex: "100rem",
 			},
+			fontSize: {
+				readxl: [
+					"1.75rem",
+					{
+						lineHeight: "2.25rem",
+						letterSpacing: "-0.015em",
+						fontWeight: "400",
+					},
+				],
+			},
 		},
 	},
 	plugins: [],