Commit `54d9fe35c7`

54d9fe35c7eab5caa7634b391d07eba76804fdc5

parent: 698b2656ee

Unsigned

cmc <hello@cleberg.net> · 2025-11-22 22:49 UTC

minor redesign

Layout: unified · split

theme/static/styles.css +220 −37

	@@ -3,7 +3,7 @@
3	--bg-light: #f0f0f0;	3	--bg-light: #f0f0f0;
4	--fg: #1b2229;	4	--fg: #1b2229;
5	--fg-light: #383a42;	5	--fg-light: #383a42;
6	--link: #014980;	6	--link: #0f62fe;
7	--code: #8c2117;	7	--code: #8c2117;
8	}	8	}
9		9
	@@ -11,83 +11,150 @@ body {
11	background-color: var(--bg);	11	background-color: var(--bg);
12	color: var(--fg-light);	12	color: var(--fg-light);
13	font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;	13	font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
14	font-size: 0.9rem;	14	font-size: 0.85rem;
15	line-height: 1.5;	15	line-height: 1.4;
16	margin: 0 auto;	16	margin: 0 auto;
17	max-width: 45em;	17	max-width: 45em;
18	padding: 1.5rem;	18	padding: 1.5rem;
19	}	19	}
20		20
21	a {	21	a,
22	padding: 0 0.15rem;	22	a:active {
		23	color: var(--link);
		24	}
		25
		26	a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) {
		27	display: inline;
		28	}
		29
		30	a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before {
		31	background-color: var(--bg);
		32	color: var(--fg);
		33	content: "[";
		34	display: inline-block;
		35	padding-right: 0.15em;
		36	pointer-events: none;
		37	position: relative;
23	text-decoration: none;	38	text-decoration: none;
		39	z-index: 1;
24	}	40	}
25		41
26	a,a:active {	42	a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after {
27	color: var(--link);	43	background-color: var(--bg);
		44	color: var(--fg);
		45	content: "]";
		46	display: inline-block;
		47	padding-left: 0.15em;
		48	pointer-events: none;
		49	position: relative;
		50	text-decoration: none;
		51	z-index: 1;
28	}	52	}
29		53
30	a:hover {	54	h1,
31	background-color: var(--link);	55	h2,
32	color: var(--bg);	56	h3,
		57	h4,
		58	h5,
		59	h6,
		60	nav,
		61	time,
		62	code,
		63	pre,
		64	.metadata-block {
		65	font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
33	}	66	}
34		67
35	h1,h2,h3,h4,h5,h6 {	68	h1,
		69	h2,
		70	h3,
		71	h4,
		72	h5,
		73	h6 {
36	color: var(--fg);	74	color: var(--fg);
37	font-size: 1rem;	75	font-size: 0.85rem;
38	text-transform: uppercase;	76	font-weight: bold;
		77	margin-bottom: 1rem;
		78	margin-top: 1rem;
		79	}
		80
		81	h1 {
		82	font-size: 0.85rem;
39	}	83	}
40		84
41	.skip-link {	85	.skip-link {
42	position: absolute;	86	height: 1px;
43	left: -10000px;	87	left: -10000px;
		88	overflow: hidden;
		89	position: absolute;
44	top: auto;	90	top: auto;
45	width: 1px;	91	width: 1px;
46	height: 1px;
47	overflow: hidden;
48	}	92	}
49		93
50	.skip-link:focus {	94	.skip-link:focus {
		95	height: auto;
51	position: static;	96	position: static;
52	width: auto;	97	width: auto;
53	height: auto;
54	}	98	}
55		99
56	nav {	100	nav {
57	align-items: center;	101	align-items: center;
58	display: flex;	102	display: flex;
59	justify-content: space-around;	103	justify-content: space-around;
60	width: 100%;	104	margin: 3rem 0;
		105	width: 100%;
61	}	106	}
62		107
63	nav ul {	108	nav ul {
64	display: flex;	109	display: flex;
65	list-style-type: none;	110	list-style-type: none;
66	margin: 0;	111	margin: 0;
67	padding: 0;	112	padding: 0;
68	width: 100%;	113	width: 100%;
69	}	114	}
70		115
71	nav ul li {	116	nav ul li {
72	height: 100%;	117	height: 100%;
73	margin-bottom: 0.5rem;	118	margin-bottom: 0.5rem;
74	margin-right: 0.5rem;	119	margin-right: 1rem;
75	text-align: center;	120	text-align: center;
76	}	121	}
77		122
78	blockquote,	123	.context-box {
79	.reply-link {	124	background-color: var(--bg-light);
		125	color: var(--fg);
		126	display: grid;
		127	font-size: 0.85rem;
		128	grid-template-columns: auto 1fr;
		129	gap: 0.5rem 1rem;
		130	margin-bottom: 3rem;
		131	margin-top: 3rem;
		132	padding: 1rem;
		133	}
		134
		135	.context-label {
		136	color: var(--link);
		137	font-weight: bold;
		138	text-transform: uppercase;
		139	}
		140
		141	blockquote {
80	background-color: var(--bg-light);	142	background-color: var(--bg-light);
81	border-left: 8px solid var(--link);	143	border-left: 8px solid var(--link);
82	margin: 1rem 0;	144	margin: 1rem 0;
83	padding: 0.5rem 1rem;	145	padding: 0.5rem 1rem;
84	}	146	}
85		147
86	blockquote p,	148	blockquote p {
87	.reply-link p {
88	margin: 0;	149	margin: 0;
89	}	150	}
90		151
		152	.reply-link {
		153	border: 1px dotted var(--fg-light);
		154	margin-top: 3rem;
		155	padding: 0.5rem 1rem;
		156	}
		157
91	img {	158	img {
92	border-style: none;	159	border-style: none;
93	width: 100%;	160	width: 100%;
	@@ -99,18 +166,20 @@ table {
99	width: 100%;	166	width: 100%;
100	}	167	}
101		168
102	colgroup, thead, tbody {	169	colgroup,
		170	thead,
		171	tbody {
103	border: 1px dotted var(--fg);	172	border: 1px dotted var(--fg);
104	}	173	}
105		174
106	pre,	175	pre,
107	pre>code,	176	pre>code,
108	code {	177	code {
109	font-size: 0.9rem;	178	font-size: 0.85rem;
110	}	179	}
111		180
112	pre {	181	pre {
113	border: 1px dotted var(--fg);	182	background-color: var(--bg-light);
114	margin: 0.5rem 0;	183	margin: 0.5rem 0;
115	overflow-x: auto;	184	overflow-x: auto;
116	padding: 0.5rem;	185	padding: 0.5rem;
	@@ -132,11 +201,125 @@ time {
132		201
133	.post time {	202	.post time {
134	flex-shrink: 0;	203	flex-shrink: 0;
		204	font-size: 0.85rem;
135	margin-right: 1rem;	205	margin-right: 1rem;
136	}	206	}
137		207
		208	article {
		209	border-bottom: 1px dotted var(--fg-light);
		210	margin-bottom: 3rem;
		211	padding-bottom: 3rem;
		212	}
		213
		214	p {
		215	margin-top: 0.5rem;
		216	margin-bottom: 1rem;
		217	}
		218
138	footer {	219	footer {
139	margin: 1rem 0;	220	margin: 3rem 0;
		221	}
		222
		223	#table-of-contents {
		224	border: 1px dotted var(--fg-light);
		225	font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace;
		226	font-size: 0.85rem;
		227	margin-bottom: 3rem;
		228	margin-top: 3rem;
		229	max-width: 100%;
		230	padding: 3rem;
		231	}
		232
		233	#table-of-contents h2 {
		234	border: none;
		235	font-family: inherit;
		236	font-size: 0.85rem;
		237	text-transform: none;
		238	font-weight: normal;
		239	margin-bottom: 1rem;
		240	margin-top: 0;
		241	padding: 0;
		242	}
		243
		244	#text-table-of-contents ul {
		245	list-style: none;
		246	padding-left: 0;
		247	margin: 0;
		248	}
		249
		250	#text-table-of-contents ul ul {
		251	padding-left: 2ch;
		252	}
		253
		254	#text-table-of-contents li a {
		255	align-items: baseline;
		256	display: flex;
		257	padding: 0.2rem 0;
		258	}
		259
		260	#text-table-of-contents li a::after {
		261	background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px);
		262	background-position: 0 bottom;
		263	background-repeat: repeat-x;
		264	background-size: 8px 100%;
		265	border-bottom: none;
		266	content: "";
		267	flex-grow: 1;
		268	height: 4px;
		269	margin-left: 1ch;
		270	opacity: 0.6;
		271	padding-left: 1ch;
		272	text-align: right;
		273	}
		274
		275	#text-table-of-contents li a:hover {
		276	background-color: transparent;
		277	color: var(--link);
		278	}
		279
		280	#text-table-of-contents ul {
		281	list-style: none;
		282	margin: 0;
		283	padding-left: 0;
		284	}
		285
		286	#text-table-of-contents ul ul {
		287	margin-top: 0.2rem;
		288	padding-left: 3ch;
		289	}
		290
		291	.outline-2 ul li {
		292	list-style: none;
		293	}
		294
		295	.outline-2 ul li::before {
		296	color: var(--fg-light);
		297	content: "- ";
		298	}
		299
		300	.outline-2 {
		301
		302	p,
		303	ul,
		304	ol,
		305	blockquote,
		306	pre {
		307	margin-left: 3ch;
		308	}
		309
		310	blockquote p {
		311	margin-left: 0;
		312	}
		313	}
		314
		315	.recent-posts {
		316	h2 {
		317	margin-bottom: 1.5rem;
		318	}
		319
		320	p {
		321	margin-top: 1.5rem;
		322	}
140	}	323	}
141		324
142	@media (prefers-color-scheme: dark) {	325	@media (prefers-color-scheme: dark) {
	@@ -148,4 +331,4 @@ footer {
148	--link: #67C0FF;	331	--link: #67C0FF;
149	--code: #FF6C6B;	332	--code: #FF6C6B;
150	}	333	}
151	}	334	}\ No newline at end of file

theme/templates/base.html +7 −7

	@@ -22,17 +22,17 @@
22	</div>	22	</div>
23	<nav aria-label="Site Navigation">	23	<nav aria-label="Site Navigation">
24	<ul>	24	<ul>
25	<li><a href="/">/home</a></li>	25	<li><a href="/">Home</a></li>
26	<li><a href="/about/">/about</a></li>	26	<li><a href="/about/">About</a></li>
27	<li><a href="/blog/">/blog</a></li>	27	<li><a href="/blog/">Blog</a></li>
28	<li><a href="/services/">/services</a></li>	28	<li><a href="/services/">Services</a></li>
29	</ul>	29	</ul>
30	</nav>	30	</nav>
31	<main id="main">{% block main %}{% endblock %}</main>	31	<main id="main">{% block main %}{% endblock %}</main>
32	<footer>	32	<footer>
33	<a href="https://stats.uptimerobot.com/OwOWs7HU0z">status</a> ·	33	<a href="https://stats.uptimerobot.com/OwOWs7HU0z">Status</a> ·
34	<a href="https://git.cleberg.net/cleberg.net.git">source</a> ·	34	<a href="https://git.cleberg.net/cleberg.net.git">Source</a> ·
35	<a href="/feed.xml">rss</a>	35	<a href="/feed.xml">RSS</a>
36	</footer>	36	</footer>
37	</body>	37	</body>
38	</html>	38	</html>

theme/templates/index.html +7 −11

	@@ -1,17 +1,13 @@
1	{% extends "base.html" %} {% block main %}	1	{% extends "base.html" %} {% block main %}
2	<section>	2	<section class="context-box">
3	<h1>christian cleberg</h1>	3	<span class="context-label">User:</span> <span>Christian Cleberg <hello@cleberg.net></span>
4	<blockquote>	4	<span class="context-label">Context:</span> <span>Technology Assurance Manager</span>
5	<b>shouganai</b>	5	<span class="context-label">Status:</span> <span>Active</span>
6	<br>[sho-ga-n-eye] \| しょうがない
7	<br><br>
8	<i>it is what it is</i>
9	</blockquote>
10	</section>	6	</section>
11	<section>	7	<section class="recent-posts">
12	<h2>Recent Posts</h2>	8	<h2>Recent Posts</h2>
13	<!-- BEGIN_POSTS -->	9	<!-- BEGIN_POSTS -->
14	<!-- END_POSTS -->	10	<!-- END_POSTS -->
15	<p><a href="/blog/">all posts →</a></p>	11	<p><a href="/blog/">All Posts →</a></p>
16	</section>	12	</section>
17	{% endblock %}	13	{% endblock %}\ No newline at end of file

theme/templates/post.html +4 −7

 <meta property="og:description" content="{{ project_description }}" />
 {% endif %} {% endblock %} {% block main %}
 <article>
-	<section class="post-metadata">
+	<section class="context-box">
-		<h1>{{ post.title }}</h1>
+		<span class="context-label">Title:</span> <span>{{ post.title }}</span>
-		{% if post.date is defined %}
+		<span class="context-label">Date:</span> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span>
-		<time datetime='{{ post.date|strftime("%Y-%m-%d") }}'
+		<span class="context-label">Description:</span> <span>{{ post.description }}</span>
-			>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time
-		>
-		{% endif %}
 	</section>
 	<section>{{ post.html | safe }}</section>
 	<div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div>

Commit 54d9fe35c7

Commit `54d9fe35c7`