From ddea8fdceb1d818e1ecf55530bcf475dd41d03fa Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 19:03:48 -0500 Subject: [PATCH 01/12] Increase title font-size. --- default_environment/stylesheet/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 5d80b37..9beb74d 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -122,7 +122,7 @@ body { } .blog_post_title { - font-size: 2.5rem; + font-size: 2.9rem; font-weight: 700; padding-bottom: 1rem; } From 69729bd3295cc184b11497747e6ffc7b367fc37c Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 19:41:34 -0500 Subject: [PATCH 02/12] Include viewport meta tag. --- default_environment/templates/html/main.dust | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/default_environment/templates/html/main.dust b/default_environment/templates/html/main.dust index 4c3a4f2..62e6748 100644 --- a/default_environment/templates/html/main.dust +++ b/default_environment/templates/html/main.dust @@ -1,7 +1,8 @@ - + + {#global_settings.css_files}{/global_settings.css_files} {#global_settings.js_files}{/global_settings.js_files} {?global_settings.page_title}{global_settings.page_title}{/global_settings.page_title} From db21bd8a55a5f775d1ed429eeaa387ab85c86a5d Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 19:52:32 -0500 Subject: [PATCH 03/12] Restrict media to the size of its container. --- default_environment/stylesheet/main.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 9beb74d..de07c06 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -270,4 +270,11 @@ body { b { font-weight: 700; } + + /* Never have media larger than its container */ + img, + picture, + video { + max-width: 100%; + } } From d93e91c625a5c41c183cad1addcf8becc8038174 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 20:54:56 -0500 Subject: [PATCH 04/12] Increase the font size for inline source blocks to the normal font size. --- default_environment/stylesheet/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index de07c06..6bcedde 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -160,7 +160,7 @@ body { .inline_source_block { font-family: var(--src-font-family); - font-size: 1rem; + font-size: 1.2rem; } .code, From 824f34bd4c9f60ae79c26438c4b576fd833ebe47 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 20:57:40 -0500 Subject: [PATCH 05/12] Make everything box-sizing: border-box. --- default_environment/stylesheet/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 6bcedde..95473df 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -44,6 +44,10 @@ } } +* { + box-sizing: border-box; +} + body { color: var(--site-text-color); background-color: var(--site-background-color); From 033a17e3554366959fc5e3d7f822d812ed3e9ef8 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 21:08:40 -0500 Subject: [PATCH 06/12] Increase home link font size. --- default_environment/stylesheet/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 95473df..1e4b4bf 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -73,7 +73,7 @@ body { border-bottom: 0.1rem solid var(--header-divider-color); .home_link { - font-size: 1.2rem; + font-size: 2rem; font-weight: 600; text-decoration: none; From 5fd93fc6486cbed79d69a7e60a428038cad66683 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 21:26:53 -0500 Subject: [PATCH 07/12] Allow line wrapping even when contiguous words are really long. The code blocks were causing horizontal scrolling on mobile. --- default_environment/stylesheet/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 1e4b4bf..00f51d2 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -158,6 +158,7 @@ body { .src_line { white-space: pre-wrap; + overflow-wrap: anywhere; } } } From 69fb91db370219284977eda5663d75850aed34e4 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 22:00:33 -0500 Subject: [PATCH 08/12] Remove padding on blog stream posts. It was causing an ugly tail on blog stream posts. --- default_environment/stylesheet/main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 00f51d2..a37f188 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -122,7 +122,6 @@ body { /* A blog post in a blog stream (for example, the homepage). */ .blog_stream_post { background: var(--stream-post-background-color); - padding: 1rem 0.2rem; } .blog_post_title { From 71b6db14d5b98924c455fdd0b4fc229edb7207f5 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 22:08:46 -0500 Subject: [PATCH 09/12] Add a background color for stand-alone blog posts. --- default_environment/stylesheet/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index a37f188..a9b257a 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -7,6 +7,8 @@ --stream-divider-color: #6ccff6; --stream-post-background-color: #1f1f1f; + --blog-post-background-color: #1f1f1f; + --src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; @@ -31,6 +33,8 @@ --stream-divider-color: #933009; --stream-post-background-color: #e0e0e0; + --blog-post-background-color: #e0e0e0; + --src-block-background-color: #ebebeb; --src-block-border-color: #7b7d70; --src-block-language-color: #f5f5f5; @@ -94,6 +98,7 @@ body { /* A stand-alone blog post (not in a blog stream). */ .blog_post { padding: 1rem 0 3rem 0; + background: var(--blog-post-background-color); } .blog_stream { From bb5fa6a487fcb61598d5d8a41af4f5649dfa4b8a Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 22:12:08 -0500 Subject: [PATCH 10/12] Swap site background and blog post background to give better contrast. --- default_environment/stylesheet/main.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index a9b257a..0dcdd99 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -1,13 +1,13 @@ :root { --main-max-width: 800px; - --site-background-color: #0a0a0a; + --site-background-color: #1f1f1f; --site-text-color: #fffffc; --header-divider-color: #6a687a; --stream-divider-color: #6ccff6; - --stream-post-background-color: #1f1f1f; + --stream-post-background-color: #0a0a0a; - --blog-post-background-color: #1f1f1f; + --blog-post-background-color: #0a0a0a; --src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; @@ -26,14 +26,14 @@ @media (prefers-color-scheme: light) { :root { - --site-background-color: #f5f5f5; + --site-background-color: #e0e0e0; --site-text-color: #000003; --header-divider-color: #959785; --stream-divider-color: #933009; - --stream-post-background-color: #e0e0e0; + --stream-post-background-color: #f5f5f5; - --blog-post-background-color: #e0e0e0; + --blog-post-background-color: #f5f5f5; --src-block-background-color: #ebebeb; --src-block-border-color: #7b7d70; From 339bd433f6447cb25f080bc2834e4f03c041d3b2 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 22:16:43 -0500 Subject: [PATCH 11/12] Add slight padding the blog posts. --- default_environment/stylesheet/main.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 0dcdd99..5fb42b1 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -97,7 +97,7 @@ body { /* A stand-alone blog post (not in a blog stream). */ .blog_post { - padding: 1rem 0 3rem 0; + padding: 1rem 0.2rem 0 0.2rem; background: var(--blog-post-background-color); } @@ -127,6 +127,7 @@ body { /* A blog post in a blog stream (for example, the homepage). */ .blog_stream_post { background: var(--stream-post-background-color); + padding: 1rem 0.2rem 0 0.2rem; } .blog_post_title { From 1c356737c1875ef79cfeeb12d37df8544e69bc7d Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Mon, 17 Feb 2025 22:32:38 -0500 Subject: [PATCH 12/12] Only add vertical padding for the top of the first blog post and use the same background color throughout. --- default_environment/stylesheet/main.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css index 5fb42b1..b962497 100644 --- a/default_environment/stylesheet/main.css +++ b/default_environment/stylesheet/main.css @@ -1,6 +1,6 @@ :root { --main-max-width: 800px; - --site-background-color: #1f1f1f; + --site-background-color: #0a0a0a; --site-text-color: #fffffc; --header-divider-color: #6a687a; @@ -26,7 +26,7 @@ @media (prefers-color-scheme: light) { :root { - --site-background-color: #e0e0e0; + --site-background-color: #f5f5f5; --site-text-color: #000003; --header-divider-color: #959785; @@ -127,7 +127,15 @@ body { /* A blog post in a blog stream (for example, the homepage). */ .blog_stream_post { background: var(--stream-post-background-color); - padding: 1rem 0.2rem 0 0.2rem; + padding: 0 0.2rem; + } + + .blog_stream_post { + background: var(--stream-post-background-color); + } + + .blog_stream_post:nth-child(1) { + padding-top: 1rem; } .blog_post_title {