blogpage responsive styles

_posts/blog/2023-08-29-i-built-my-3rd-custom-keyboard.md

@@ -60,7 +60,7 @@ Another customization is that while the shield is designed for a wired connectio
 > Tip: If you plan on using your keyboard with a desktop computer, you might want to consider a wired connection. BIOS boot up check will not pass without a physical connection to a keyboard. I have to have 2 keyboards on my desk now :( 
 
 | Item                                                  | Quantity    | Price   | Link                                                                                                               |
-| ----------------------------------------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| :---------------------------------------------------- | :---------- | ------: | ------------------------------------------------------------------------------------------------------------------ |
 | DSA Blank Keycaps                                     | 4           | 14 EUR  | [🛒](https://www.aliexpress.com/item/1005002587285218.html?spm=a2g0o.order_list.0.0.3e541802H3XiA6)                |
 | Brass Hot Melt Inset Nuts M4 X D6.0 X L5.0            | 6 of 50pcs  | 3 EUR   | [🛒](https://www.aliexpress.com/item/4000232925592.html?spm=a2g0o.order_list.order_list_main.43.6e0d1802Xk8ijl)    |
 | M4 * 8 Screws                                         | 6 of 100pcs | 3 ELR   | [🛒](https://www.aliexpress.com/item/32896139810.html?spm=a2g0o.order_list.order_list_main.38.6e0d1802Xk8ijl)      |

axum_server/src/main.rs

@@ -49,5 +49,8 @@ async fn main() {
 }
 
 // TODO Display blog posts
+// TODO Markdown notes
+// TODO code snippets highlighting
 // TODO responsive design
+// TODO Colors
 // TODO go live pipeline

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -234,8 +234,11 @@ fn get_export_formats(orig_img_path: &str) -> Vec<ExportFormat> {
         .and_then(|ext| ext.to_str());
 
     match path {
-        Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
+        // THINK: Do we want to enable avif? It's very expensive to encode
-        Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
+        // Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
+        // Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
+        Some("jpg" | "jpeg") => vec![ExportFormat::Jpeg],
+        Some("png") => vec![ExportFormat::Png],
         Some(_) | None => vec![],
     }
 }

axum_server/src/post_utils/post_parser.rs

@@ -13,7 +13,7 @@ use crate::picture_generator::{
     picture_markup_generator::generate_picture_markup, resolutions::get_max_resolution,
 };
 
-pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1000, 800);
+pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1280, 860);
 
 pub fn deserialize_date<'de, D>(deserializer: D) -> Result<DateTime<Utc>, D::Error>
 where

axum_server/styles/input.css

@@ -12,32 +12,58 @@ a {
 
 .article-body {
   h1 {
-    @apply px-4 text-2xl text-blue-900 my-2;
+    @apply px-4 text-2xl 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 my-2;
+    @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;
   }
   p {
-    @apply px-4 my-2;
+    @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-2xl;
   }
   pre {
-    @apply p-4 my-1 overflow-auto text-sm;
+    @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
   }
   figure {
-    @apply m-4;
+    @apply p-4;
 
     img {
-      @apply rounded shadow-md;
+      @apply rounded shadow-md mx-auto max-w-image;
     }
   }
   figcaption {
-    @apply mt-2 text-center text-sm italic text-blue-800;
+    @apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
   }
+
   table {
-    @apply m-2 overflow-auto text-sm;
+    @apply text-sm mx-auto max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base md:my-4 lg:text-xl lg:my-8;
+  }
+
+  thead {
+    @apply bg-blue-100;
+  }
+
+  tbody {
+    @apply bg-slate-50;
+  }
+
+  td,
+  th {
+    @apply py-0.5 px-2 border-b md:py-2 md:px-5;
+  }
+
+  tr {
+    @apply even:bg-slate-100;
+  }
+
+  blockquote {
+    @apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-500;
+
+    p {
+      @apply my-2 md:my-4 text-slate-600 max-w-note;
+    }
   }
 }
 
 .video-embed {
-  @apply m-4;
+  @apply m-4 mx-auto max-w-image aspect-video;
 }

axum_server/styles/output.css

@@ -599,6 +599,11 @@ video {
   margin-right: 1.5rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-12 {
   margin-top: 3rem;
   margin-bottom: 3rem;
@@ -624,11 +629,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -645,6 +645,10 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -697,14 +701,6 @@ video {
   height: 1.75rem;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
 .min-h-full {
   min-height: 100%;
 }
@@ -725,6 +721,10 @@ video {
   width: 100%;
 }
 
+.max-w-read {
+  max-width: 64rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -733,14 +733,6 @@ video {
   grid-auto-flow: column;
 }
 
-.grid-cols-\[1fr_2fr\] {
-  grid-template-columns: 1fr 2fr;
-}
-
-.grid-cols-\[min-content_1fr\] {
-  grid-template-columns: min-content 1fr;
-}
-
 .grid-cols-\[max-content_1fr\] {
   grid-template-columns: max-content 1fr;
 }
@@ -1029,8 +1021,17 @@ a {
 
 .article-body {
   h1 {
-    margin-top: 0.5rem;
+    margin-left: auto;
-    margin-bottom: 0.5rem;
+    margin-right: auto;
+  }
+  h1 {
+    margin-bottom: 0.75rem;
+  }
+  h1 {
+    margin-top: 1rem;
+  }
+  h1 {
+    max-width: 64rem;
   }
   h1 {
     padding-left: 1rem;
@@ -1044,9 +1045,30 @@ a {
     --tw-text-opacity: 1;
     color: rgb(30 58 138 / var(--tw-text-opacity));
   }
+  @media (min-width: 768px) {
+    h1 {
+      font-size: 2.25rem;
+      line-height: 2.5rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h1 {
+      font-size: 3rem;
+      line-height: 1;
+    }
+  }
   h2 {
-    margin-top: 0.5rem;
+    margin-left: auto;
-    margin-bottom: 0.5rem;
+    margin-right: auto;
+  }
+  h2 {
+    margin-bottom: 0.75rem;
+  }
+  h2 {
+    margin-top: 1rem;
+  }
+  h2 {
+    max-width: 64rem;
   }
   h2 {
     padding-left: 1rem;
@@ -1060,18 +1082,89 @@ a {
     --tw-text-opacity: 1;
     color: rgb(30 58 138 / var(--tw-text-opacity));
   }
+  @media (min-width: 768px) {
+    h2 {
+      margin-bottom: 1.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h2 {
+      margin-top: 2rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h2 {
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h2 {
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h2 {
+      margin-top: 3rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h2 {
+      font-size: 2.25rem;
+      line-height: 2.5rem;
+    }
+  }
   p {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
+  p {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  p {
+    max-width: 64rem;
+  }
   p {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+  p {
+    text-align: justify;
+  }
+  p {
+    --tw-text-opacity: 1;
+    color: rgb(2 6 23 / var(--tw-text-opacity));
+  }
+  @media (min-width: 768px) {
+    p {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 768px) {
+    p {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    p {
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
+  }
   pre {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
   }
+  pre {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  pre {
+    max-width: 64rem;
+  }
   pre {
     overflow: auto;
   }
@@ -1083,9 +1176,16 @@ a {
     line-height: 1.25rem;
   }
   figure {
-    margin: 1rem;
+    padding: 1rem;
   }
   figure {
+    img {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    img {
+      max-width: 70rem;
+    }
     img {
       border-radius: 0.25rem;
     }
@@ -1112,23 +1212,199 @@ a {
     --tw-text-opacity: 1;
     color: rgb(30 64 175 / var(--tw-text-opacity));
   }
-  table {
+  @media (min-width: 768px) {
-    margin: 0.5rem;
+    figcaption {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    figcaption {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
   table {
-    overflow: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  table {
+    max-width: 70rem;
+  }
+  table {
+    table-layout: auto;
+  }
+  table {
+    border-collapse: collapse;
+  }
+  table {
+    --tw-border-spacing-x: 3rem;
+    --tw-border-spacing-y: 3rem;
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+  table {
+    border-radius: 0.25rem;
+  }
+  table {
+    border-width: 1px;
+  }
+  table {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
   table {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
+  @media (min-width: 768px) {
+    table {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+  }
+  @media (min-width: 768px) {
+    table {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    table {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    table {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  }
+  thead {
+    --tw-bg-opacity: 1;
+    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  }
+  tbody {
+    --tw-bg-opacity: 1;
+    background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  }
+  td,
+  th {
+    border-bottom-width: 1px;
+  }
+  td,
+  th {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  td,
+  th {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  @media (min-width: 768px) {
+    td,
+  th {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    td,
+  th {
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+    }
+  }
+  tr:nth-child(even) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+  }
+  blockquote {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  blockquote {
+    max-width: 60rem;
+  }
+  blockquote {
+    border-left-width: 4px;
+  }
+  blockquote {
+    --tw-border-opacity: 1;
+    border-color: rgb(236 72 153 / var(--tw-border-opacity));
+  }
+  blockquote {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 242 248 / var(--tw-bg-opacity));
+  }
+  blockquote {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+  blockquote {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  @media (min-width: 1024px) {
+    blockquote {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  blockquote {
+    p {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+    p {
+      max-width: 60rem;
+    }
+    p {
+      --tw-text-opacity: 1;
+      color: rgb(71 85 105 / var(--tw-text-opacity));
+    }
+    @media (min-width: 768px) {
+      p {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+      }
+    }
+  }
 }
 
 .video-embed {
   margin: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  aspect-ratio: 16 / 9;
+  max-width: 70rem;
 }
 
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(251 207 232 / var(--tw-bg-opacity));
 }
+
+@media (min-width: 768px) {
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+}

axum_server/tailwind.config.js

@@ -2,7 +2,18 @@
 module.exports = {
 	content: ["./templates/**/*.html"],
 	theme: {
-		extend: {},
+		extend: {
+			spacing: {
+				note: "60rem",
+				read: "64rem",
+				image: "70rem",
+			},
+			width: {
+				note: "60rem",
+				read: "64rem",
+				image: "70rem",
+			},
+		},
 	},
 	plugins: [],
 };

axum_server/templates/blog_post.html

@@ -3,22 +3,24 @@
 {% block title %}{{title}}{% endblock %}
 
 {% block content %}
-<article>
+<article class="mb-6">
-  <header class="px-4">
+  <header class="px-4 max-w-read mx-auto">
-  <h1 class="text-3xl text-blue-900 mb-3 font-semibold">{{title}}</h1>
+  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-semibold">{{title}}</h1>
   <aside class="flex justify-between flex-row">
     {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600">
+    <section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
       <span>Published on</span>
       <time datetime="{date}"> {{date|pretty_date}} </time>
     </section>
   </aside>
 </header>
 
-<section class="article-body">
+  <section class="article-body">
     {{body|escape("none")}}
-</section>
+  </section>
 </article>
 
+<!-- TODO: Next recommendations for reading -->
+
 {# footer #}
 {% endblock %}

axum_server/templates/post_tag_list.html

@@ -2,7 +2,7 @@
   {% if tags.len() > 0 %}
   <ul class="inline">
     {% for tag in tags %}
-    <li class="inline italic text-blue-700">
+    <li class="inline italic text-blue-700 md:text-lg">
       <a href="/blog/tags/{{tag}}">#{{tag}}</a>
     </li>
     {% endfor %}