Decrease prominence of time on posts.

Author: mbbischoff

_includes/datetime.html

@@ -1,5 +1,5 @@
 <time datetime="{{ include.post.date | date_to_xmlschema }}">
   <a href="{{ include.post.url }}"
-    >{{ include.post.date | date: "%B %-d, %Y" }}</a
+    >{{ include.post.date | date: "%Y – %m – %d" }}</a
   >
 </time>

_includes/post_types/link.html

@@ -1,6 +1,6 @@
 <header>
   {% include datetime.html post=include.post %}
-  <h1><a class="external" href="{{ include.post.link }}" target="_blank" rel="noopener">{{ include.post.title }}&nbsp;→</a></h1>
+  <h1><a class="external" href="{{ include.post.link }}" target="_blank" rel="noopener">{{ include.post.title }}→</a></h1>
 </header>
 
 {{ include.post.content }}

_includes/post_types/short.html

@@ -1,3 +1,5 @@
+<header>
 {% include datetime.html post=include.post %}
+</header>
 
 {{ include.post.content }}

_sass/abstracts/_variables.scss

@@ -11,7 +11,7 @@ $light-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.25);
 $dark-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.25);
 
 $light-mode-background: color(display-p3 0.998 0.982 0.984);
-$light-mode-text: color(display-p3 0.364 0.036 0.08);
+$light-mode-text: color(display-p3 0.273 0.027 0.06);
 $light-mode-text-secondary: color(display-p3 0.364 0.036 0.08 / 0.7);
 $light-mode-text-emphasized: color(display-p3 0.036 0.004 0.008);
 $light-mode-accent: color(display-p3 0.9 0.09 0.2);

_sass/layout/article.scss

@@ -1,3 +1,23 @@
+@use 'vendors/vertical-rhythm-reset' as vr;
+
 article {
-	
+	@include vr.set($margin-top: 1);
+
+	header {
+		display: grid;
+
+		h1 {
+			justify-self: start;
+		}
+
+		time {
+			@include vr.set($font-size: -1);
+
+			justify-self: end;
+
+			a {
+				text-decoration: none;
+			}
+		}
+	}
 }

_sass/main.scss

@@ -18,6 +18,7 @@
 
 @use 'layout/header';
 @use 'layout/footer';
+@use 'layout/article';
 
 @use "themes/themes";
 

_sass/themes/_themes.scss

@@ -7,13 +7,13 @@ $themes: (
 		text-emphasized: $light-mode-text-emphasized,
 		accent: $light-mode-accent,
 		link-underline: $light-mode-link-underline,
-		text-secondary: $light-mode-text-secondary ),
+		text-secondary: $light-mode-text-secondary),
 	dark: (background: $dark-mode-background,
 		text: $dark-mode-text,
 		text-emphasized: $dark-mode-text-emphasized,
 		accent: $dark-mode-accent,
 		link-underline: $dark-mode-link-underline,
-		text-secondary: $dark-mode-text-secondary )
+		text-secondary: $dark-mode-text-secondary)
 );
 
 @mixin theme($theme) {
@@ -64,6 +64,16 @@ $themes: (
 			}
 		}
 	}
+
+	article {
+		header {
+			time {
+				a {
+					color: map.get($colors, text-secondary);
+				}
+			}
+		}
+	}
 }
 
 @media (prefers-color-scheme: light) {