@@ 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