Styling updates; Add author image to posts

mastodon comments inside cards, added fleuron to indicate end of article

_data/metadata.js

@@ -8,7 +8,7 @@ export default {
 		name: "Nathan Upchurch",
 		email: "blog@upchur.ch",
 		url: "https://nathanupchurch.com/me",
-		profilePic: "/img/CN20191025_301_Srt_SQUARE.jpg"
+		profilePic: "/img/CN20191025_301_Srt_SQUARE_crop.jpg"
 	},
 	copyrightNotice: "© Nathan Upchurch 2022 - 2024",
 	defaultPostImageURL: "/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",

_includes/layouts/post.njk

@@ -8,30 +8,37 @@ layout: layouts/base.njk
 {% if not hideMetadata %}
 <div class="post-metadata">
 	{% if author %}
-
+	{% if author.profilePic %}
-	<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
+	<img class="profilePic" src="{{ author.profilePic }}">
-	{% if author.name %}{{ author.name }},&nbsp;{% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	{% endif %}
+	<div class="post-metadata-copy">
+		<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
+		{% if author.name %}{{ author.name }},&nbsp;{% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% else %}
-
+	{% if metadata.author.profilePic %}
-	<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
+	<img class="profilePic" src="{{ metadata.author.profilePic }}">
-	{% if metadata.author.name %}{{ metadata.author.name }},&nbsp;{% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	{% endif %}
+	<div class="post-metadata-copy">
+		<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
+		{% if metadata.author.name %}{{ metadata.author.name }},&nbsp;{% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% endif %}
 
 
-	<ul>
+		<ul>
-		{%- for tag in tags | filterTagList %}
+			{%- for tag in tags | filterTagList %}
-		{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+			{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-		<li>
+			<li>
-			<a
+				<a
-			href="{{ tagUrl }}"
+				href="{{ tagUrl }}"
-			class="post-tag">
+				class="post-tag">
-				{{ tag }}&nbsp;
+					{{ tag }}&nbsp;
-			</a>
+				</a>
-		</li>
+			</li>
-		{%- endfor %}
+			{%- endfor %}
-	</ul>
+		</ul>
+	</div>
 </div>
 {% endif %}
 {{ content | safe }}

_includes/mastodonComments.njk

@@ -15,14 +15,16 @@
 </section>
 
 <template id="comment-template">
-	<wc-comment
+	<wc-card>
-	author_name=""
+		<wc-comment
-	author_url=""
+		author_name=""
-	avatar_url=""
+		author_url=""
-	comment_content=""
+		avatar_url=""
-	publish_date=""
+		comment_content=""
-	sharp_corner="">
+		publish_date=""
-	</wc-comment>
+		sharp_corner="">
+		</wc-comment>
+	</wc-card>
 </template>
 
 <script type="module">

content/now.njk

@@ -4,13 +4,13 @@ eleventyNavigation:
   key: Now
   order: 4
 ---
-<article>
+<article class="post">
 <h1>Now: What’s Been Going on Lately?</h1>
 {% set now = collections.now | last %}
 <h2>{{ now.data.title }}</h2>
 {{ now.content | safe }}
-<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
 </article>
+<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
 
 {% set postsCount = collections.now | removeMostRecent | length %}
 {% if postsCount > 1 %}

public/css/index.css

@@ -18,10 +18,9 @@
 	--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
 	--font-variation-ui: "wght" 500;
 	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
-	--meta-font-family: var(--font-family-ui);
+	--meta-font-family: "Fraunces", serif;
-	--meta-font-size: var(--step--2);
+	--meta-font-size: var(--step--1);
 	--meta-font-style: normal;
-	--meta-font-variation-settings: var(--font-variation-ui);
 	--ui-letter-spacing: calc(var(--space-3xs) * 0.5);
 }
 
@@ -123,12 +122,13 @@
 	/* Web Component Tokens */
 	--wc-card-background-color: var(--card-color);
 	--wc-card-border-radius: var(--border-radius);
+	--wc-card-margin: 0 0 var(--space-s) 0;
 	--wc-card-box-shadow: var(--box-shadow);
 	--wc-link-color: var(--text-color);
 	--wc-link-decoration-color: var(--contrast-color);
 	--wc-link-decoration-thickness: var(--link-decoration-thickness);
-	--wc-comment-text-margin: auto auto auto 4rem;
+	--wc-comment-text-margin: var(--space-xs) 0 0 0;
-	--wc-profile-pic-size: 3rem;
+	--wc-profile-pic-size: var(--space-l);
 	--wc-profile-pic-border-radius: 10rem;
 }
 
@@ -221,6 +221,10 @@ section {
 	display: grid;
 	grid-column: 1 / span 12;
 }
+::selection {
+	background: var(--contrast-color);
+	color: var(--background-color);
+}
 .page-block {
 	grid-column: 1 / span 12;
 	font-size: var(--step-1);
@@ -265,13 +269,13 @@ h1, h2, h3 {
 h1 {
 	font-family: var(--font-family-headline);
 	font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
-	font-size: var(--step-6);
+	font-size: var(--step-5);
 	font-style: normal;
-	line-height: calc(var(--step-6) * 0.25 + var(--step-6));
+	line-height: calc(var(--step-5) * 0.25 + var(--step-5));
 }
 h2 {
-	font-size: var(--step-3);
+	font-size: var(--step-2);
-	font-variation-settings: "opsz" 50, "wght" 300, "SOFT" 60, "WONK" 1;
+	font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1;
 	padding-bottom: var(--space-l);
 	padding-top: var(--space-xl);
 }
@@ -402,14 +406,13 @@ wc-comment::part(author-link), wc-toot::part(author-link) {
 	text-decoration: none;
 }
 wc-comment::part(main) {
-	margin-bottom: var(--space-l);
+	padding: var(--space-m);
 }
 wc-comment::part(publish-date), wc-toot::part(publish-date) {
 	font-family: var(--meta-font-family);
 	font-size: var(--meta-font-size);
 	font-style: var(--meta-font-style);
 	font-variation-settings: var(--font-variation-settings);
-	margin-top: -.25rem;
 }
 wc-toot::part(main) {
 	color: white;
@@ -573,7 +576,7 @@ nav ul {
 .postlist-date,
 .postlist-item:before {
 	color: var(--color-gray-90);
-	font-size: var(--step--1); /* 13px /16 */
+	font-size: var(--meta-font-size); /* 13px /16 */
 }
 .postlist-date {
 	word-spacing: -0.5px;
@@ -673,8 +676,18 @@ a.post-tag:hover {
 
 /* Post Metadata */
 .post-metadata {
+	display: flex;
+	flex-flow: row nowrap;
 	padding: var(--space-m) 0 var(--space-l) 0;
 }
+
+.post-metadata-copy {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	padding-left: var(--space-s);
+}
+
 .post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata {
 	display: flex;
 	flex-flow: row wrap;
@@ -691,6 +704,11 @@ a.post-tag:hover {
 	padding-left: .15rem;
 }
 
+.profilePic:not(.links-container > img.profilePic) {
+	width: var(--space-xl);
+	border-radius: 100%;
+}
+
 /* Direct Links / Markdown Headers */
 a.header-anchor {
 	font-style: normal;
@@ -719,6 +737,12 @@ article.post {
 	container: article / inline-size;
 }
 
+/* Adds fleuron to article end */
+article.post > p:not(blockquote > p):last-child:after {
+	content: "\2766";
+	display: inline;
+	font-size: var(--step-1);
+}
 /* Utilities */
 .grid-container {
 	max-width: var(--grid-max-width);

public/js/webComponents/card.js

@@ -10,6 +10,7 @@ template.innerHTML = `
 		display: flex;
 		flex-flow: row nowrap;
 		justify-content: flex-start;
+		margin: var(--wc-card-margin);
 		padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
 		width: 100%;
 	}

public/js/webComponents/profilePic.js

@@ -3,9 +3,9 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
 #profilePic {
-	border-radius: var(--wc-profile-pic-border-radius);
+border-radius: var(--wc-profile-pic-border-radius);
-	width: var(--wc-profile-pic-size);
+width: var(--wc-profile-pic-size);
-	height: var(--wc-profile-pic-size);
+height: var(--wc-profile-pic-size);
 }
 </style>