From 90d1d669f49c6e93fdbebdd52f20a22c3ba962ed Mon Sep 17 00:00:00 2001 From: Jan Palma Date: Sat, 14 Mar 2026 16:08:49 +0100 Subject: New design --- _includes/base.njk | 8 ++++++-- _includes/meta.njk | 4 ++-- _includes/og-image.og.njk | 5 +++-- assets/css/main.css | 32 +++++++++++++++++++++++++++++--- assets/css/theme.css | 20 ++++++++------------ assets/fonts/KodeMono.css | 17 +++++++++++++++++ assets/fonts/KodeMono/Bold.ttf | Bin 0 -> 44872 bytes assets/fonts/KodeMono/Bold.woff2 | Bin 0 -> 16904 bytes assets/fonts/KodeMono/Regular.ttf | Bin 0 -> 44884 bytes assets/fonts/KodeMono/Regular.woff2 | Bin 0 -> 16900 bytes assets/images/favicon.png | Bin 0 -> 3383 bytes assets/images/logo.svg | 9 +++++++++ eleventy.config.mjs | 20 +++++++++++++++++++- siteconfig.mjs | 2 +- 14 files changed, 94 insertions(+), 23 deletions(-) create mode 100644 assets/fonts/KodeMono.css create mode 100644 assets/fonts/KodeMono/Bold.ttf create mode 100644 assets/fonts/KodeMono/Bold.woff2 create mode 100644 assets/fonts/KodeMono/Regular.ttf create mode 100644 assets/fonts/KodeMono/Regular.woff2 create mode 100644 assets/images/favicon.png create mode 100644 assets/images/logo.svg 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 @@ + @@ -14,11 +15,14 @@ {% endif %} {% include "./meta.njk" %} - +

+ + {{ "/assets/images/logo.svg" | embedSVG | safe }} +

+ {% include "nav.njk" %}

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 @@ - + - + \ 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; }

/home/spellis{{ siteTitle }}

\ 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 Binary files /dev/null and b/assets/fonts/KodeMono/Bold.ttf differ diff --git a/assets/fonts/KodeMono/Bold.woff2 b/assets/fonts/KodeMono/Bold.woff2 new file mode 100644 index 0000000..8c0dc10 Binary files /dev/null and b/assets/fonts/KodeMono/Bold.woff2 differ diff --git a/assets/fonts/KodeMono/Regular.ttf b/assets/fonts/KodeMono/Regular.ttf new file mode 100644 index 0000000..a646cc8 Binary files /dev/null and b/assets/fonts/KodeMono/Regular.ttf differ diff --git a/assets/fonts/KodeMono/Regular.woff2 b/assets/fonts/KodeMono/Regular.woff2 new file mode 100644 index 0000000..d770bda Binary files /dev/null and b/assets/fonts/KodeMono/Regular.woff2 differ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 0000000..9ca618d Binary files /dev/null and b/assets/images/favicon.png differ 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 @@ + \ 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: [ -- cgit v1.3-7-ge9ab

{{ site.title }}

{{ site.title }}

{{ title }}