~acdw/old-blog-content

f277f04a52ff2e19b4357987aedee51472d9ab37 — Case Duckworth 1 year, 7 months ago ddb4522
Update templating for numbered series
4 files changed, 63 insertions(+), 28 deletions(-)

M static/css/style.scss
M static/start.html
M templates/_pagenav.html
M templates/_posttable.html
M static/css/style.scss => static/css/style.scss +13 -0
@@ 503,6 503,19 @@ code span.wa { font-weight: bold; font-style: italic; } /* Warning */
    padding: 1rem;
}

.post-list.series {
	counter-reset: item;
}

.post-list.series tr::before {
	counter-increment: item;
	content: counter(item) ".";
	text-align: right;
	display: table-cell;
	padding-left: 4px;
	font-style: italic;
}

/* }}} */

/* special classes {{{ */

M static/start.html => static/start.html +37 -16
@@ 2,30 2,51 @@
<title>start here</title>
<meta charset=utf-8>

<style>
body,html,main,#canvas {
	margin: 0;
	padding: 0;
}
html, body { width: 100%; height: 100%; }
canvas { display: block; }
</style>

<main>
	<canvas id=clock width=400 height=600></canvas>
	<canvas id=canvas width=400 height=600></canvas>
</main>

<script>
	const clock = document.getElementById('clock');
	const ctx = clock.getContext('2d');
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	function resizeCanvas() {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		update();
	}
	function update() {
		var now = new Date();
		var hours = now.getHours();
		hours = hours > 12 ? hours - 12 : hours;
		var minutes = now.getMinutes();
		var seconds = now.getSeconds();
		const now = new Date();
		const hours = now.getMinutes();
		const mins = now.getSeconds();

		console.log(hours, mins);

		if (hours == 0) { ctx.clearRect(10, 10, 100, 12 * 10); }
		if (minutes == 0) { ctx.clearRect(110, 10, 100, 60 * 5); }
		if (seconds == 0) { ctx.clearRect(210, 10, 100, 60 * 5); }
		if (mins == 0) {
			ctx.fillStyle = 'white';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		}

		ctx.fillStyle = 'green';
		ctx.fillRect(10,10,100, hours * 10);
		ctx.fillStyle = 'blue';
		ctx.fillRect(110, 10, 100, minutes * 10);
		ctx.fillStyle = 'yellow';
		ctx.fillRect(210, 10, 100, seconds * 10);
		ctx.fillRect(
			hours * canvas.width / 60 * Math.sin(mins),
			mins * canvas.height / 60,
			canvas.width, 1);
		ctx.fillStyle = 'purple';
		ctx.fillRect(
			mins * canvas.width / 60,
			hours * canvas.height / 60 * Math.cos(mins),
			1, canvas.height);
	}
	var updateID = window.setInterval(update, 1000);
	window.addEventListener('resize', resizeCanvas, false);
	resizeCanvas();
</script>

M templates/_pagenav.html => templates/_pagenav.html +12 -11
@@ 1,13 1,14 @@
<section class="pages">
    <header>what's here</header>
    <ul>
        <div class="lgroup">
        <li><a href="/archive/">all posts</a></li></div>
        <div class="lgroup">
        <li><a href="/now/">now</a></li>
        <li><a href="/colophon/">colophon</a></li></div>
        <div class="lgroup">
        <li><a href="/projects/">projects</a></li>
        <li><a href="/publications/">publications</a></li></div>
    </ul>
	<header>what's here</header>
	<ul>
		<div class="lgroup">
		<li><a href="/archive/">all posts</a></li></div>
		<div class="lgroup">
		<li><a href="/now/">now</a></li>
		<li><a href="/dogs/">dogs</a></li>
		<li><a href="/colophon/">colophon</a></li></div>
		<div class="lgroup">
		<li><a href="/projects/">projects</a></li>
		<li><a href="/publications/">publications</a></li></div>
	</ul>
</section>

M templates/_posttable.html => templates/_posttable.html +1 -1
@@ 1,4 1,4 @@
<table class="post-list">
<table class="post-list$if(tag-type)$ $tag-type$$endif$">
    $for(posts)$
    <tr>
        <td class="post-title $if(group)$$group$$endif$">