Merge branch 'style_improvements'

Only add vertical padding for the top of the first blog post and use the same background color throughout.
Add slight padding the blog posts.
2025-02-18 07:19:25 -05:00 · 2025-02-17 22:32:38 -05:00 · 2025-02-17 22:16:43 -05:00 · 2025-02-17 22:12:08 -05:00 · 2025-02-17 22:08:46 -05:00 · 2025-02-17 22:00:33 -05:00
2 changed files with 34 additions and 8 deletions
--- a/default_environment/stylesheet/main.css
+++ b/default_environment/stylesheet/main.css
@ -5,7 +5,9 @@
  --header-divider-color: #6a687a;

  --stream-divider-color: #6ccff6;
-  --stream-post-background-color: #1f1f1f;
+  --stream-post-background-color: #0a0a0a;
+
+  --blog-post-background-color: #0a0a0a;

  --src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
@ -29,7 +31,9 @@
    --header-divider-color: #959785;

    --stream-divider-color: #933009;
-    --stream-post-background-color: #e0e0e0;
+    --stream-post-background-color: #f5f5f5;
+
+    --blog-post-background-color: #f5f5f5;

    --src-block-background-color: #ebebeb;
    --src-block-border-color: #7b7d70;
@ -44,6 +48,10 @@
  }
 }

+* {
+  box-sizing: border-box;
+}
+
 body {
  color: var(--site-text-color);
  background-color: var(--site-background-color);
@ -69,7 +77,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;

@ -89,7 +97,8 @@ 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);
  }

  .blog_stream {
@ -118,11 +127,19 @@ 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;
+    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 {
-    font-size: 2.5rem;
+    font-size: 2.9rem;
    font-weight: 700;
    padding-bottom: 1rem;
  }
@ -154,13 +171,14 @@ body {

      .src_line {
        white-space: pre-wrap;
+        overflow-wrap: anywhere;
      }
    }
  }

  .inline_source_block {
    font-family: var(--src-font-family);
-    font-size: 1rem;
+    font-size: 1.2rem;
  }

  .code,
@ -270,4 +288,11 @@ body {
  b {
    font-weight: 700;
  }
+
+  /* Never have media larger than its container */
+  img,
+  picture,
+  video {
+    max-width: 100%;
+  }
 }
--- a/default_environment/templates/html/main.dust
+++ b/default_environment/templates/html/main.dust
@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
    {#global_settings.css_files}<link rel="stylesheet" href="{.}">{/global_settings.css_files}
    {#global_settings.js_files}<script type="text/javascript" src="{.}"></script>{/global_settings.js_files}
    {?global_settings.page_title}<title>{global_settings.page_title}</title>{/global_settings.page_title}
Author	SHA1	Message	Date
Tom Alexander	073ac0ac25	Merge branch 'style_improvements' Some checks failed format Build format has succeeded Details rust-test Build rust-test has succeeded Details clippy Build clippy has failed Details build Build build has succeeded Details	2025-02-18 07:19:25 -05:00
Tom Alexander	1c356737c1	Only add vertical padding for the top of the first blog post and use the same background color throughout. Some checks failed format Build format has succeeded Details clippy Build clippy has failed Details rust-test Build rust-test has succeeded Details	2025-02-17 22:32:38 -05:00
Tom Alexander	339bd433f6	Add slight padding the blog posts. Some checks failed format Build format has succeeded Details clippy Build clippy has failed Details rust-test Build rust-test has succeeded Details	2025-02-17 22:16:43 -05:00
Tom Alexander	bb5fa6a487	Swap site background and blog post background to give better contrast. Some checks failed format Build format has succeeded Details clippy Build clippy has failed Details rust-test Build rust-test has succeeded Details	2025-02-17 22:12:08 -05:00
Tom Alexander	71b6db14d5	Add a background color for stand-alone blog posts.	2025-02-17 22:08:46 -05:00
Tom Alexander	69fb91db37	Remove padding on blog stream posts. It was causing an ugly tail on blog stream posts.	2025-02-17 22:00:33 -05:00
Tom Alexander	5fd93fc648	Allow line wrapping even when contiguous words are really long. The code blocks were causing horizontal scrolling on mobile.	2025-02-17 21:29:43 -05:00
Tom Alexander	033a17e355	Increase home link font size.	2025-02-17 21:29:43 -05:00
Tom Alexander	824f34bd4c	Make everything box-sizing: border-box.	2025-02-17 20:57:40 -05:00
Tom Alexander	d93e91c625	Increase the font size for inline source blocks to the normal font size. Some checks failed rust-test Build rust-test has succeeded Details format Build format has succeeded Details clippy Build clippy has failed Details	2025-02-17 20:54:56 -05:00
Tom Alexander	db21bd8a55	Restrict media to the size of its container. Some checks failed format Build format has succeeded Details clippy Build clippy has failed Details rust-test Build rust-test has succeeded Details	2025-02-17 20:49:36 -05:00
Tom Alexander	69729bd329	Include viewport meta tag.	2025-02-17 20:49:36 -05:00
Tom Alexander	ddea8fdceb	Increase title font-size. Some checks failed format Build format has succeeded Details clippy Build clippy has failed Details rust-test Build rust-test has succeeded Details	2025-02-17 19:03:48 -05:00