Skip to content

Commit 2974251

Browse files
cb341claude
cb341
and
claude
committed
Add 404 page, complete Open Graph metadata, shared stylesheet
- og:title/url/type/site_name/description + twitter:card on every page, avatar fallback og:image - base.html reads site.url/site.title from config instead of literals - house style extracted to _includes/shared.css, published at /assets/shared.css for reuse by the utils repo - skip-to-content link Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent b9e8e64 commit 2974251

4 files changed

Lines changed: 100 additions & 73 deletions

File tree

‎404.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: "404"
3+
permalink: /404.html
4+
sitemap: false
5+
---
6+
7+
<h1>404</h1>
8+
9+
<p>No page here. Maybe it moved, maybe it never existed.</p>
10+
11+
<p><a href="/">Home</a>, <a href="/sitemap/">sitemap</a>, or <a href="/blog/">blog</a>.</p>

‎_includes/shared.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* ===== shared house style for cb341.dev + utils =====
2+
Canonical source: cb341.github.io/_includes/shared.css
3+
Published at /assets/shared.css (hot-linked by github.com/cb341/utils).
4+
Site inlines it into base.html via a Liquid include tag.
5+
Tokens + element defaults only — layout containers stay per-project.
6+
Values are the original cb341.dev palette; utils overrides its own
7+
tokens (line/muted/code-bg/…) in its style.css. */
8+
9+
:root {
10+
color-scheme: light; /* keep native form controls light even in OS dark mode */
11+
--bg: #fff;
12+
--fg: #1c1c1a;
13+
--line: #e6e6e2;
14+
--muted: #bbb;
15+
--code-bg: #f1f1ee;
16+
--accent: #3a5a8c; /* used by utils; site links stay browser default */
17+
--accent-bg: #f3f3ef;
18+
--border: var(--line); /* legacy alias used by tool JS */
19+
}
20+
21+
html { overflow-y: scroll; } /* stable scrollbar so width never shifts */
22+
body {
23+
background: var(--bg);
24+
color: var(--fg);
25+
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
26+
font-size: 15px;
27+
}
28+
29+
blockquote { margin: 1.2em 2em; font-style: italic; }
30+
31+
hr { border: 0; border-top: 1px solid var(--line); margin: .6em 0; }
32+
33+
table { width: 100%; border-collapse: collapse; }
34+
th, td { padding: .1em .5em; border: 0; text-align: left; }
35+
tr { border-top: 1px solid black; }
36+
@media (max-width: 600px) {
37+
table { display: block; overflow-x: auto; max-width: 100%; }
38+
th, td { min-width: 9rem; }
39+
th:last-child, td:last-child { min-width: 18rem; }
40+
}
41+
42+
code {
43+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
44+
font-size: .88em;
45+
background: var(--code-bg);
46+
padding: 1px 4px;
47+
border-radius: 2px;
48+
}
49+
pre {
50+
overflow-x: auto;
51+
border: 1px dashed var(--line);
52+
padding: 10px 12px;
53+
font-size: .88em;
54+
line-height: 1;
55+
}
56+
pre code { background: transparent; padding: 0; }
57+
58+
abbr[title] { text-decoration: underline dashed; cursor: help; }

‎_layouts/base.html‎

Lines changed: 27 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
{%- assign site_url = "https://cb341.dev" -%}
1+
{%- assign site_url = site.url -%}
22
{%- assign site_name = "cb341.dev" -%}
3-
{%- assign default_title = site.title | default: "Dani Bengl - Full-Stack Developer" -%}
4-
{%- assign default_description = site.description | default: "Full-stack software developer specializing in Ruby on Rails, web applications, and modern development practices. Portfolio, blog, and projects." -%}
53
{%- if page.url == "/" -%}
64
{%- assign page_title = "Dani Bengl (cb341) - Full-Stack Developer" -%}
75
{%- elsif page.title and page.title != site_name -%}
86
{%- assign page_title = page.title | append: " | " | append: site_name -%}
97
{%- else -%}
10-
{%- assign page_title = default_title -%}
8+
{%- assign page_title = site.title -%}
9+
{%- endif -%}
10+
{%- if page.layout == "gallery" and page.description == nil -%}
11+
{%- assign page_description = page.content | markdownify | strip_html | normalize_whitespace | truncate: 160 -%}
12+
{%- else -%}
13+
{%- assign page_description = page.description | default: site.description -%}
1114
{%- endif -%}
12-
{%- assign page_description = page.description | default: default_description -%}
1315
{%- assign current_url = site_url | append: page.url -%}
14-
{%- assign social_image = site_url | append: "/assets/about/avatar.webp" -%}
16+
{%- if page.image -%}
17+
{%- assign social_image = site_url | append: page.image -%}
18+
{%- else -%}
19+
{%- assign social_image = site_url | append: "/assets/about/avatar.webp" -%}
20+
{%- endif -%}
1521
<!DOCTYPE html>
1622
<html lang="en">
1723
<head>
@@ -24,16 +30,16 @@
2430
<link rel="canonical" href="{{ current_url | escape }}">
2531
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
2632
<link rel="alternate" type="application/rss+xml" title="cb341.dev RSS Feed" href="/rss.xml">
27-
{% if page.layout == "gallery" %}
28-
{%- assign gallery_description = page.description | default: page.content | markdownify | strip_html | normalize_whitespace | truncate: 160 -%}
29-
<meta property="og:description" content="{{ gallery_description | escape }}">
30-
{%- endif %}
31-
{% if page.image %}
32-
<meta property="og:image" content="{{ site_url }}{{ page.image | escape }}">
33+
<meta property="og:site_name" content="{{ site_name }}">
34+
<meta property="og:title" content="{{ page_title | escape }}">
35+
<meta property="og:description" content="{{ page_description | escape }}">
36+
<meta property="og:url" content="{{ current_url | escape }}">
37+
<meta property="og:type" content="{% if page.collection == 'posts' %}article{% else %}website{% endif %}">
38+
<meta property="og:image" content="{{ social_image | escape }}">
3339
{%- if page.alt %}
3440
<meta property="og:image:alt" content="{{ page.alt | escape }}">
3541
{%- endif %}
36-
{%- endif %}
42+
<meta name="twitter:card" content="{% if page.image %}summary_large_image{% else %}summary{% endif %}">
3743
<script type="application/ld+json">
3844
{
3945
"@context": "https://schema.org",
@@ -79,13 +85,13 @@
7985
</script>
8086
{%- endif %}
8187
<style>
88+
{% include shared.css %}
89+
90+
/* site-specific below; shared tokens/elements come from _includes/shared.css */
8291
html, body { margin: 0; padding: 0; }
83-
body {
84-
overflow-y: scroll;
85-
color: #1c1c1a;
86-
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
87-
font-size: 15px;
88-
}
92+
93+
.skip-link { position: absolute; left: -999px; }
94+
.skip-link:focus { position: static; }
8995

9096
.wrapper {
9197
max-width: 67ch;
@@ -105,62 +111,9 @@
105111
margin: .25em 0 1em 1.25em;
106112
border-radius: 4px;
107113
}
108-
blockquote { margin: 1.2em 2em; font-style: italic; }
109-
110-
hr { border: 0; border-top: 1px solid #e6e6e2; margin: .6em 0; }
111-
112-
table {
113-
width: 100%;
114-
border-collapse: collapse;
115-
}
116-
117-
th,
118-
td {
119-
padding: .1em .5em;
120-
border-top: 1px solid black;
121-
border: 0;
122-
text-align: left;
123-
}
124-
125-
tr {
126-
border-top: 1px solid black;
127-
}
128114

129-
@media (max-width: 600px) {
130-
table {
131-
display: block;
132-
overflow-x: auto;
133-
max-width: 100%;
134-
}
135-
136-
th,
137-
td {
138-
min-width: 9rem;
139-
}
140-
141-
th:last-child,
142-
td:last-child {
143-
min-width: 18rem;
144-
}
145-
}
146-
147-
code {
148-
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
149-
font-size: .88em;
150-
background: #f1f1ee;
151-
padding: 1px 4px;
152-
border-radius: 2px;
153-
}
154-
pre {
155-
overflow-x: auto;
156-
border: 1px dashed #e6e6e2;
157-
padding: 10px 12px;
158-
font-size: .88em;
159-
line-height: 1;
160-
}
161-
pre code { background: transparent; padding: 0; }
162115
main :is(h2,h3,h4,h5,h6)[id] > a { color: inherit; text-decoration: none; }
163-
main :is(h2,h3,h4,h5,h6)[id] > a:hover::after { content: " #"; color: #bbb; }
116+
main :is(h2,h3,h4,h5,h6)[id] > a:hover::after { content: " #"; color: var(--muted); }
164117
</style>
165118
{%- if page.math -%}
166119
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous">
@@ -169,6 +122,7 @@
169122
{%- endif -%}
170123
</head>
171124
<body>
125+
<a class="skip-link" href="#main-content">Skip to content</a>
172126
<div class="wrapper">
173127
<header role="banner">
174128
<nav>

‎assets/shared.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
layout: null
3+
---
4+
{% include shared.css %}

0 commit comments

Comments
 (0)