Merge pull request #963 from alexwlchan/style-improvements

Assorted improvements and style fixes

src/_includes/article_cards.html

@@ -1,5 +1,5 @@
 <ul class="plain_list article_cards article_cards--{{ include.articles.size }}">
 {% for article in include.articles %}
-  {% include article_card.html hide_date="true" %}
+  {% include article_card.html %}
 {% endfor %}
 </ul>

src/_plugins/tag_picture.rb

@@ -125,7 +125,7 @@ def render(context)
       image = get_single_image_info(source_path)
       im_format = get_format(source_path, image)
 
-      @width = get_target_width(image, @bounding_box)
+      @width = get_target_width(source_path, image, @bounding_box)
 
       # These two attributes allow the browser to completely determine
       # the space that will be taken up by this image before it actually
@@ -344,7 +344,7 @@ def get_dst_prefix(context, source_path)
     #   - Setting the `width` attribute, which is used directly
     #   - Setting the `height` attribute, and then the width is scaled to match
     #
-    def get_target_width(image, bounding_box)
+    def get_target_width(source_path, image, bounding_box)
       if !bounding_box[:width].nil? && !bounding_box[:height].nil?
         raise "Picture #{@filename} supplies both width/height; this is unsupported"
       elsif !bounding_box[:width].nil?

src/_posts/2024/2024-08-20-create-thumbnail.md

@@ -11,6 +11,8 @@ tags:
 colors:
   index_light: "#697c13"
   index_dark:  "#b6b86c"
+index:
+  feature: true
 ---
 I’ve made a new command-line tool: [create_thumbnail], which creates thumbnails of images.
 I need image thumbnails in a lot of projects, and I wanted a single tool I could use in all of them rather than having multiple copies of the same code.

src/_scss/components/code.css

@@ -4,15 +4,15 @@ code, pre {
 }
 
 code {
-  font-size: calc(1em * var(--code-scaling-factor));
+  font-size: 88%;
 }
 
 pre {
   padding:
     calc(2 * var(--default-padding) / 3)
     calc(var(--default-padding) - var(--border-width));
 
-  line-height: calc(var(--line-height) * var(--code-scaling-factor) * 1.08);
+  line-height: calc(var(--line-height) * 0.95);
 
   /* This ensures that code blocks don't get blown up to big sizes
    * on iPhone displays. */

src/_scss/text_styles.css

@@ -0,0 +1,45 @@
+body {
+  font: var(--font-size) var(--text-font-family);
+  line-height: var(--line-height);
+  color: var(--body-text);
+}
+
+h1, h2, h3 {
+  color: var(--primary-color);
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  margin-top: 2em;
+  font-size: 1.5em;
+  line-height: 1.5em;
+  margin-bottom: 0;
+}
+
+a {
+  text-underline-offset: 2px;
+  color: var(--link-color);
+}
+
+a:visited {
+  color: var(--body-text);
+}
+
+a:hover {
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration-thickness: 4px;
+  text-decoration-skip-ink: none;
+}
+
+a.download {
+  border-color: var(--link-color);
+
+  /* We need to override the background styles */
+  color: var(--link-color) !important;
+  background: rgba(white, 0.4) !important;
+}

src/_scss/variables.scss

@@ -14,13 +14,12 @@ $body-text-dark:  #c7c7c7;
     --text-font-family: Charter, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
     --mono-font-family: Menlo, Consolas, monospace;
 
-    --font-size: 1em;
+    --font-size: 13pt;
 
     --line-height: 1.5em;
 
     --meta-scaling-factor:     0.82;
     --footnote-scaling-factor: 0.95;
-    --code-scaling-factor:     0.88;
 
     /* =============================
      * Margins and page layout stuff
@@ -97,8 +96,7 @@ $body-text-dark:  #c7c7c7;
 
     --nav-background-url: url('/headers/specktre_#{color-to-hex-str($light-color)}.png');
 
-    --link-color:         #{$light-color};
-    --link-visited-color: #{darken($light-color, 15%)};
+    --link-color: #{$light-color};
 
     --block-border-color:     #{rgba($light-color, 0.1)};
     --block-background-color: #{hsla(hue($light-color), saturation($light-color), 95%, 0.4)};
@@ -108,8 +106,7 @@ $body-text-dark:  #c7c7c7;
     :root {
       --primary-color: #{$dark-color};
 
-      --link-color:         #{$dark-color};
-      --link-visited-color: #{darken($dark-color, 20%)};
+      --link-color: #{$dark-color};
 
       --block-border-color:     #{rgba($dark-color, 0.3)};
       --block-background-color: #{hsla(hue($dark-color), saturation($dark-color), 5%, 0.7)};

src/_til/2024/2024-12-25-limits-on-visited-styles.md

@@ -0,0 +1,40 @@
+---
+layout: til
+title: There are limits on the styles you can apply with `:visited`
+date: 2024-12-25 20:04:39 +0000
+tags:
+  - css
+summary: |
+  Because the `:visited` selector will tell you whether somebody has been to a URL, browsers limit what styles you can apply to such links -- to prevent somebody nefarious stealing your browsing history.
+---
+I was tweaking the `a:visited` style on this site, and I was confused about why this wasn't working:
+
+```
+a:visited {
+  text-decoration-style: dashed;
+}
+```
+
+I thought it might be a browser bug, or maybe some bad interaction between other `text-decoration` rules, but it turns out to be an intentional choice.
+
+A [Stack Overflow answer](https://stackoverflow.com/a/35037025/1558022) pointed to a page on MDN [Privacy and the :visited selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector#limits_to_visited_link_styles), which explains:
+
+> Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. […] To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.
+
+and there are only a few styles you can apply to `:visited` links:
+
+> You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:
+>
+> * `color`
+> * `background-color`
+> * `border-color` (and its sub-properties)
+> * `column-rule-color`
+> * `outline-color`
+> * `text-decoration-color`
+> * `text-emphasis-color`
+> * The color parts of the `fill` and `stroke` attributes
+
+This is annoying for my purposes, but it makes sense, and I'm glad to know it's not my own incompetence that was preventing this CSS from working!
+
+I briefly considered trying to find ways around this, like doing something with variables or trying to trick the browser somehow, but I decided against it.
+It'd be a fragile hack, and any loophole I found should be reported and fixed rather than used for my own enjoyment.

src/index.md

@@ -140,12 +140,18 @@ Here are some of my favourite things [that I've written](/articles/):
 
 Here are some of the topics I write about:
 
-<ul class="dot_list">
+<ul class="dot_list" id="popular_tags">
   {% for tag_name in site.data['popular_tags'] %}
     <li>{% include tag_link.html %}</li>
   {% endfor %}
 </ul>
 
+<style>
+  #popular_tags a:visited {
+    color: var(--link-color);
+  }
+</style>
+
 
 
 ---

src/static/style.scss

@@ -9,7 +9,7 @@
 
 @import "utils/functions.scss";
 
-@import "text_styles.scss";
+@import "text_styles";
 @import "utility_classes";
 
 @import "base/layout.scss";

src/tags.md

@@ -12,6 +12,10 @@ title: Tags
     line-height: 1.7em;
   }
 
+  #tags a:visited {
+    color: var(--link-color);
+  }
+
   @media screen and (min-width: 518px) {
     #tags {
       columns: 2;