@@ 0,0 1,140 @@
+<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="https://unpkg.com/@picocss/pico@1.4.1/css/pico.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="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