redesign homepage and headers

content/micro/launchftw-013.md

@@ -5,6 +5,8 @@ date = 2023-08-14
 
 Time passes (almost a month this time) and I'm back. Enough time has passed that it might make sense to start over from the beginning, but this time I actually have an idea of the product that I want to make: I noticed that in almost every instance where formal methods come up online, there is at least a subtext of "but how do I actually get started in this?" I think I could help there! Basically, I have noticed that there's a sweet spot of formal methods when used as documentation. You don't even have to use software for this; you can write a decision table or decision tree on a whiteboard and instantly have something useful for a team to talk about.
 
+<!-- more -->
+
 This is pretty off-script from what I decided earlier, so I think I want to find a little justification in the real world. Let's just root around in Hacker News comments for a bit, since that's attracts a pretty wide slice of tech folks.
 
 Some quotes:

content/posts/modeling-crdts-in-alloy-counters.md

@@ -12,6 +12,9 @@ Hey, welcome back! [Last time, we introduced conflict-free replicated datatypes
 As a quick recap, CRDTs give you eventual consistency, no matter how out of sync the data originally was. This makes them great for local-first or networked multiplayer applications. If you can write a `merge` function for a data structure that is commutative, associative, and idempotent, you might be able to build a CRDT on top of it.
 
 Further, we're modeling all these semantics in [Alloy](https://alloytools.org), a lightweight formal methods tool good for modeling and analyzing data structures. We'll see some cool stuff it can do in a second.
+
+<!-- more -->
+
 ## Counting Birds
 
 Last time our document was a single boolean. That's useful, but we can't build an application on top of it, so let's keep moving. To get much further, we're going to have to figure out how to sync numbers back and forth. Let's use the [the Great Backyard Bird Count](https://www.birdcount.org/) as an example. Say we're counting [red-tailed hawks](https://www.allaboutbirds.org/guide/Red-tailed_Hawk/id):

static/style.css

@@ -40,12 +40,14 @@ body {
 
 h1 { font-size: 2em; }
 
+h2, h1.deemphasized { font-size: 1.5em; }
+
+h3, h2.deemphasized { font-size: 1.25em; }
+
 h1, h2, h3, h4 {
-    display: inline-block;
     margin: .2em 0 .2em -0.1em;
     padding: 0 .1em;
     line-height: 1.4;
-    background: repeating-linear-gradient(to top, var(--accent), var(--accent) .6em, rgba(255,255,255,0) .6em 1.41em);
 }
 
 
@@ -54,14 +56,6 @@ h1 > a, h2 > a, h3 > a, h4 > a {
     color: var(--primary);
 }
 
-h1 > a, h2 > a, h3 > a, h4 > a {
-    background: none;
-}
-
-h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover {
-    background: transparent;
-}
-
 /* This happens on the post/talk listing. */
 h1 + article, article + article {
     margin-top: 1em;
@@ -270,3 +264,48 @@ footer {
 .footnote-definition > sup {
     margin-right: 1em;
 }
+
+/* HOMEPAGE */
+
+#home-grid {
+    display: grid;
+
+    grid-template-areas: "greeting now" "post now" "post now" "post micro";
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content auto auto auto;
+    border-bottom: 1px dashed var(--accent);
+}
+
+#home-grid .greeting {
+    grid-area: greeting;
+    border-bottom: 1px dashed var(--accent);
+    border-right: 1px dashed var(--accent);
+    padding: 0 1em 1em 0;
+}
+
+#home-grid .now {
+    grid-area: now;
+    border-bottom: 1px dashed var(--accent);
+    padding: 0 0 1em 1em;
+}
+
+#home-grid .post {
+    grid-area: post;
+    border-right: 1px dashed var(--accent);
+    padding: 1em 1em 1em 0;
+}
+
+#home-grid .micro {
+    grid-area: micro;
+    padding: 1em 0 1em 1em;
+}
+
+.text-button {
+    display: inline-block;
+    border: 1px solid var(--accent);
+    border-radius: 0.5em;
+    background: none;
+    padding: 0.25em 0.5em;
+    margin-top: 1em;
+    font-size: 0.8em;
+}

templates/index.html

@@ -3,15 +3,38 @@
 
 {% block content -%}
 {% set posts = get_section(path="posts/_index.md") -%}
-{% set talks = get_section(path="talks/_index.md") -%}
+{% set micro = get_section(path="micro/_index.md") -%}
 {% set all_projects = get_section(path="projects/_index.md") -%}
-{% set projects = all_projects.pages | group_by(attribute="extra.when") -%}
+{% set projects = all_projects.pages -%}
+
+<div id="home-grid">
+
+  <div class="greeting">
+    <h1>👋 Hey there!</h1>
+    <p>I'm Brian Hicks, a programmer and author from St. Louis, MO. You've found my site!</p>
+  </div>
+
+  <div class="post">
+    <h2>latest post: <a href="{{ posts.pages[0].path | safe }}">{{ posts.pages[0].title | markdown(inline=true) | safe }}</a></h2>
+    {{ posts.pages[0].summary | safe }}
+    <a href="{{ posts.pages[0].path | safe }}" class="text-button">Keep Reading &rarr;</a>
+  </div>
+
+  <div class="now">
+    <h2 class="deemphasized"><a href="{{ projects.0.path | safe }}">currently: {{ projects.0.title | markdown(inline=true) | safe }}</a></h2>
+    {{ projects.0.content | safe }}
+
+    <a href="/projects" class="text-button">This and {{ projects | length - 1 }} other projects &rarr;</a>
+  </div>
+
+  <div class="micro">
+    <h2 class="deemphasized">latest micropost: <a href="{{ micro.pages[0].path | safe }}">{{ micro.pages[0].title | markdown(inline=true) | safe }}</a></h2>
+    {{ micro.pages[0].summary | safe }}
+
+    <a href="{{ micro.pages[0].path | safe }}" class="text-button">Keep Reading &rarr;</a>
+  </div>
+</div>
 
-<h1>👋 Hey There</h1>
-<p>My name is Brian Hicks. You've found my site!</p>
-<p>The latest post I wrote was <strong><a href="{{ posts.pages[0].path | safe }}">{{ posts.pages[0].title | markdown(inline=true) | safe }}</a></strong>, and the latest talk I gave was <strong><a href="{{ talks.pages[0].path | safe }}">{{ talks.pages[0].title | markdown(inline=true) | safe }}</a></strong> at {{ talks.pages[0].extra.event }}.</p>
-<p>{% if projects.now %}Right now I'm working on {% for project in projects.now %}{% if not loop.first %}{% if projects.now | length > 2 and loop.last %}, and {% elif loop.last %} and {% else %}, {% endif %}{% endif %}<a href="{{ project.path | safe }}"><strong>{{ project.title }}</strong></a> ({{ project.description }}{% if loop.last %}.{% endif %}){% endfor %}{% endif %}{% if projects.next %} {% if projects.now %}After that,{% else %}Soon,{% endif %} I'll be working on {% for project in projects.next %}{% if not loop.first %}{% if projects.next | length > 2 and loop.last %}, and {% elif loop.last %} and {% else %}, {% endif %}{% endif %}<a href="{{ project.path | safe }}"><strong>{{ project.title }}</strong></a> ({{ project.description }}{% if loop.last %}.{% endif %}){% endfor %}{% endif %}<p>
-{% if projects.past %}<p>In the past, I've worked on {% for project in projects.past %}{% if not loop.first %}{% if projects.past | length > 2 and loop.last %}, and {% elif loop.last %} and {% else %}, {% endif %}{% endif %}<a href="{{ project.path | safe }}"><strong>{{ project.title }}</strong></a> ({{ project.description }}{% if loop.last %}.{% endif %}){% endfor %}</p>{% endif %}
 <p><small>Made with Love in St. Louis, MO. Have a wonderful day! ❤️</small></p>
 
 {% endblock %}