fix: table images sizes and markdown style

src/app/pages/blog/[slug].page.ts

@@ -116,7 +116,10 @@ import { SeriesListComponent } from '../../components/series-list/series-list.co
           }
 
           <section class="blog-content">
-            <analog-markdown [content]="post.content"></analog-markdown>
+            <analog-markdown
+              [content]="post.content"
+              classes="markdown-content"
+            ></analog-markdown>
             @if (
               !post.content &&
               post.attributes.publishedAt &&

src/app/pages/blog/slug.page.style.scss

@@ -8,10 +8,6 @@ h1 {
   font-size: 1.4em;
 }
 
-h2.sub-heading {
-  font-size: 0.9em;
-}
-
 .extra-info {
   display: flex;
   flex-direction: row-reverse;
@@ -35,28 +31,6 @@ h2.sub-heading {
   height: 50px;
 }
 
-table > tbody td {
-  vertical-align: top;
-  min-width: 120px;
-
-  > img {
-    max-width: 100px;
-  }
-
-  > pre {
-    margin: 1em 0;
-    border-radius: 5px;
-    padding: 5px;
-    background: #2d2d2d;
-  }
-
-  code {
-    background: none;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-}
-
 .published-at {
   display: flex;
   align-items: center;
@@ -113,10 +87,6 @@ span.image > img.thumbnail {
       }
     }
   }
-
-  table > tbody td > img {
-    max-width: 70px;
-  }
 }
 
 @media screen and (max-width: 460px) {
@@ -129,19 +99,6 @@ span.image > img.thumbnail {
   .blog-footer {
     padding: 0 24px;
   }
-
-  table > tbody td > img {
-    max-width: 40px;
-  }
-}
-
-::slotted(h1) {
-  color: rgb(51, 6, 37);
-  background-color: rgb(248, 211, 236);
-  padding: 5px;
-  border-radius: 5px;
-  font-size: 1.4em;
-  width: fit-content;
 }
 
 .blog-header img {

src/app/pages/projects/[slug].page.ts

@@ -28,7 +28,10 @@ import { PostAttributes } from '../../types';
           </section>
 
           <section class="project-content">
-            <analog-markdown [content]="post.content"></analog-markdown>
+            <analog-markdown
+              [content]="post.content"
+              classes="markdown-content"
+            ></analog-markdown>
             <div class="edit-on-github">
               <a
                 [href]="editOnGithubLink(post.filename)"

src/markdown-content.scss

@@ -0,0 +1,35 @@
+.markdown-content {
+  table > tbody td {
+    vertical-align: top;
+    min-width: 120px;
+
+    img {
+      max-width: 100px;
+    }
+
+    > pre {
+      margin: 1em 0;
+      border-radius: 5px;
+      padding: 5px;
+      background: #2d2d2d;
+    }
+
+    code {
+      background: none;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  @media screen and (max-width: 560px) {
+    table > tbody td > img {
+      max-width: 70px;
+    }
+  }
+
+  @media screen and (max-width: 360px) {
+    table > tbody td > img {
+      max-width: 40px;
+    }
+  }
+}

src/styles.scss

@@ -148,3 +148,5 @@ img {
 html {
   scroll-behavior: smooth;
 }
+
+@import 'markdown-content';