Styling updates; Add author image to posts

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

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-size: var(--step--2);
+	--meta-font-family: "Fraunces", serif;
+	--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-profile-pic-size: 3rem;
+	--wc-comment-text-margin: var(--space-xs) 0 0 0;
+	--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-variation-settings: "opsz" 50, "wght" 300, "SOFT" 60, "WONK" 1;
+	font-size: var(--step-2);
+	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);
-	width: var(--wc-profile-pic-size);
-	height: var(--wc-profile-pic-size);
+border-radius: var(--wc-profile-pic-border-radius);
+width: var(--wc-profile-pic-size);
+height: var(--wc-profile-pic-size);
 }
 </style>