update main template and add nav menu

configuration/configuration.txt

@@ -16,6 +16,7 @@ Landing page template: Landing Page Template
 
 Separator:  · 
 // Navigation: about, another-page, <a href="https://example.com">Example</a>, [Example](https://example.com)
+Navigation: <a href="https://death.id.au/>Home</a>, <a href="https://death.id.au/now>Now</a>, <a href="https://deathau.weblog.lol>Blog</a>, <a href="https://death.id.au/CV>CV</a>
 Files path: /files/
 Landing page post count: 8
 Landing page post length: 100 words

configuration/template.html

@@ -20,7 +20,9 @@
 	<aside class="post-info">
 		<a href="{location}"><i class="fa-solid fa-clock"></i> <time class="dt-published" datetime="{date}">{date}</time></a>
 	</aside>
+	<i data-emoji="{emoji}"></i>
 	{body}
+	<aside class="post-info"><a href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside>
 	<aside class="post-tags">
 		{tags}
 	</aside>

weblog/B0. Template/styles.css.md

@@ -28,14 +28,17 @@ Location: /styles.css
   --font-em-weight: 400;
 
   --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23888' flood-opacity='.5' stdDeviation='1'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
-	--shadow: 1px 2px 0.5em 1px rgba(17,17,17,0.2)
+  --shadow: 1px 2px 0.5em 1px rgba(17, 17, 17, 0.2)
 }
 
 @media (prefers-color-scheme: light) {
   html {
     filter: invert(1) hue-rotate(180deg);
   }
-	img,svg,video {
+
+  img,
+  svg,
+  video {
     filter: invert(1) hue-rotate(180deg);
   }
 }
@@ -53,7 +56,8 @@ body {
   background: var(--background);
 }
 
-article, main.page {
+article,
+main.page {
   display: block;
   max-width: 42em;
   border-radius: 1em;
@@ -73,14 +77,11 @@ article, main.page {
 .post-info {
   margin-top: -1rem;
   margin-right: -1rem;
-	width:100%;
+  width: 100%;
 }
 
-.post-info+h1 {
+.post-info,
-	/*max-width: calc(100% - 4rem - 2em);*/
+.post-tags {
-}
-
-.post-info, .post-tags {
   font-size: 85%;
   color: var(--accent);
   text-align: right;
@@ -123,18 +124,41 @@ iframe {
   font-weight: var(--font-em-weight);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-head);
   font-weight: var(--font-head-weight);
   margin: 1rem 0;
 }
 
-h1 { font-size: 3em; line-height: 1em; }
+h1 {
-h2 { font-size: 2em; }
+  font-size: 3em;
-h3 { font-size: 1.5em; }
+  line-height: 1em;
-h4 { font-size: 1.17em; }
+}
-h5 { font-size: 1em; }
+
-h6 { font-size: .83em; }
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.17em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+h6 {
+  font-size: .83em;
+}
 
 iframe {
   max-width: 100%;
@@ -149,11 +173,12 @@ iframe {
 
 [data-emoji]::before {
   content: attr(data-emoji);
-	font-stye: normal;
 }
 
-[data-emoji='{emoji}'], [href='{status_url}'], [href='{external_url}'] {
+[data-emoji='{emoji}'],
-	display:none;
+[href='{status_url}'],
+[href='{external_url}'] {
+  display: none;
 }
 
 
@@ -176,11 +201,14 @@ header nav li a {
   margin-right: 1em;
 }
 
-p, li {
+p,
+li {
   line-height: 160%;
 }
 
-header, main, footer {
+header,
+main,
+footer {
   max-width: 60em;
   margin: 2em auto;
   padding: 0 1em;
@@ -196,10 +224,21 @@ footer p {
   text-align: center;
 }
 
-a:link { color: var(--link); }
+a:link {
-a:visited { color: var(--link); }
+  color: var(--link);
-a:hover { color: var(--link); }
+}
-a:active { color: var(--link); }
+
+a:visited {
+  color: var(--link);
+}
+
+a:hover {
+  color: var(--link);
+}
+
+a:active {
+  color: var(--link);
+}
 
 .tag {
   background: var(--accent);
@@ -225,7 +264,8 @@ code {
   word-wrap: break-word;
 }
 
-pre, code {
+pre,
+code {
   font-family: var(--font-code);
   font-weight: var(--font-code-weight);
   font-size: 90%;
@@ -248,7 +288,8 @@ table {
   border-collapse: collapse;
 }
 
-td, th {
+td,
+th {
   padding: .75em;
   text-align: left;
   border: 1px solid var(--accent);