Draft test 1.

If no issue Pull Request

Signed-off-by: Marc Pervaz Boocha <mboocha@sudomsg.xyz>

9 files changed, 250 insertions, 223 deletions

diff --git a/src/about.md b/src/about.md
index 207b2e3..8dda981 100644
--- a/src/about.md
+++ b/src/about.md
@@ -6,4 +6,10 @@ tags:
 ---
 # About Me
 
-This Marc Pervaz Boocha
+## {{ metadata.author.name }}
+
+!["A Photo of me]({{ "/favicon/512.png" | url}}){.side}
+
+Email: <{{ metadata.author.email }}>
+
+Github: <{{ metadata.author.github }}>
diff --git a/src/assets/index.css b/src/assets/index.css
index bd17057..db51dc8 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,81 +1,126 @@
 :root {
-    font-family: serif;
+  --fg: rgb(0 0 0);
+  --bg: rgb(255 255 255);
+  --brand: rgb(139 0 0);
+
+  @media screen and (prefers-color-scheme: dark) {
+    --bg: rgb(0 0 0);
+    --fg: rgb(255 255 255);
+    --brand: rgb(255 0 0);
+  }
 }
 
-@media screen {
-    body {
-        max-width: 920px;
-        min-height: 98vh;
-        display: flex;
-        flex-direction: column;
-        margin: auto;
-        padding: 0.5rem;
-    }
-    main {
-        flex-grow: 1;
-    }
-    * :any-link {
-        color: inherit;
-        text-decoration: underline;
-    }
-    * :any-link:hover,
-    * :any-link:active {
-        font-style: italic;
-    }
-    .topnav {
-        background: rgb(139, 0, 0);
+body {
+  font-family: serif;
+  background-color: var(--bg);
+  color: var(--fg);
+
+  @media screen {
+    max-width: 920px;
+    min-height: calc(100vh - 1rem);
+    margin: 0.5rem auto;
+    display: grid;
+    grid-template: "head" auto "main" auto "footer" 1fr / auto;
+
+    & > header {
+      background-color: var(--brand);
+      font-weight: bold;
+      color: rgb(255 255 255);
+      padding: 1rem;
+      grid-area: head;
+
+      & *:any-link {
         text-decoration: none;
-        font-weight: bold;
-        color: rgb(255, 255, 255);
-        padding: 1rem;
-        font-size: 1rem;
+      }
     }
-    #nav-toogle,
-    .topnav a {
-        margin-right: 1rem;
-        padding-left: 0rem;
-        padding-right: 0rem;
-    }
-    .topnav :any-link,
-    .topnav :any-link:hover {
+
+    & > footer {
+      background-color: var(--brand);
+      color: rgb(255 255 255);
+      padding: 0.5rem;
+      align-self: end;
+      grid-area: footer;
+
+      & *:any-link {
         text-decoration: none;
+      }
+
+      & > main {
+        grid-area: main;
+      }
     }
-    @media (max-width: 450px) {
-        #nav-toogle,
-        .topnav a {
-            display: block;
-            margin: auto;
-            text-align: center;
-            padding: 16px;
-        }
-        .topnav .navlinks {
-            display: none;
-        }
-        .topnav .navlinks.navopen {
-            display: block
-        }
+  }
+}
+
+* :any-link {
+  color: inherit;
+  text-decoration: underline;
+
+  @media screen {
+    &:is(:hover, :active) {
+      font-style: italic;
     }
-    .err {
-        color: rgb(139, 0, 0);
+  }
+}
+
+a[href^="mailto:"]::after {
+  content: "📧";
+}
+
+.err {
+  color: var(--brand);
+}
+
+aside {
+  width: 40%;
+  padding: 0.5rem;
+  margin-left: 0.5rem;
+  float: right;
+  background-color: var(--brand);
+  color: rgb(255 255 255);
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+
+  &.side {
+    width: 40%;
+    float: right;
+
+    @media screen and (max-width: 450px) {
+      width: 100%;
+      float: none;
     }
-    @media (prefers-color-scheme: dark) {
-         :root {
-            background: rgb(0, 0, 0);
-            color: rgb(255, 255, 255);
-        }
-        #menu nav {
-            background: rgb(255, 0, 0);
-        }
-        .err {
-            color: rgb(255, 0, 0);
+  }
+}
+
+@media screen {
+  nav > a {
+    margin-right: 1rem;
+    padding-left: 0;
+    padding-right: 0;
+
+    @media (max-width: 450px) {
+      display: block;
+      margin: auto;
+      text-align: center;
+      padding: 16px;
+
+      .navlinks {
+        display: none;
+
+        .navopen {
+          display: block;
         }
+      }
     }
+  }
 }
 
 @media print {
-    header,
-    nav,
-    footer {
-        display: none;
-    }
-}
\ No newline at end of file
+  header,
+  footer {
+    display: none;
+  }
+}
diff --git a/src/assets/manifest.njk b/src/assets/manifest.njk
index 350c7af..cbdefea 100644
--- a/src/assets/manifest.njk
+++ b/src/assets/manifest.njk
@@ -14,25 +14,17 @@ permalink: /app.webmanifest
   "theme_color": "#8b0000",
   "description": "{{ metadata.description }}",
   "icons": [
-    {
-      "src": "{{ '/favicon.ico' | url }}",
-      "sizes": "any",
-      "type": "image/vnd.microsoft.icon"
-    },
-    {
-      "src": "{{ '/favicon/icon.svg' | url }}",
-      "sizes": "any",
-      "type": "image/svg+xml"
-    },
     { 
       "src": "{{ '/favicon/192.png' | url }}",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "192x192",
+      "purpose": "any"
     },
     {
-       "src": "{{ '/favicon/512.png' | url }}",
-       "type": "image/png",
-       "sizes": "512x512" 
+      "src": "{{ '/favicon/512.png' | url }}",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any"
     }
   ]
 }
diff --git a/src/assets/prism.css b/src/assets/prism.css
index 0dd88c2..110c6be 100644
--- a/src/assets/prism.css
+++ b/src/assets/prism.css
@@ -1,57 +1,75 @@
 code[class*="language-"],
 pre[class*="language-"] {
-    color: rgb(248, 248, 242);
-    background: none;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    font-family: monospace;
-    font-size: 1em;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-    tab-size: 4;
-    hyphens: none;
-}
+  color: rgb(248 248 242);
+  background: none;
+  text-shadow: 0 1px rgb(0 0 0 / 30%);
+  font-family: monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  tab-size: 4;
+  hyphens: none;
 
+  @media screen and (prefers-color-scheme: dark) {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      color: #000;
+      text-shadow: 0 1px #fff;
+    }
+  }
+}
 
 /* Code blocks */
 
 pre[class*="language-"] {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto;
-    border-radius: 0.3em;
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
 }
 
-:not(pre)>code[class*="language-"],
+:not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-    background: rgb(39, 40, 34);
-}
+  background: rgb(39 40 34);
 
+  @media screen and (prefers-color-scheme: dark) {
+    background: rgb(245 242 240);
+  }
+}
 
 /* Inline code */
 
-:not(pre)>code[class*="language-"] {
-    padding: .1em;
-    border-radius: .3em;
-    white-space: normal;
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: rgb(130, 146, 162);
+  color: rgb(130 146 162);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(112 128 144);
+  }
 }
 
 .token.punctuation {
-    color: rgb(248, 248, 242);
+  color: rgb(248 248 242);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(153 0 85);
+  }
 }
 
 .token.namespace {
-    opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -59,12 +77,20 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-    color: rgb(249, 38, 114);
+  color: rgb(249 38 114);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(153 0 85);
+  }
 }
 
 .token.boolean,
 .token.number {
-    color: rgb(174, 129, 255);
+  color: rgb(174 129 255);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(153 0 85);
+  }
 }
 
 .token.selector,
@@ -73,7 +99,11 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-    color: rgb(166, 226, 46);
+  color: rgb(166 226 46);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(102 153 0);
+  }
 }
 
 .token.operator,
@@ -82,94 +112,51 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-    color: rgb(248, 248, 242);
+  color: rgb(248 248 242);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(154 110 58);
+    background: rgb(255 255 255 / 50%);
+  }
 }
 
 .token.atrule,
 .token.attr-value,
 .token.function,
 .token.class-name {
-    color: rgb(230, 219, 116);
+  color: rgb(230 219 116);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(0 118 168);
+  }
 }
 
 .token.keyword {
-    color: rgb(102, 217, 239);
+  color: rgb(102 217 239);
+
+  @media screen and (prefers-color-scheme: dark) {
+    color: rgb(221 75 104);
+  }
 }
 
 .token.regex,
 .token.important {
-    color: rgb(253, 151, 31);
+  color: rgb(253 151 31);
+
+  @media screen (prefers-color-scheme: dark) {
+    color: rgb(238 153 0);
+  }
 }
 
 .token.important,
 .token.bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .token.italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-    cursor: help;
+  cursor: help;
 }
-
-@media screen and (prefers-color-scheme: dark) {
-    code[class*="language-"],
-    pre[class*="language-"] {
-        color: #000000;
-        text-shadow: 0 1px #ffffff;
-    }
-     :not(pre)>code[class*="language-"],
-    pre[class*="language-"] {
-        background: rgb(245, 242, 240);
-    }
-    .token.comment,
-    .token.prolog,
-    .token.doctype,
-    .token.cdata {
-        color: rgb(112, 128, 144);
-    }
-    .token.punctuation {
-        color: rgb(153, 153, 153);
-    }
-    .token.property,
-    .token.tag,
-    .token.boolean,
-    .token.number,
-    .token.constant,
-    .token.symbol,
-    .token.deleted {
-        color: rgb(153, 0, 85);
-    }
-    .token.selector,
-    .token.attr-name,
-    .token.string,
-    .token.char,
-    .token.builtin,
-    .token.inserted {
-        color: rgb(102, 153, 0);
-    }
-    .token.operator,
-    .token.entity,
-    .token.url,
-    .language-css .token.string,
-    .style .token.string {
-        color: rgb(154, 110, 58);
-        background: rgba(255, 255, 255, 0.5);
-    }
-    .token.atrule,
-    .token.attr-value,
-    .token.keyword {
-        color: rgb(0, 118, 168);
-    }
-    .token.function,
-    .token.class-name {
-        color: rgb(221, 75, 104);
-    }
-    .token.regex,
-    .token.important,
-    .token.variable {
-        color: rgb(238, 153, 0);
-    }
-}
\ No newline at end of file
diff --git a/src/blog.njk b/src/blog.njk
index 532d977..9bd2a05 100644
--- a/src/blog.njk
+++ b/src/blog.njk
@@ -11,7 +11,7 @@ tags:
 				<a href="{{ post.url | url }}">{{ post.data.title }}</a>
 			</h1>
 			<small>
-				<p>{{ metadata.author.name }} - {{ post.data.date | datefmt }}<p>
+				<p>{{ metadata.author.name }} - {{ post.data.date | datefmt }}</p>
 			</small>
 				<p>{{ post.data.description }}</p>
 		</article>
diff --git a/src/data/metadata.js b/src/data/metadata.js
index c8403bb..5d18f0d 100644
--- a/src/data/metadata.js
+++ b/src/data/metadata.js
@@ -3,10 +3,14 @@ module.exports = {
     url: "https://sudomsg.xyz/",
     language: "en-GB",
     description: "Messages from root",
-    feed: "/feed.xml",
+    feed: {
+        atom: "/feed.xml",
+        json: "/feed.json"
+    },
     author: {
         name: "Marc Pervaz Boocha",
         email: "mboocha@sudomsg.xyz",
+        github: "https://github.com/marcthe12",
         url: "https://sudomsg.xyz/about"
     }
 }
\ No newline at end of file
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index 66492a3..204a4f1 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -1,45 +1,46 @@
 <!DOCTYPE html>
 <html lang="en-GB">
 	<head>
-		<meta charset="utf-8">
+		<meta charset="utf-8"/>
 		<meta property="og:locale" content="en_GB"/>
 		<title>{{ title or metadata.title }}</title>
-		<meta property="og:title" content="{{ title or metadata.title }}">
-		<meta property="og:site_name" content="{{ metadata.title }}">
-		<meta name="author" content="{{ metadata.author.name }}">
-		<meta name="description" content="{{ description or metadata.description }}">
-		<meta property="og:description" content="{{ description or metadata.description }}">
-		<meta name="keywords" contents="{{ keywords }}">
-		<meta name="generator" contents="eleventy">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta name="twitter:card" content="summary"></meta>
+		<meta property="og:title" content="{{ title or metadata.title }}"/>
+		<meta property="og:site_name" content="{{ metadata.title }}"/>
+		<meta name="author" content="{{ metadata.author.name }}"/>
+		<meta name="description" content="{{ description or metadata.description }}"/>
+		<meta property="og:description" content="{{ description or metadata.description }}"/>
+		<meta name="keywords" contents="{{ keywords }}"/>
+		<meta name="generator" contents="eleventy"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1"/>
+		<meta name="twitter:card" content="summary"/>
 		<meta property="og:url" content="{{ page.url | url | absoluteUrl(metadata.url) }}"/>
 		<link rel="canonical" href="{{ page.url | url | absoluteUrl(metadata.url) }}"/>
-		<link rel="alternate" href="{{ metadata.feed | url }}" type="application/atom+xml" title="{{ metadata.title }}">
-		<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any">
-		<link rel="icon" href="{{ '/favicon/icon.svg' | url }}" type="image/svg+xml">
-		<link rel="apple-touch-icon" href="{{ '/favicon/192.png' | url }}">
-		<link rel="manifest" href="{{ '/app.webmanifest' | url }}" crossorigin="use-credentials">
-		<meta name="theme-color" content"#8b0000">
+		<link rel="alternate" href="{{ metadata.feed.atom | url }}" type="application/atom+xml" title="{{ metadata.title }}"/>
+		<link rel="alternate" href="{ metadata.feed.json | url }" type="application/feed+json" title="{{ metadata.title }}"/>
+		<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any"/>
+		<link rel="icon" href="{{ '/favicon/icon.svg' | url }}" type="image/svg+xml"/>
+		<link rel="apple-touch-icon" href="{{ '/favicon/192.png' | url }}"/>
+		<link rel="manifest" href="{{ '/app.webmanifest' | url }}" crossorigin="use-credentials"/>
+		<meta name="theme-color" content="#8b0000"/>
 		<link as="style" href="{{ '/index.css' | url }}" rel="stylesheet"/>
 		{% if syntaxhighlight %}<link as="style" href="{{ '/prism.css' | url }}" rel="stylesheet"/>{% endif %}
 		<script type="module" src="{{ '/index.js' | url }}"></script>
 	</head>
 	<body>
-		<header>
-			<nav class="topnav">
-				<a href="#" id="nav-toogle">Sudomsg</a>
-				{% for nav in navigator %}
-					<a class="navlinks" href="{{ nav.url | url }}">{{ nav.title }}</a>
-				{% endfor %}
-			</nav>
-		</header>
-		<main>
-			{{ content | safe }}
-		</main>
-		<footer>
-			Subscribe: <a href="{{ '/feed.xml' | url }}" >RSS</a>
-			<a href="{{ '/feed.json' | url }}" >JSON</a>
-		</footer>
+			<header>
+				<nav>
+					<a href="#" id="nav-toogle">Sudomsg</a>
+					{% for nav in navigator %}
+						<a class="navlinks" href="{{ nav.url | url }}">{{ nav.title }}</a>
+					{% endfor %}
+				</nav>
+			</header>
+			<main>
+				{{ content | safe }}
+			</main>
+			<footer>
+			Subscribe: <a href="{{ metadata.feed.atom | url }}" >RSS</a>
+				<a href="{{ metadata.feed.json | url }}" >JSON</a>
+			</footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/layouts/post.njk b/src/layouts/post.njk
index 70e3be8..f8a4aee 100644
--- a/src/layouts/post.njk
+++ b/src/layouts/post.njk
@@ -6,7 +6,7 @@ tags:
 <article>
 	<h1>{{ title }}</h1>
 	<small>
-		<time datetime="{{ date | datefmt }}">{{ date | datefmt }}</time> - {{ metadata.author.name }}
+		<time datetime="{{ date | datefmt }}">{{ date | datefmt }}</time> - <a href="{{ metadata.author.url }}">{{ metadata.author.name }}</a>
 	</small>
 	{{ content | safe }}
-</article>
+</article>
\ No newline at end of file
diff --git a/src/post/hello_world.md b/src/post/hello_world.md
deleted file mode 100644
index 741c490..0000000
--- a/src/post/hello_world.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Hello World
-description: The First Post to the World
-date: 2021-09-12
----
-This is the first post on my blog.
-
-Eleventy is super fresh init.