~docbibi/memos

d295926464015eb6a34463a2c5bfe15b4c0bd27f — Borjan Tchakaloff 4 months ago 5d45540
Drop stale hand-written HTML file

The main file is now compiled at packaging time.
1 files changed, 0 insertions(+), 155 deletions(-)

D readthememo.app/index.html
D readthememo.app/index.html => readthememo.app/index.html +0 -155
@@ 1,155 0,0 @@
<html lang="en" data-theme="dark">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="Borjan Tchakaloff">
	<link rel="stylesheet" href="./pico-1.5.10.classless.min.css">
	<title>Did you read the memo? — by Borjan Tchakaloff</title>
	<style type="text/css">
		/* Amber Light scheme (Default) */
		/* Can be forced with data-theme="light" */
		[data-theme="light"],
		:root:not([data-theme="dark"]) {
		  --primary: #ffb300;
		  --primary-hover: #fb8c00;
		  --primary-focus: rgba(255, 179, 0, 0.125);
		  --primary-inverse: rgba(0, 0, 0, 0.75);
		}

		/* Amber Dark scheme (Auto) */
		/* Automatically enabled if user has Dark mode enabled */
		@media only screen and (prefers-color-scheme: dark) {
		  :root:not([data-theme="light"]) {
		    --primary: #ffb300;
		    --primary-hover: #fdd835;
		    --primary-focus: rgba(255, 179, 0, 0.25);
		    --primary-inverse: rgba(0, 0, 0, 0.75);
		  }
		}

		/* Amber Dark scheme (Forced) */
		/* Enabled if forced with data-theme="dark" */
		[data-theme="dark"] {
		  --primary: #ffb300;
		  --primary-hover: #fdd835;
		  --primary-focus: rgba(255, 179, 0, 0.25);
		  --primary-inverse: rgba(0, 0, 0, 0.75);
		}

		/* Amber (Common styles) */
		:root {
		  --form-element-active-border-color: var(--primary);
		  --form-element-focus-color: var(--primary-focus);
		  --switch-color: var(--primary-inverse);
		  --switch-checked-background-color: var(--primary);
		}

		a, a:hover, a:active, a:focus {
			text-decoration: underline;
		}
		article header {
			text-align: right;
		}
		article footer ul {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-left: calc(var(--spacing) * -0.5);
			margin-bottom: 0;
			padding: 0;
			list-style: none;
		}
		article footer li {
			display: inline-block;
			margin: 0;
			padding: var(--spacing) calc(var(--spacing) * 0.5);
		}
		article footer li + li:before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			margin: 0 calc(var(--spacing)) 0 0;
			padding: 0;
			width: 0.5ex;
			height: 0.5ex;
			border-radius: 50%;
			background-color: currentColor;
		}
		article footer a {
			display: inline-block;
			margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
			padding: var(--spacing) calc(var(--spacing) * 0.5);
			border-radius: var(--border-radius);
		}
	</style>
</head>
<body>

	<header>
		<h1 itemprop="headline">Did you read the memo?</h1>
		<div>a minimalistic, self-hosted, micro-blogging engine</div>
		<p>by Borjan Tchakaloff</p>
	</header>
	
	<main>
        <article>
            <header><time datetime="2023-10-29">Sunday the 29th of October 2023</time></header>
            <h2>Sunday mornings</h2>
            <p>Somehow I always end up with tech ideas on Sunday mornings.</p>
			<p>Is it because I am “refreshed” after a Saturday focused on chores and family activities? Or maybe it's the “relaxed” time it takes me to whip up the Sunday breakfast (waffles, pancakes, or crêpes).</p>
			<p>I don't often take much action to follow-up on these ideas. Today is different. Today I am taking notes. Today I am actually doing something else than rambling in my heads. Today it is on paper. (And now digital.)</p>
        </article>
        <article>
            <header><time datetime="2023-08-20">Sunday the 20th of August 2023</time></header>
            <h2>Revived and published</h2>
            <p>I have another project I would like to work on and I though it was a perfect opportunity to finally push the "memos" online.</p>
            <p>Of course plumbing is a pain: I just spent at least a full hour looking at DNS, NS records, static web hosting, and other unwieldy concepts.
                I ended up pushing the static files to <a href="https://git.sr.ht/~docbibi/memos">a repository on SourceHut</a> and using my domain with <a href="https://srht.site/">their hosting</a> for now.</p>
            <p>Now onto how to make it easier for me to publish… (Or should I simply spin-up an instance of <a href="https://microblog.pub">microblog.pub</a>?)</p>
        </article>
		<article>
			<header><time datetime="2021-10-29">Friday the 29th of October 2021</time></header>
			<h2>A first step to improve "reader mode", <em>a.k.a.</em> metadata</h2>
			<p>I am a big fan of the "reader mode" in Firefox.
			It couples a gentle sepia tone with distraction-free content, great for long pieces of text.</p>
			<p>It turns out that you don't want to forget the basic HTML metadata such as author in the page header.</p>
		</article>
		<article>
			<header><time datetime="2021-10-29">Friday the 29th of October 2021</time></header>
			<h2>Let's get ready for the future: with tags</h2>
			<p>I already planned for a couple of features for a next version.
			Tags are well recognised in the blogosphere, they are a dynamic free-form of grouping articles together by themes.</p>
			<p>Let's take a sneak peek at what it could look like with the current stylesheet.</p>
			<footer><ul><li><a href="#">#CSS</a></li><li><a href="#">#Prototyping</a></li></ul></footer>
		</article>
		<article>
			<header><time datetime="2021-10-29">Friday the 29th of October 2021</time></header>
			<h2>Customising <em>pico</em>, a minimal CSS framework for semantics nerds</h2>
			<p>It's not <em>only</em> for nerds but the facts speak for themselves: there is a "classless" version that simply styles all basic HTML tags.
			No additional classes needed.</p>
			<p>Now, I am trying to tweak a few things such as aligning the date-stamp to the right.</p>
		</article>
		<article>
			<header><time datetime="2021-10-29">Friday the 29th of October 2021</time></header>
			<h2>Exploring (basic) styling</h2>
			<p>I neither want nor need something complicated. Since the idea is to have a <em>minimal</em> engine to publish byte-sized content every now and then, I want to follow suit with the styling and not spend countless hours trying to get it perfect. It has to be simple, <em>and</em> easy to implement. (Wishful thinking!)</p>
			<p>I will certainly look into minimalistic CSS solutions out there. I have almost no skills in that area and <em>I know</em> how painful it is to test and have it right. Been there, done that.</p>
		</article>
		<article>
			<header><time datetime="2021-10-29">Friday the 29th of October 2021</time></header>
			<h2>Hand-writing an HTML prototype</h2>
			<p>After a decade or two, I am back to hand-crafting an HTML page.</p>
			<p>Today, I am prototyping the very page of this project: a list of memos. (That is so meta.) It turns out bare HTML is still as easy as pie, styling is the real deal.</p>
		</article>
		<article>
			<header><time datetime="2021-10-29">Thursday the 28th of October 2021</time></header>
			<h2>Kick-starting a new project: memos!</h2>
			<p>I like the concept of leaving a log of short entries on a regular basis.</p>
			<p>I am not so good at publishing blog posts frequently, somehow the barrier is too high for me.</p>
			<p>Let's try with a shorter form, and also because it's fun to explore project ideas.</p>
			<p>Stand-alone, short, and sweet entries following the idea of micro-blogging, but why follow the arbitrary limit of 136 characters? I will keep them short but that's because I want to.</p>
		</article>
	</main>

</body>
</html>
\ No newline at end of file