Adds styling

_config.yml

@@ -14,9 +14,9 @@ replace_read_time_with_word_count: true
 show_excerpts_html: true
 open_external_links_in_new_tab: true
 outdated_content_warning:
-  warning_text: "This article was last updated <DATE> and may be outdated."
+  warning_text: "This article was last updated <b><DATE></b> and may be outdated."
   placeholder_text: "<DATE>"
-  warning_threshold_days: 1095 # 3 years
+  warning_threshold_days: 365
   ignore_date_updated: false
 
 # Third party feature customisation (delete to turn off)

_includes/custom/outdated_content.html

@@ -0,0 +1,23 @@
+{% if site.outdated_content_warning and page.hide_content_warning != true %}
+    {% assign content_date = page.last_modified_at | date: "%s" %}
+    {% if site.outdated_content_warning.ignore_date_updated or page.last_modified_at == nil %}
+        {% assign content_date = page.date | date: "%s" %}
+    {% endif %}
+
+    {% assign current_date = "now" | date: "%s" %}
+    {% assign days_since_last_modified = current_date | minus: content_date | divided_by: 86400 %}
+
+    {% if days_since_last_modified > site.outdated_content_warning.warning_threshold_days %}
+        {% assign years = days_since_last_modified | divided_by: 365 %}
+        {% if years > 1 %}
+            {% assign time_since = "over " | append: years | append: " years ago" %}
+        {% elsif years == 1 %}
+            {% assign time_since = "over " | append: years | append: " year ago" %}
+        {% else %}
+            {% assign time_since = days_since_last_modified | append: " days ago" %}
+        {% endif %}
+        <div class="outdated-warning">
+        ⚠️ {{ site.outdated_content_warning.warning_text | replace: site.outdated_content_warning.placeholder_text, time_since }}
+        </div>
+    {% endif %}
+{% endif %}

_layouts/post.html

@@ -24,29 +24,7 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
       {%- endif -%}
       •
       {% include custom/tags.html %}</p>
-
-      {% if site.outdated_content_warning and page.hide_content_warning != true %}
-
-        {% assign content_date = page.last_modified_at | date: "%s" %}
-        {% if site.outdated_content_warning.ignore_date_updated or page.last_modified_at == nil %}
-          {% assign content_date = page.date | date: "%s" %}
-        {% endif %}
-
-        {% assign current_date = "now" | date: "%s" %}
-        {% assign days_since_last_modified = current_date | minus: content_date | divided_by: 86400 %}
-
-        {% if days_since_last_modified > site.outdated_content_warning.warning_threshold_days %}
-          {% assign years = days_since_last_modified | divided_by: 365 %}
-          {% if years > 0 %}
-            {% assign time_since = "over <b>" | append: years | append: " years ago</b>" %}
-          {% else %}
-            {% assign time_since = "<b>" | append: days_since_last_modified | append: " days ago</b>" %}
-          {% endif %}
-          <div class="outdated-warning">
-            ⚠️ {{ site.outdated_content_warning.warning_text | replace: site.outdated_content_warning.placeholder_text, time_since }}
-          </div>
-        {% endif %}
-      {% endif %}
+      {% include custom/outdated_content.html %}
   </header>
 
   {% if site.table_of_contents_header != blank? %}

assets/css/style.scss

@@ -214,6 +214,13 @@ h1:hover .octicon, h2:hover .octicon, h3:hover .octicon, h4:hover .octicon, h5:h
   white-space: nowrap;
 }
 
+/* Outdated content warning */
+.outdated-warning {
+  padding: 0.75rem 1rem;
+  border: 1px solid {{ site.accent_colour }};
+  border-radius: 0.25rem;
+}
+
 /* Calendar */
 .calendar-container {
   display: grid;