michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

coloooors

Browse Source
This commit is contained in:
Michal Vanko 2024-09-18 18:36:54 +02:00
parent fb63a2011b
commit 0937de96dd
14 changed files with 469 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) 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. 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.

1
axum_server/Cargo.toml
View File

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

2
axum_server/src/main.rs
View File

@ -53,8 +53,6 @@ async fn main() {
// TODO Socials // TODO Socials
// - fotos // - fotos
// TODO ul li article styles
// TODO header height difference
// TODO Colors // TODO Colors
// TODO print css and other 404 css linked in base.html // TODO print css and other 404 css linked in base.html
// TODO go live pipeline // TODO go live pipeline

14
axum_server/src/picture_generator/picture_markup_generator.rs
View File

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

39
axum_server/src/post_utils/post_parser.rs
View File

@ -4,6 +4,7 @@ use axum::http::StatusCode;
use chrono::{DateTime, Utc}; use chrono::{DateTime, Utc};
use gray_matter::{engine::YAML, Matter}; use gray_matter::{engine::YAML, Matter};
use image::image_dimensions; use image::image_dimensions;
use indoc::formatdoc;
use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd}; use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd};
use serde::{de::DeserializeOwned, Deserialize, Deserializer}; use serde::{de::DeserializeOwned, Deserialize, Deserializer};
use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet}; 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 { enum TextKind {
Text, Text,
Heading(Option<String>),
Code(String), Code(String),
} }
@ -102,7 +104,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
}) => { }) => {
if !dest_url.starts_with("/") { if !dest_url.starts_with("/") {
return Event::Html( return Event::Html(
format!( formatdoc!(
r#"<img r#"<img
alt="{title}" alt="{title}"
src="{dest_url}" 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 // Place image into the content with scaled reso to a boundary
let picture_markup = let picture_markup =
generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images) generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
.unwrap_or(format!( .unwrap_or(formatdoc!(
r#" r#"
<img <img
alt="{alt}" alt="{alt}"
@ -139,7 +141,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
link_type, dest_url, title, id link_type, dest_url, title, id
); );
Event::Html( Event::Html(
format!( formatdoc!(
r#"<figure> r#"<figure>
{picture_markup} {picture_markup}
<figcaption> <figcaption>
@ -168,14 +170,45 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
.unwrap(); .unwrap();
Event::Html(highlighted.into()) 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::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::Start(_) => event,
Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()), Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
Event::End(TagEnd::CodeBlock) => { Event::End(TagEnd::CodeBlock) => {
text_kind = TextKind::Text; text_kind = TextKind::Text;
Event::End(TagEnd::CodeBlock) Event::End(TagEnd::CodeBlock)
} }
Event::End(TagEnd::Heading(heading_level)) => {
text_kind = TextKind::Text;
Event::End(TagEnd::Heading(heading_level))
}
_ => event, _ => event,
}); });

26
axum_server/styles/input.css
View File

@ -69,10 +69,10 @@
} }
a { a {
@apply text-pink-600 underline underline-offset-2; @apply text-pink-800 underline underline-offset-2;
&:hover { &:hover {
@apply transition text-blue-400; @apply transition text-blue-500;
} }
} }
@ -83,6 +83,15 @@ a {
h2 { 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; @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 { 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; @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 { 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 { p {
@apply my-2 md:my-4 text-slate-600 max-w-note; @apply my-2 md:my-4 text-slate-600 max-w-note;
@ -133,12 +142,21 @@ a {
} }
:not(pre) code { :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 { pre code pre {
@apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note; @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 { .video-embed {

470
axum_server/styles/output.css
View File

@ -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'); 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 { .col-span-2 {
grid-column: span 2 / span 2; grid-column: span 2 / span 2;
} }
@ -914,27 +914,27 @@ video {
.border-blue-500 { .border-blue-500 {
--tw-border-opacity: 1; --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 { .border-blue-950 {
--tw-border-opacity: 1; --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 { .bg-blue-100 {
--tw-bg-opacity: 1; --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 { .bg-blue-50 {
--tw-bg-opacity: 1; --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 { .bg-pink-200 {
--tw-bg-opacity: 1; --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 { .bg-white {
@ -943,7 +943,7 @@ video {
} }
.fill-blue-950 { .fill-blue-950 {
fill: #172554; fill: #0F2637;
} }
.object-contain { .object-contain {
@ -967,11 +967,21 @@ video {
padding: 1rem; padding: 1rem;
} }
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 { .px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-5 { .py-5 {
padding-top: 1.25rem; padding-top: 1.25rem;
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
@ -1063,22 +1073,22 @@ video {
.text-blue-500 { .text-blue-500 {
--tw-text-opacity: 1; --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 { .text-blue-700 {
--tw-text-opacity: 1; --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 { .text-blue-900 {
--tw-text-opacity: 1; --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 { .text-blue-950 {
--tw-text-opacity: 1; --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 { .text-gray-600 {
@ -1091,9 +1101,9 @@ video {
color: rgb(31 41 55 / var(--tw-text-opacity)); color: rgb(31 41 55 / var(--tw-text-opacity));
} }
.text-pink-950 { .text-pink-800 {
--tw-text-opacity: 1; --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 { .text-slate-800 {
@ -1101,6 +1111,16 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity)); 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 { .no-underline {
text-decoration-line: none; text-decoration-line: none;
} }
@ -1118,12 +1138,12 @@ video {
a { a {
--tw-text-opacity: 1; --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-decoration-line: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
&:hover { &:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity)); color: rgb(66 166 240 / var(--tw-text-opacity));
} }
&:hover { &:hover {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; 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 { h1 {
--tw-text-opacity: 1; --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) { @media (min-width: 768px) {
h1 { h1 {
@ -1201,7 +1221,7 @@ a {
} }
h2 { h2 {
--tw-text-opacity: 1; --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) { @media (min-width: 768px) {
h2 { h2 {
@ -1235,6 +1255,126 @@ a {
line-height: 2.5rem; 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 { p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -1338,7 +1478,7 @@ a {
} }
figcaption { figcaption {
--tw-text-opacity: 1; --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) { @media (min-width: 768px) {
figcaption { figcaption {
@ -1408,7 +1548,7 @@ a {
} }
thead { thead {
--tw-bg-opacity: 1; --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 { tbody {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
@ -1458,11 +1598,11 @@ a {
} }
blockquote { blockquote {
--tw-border-opacity: 1; --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 { blockquote {
--tw-bg-opacity: 1; --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 { blockquote {
padding-top: 0.25rem; padding-top: 0.25rem;
@ -1505,11 +1645,11 @@ a {
} }
:not(pre) code { :not(pre) code {
--tw-border-opacity: 1; --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 { :not(pre) code {
--tw-bg-opacity: 1; --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 { :not(pre) code {
padding-left: 0.25rem; padding-left: 0.25rem;
@ -1525,7 +1665,7 @@ a {
} }
:not(pre) code { :not(pre) code {
--tw-text-opacity: 1; --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) { @media (min-width: 768px) {
:not(pre) code { :not(pre) code {
@ -1568,6 +1708,70 @@ a {
line-height: 1.75rem; 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 { .video-embed {
@ -1580,7 +1784,7 @@ a {
.hover\:bg-pink-200:hover { .hover\:bg-pink-200:hover {
--tw-bg-opacity: 1; --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) { @media (min-width: 768px) {

54
axum_server/tailwind.config.js
View File

@ -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: [], plugins: [],

2
axum_server/templates/blog_post.html
View File

@ -5,7 +5,7 @@
{% block content %} {% block content %}
<article class="mb-6"> <article class="mb-6">
<header class="px-4 max-w-read mx-auto"> <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"> <aside class="flex justify-between flex-row">
{% include "post_tag_list.html" %} {% include "post_tag_list.html" %}
<section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg"> <section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">

2
axum_server/templates/blog_post_list.html
View File

@ -42,7 +42,7 @@
</section> <!-- /#socials --> </section> <!-- /#socials -->
<section id="showcase" class="hidden lg:block"> <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=""> <ul class="">
{% for project in featured_projects %} {% for project in featured_projects %}

4
axum_server/templates/index.html
View File

@ -25,7 +25,7 @@
</p> </p>
</header> </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"> <p class="mx-5 md:text-xl text-justify">
Welcome to my personal website. My name is Welcome to my personal website. My name is
@ -42,7 +42,7 @@
</section> </section>
<section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2"> <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"> <section id="blog-tags">
<ul class="mx-5"> <ul class="mx-5">
{% for tag in blog_tags %} {% for tag in blog_tags %}

2
axum_server/templates/sections/showcase.html
View File

@ -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"> <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 %} {% for project in featured_projects %}

2
axum_server/templates/sections/social.html
View File

@ -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>") %} {% 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> --> <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> --> <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->

2
axum_server/templates/site_header.html
View File

@ -3,7 +3,7 @@
{% match header_props.back_link %} {% match header_props.back_link %}
{% when Some with (link) %} {% when Some with (link) %}
<a <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}}" href="{{link.href}}"
> >
{{link.label}} {{link.label}}