summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJan Palma <honzik@janpalma.cz>2026-03-14 16:08:49 +0100
committerJan Palma <honzik@janpalma.cz>2026-03-14 16:08:49 +0100
commit90d1d669f49c6e93fdbebdd52f20a22c3ba962ed (patch)
tree16403ee221c12ea99532d2916059f90d16b279fc
parentb7e36a6d55629f13a1e42e1b46993c1b76319d06 (diff)
downloadspelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar.gz
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar.bz2
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar.lz
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar.xz
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.tar.zst
spelis-web-90d1d669f49c6e93fdbebdd52f20a22c3ba962ed.zip
New design
Diffstat
-rw-r--r--_includes/base.njk8
-rw-r--r--_includes/meta.njk4
-rw-r--r--_includes/og-image.og.njk5
-rw-r--r--assets/css/main.css32
-rw-r--r--assets/css/theme.css20
-rw-r--r--assets/fonts/KodeMono.css17
-rw-r--r--assets/fonts/KodeMono/Bold.ttfbin0 -> 44872 bytes
-rw-r--r--assets/fonts/KodeMono/Bold.woff2bin0 -> 16904 bytes
-rw-r--r--assets/fonts/KodeMono/Regular.ttfbin0 -> 44884 bytes
-rw-r--r--assets/fonts/KodeMono/Regular.woff2bin0 -> 16900 bytes
-rw-r--r--assets/images/favicon.pngbin0 -> 3383 bytes
-rw-r--r--assets/images/logo.svg9
-rw-r--r--eleventy.config.mjs20
-rw-r--r--siteconfig.mjs2
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files 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 @@
+<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: [
generated by cgit (orig) 2026-07-09 06:32:31 +0000