better theme colors

.gitea/workflows/release.yaml

@@ -1,8 +1,9 @@
 name: release
-on:
+# on:
-  push:
+#   push:
-    branches:
+#     branches:
-      main
+#       main
+on: workflow_dispatch
 
 env:
   PORT: 3081

_posts/blog/2022-02-13-ive-started-streaming-weekly-06-2022.md

@@ -38,7 +38,9 @@ I've set a new **sub goal** for buying a streaming PC. I'll buy it when the stre
 
 Last week I've been showing off new headphones that I've ordered and the *YouTube* algorithm has been suggesting great videos on the topic since. I will give another shoutout. This time it is to [Joshua's Valour *YouTube* channel](https://www.youtube.com/channel/UCx9bOYEjkevIDYONBAstK-A)
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="video-embed">
+<iframe class="embed" width="100%" height="100%" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
 
 My next pick will be a [podcast *Lifespan* hosted by Dr. David Sinclair](https://open.spotify.com/show/3PkkSdQE8DfeiKvSk1Mg1J) where he talks about what we can do and how should we treat our bodies to live a longer and healthier life.
 

axum_server/Cargo.toml

@@ -24,6 +24,7 @@ image = "0.25.2"
 anyhow = "1.0.86"
 rayon = "1.10.0"
 syntect = "5.2.0"
+indoc = "2.0.5"
 
 [build]
 rustflags = ["-Z", "threads=8"]

axum_server/src/main.rs

@@ -53,9 +53,9 @@ async fn main() {
 
 // TODO Socials
 // - fotos
-// TODO ul li article styles
-// TODO header height difference
 // TODO Colors
+// Text slate, and gray should be somehow customised
+// STRONG bold-medium
 // TODO print css and other 404 css linked in base.html
 // TODO go live pipeline
 // TODO after release

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -5,6 +5,7 @@ use std::{
 
 use anyhow::Context;
 use image::{image_dimensions, ImageReader};
+use indoc::formatdoc;
 
 use super::{
     export_format::ExportFormat, image_generator::generate_images,
@@ -66,7 +67,7 @@ pub fn generate_picture_markup(
         .map(|format| {
             let srcset = generate_srcset(&path_to_generated, format, &resolutions);
             let format_type = format.get_type();
-            format!(
+            formatdoc!(
                 r#"<source
                 srcset="{srcset}"
                 type="{format_type}"
@@ -81,7 +82,7 @@ pub fn generate_picture_markup(
         resolutions.first().expect("Should this error ever happen?"),
         exported_formats.last().expect("Can this one ever happen?"),
     );
-    let image_tag = format!(
+    let image_tag = formatdoc!(
         r#"<img
             src="{image_path}"
             width="{width}"
@@ -90,7 +91,7 @@ pub fn generate_picture_markup(
         >"#
     );
 
-    let result = format!(
+    let result = formatdoc!(
         r#"<picture>
             {source_tags}
             {image_tag}
@@ -272,10 +273,12 @@ fn test_generate_srcset() {
 
 #[test]
 fn test_generate_picture_markup() {
+    use indoc::indoc;
     let width = 300;
     let height = 200;
     let orig_img_path = "/images/uploads/2020-03-23_20-24-06_393.jpg";
-    let result = r#"<picture>
+    let result = indoc! {
+        r#"<picture>
             <source
                 srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.avif 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.avif 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.avif 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.avif 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.avif 4x"
                 type="image/avif"
@@ -290,7 +293,8 @@ fn test_generate_picture_markup() {
             height="200"
             alt="Testing image alt"
         >
-        </picture>"#;
+        </picture>"#,
+    };
     assert_eq!(
         generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
             .expect("picture markup has to be generated"),

axum_server/src/post_utils/post_parser.rs

@@ -4,6 +4,7 @@ use axum::http::StatusCode;
 use chrono::{DateTime, Utc};
 use gray_matter::{engine::YAML, Matter};
 use image::image_dimensions;
+use indoc::formatdoc;
 use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd};
 use serde::{de::DeserializeOwned, Deserialize, Deserializer};
 use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet};
@@ -71,6 +72,7 @@ pub async fn parse_post<'de, Metadata: DeserializeOwned>(
 
 enum TextKind {
     Text,
+    Heading(Option<String>),
     Code(String),
 }
 
@@ -102,7 +104,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
         }) => {
             if !dest_url.starts_with("/") {
                 return Event::Html(
-                    format!(
+                    formatdoc!(
                         r#"<img
                           alt="{title}"
                           src="{dest_url}"
@@ -125,7 +127,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             // Place image into the content with scaled reso to a boundary
             let picture_markup =
                 generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
-                    .unwrap_or(format!(
+                    .unwrap_or(formatdoc!(
                         r#"
                         <img
                           alt="{alt}"
@@ -139,7 +141,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                 link_type, dest_url, title, id
             );
             Event::Html(
-                format!(
+                formatdoc!(
                     r#"<figure>
                         {picture_markup}
                         <figcaption>
@@ -168,14 +170,45 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                         .unwrap();
                 Event::Html(highlighted.into())
             }
+            TextKind::Heading(provided_id) => {
+                let heading_id = provided_id.clone().unwrap_or({
+                    text.to_lowercase()
+                        .replace(|c: char| !c.is_alphanumeric(), "-")
+                });
+                Event::Html(
+                    formatdoc!(
+                        r##"
+                            <a name="{heading_id}" class="anchor" href="#{heading_id}">
+                              <span class="header-link"></span>
+                            </a>
+                            {text}
+                            "##
+                    )
+                    .into(),
+                )
+            }
             _ => Event::Text(text),
         },
+        Event::Start(Tag::Heading {
+            level,
+            id,
+            classes: _,
+            attrs: _,
+        }) => {
+            let id_str = id.map(|id| id.to_string());
+            text_kind = TextKind::Heading(id_str);
+            Event::Html(format!("<{level}>").into())
+        }
         Event::Start(_) => event,
         Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
         Event::End(TagEnd::CodeBlock) => {
             text_kind = TextKind::Text;
             Event::End(TagEnd::CodeBlock)
         }
+        Event::End(TagEnd::Heading(heading_level)) => {
+            text_kind = TextKind::Text;
+            Event::End(TagEnd::Heading(heading_level))
+        }
         _ => event,
     });
 

axum_server/styles/input.css

@@ -69,10 +69,10 @@
 }
 
 a {
-  @apply text-pink-600 underline underline-offset-2;
+  @apply text-pink-800 underline underline-offset-2;
 
   &:hover {
-    @apply transition text-blue-400;
+    @apply transition text-blue-500;
   }
 }
 
@@ -83,6 +83,15 @@ a {
   h2 {
     @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;
   }
+
+  h3 {
+    @apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
+  }
+
+  h4 {
+    @apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
+  }
+
   p {
     @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
@@ -125,7 +134,7 @@ a {
   }
 
   blockquote {
-    @apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-500;
+    @apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-600;
 
     p {
       @apply my-2 md:my-4 text-slate-600 max-w-note;
@@ -133,12 +142,21 @@ a {
   }
 
   :not(pre) code {
-    @apply text-pink-950 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
+    @apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
   }
 
   pre code pre {
     @apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
   }
+
+  ul,
+  ol {
+    @apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
+  }
+
+  iframe {
+    @apply rounded shadow-md mx-auto lg:max-w-image;
+  }
 }
 
 .video-embed {

axum_server/styles/output.css

@@ -1,5 +1,113 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(23 137 224 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(23 137 224 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
 /*
-! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -538,114 +646,6 @@ video {
       url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
 }
 
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -914,27 +914,27 @@ video {
 
 .border-blue-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  border-color: rgb(23 137 224 / var(--tw-border-opacity));
 }
 
 .border-blue-950 {
   --tw-border-opacity: 1;
-  border-color: rgb(23 37 84 / var(--tw-border-opacity));
+  border-color: rgb(11 39 70 / var(--tw-border-opacity));
 }
 
 .bg-blue-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(225 239 253 / var(--tw-bg-opacity));
 }
 
 .bg-blue-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+  background-color: rgb(241 247 254 / var(--tw-bg-opacity));
 }
 
 .bg-pink-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+  background-color: rgb(255 207 247 / var(--tw-bg-opacity));
 }
 
 .bg-white {
@@ -943,7 +943,7 @@ video {
 }
 
 .fill-blue-950 {
-  fill: #172554;
+  fill: #0b2746;
 }
 
 .object-contain {
@@ -967,11 +967,21 @@ video {
   padding: 1rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1063,22 +1073,22 @@ video {
 
 .text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(23 137 224 / var(--tw-text-opacity));
 }
 
 .text-blue-700 {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(10 86 154 / var(--tw-text-opacity));
 }
 
 .text-blue-900 {
   --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
+  color: rgb(16 62 106 / var(--tw-text-opacity));
 }
 
 .text-blue-950 {
   --tw-text-opacity: 1;
-  color: rgb(23 37 84 / var(--tw-text-opacity));
+  color: rgb(11 39 70 / var(--tw-text-opacity));
 }
 
 .text-gray-600 {
@@ -1093,7 +1103,7 @@ video {
 
 .text-pink-950 {
   --tw-text-opacity: 1;
-  color: rgb(80 7 36 / var(--tw-text-opacity));
+  color: rgb(80 2 56 / var(--tw-text-opacity));
 }
 
 .text-slate-800 {
@@ -1118,12 +1128,12 @@ video {
 
 a {
   --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
+  color: rgb(146 22 110 / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-underline-offset: 2px;
   &:hover {
     --tw-text-opacity: 1;
-    color: rgb(96 165 250 / var(--tw-text-opacity));
+    color: rgb(23 137 224 / var(--tw-text-opacity));
   }
   &:hover {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@@ -1161,7 +1171,7 @@ a {
   }
   h1 {
     --tw-text-opacity: 1;
-    color: rgb(30 58 138 / var(--tw-text-opacity));
+    color: rgb(16 62 106 / var(--tw-text-opacity));
   }
   @media (min-width: 768px) {
     h1 {
@@ -1201,7 +1211,7 @@ a {
   }
   h2 {
     --tw-text-opacity: 1;
-    color: rgb(30 58 138 / var(--tw-text-opacity));
+    color: rgb(16 62 106 / var(--tw-text-opacity));
   }
   @media (min-width: 768px) {
     h2 {
@@ -1235,6 +1245,126 @@ a {
       line-height: 2.5rem;
     }
   }
+  h3 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  h3 {
+    margin-bottom: 0.75rem;
+  }
+  h3 {
+    margin-top: 1rem;
+  }
+  h3 {
+    max-width: 64rem;
+  }
+  h3 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  h3 {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  h3 {
+    font-weight: 600;
+  }
+  h3 {
+    --tw-text-opacity: 1;
+    color: rgb(16 62 106 / var(--tw-text-opacity));
+  }
+  @media (min-width: 768px) {
+    h3 {
+      margin-bottom: 1.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h3 {
+      margin-top: 2rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h3 {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h3 {
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h3 {
+      margin-top: 3rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h3 {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+    }
+  }
+  h4 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  h4 {
+    margin-bottom: 0.5rem;
+  }
+  h4 {
+    margin-top: 0.75rem;
+  }
+  h4 {
+    max-width: 64rem;
+  }
+  h4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  h4 {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  h4 {
+    font-weight: 500;
+  }
+  h4 {
+    --tw-text-opacity: 1;
+    color: rgb(16 62 106 / var(--tw-text-opacity));
+  }
+  @media (min-width: 768px) {
+    h4 {
+      margin-bottom: 1.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h4 {
+      margin-top: 2rem;
+    }
+  }
+  @media (min-width: 768px) {
+    h4 {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h4 {
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h4 {
+      margin-top: 3rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    h4 {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+    }
+  }
   p {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
@@ -1338,7 +1468,7 @@ a {
   }
   figcaption {
     --tw-text-opacity: 1;
-    color: rgb(30 64 175 / var(--tw-text-opacity));
+    color: rgb(12 73 128 / var(--tw-text-opacity));
   }
   @media (min-width: 768px) {
     figcaption {
@@ -1408,7 +1538,7 @@ a {
   }
   thead {
     --tw-bg-opacity: 1;
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+    background-color: rgb(225 239 253 / var(--tw-bg-opacity));
   }
   tbody {
     --tw-bg-opacity: 1;
@@ -1458,11 +1588,11 @@ a {
   }
   blockquote {
     --tw-border-opacity: 1;
-    border-color: rgb(236 72 153 / var(--tw-border-opacity));
+    border-color: rgb(215 34 169 / var(--tw-border-opacity));
   }
   blockquote {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 242 248 / var(--tw-bg-opacity));
+    background-color: rgb(255 244 253 / var(--tw-bg-opacity));
   }
   blockquote {
     padding-top: 0.25rem;
@@ -1505,11 +1635,11 @@ a {
   }
   :not(pre) code {
     --tw-border-opacity: 1;
-    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    border-color: rgb(130 195 247 / var(--tw-border-opacity));
   }
   :not(pre) code {
     --tw-bg-opacity: 1;
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+    background-color: rgb(225 239 253 / var(--tw-bg-opacity));
   }
   :not(pre) code {
     padding-left: 0.25rem;
@@ -1525,7 +1655,7 @@ a {
   }
   :not(pre) code {
     --tw-text-opacity: 1;
-    color: rgb(80 7 36 / var(--tw-text-opacity));
+    color: rgb(119 24 89 / var(--tw-text-opacity));
   }
   @media (min-width: 768px) {
     :not(pre) code {
@@ -1568,6 +1698,70 @@ a {
       line-height: 1.75rem;
     }
   }
+  ul,
+  ol {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  ul,
+  ol {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  ul,
+  ol {
+    max-width: 64rem;
+  }
+  ul,
+  ol {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  ul,
+  ol {
+    --tw-text-opacity: 1;
+    color: rgb(2 6 23 / var(--tw-text-opacity));
+  }
+  @media (min-width: 768px) {
+    ul,
+  ol {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+  @media (min-width: 768px) {
+    ul,
+  ol {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    ul,
+  ol {
+      font-size: 1.75rem;
+      line-height: 2.25rem;
+      letter-spacing: -0.015em;
+      font-weight: 400;
+    }
+  }
+  iframe {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  iframe {
+    border-radius: 0.25rem;
+  }
+  iframe {
+    --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);
+  }
+  @media (min-width: 1024px) {
+    iframe {
+      max-width: min(70rem, 95vw);
+    }
+  }
 }
 
 .video-embed {
@@ -1580,7 +1774,7 @@ a {
 
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+  background-color: rgb(255 207 247 / var(--tw-bg-opacity));
 }
 
 @media (min-width: 768px) {

axum_server/tailwind.config.js

@@ -38,6 +38,73 @@ module.exports = {
 					},
 				],
 			},
+			colors: {
+				// blue: {
+				// 	50: "#ecf6fe",
+				// 	100: "#d9edfc",
+				// 	200: "#b3dbf9",
+				// 	300: "#8ecaf6",
+				// 	400: "#68b8f3",
+				// 	500: "#42a6f0",
+				// 	600: "#3585c0",
+				// 	700: "#286490",
+				// 	800: "#1F4E71",
+				// 	900: "#173A54",
+				// 	950: "#0F2637",
+				// },
+				blue: {
+					50: "#f1f7fe",
+					100: "#e1effd",
+					200: "#bddefa",
+					300: "#82c3f7",
+					400: "#42a6f0",
+					500: "#1789e0",
+					600: "#0a6cbf",
+					700: "#0a569a",
+					800: "#0c4980",
+					900: "#103e6a",
+					950: "#0b2746",
+				},
+				// pink: {
+				// 	50: "#FFFBFE",
+				// 	100: "#FFE4F9",
+				// 	200: "#FECEF4",
+				// 	300: "#FEB8EF",
+				// 	400: "#fea6eb",
+				// 	500: "#D38AC3",
+				// 	600: "#B476A7",
+				// 	700: "#96628B",
+				// 	800: "#774E6E",
+				// 	900: "#593A52",
+				// 	950: "#3A2636",
+				// },
+				pink: {
+					50: "#fff4fd",
+					100: "#ffe7fb",
+					200: "#ffcff7",
+					300: "#fea6eb",
+					400: "#fc76dd",
+					500: "#f342ca",
+					600: "#d722a9",
+					700: "#b31889",
+					800: "#92166e",
+					900: "#771859",
+					950: "#500238",
+				},
+				purple: {
+					50: "#F8F5FC",
+					100: "#D5C2ED",
+					200: "#B28EDE",
+					300: "#8F5BCF",
+					400: "#6D30B9",
+					500: "#5F2AA2",
+					600: "#52248A",
+					700: "#441E73",
+					800: "#36185C",
+					900: "#281244",
+					950: "#1A0C2D",
+				},
+			},
 		},
 	},
 	plugins: [],

axum_server/templates/blog_post.html

@@ -5,7 +5,7 @@
 {% block content %}
 <article class="mb-6">
   <header class="px-4 max-w-read mx-auto">
-  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 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-bold">{{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 md:text-lg">

axum_server/templates/blog_post_list.html

@@ -42,7 +42,7 @@
   </section> <!-- /#socials -->
   
   <section id="showcase" class="hidden lg:block">
-    <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
+    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
 
     <ul class="">
      {% for project in featured_projects %}

axum_server/templates/index.html

@@ -25,7 +25,7 @@
       </p>
     </header>
 
-    <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">About me</h2>
+    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
 
     <p class="mx-5 md:text-xl text-justify">
       Welcome to my personal website. My name is
@@ -42,7 +42,7 @@
   </section>
 
   <section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
-    <h2 class="text-blue-950 font-semibold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
+    <h2 class="text-blue-950 font-bold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
     <section id="blog-tags">
       <ul class="mx-5">
        {% for tag in blog_tags %}

axum_server/templates/sections/showcase.html

@@ -1,4 +1,4 @@
-<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
+<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
 
 <ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
  {% for project in featured_projects %}

axum_server/templates/sections/social.html

@@ -1,4 +1,4 @@
-<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Socials</h2>
+<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
 {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
 <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
 <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->

axum_server/templates/site_header.html

@@ -3,7 +3,7 @@
   {% match header_props.back_link %}
   {% when Some with (link) %}
   <a
-    class="p-3 text-lg font-medium drop-shadow-md"
+    class="px-3 py-2 text-lg font-medium drop-shadow-md"
     href="{{link.href}}"
   >
     {{link.label}}