diff --git a/_posts/blog/2023-08-29-i-built-my-3rd-custom-keyboard.md b/_posts/blog/2023-08-29-i-built-my-3rd-custom-keyboard.md index d7feb1d..219c1be 100644 --- a/_posts/blog/2023-08-29-i-built-my-3rd-custom-keyboard.md +++ b/_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) | diff --git a/axum_server/src/main.rs b/axum_server/src/main.rs index 7ea01f8..cd61a27 100644 --- a/axum_server/src/main.rs +++ b/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 diff --git a/axum_server/src/picture_generator/picture_markup_generator.rs b/axum_server/src/picture_generator/picture_markup_generator.rs index 6137c8f..783c214 100644 --- a/axum_server/src/picture_generator/picture_markup_generator.rs +++ b/axum_server/src/picture_generator/picture_markup_generator.rs @@ -234,8 +234,11 @@ fn get_export_formats(orig_img_path: &str) -> Vec { .and_then(|ext| ext.to_str()); match path { - Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg], - Some("png") => vec![ExportFormat::Avif, ExportFormat::Png], + // THINK: Do we want to enable avif? It's very expensive to encode + // 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![], } } diff --git a/axum_server/src/post_utils/post_parser.rs b/axum_server/src/post_utils/post_parser.rs index 434d465..71f0a45 100644 --- a/axum_server/src/post_utils/post_parser.rs +++ b/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, D::Error> where diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css index db3f070..3b053dd 100644 --- a/axum_server/styles/input.css +++ b/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; } diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index 94734fe..ed217f1 100644 --- a/axum_server/styles/output.css +++ b/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-bottom: 0.5rem; + margin-left: auto; + 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-bottom: 0.5rem; + margin-left: auto; + 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 { - margin: 0.5rem; + @media (min-width: 768px) { + 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; + } +} diff --git a/axum_server/tailwind.config.js b/axum_server/tailwind.config.js index e67c242..7c0c74b 100644 --- a/axum_server/tailwind.config.js +++ b/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: [], }; diff --git a/axum_server/templates/blog_post.html b/axum_server/templates/blog_post.html index 637e8ef..e3b76de 100644 --- a/axum_server/templates/blog_post.html +++ b/axum_server/templates/blog_post.html @@ -3,22 +3,24 @@ {% block title %}{{title}}{% endblock %} {% block content %} -
-
-

{{title}}

+
+
+

{{title}}

-
- {{body|escape("none")}} -
+
+ {{body|escape("none")}} +
+ + {# footer #} {% endblock %} diff --git a/axum_server/templates/post_tag_list.html b/axum_server/templates/post_tag_list.html index d1cf9be..ba5dac0 100644 --- a/axum_server/templates/post_tag_list.html +++ b/axum_server/templates/post_tag_list.html @@ -2,7 +2,7 @@ {% if tags.len() > 0 %}
    {% for tag in tags %} -
  • +
  • #{{tag}}
    • {% endfor %}