14 files changed, 94 insertions, 23 deletions
diff --git a/_includes/base.njk b/_includes/base.njk
index e78e558..e846e0b 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ "/assets/fonts/KodeMono.css" | url}}">
     <link rel="stylesheet" href="{{ "/assets/fonts/JetBrains.css" | url}}">
     <link rel="stylesheet" href="{{ "/assets/css/main.css" | url}}">
     <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
@@ -14,11 +15,14 @@
     {% endif %}
     {% include "./meta.njk" %}
 
-    
+    <link rel="shortcut icon" href="{{ "/assets/images/favicon.png" | url}}" type="image/png">
 </head>
 <body>
     <header>
-        <a href="{{"/" | url}}"><h1>{{ site.title }}</h1></a>
+        <a href="{{"/" | url}}" class="logo">
+            {{ "/assets/images/logo.svg" | embedSVG | safe }}
+            <h1>{{ site.title }}</h1>
+        </a>
         <button id="menu-open" aria-label="Navmenu open" class="mobile-menu">[OPEN]</button>
         {% include "nav.njk" %}
     </header>
diff --git a/_includes/meta.njk b/_includes/meta.njk
index da25a9b..7d3fa8e 100644
--- a/_includes/meta.njk
+++ b/_includes/meta.njk
@@ -9,10 +9,10 @@
 <meta name="twitter:title" content="{{ title }}" />
 <meta name="twitter:description" content="{{ description }}" />
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image" content="{% ogImage "/../_includes/og-image.og.njk", { title: t } %}" />
+<meta name="twitter:image" content="{% ogImage "/../_includes/og-image.og.njk", { title: t, siteTitle:site.title } %}" />
 <meta name="twitter:image:width" content="1200">
 <meta name="twitter:image:height" content="630">
-<meta property="og:image" content="{% ogImage "/../_includes/og-image.og.njk", { title: t } %}" />
+<meta property="og:image" content="{% ogImage "/../_includes/og-image.og.njk", { title: t, siteTitle:site.title } %}" />
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
 <meta property="og:image:type" content="image/png">
 \ No newline at end of file
diff --git a/_includes/og-image.og.njk b/_includes/og-image.og.njk
index 6d3edb0..ab4fbe2 100644
--- a/_includes/og-image.og.njk
+++ b/_includes/og-image.og.njk
@@ -4,7 +4,7 @@
         height: 100%;
         display: flex;
 
-        font-family: "JetBrains Mono";
+        font-family: "Kode Mono";
         flex-direction: column;
         justify-content: flex-end;
         background: #171715;
@@ -20,11 +20,12 @@
     .site {
         color: #efefd2;
         font-size: 20px;
+        display: contents;
     }
 </style>
 
 <div class="root">
-    <div class="site">/home/spellis{{ siteTitle }}</div>
+    <div class="site">{{ siteTitle }}</div>
 
     <h1 class="title">{{ title }}</h1>
 </div>
 \ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index b558868..431553d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -10,12 +10,26 @@ body {
 a {
     color: var(--text);
     padding: 0.2rem;
-    border-radius: 0.1rem;
+    clip-path: polygon(0% 0,0% calc(100% - 0.2rem), 0.2rem 100%,100% 100%, 100% 0%);
+    border-radius: 0rem;
     text-decoration: none;
     position: relative;
     isolation: isolate;
 }
 
+a[target="_blank"]::before {
+    content: "";
+    background-color: currentColor;
+    clip-path: polygon(0% 0, 100% 100%, 100% 0%);
+    position: absolute;
+    top: 0;
+    width: 0.4rem;
+    height: 0.4rem;
+    right: 0;
+    z-index: -1;
+}
+
+
 a::after {
     content: "";
     background-color: var(--text);
@@ -23,13 +37,14 @@ a::after {
     width: 100%;
     height: 0.2rem;
     bottom: 0;
-    border-radius: 0.1rem 0.1rem;
+    border-radius: 0;
     left: 0;
     z-index: -1;
 }
 a.active,
 a:hover {
     color: var(--base);
+    clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%);
     background-color: var(--text);
 }
 
@@ -45,6 +60,16 @@ header h1 {
     padding: 0;
     margin: 0;
 }
+header .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-inline: 0.5rem;
+}
+header .logo svg {
+    height: 2rem;
+    width: auto;
+}
 
 nav ul {
     padding: 0;
@@ -79,7 +104,8 @@ code {
     background-color: var(--code);
     color: var(--code-text);
     padding: 0.2rem;
-    border-radius: 0.1rem;
+    border-radius: 0;
+    clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%);
 }
 footer {
     max-width: 80ch;
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 4feaf75..c3cac62 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -1,16 +1,12 @@
-
 html {
-    --base: #171715;
-    --base-2: #20201d;
-    --base-3: #242420;
-    --text: #efefd2;
-    
-    --code: #424237;
-    --code-text: #efefd2;
-
-
-    font-family: "JetBrains Mono", monospace;
+    --base: #151617;
+    --base-2: #1d2123;
+    --base-3: #2a3039;
+    --text: #d2e7efff;
+    --code: #1d2123;
+    --code-text: #abd1de;
+    font-family: "Kode Mono", monospace;
 }
 * {
-    font-family: "JetBrains Mono", monospace;
+    font-family: "Kode Mono", monospace;
 }
 \ No newline at end of file
diff --git a/assets/fonts/KodeMono.css b/assets/fonts/KodeMono.css
new file mode 100644
index 0000000..790b69b
--- /dev/null
+++ b/assets/fonts/KodeMono.css
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: "Kode Mono";
+    font-weight: normal;
+    font-style: normal;
+    src:
+        local("Kode Mono"),
+        url("./KodeMono/Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Kode Mono";
+    font-weight: bold;
+    font-style: normal;
+    src:
+        local("Kode Mono"),
+        url("./KodeMono/Bold.woff2") format("woff2");
+}
+\ No newline at end of file
diff --git a/assets/fonts/KodeMono/Bold.ttf b/assets/fonts/KodeMono/Bold.ttf
new file mode 100644
index 0000000..4868581
--- /dev/null
+++ b/assets/fonts/KodeMono/Bold.ttf
diff --git a/assets/fonts/KodeMono/Bold.woff2 b/assets/fonts/KodeMono/Bold.woff2
new file mode 100644
index 0000000..8c0dc10
--- /dev/null
+++ b/assets/fonts/KodeMono/Bold.woff2
diff --git a/assets/fonts/KodeMono/Regular.ttf b/assets/fonts/KodeMono/Regular.ttf
new file mode 100644
index 0000000..a646cc8
--- /dev/null
+++ b/assets/fonts/KodeMono/Regular.ttf
diff --git a/assets/fonts/KodeMono/Regular.woff2 b/assets/fonts/KodeMono/Regular.woff2
new file mode 100644
index 0000000..d770bda
--- /dev/null
+++ b/assets/fonts/KodeMono/Regular.woff2
diff --git a/assets/images/favicon.png b/assets/images/favicon.png
new file mode 100644
index 0000000..9ca618d
--- /dev/null
+++ b/assets/images/favicon.png
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
new file mode 100644
index 0000000..c812e93
--- /dev/null
+++ b/assets/images/logo.svg
@@ -0,0 +1,9 @@
+<svg
+   viewBox="0 0 8.210102 11.854794"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+   <path style="fill:currentColor"
+      d="M 0,9.38e-5 V 1.437139 a 1.4440142,1.4440142 0 0 1 0,0.00703 c 0,2.8881221 1.520798,4.0808931 3.549877,5.8077291 1.369481,1.165505 2.970532,2.574299 3.866716,4.6028159 h 0.79351 v -1.433092 c 0,-0.0039 0,-0.0077 0,-0.01156 C 8.206003,7.5302861 6.686602,6.3385131 4.660225,4.6139601 3.288244,3.4463431 1.683991,2.0344703 0.7888061,0 Z m 4.035486,0 C 4.666444,0.8513706 5.538221,1.56894 6.531863,2.4145916 7.074333,2.8762621 7.653148,3.3761221 8.210103,3.9375611 V 9.38e-5 Z M 0,7.9284681 V 11.854794 H 4.166287 C 3.535971,11.008361 2.66749,10.293417 1.678162,9.4514371 1.135676,8.9897671 0.5569082,8.4899071 0,7.9284681 Z" />
+</svg>
+\ No newline at end of file
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 5bf4a46..2350176 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -4,6 +4,7 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import EleventyPluginOgImage from 'eleventy-plugin-og-image';
 import fs from "fs"
 import { OgImage } from 'eleventy-plugin-og-image/og-image';
+import path from "path";
 
 export class CustomOgImage extends OgImage {
   async shortcodeOutput() {
@@ -11,9 +12,14 @@ export class CustomOgImage extends OgImage {
   }
 }
 
+
+
 export default function(eleventyConfig) {
 	// Order matters, put this at the top of your configuration file.
-
+  eleventyConfig.addFilter("embedSVG", function(filePath) {
+    const fullPath = path.join("./", filePath);
+    return fs.readFileSync(fullPath, "utf-8");
+  });
   eleventyConfig.addNunjucksFilter("date", (dateObj, formatString = 'MM.dd.yyyy') => format(dateObj, formatString))
 
   eleventyConfig.addCollection("navItems", function (collectionsApi) {
@@ -41,6 +47,18 @@ export default function(eleventyConfig) {
           weight: 800,
           style: 'normal',
         },
+        {
+          name: 'Kode Mono',
+          data: fs.readFileSync('./assets/fonts/KodeMono/Regular.ttf'),
+          weight: 400,
+          style: 'normal',
+        },
+        {
+          name: 'Kode Mono',
+          data: fs.readFileSync('./assets/fonts/KodeMono/Bold.ttf'),
+          weight: 800,
+          style: 'normal',
+        },
       ],
     },
     OgImage: CustomOgImage,
diff --git a/siteconfig.mjs b/siteconfig.mjs
index 16f55a2..5d205dc 100644
--- a/siteconfig.mjs
+++ b/siteconfig.mjs
@@ -1,5 +1,5 @@
 export const config = {
-    siteTitle: "/home/spelis",
+    siteTitle: "Spelis",
 
 
     footerLinks: [