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	3	--bg-light: #f0f0f0;
4	4	--fg: #1b2229;
5	5	--fg-light: #383a42;
6		--link: #014980;
	6	--link: #0f62fe;
7	7	--code: #8c2117;
8	8	}
9	9
		@@ -11,83 +11,150 @@ body {
11	11	background-color: var(--bg);
12	12	color: var(--fg-light);
13	13	font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
14		font-size: 0.9rem;
15		line-height: 1.5;
	14	font-size: 0.85rem;
	15	line-height: 1.4;
16	16	margin: 0 auto;
17	17	max-width: 45em;
18	18	padding: 1.5rem;
19	19	}
20	20
21		a {
22		padding: 0 0.15rem;
	21	a,
	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	38	text-decoration: none;
	39	z-index: 1;
24	40	}
25	41
26		a,a:active {
27		color: var(--link);
	42	a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after {
	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 {
31		background-color: var(--link);
32		color: var(--bg);
	54	h1,
	55	h2,
	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	74	color: var(--fg);
37		font-size: 1rem;
38		text-transform: uppercase;
	75	font-size: 0.85rem;
	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	85	.skip-link {
42		position: absolute;
	86	height: 1px;
43	87	left: -10000px;
	88	overflow: hidden;
	89	position: absolute;
44	90	top: auto;
45	91	width: 1px;
46		height: 1px;
47		overflow: hidden;
48	92	}
49	93
50	94	.skip-link:focus {
	95	height: auto;
51	96	position: static;
52	97	width: auto;
53		height: auto;
54	98	}
55	99
56	100	nav {
57		align-items: center;
58		display: flex;
59		justify-content: space-around;
60		width: 100%;
	101	align-items: center;
	102	display: flex;
	103	justify-content: space-around;
	104	margin: 3rem 0;
	105	width: 100%;
61	106	}
62	107
63	108	nav ul {
64		display: flex;
65		list-style-type: none;
66		margin: 0;
67		padding: 0;
68		width: 100%;
	109	display: flex;
	110	list-style-type: none;
	111	margin: 0;
	112	padding: 0;
	113	width: 100%;
69	114	}
70	115
71	116	nav ul li {
72	117	height: 100%;
73	118	margin-bottom: 0.5rem;
74		margin-right: 0.5rem;
75		text-align: center;
	119	margin-right: 1rem;
	120	text-align: center;
76	121	}
77	122
78		blockquote,
79		.reply-link {
	123	.context-box {
	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	142	background-color: var(--bg-light);
81	143	border-left: 8px solid var(--link);
82	144	margin: 1rem 0;
83	145	padding: 0.5rem 1rem;
84	146	}
85	147
86		blockquote p,
87		.reply-link p {
	148	blockquote p {
88	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	158	img {
92	159	border-style: none;
93	160	width: 100%;
		@@ -99,18 +166,20 @@ table {
99	166	width: 100%;
100	167	}
101	168
102		colgroup, thead, tbody {
	169	colgroup,
	170	thead,
	171	tbody {
103	172	border: 1px dotted var(--fg);
104	173	}
105	174
106	175	pre,
107	176	pre>code,
108	177	code {
109		font-size: 0.9rem;
	178	font-size: 0.85rem;
110	179	}
111	180
112	181	pre {
113		border: 1px dotted var(--fg);
	182	background-color: var(--bg-light);
114	183	margin: 0.5rem 0;
115	184	overflow-x: auto;
116	185	padding: 0.5rem;
		@@ -132,11 +201,125 @@ time {
132	201
133	202	.post time {
134	203	flex-shrink: 0;
	204	font-size: 0.85rem;
135	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	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	325	@media (prefers-color-scheme: dark) {
		@@ -148,4 +331,4 @@ footer {
148	331	--link: #67C0FF;
149	332	--code: #FF6C6B;
150	333	}
151		}
	334	}
		\ No newline at end of file

theme/templates/base.html +7 −7

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

theme/templates/index.html +7 −11

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

theme/templates/post.html +4 −7

		@@ -8,13 +8,10 @@
8	8	<meta property="og:description" content="{{ project_description }}" />
9	9	{% endif %} {% endblock %} {% block main %}
10	10	<article>
11		<section class="post-metadata">
12		<h1>{{ post.title }}</h1>
13		{% if post.date is defined %}
14		<time datetime='{{ post.date\|strftime("%Y-%m-%d") }}'
15		>{{ post.date\|strftime("%Y-%m-%d %H:%M:%S") }}</time
16		>
17		{% endif %}
	11	<section class="context-box">
	12	<span class="context-label">Title:</span> <span>{{ post.title }}</span>
	13	<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>
	14	<span class="context-label">Description:</span> <span>{{ post.description }}</span>
18	15	</section>
19	16	<section>{{ post.html \| safe }}</section>
20	17	<div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email →</a></div>

Commit 54d9fe35c7

Commit `54d9fe35c7`