Post styling

axum_server/Cargo.toml

@@ -1,3 +1,6 @@
+[build]
+rustflags = ["-Z", "threads=8"]
+
 [package]
 name = "axum_server"
 version = "0.1.0"

axum_server/src/post_parser.rs

@@ -91,6 +91,7 @@ fn parse_html(markdown: &str) -> String {
                               alt="{alt}"
                               src="{src}"
                             />
+                            <figcaption>
                         "#,
                         alt = title,
                         src = dest_url,
@@ -100,7 +101,7 @@ fn parse_html(markdown: &str) -> String {
             }
             _ => event,
         },
-        Event::End(TagEnd::Image) => Event::Html("</figure>".into()),
+        Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
         _ => event,
     });
 

axum_server/styles/input.css

@@ -2,19 +2,34 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
+.article-body {
-  .article-body {
+  h1 {
-    h1 {
+    @apply px-4 text-2xl text-blue-900 my-2;
-      @apply px-4 text-2xl text-blue-900 my-2;
+  }
-    }
+  h2 {
-    h2 {
+    @apply px-4 text-xl text-blue-900 my-2;
-      @apply px-4 text-xl text-blue-900 my-2;
+  }
-    }
+  p {
-    p {
+    @apply px-4 my-2;
-      @apply px-4 my-2;
+  }
-    }
+  pre {
-    pre {
+    @apply p-4 my-1 overflow-auto text-sm;
-      @apply p-4 my-1 overflow-auto text-sm;
+  }
+  figure {
+    @apply m-4;
+
+    img {
+      @apply rounded shadow-md;
     }
   }
+  figcaption {
+    @apply mt-2 text-center text-sm italic text-blue-800;
+  }
+  table {
+    @apply m-2 overflow-auto text-sm;
+  }
+}
+
+.video-embed {
+  @apply m-4;
 }

axum_server/styles/output.css

@@ -444,63 +444,6 @@ video {
   display: none;
 }
 
-.article-body {
-  h1 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  h1 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  h1 {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-  h1 {
-    --tw-text-opacity: 1;
-    color: rgb(30 58 138 / var(--tw-text-opacity));
-  }
-  h2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  h2 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-  h2 {
-    --tw-text-opacity: 1;
-    color: rgb(30 58 138 / var(--tw-text-opacity));
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  p {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  pre {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-  pre {
-    overflow: auto;
-  }
-  pre {
-    padding: 1rem;
-  }
-  pre {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -773,6 +716,107 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.article-body {
+  h1 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  h1 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  h1 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  h1 {
+    --tw-text-opacity: 1;
+    color: rgb(30 58 138 / var(--tw-text-opacity));
+  }
+  h2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  h2 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  h2 {
+    --tw-text-opacity: 1;
+    color: rgb(30 58 138 / var(--tw-text-opacity));
+  }
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  p {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  pre {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  pre {
+    overflow: auto;
+  }
+  pre {
+    padding: 1rem;
+  }
+  pre {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  figure {
+    margin: 1rem;
+  }
+  figure {
+    img {
+      border-radius: 0.25rem;
+    }
+    img {
+      --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+      --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);
+    }
+  }
+  figcaption {
+    margin-top: 0.5rem;
+  }
+  figcaption {
+    text-align: center;
+  }
+  figcaption {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  figcaption {
+    font-style: italic;
+  }
+  figcaption {
+    --tw-text-opacity: 1;
+    color: rgb(30 64 175 / var(--tw-text-opacity));
+  }
+  table {
+    margin: 0.5rem;
+  }
+  table {
+    overflow: auto;
+  }
+  table {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.video-embed {
+  margin: 1rem;
+}
+
 .after\:content-\[\'\2c \'\]::after {
   --tw-content: ',';
   content: var(--tw-content);