From 0937de96dde62c0fb0cf9dff3a59d87c2bcf6e50 Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Wed, 18 Sep 2024 18:36:54 +0200 Subject: [PATCH] coloooors --- ...13-ive-started-streaming-weekly-06-2022.md | 4 +- axum_server/Cargo.toml | 1 + axum_server/src/main.rs | 2 - .../picture_markup_generator.rs | 14 +- axum_server/src/post_utils/post_parser.rs | 39 +- axum_server/styles/input.css | 26 +- axum_server/styles/output.css | 470 +++++++++++++----- axum_server/tailwind.config.js | 54 ++ axum_server/templates/blog_post.html | 2 +- axum_server/templates/blog_post_list.html | 2 +- axum_server/templates/index.html | 4 +- axum_server/templates/sections/showcase.html | 2 +- axum_server/templates/sections/social.html | 2 +- axum_server/templates/site_header.html | 2 +- 14 files changed, 469 insertions(+), 155 deletions(-) diff --git a/_posts/blog/2022-02-13-ive-started-streaming-weekly-06-2022.md b/_posts/blog/2022-02-13-ive-started-streaming-weekly-06-2022.md index ebd6bc1..6f08740 100644 --- a/_posts/blog/2022-02-13-ive-started-streaming-weekly-06-2022.md +++ b/_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) - +
+ +
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. diff --git a/axum_server/Cargo.toml b/axum_server/Cargo.toml index 5e4375b..4329f2d 100644 --- a/axum_server/Cargo.toml +++ b/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"] diff --git a/axum_server/src/main.rs b/axum_server/src/main.rs index 3f41ee8..cc561b6 100644 --- a/axum_server/src/main.rs +++ b/axum_server/src/main.rs @@ -53,8 +53,6 @@ async fn main() { // TODO Socials // - fotos -// TODO ul li article styles -// TODO header height difference // TODO Colors // TODO print css and other 404 css linked in base.html // 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 4395b51..d6db6e3 100644 --- a/axum_server/src/picture_generator/picture_markup_generator.rs +++ b/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#""# ); - let result = format!( + let result = formatdoc!( r#" {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#" + let result = indoc! { + r#" - "#; + "#, + }; assert_eq!( generate_picture_markup(orig_img_path, width, height, "Testing image alt", false) .expect("picture markup has to be generated"), diff --git a/axum_server/src/post_utils/post_parser.rs b/axum_server/src/post_utils/post_parser.rs index b7fd6b9..2d590f0 100644 --- a/axum_server/src/post_utils/post_parser.rs +++ b/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), 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#"{title} 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#" {alt} String { link_type, dest_url, title, id ); Event::Html( - format!( + formatdoc!( r#"
{picture_markup}
@@ -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##" + + + + {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("
".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, }); diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css index 686775c..da6d87e 100644 --- a/axum_server/styles/input.css +++ b/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 { diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index ed3587c..198d0f3 100644 --- a/axum_server/styles/output.css +++ b/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(66 166 240 / 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(66 166 240 / 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(66 166 240 / var(--tw-border-opacity)); } .border-blue-950 { --tw-border-opacity: 1; - border-color: rgb(23 37 84 / var(--tw-border-opacity)); + border-color: rgb(15 38 55 / var(--tw-border-opacity)); } .bg-blue-100 { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(217 237 252 / var(--tw-bg-opacity)); } .bg-blue-50 { --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); + background-color: rgb(236 246 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: #0F2637; } .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(66 166 240 / var(--tw-text-opacity)); } .text-blue-700 { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); + color: rgb(40 100 144 / var(--tw-text-opacity)); } .text-blue-900 { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(23 58 84 / var(--tw-text-opacity)); } .text-blue-950 { --tw-text-opacity: 1; - color: rgb(23 37 84 / var(--tw-text-opacity)); + color: rgb(15 38 55 / var(--tw-text-opacity)); } .text-gray-600 { @@ -1091,9 +1101,9 @@ video { color: rgb(31 41 55 / var(--tw-text-opacity)); } -.text-pink-950 { +.text-pink-800 { --tw-text-opacity: 1; - color: rgb(80 7 36 / var(--tw-text-opacity)); + color: rgb(146 22 110 / var(--tw-text-opacity)); } .text-slate-800 { @@ -1101,6 +1111,16 @@ video { color: rgb(30 41 59 / var(--tw-text-opacity)); } +.text-pink-900 { + --tw-text-opacity: 1; + color: rgb(119 24 89 / var(--tw-text-opacity)); +} + +.text-pink-950 { + --tw-text-opacity: 1; + color: rgb(80 2 56 / var(--tw-text-opacity)); +} + .no-underline { text-decoration-line: none; } @@ -1118,12 +1138,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(66 166 240 / 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 +1181,7 @@ a { } h1 { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(23 58 84 / var(--tw-text-opacity)); } @media (min-width: 768px) { h1 { @@ -1201,7 +1221,7 @@ a { } h2 { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(23 58 84 / var(--tw-text-opacity)); } @media (min-width: 768px) { h2 { @@ -1235,6 +1255,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(23 58 84 / 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(23 58 84 / 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 +1478,7 @@ a { } figcaption { --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity)); + color: rgb(31 78 113 / var(--tw-text-opacity)); } @media (min-width: 768px) { figcaption { @@ -1408,7 +1548,7 @@ a { } thead { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(217 237 252 / var(--tw-bg-opacity)); } tbody { --tw-bg-opacity: 1; @@ -1458,11 +1598,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 +1645,11 @@ a { } :not(pre) code { --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity)); + border-color: rgb(142 202 246 / var(--tw-border-opacity)); } :not(pre) code { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(217 237 252 / var(--tw-bg-opacity)); } :not(pre) code { padding-left: 0.25rem; @@ -1525,7 +1665,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 +1708,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 +1784,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) { diff --git a/axum_server/tailwind.config.js b/axum_server/tailwind.config.js index b2eac1c..9c2e06d 100644 --- a/axum_server/tailwind.config.js +++ b/axum_server/tailwind.config.js @@ -38,6 +38,60 @@ 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", + }, + // 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: [], diff --git a/axum_server/templates/blog_post.html b/axum_server/templates/blog_post.html index e3b76de..4062b98 100644 --- a/axum_server/templates/blog_post.html +++ b/axum_server/templates/blog_post.html @@ -5,7 +5,7 @@ {% block content %}
-

{{title}}

+

{{title}}

-

About me

+

About me

Welcome to my personal website. My name is @@ -42,7 +42,7 @@

-

Blog

+

Blog

    {% for tag in blog_tags %} diff --git a/axum_server/templates/sections/showcase.html b/axum_server/templates/sections/showcase.html index 0c82a18..afcb32b 100644 --- a/axum_server/templates/sections/showcase.html +++ b/axum_server/templates/sections/showcase.html @@ -1,4 +1,4 @@ -

    Showcase

    +

    Showcase

      {% for project in featured_projects %} diff --git a/axum_server/templates/sections/social.html b/axum_server/templates/sections/social.html index c2c6843..7e5fb71 100644 --- a/axum_server/templates/sections/social.html +++ b/axum_server/templates/sections/social.html @@ -1,4 +1,4 @@ -

      Socials

      +

      Socials

      {% call sc::social_card_start("twitch", "I stream (almost) regularly on twitch.tv") %} diff --git a/axum_server/templates/site_header.html b/axum_server/templates/site_header.html index 65d7d88..a509bac 100644 --- a/axum_server/templates/site_header.html +++ b/axum_server/templates/site_header.html @@ -3,7 +3,7 @@ {% match header_props.back_link %} {% when Some with (link) %} {{link.label}}