💄 new design (with microformats)

This commit is contained in:
James Walker 2022-05-26 21:57:21 -04:00
parent 7029850f65
commit bc4063d2ae
Signed by: walkah
GPG Key ID: 3C127179D6086E93
12 changed files with 77 additions and 73 deletions

View File

@ -1,4 +1,4 @@
<article class="list">
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
<a href="{{ post.url }}">{{post.title}}</a>
<article class="h-entry">
<time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
<a href="{{ post.url }}" class="u-url p-name">{{post.title}}</a>
</article>

View File

@ -1,22 +1,22 @@
<article class="hentry" role="article">
<article class="h-entry prose lg:prose-lg" role="article">
<header>
<h1 class="entry-title">{{ post.title }}</h1>
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
{% if post.image %}
<figure>
<img class="feature-image" src="{{ post.image }}" alt="{{ post.title }}">
{% if post.image_source %}
<figcaption>
<cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<h1 class="p-name">{{ post.title }}</h1>
<time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
</header>
<div class="entry-content">
{{ content }}
</div>
<footer class="meta">
<p><i class="fa fa-tags"></i> {{ post.tags | tag_links }}</p>
{% if post.image %}
<figure class="-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.image }}" alt="{{ post.title }}">
{% if post.image_source %}
<figcaption>
<cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<section class="e-content">
{{content}}
</section>
<footer>
<p>{{ post.tags | tag_links }}</p>
</footer>
</article>

View File

@ -1,5 +1,5 @@
<div class="vcard">
<img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="photo left" alt="James Walker" >
<p><a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p>
<p> <img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="inline-block" alt="James Walker" >
<a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p>
<p>You can follow him on <a href="https://twitter.com/walkah" rel="me">twitter</a> or <a href="https://github.com/walkah">github</a>.</p>
</div>

View File

@ -3,35 +3,16 @@
<head>
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
{% include meta.html %}
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href='//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css" rel="stylesheet">
<link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
</head>
<body>
<div class="container">
<div id="header">
<header>
<h1 id="title"><a href="/">{{ site.title }}</a></h1>
</header>
<nav role="navigation">
<ul class="navigation">
<li><a href="/about">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/atom.xml">Feed <i class="fa fa-rss"></i></a></li>
</ul>
</nav>
<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<div class="container max-w-2xl mb-24 mt-8 mx-auto">
<div class="px-5 md:px-8">
<main id="main">
{{ content }}
</main>
</div>
<section id="main">
{{ content }}
</section>
<footer>
&copy; 2002-{{ site.time | date:"%Y" }} {{ site.author }}
</footer>
</div>
{% include google_analytics.html %}
</body>
</html>

View File

@ -1,8 +1,10 @@
---
layout: default
---
<header>
<h1>{{ page.title }}</h1>
</header>
{{ content }}
<section class="prose dark:prose-invert my-8">
<header>
<h1>{{ page.title }}</h1>
</header>
{{ content }}
</section>

View File

@ -1,13 +1,30 @@
---
layout: default
---
{% assign post=page %}
{% include post.html %}
{% include vcard.html %}
<h3>related posts</h3>
{% for post in site.related_posts limit:5 %}
{% include article_list.html %}
{% endfor %}
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ page.title }}</h1>
<time class="dt-published" datetime="{{ page.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
</header>
{% if page.image %}
<figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ page.image }}" alt="{{ page.title }}">
{% if page.image_source %}
<figcaption>
<cite><a href="{{ page.image_source }}">{{ page.image_source }}</a></cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<section class="e-content">
{{content}}
</section>
<footer class="flex flex-row not-prose">
<div rel="author" class="p-author h-card basis-1/2">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" >
<a href="/">walkah</a>
</div>
<div class="text-right basis-1/2">{{ page.tags | tag_links }}</div>
</footer>
</article>

View File

@ -75,7 +75,7 @@ module Jekyll
def tag_links(tags)
tags = tags.sort!.map do |item|
item.tr!(' ', '-')
"<a class='tag' href='/tag/#{item}/'>#{item}</a>"
"<a class='p-category' href='/tag/#{item}/'>#{item}</a>"
end
tags.join(', ')
end

View File

@ -1,8 +1,9 @@
---
layout: page
title: Blog Archive
title: Archive
---
{% for post in site.posts %}
<section class="h-feed">
{% for post in site.posts %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
{% assign year = this_year %}
@ -10,3 +11,4 @@ title: Blog Archive
{% endunless %}
{% include article_list.html %}
{% endfor %}
</section>

BIN
images/walkah-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 KiB

View File

@ -3,10 +3,12 @@ layout: default
title: James Walker
---
{% include vcard.html %}
<h3>recent posts:</h3>
{% for post in site.posts limit: 5 %}
{% include article_list.html %}
{% endfor %}
<section class="h-card prose lg:prose-2xl dark:prose-invert">
<img src="/images/walkah-avatar.png" alt="James Walker" class="u-photo rounded-full w-48 mx-auto">
<p class="lead text-center">👋 I'm <span class="p-name"><span class="p-given-name">James</span> <span class="p-family-name">Walker</span></span> aka <a href="https://walkah.net/" class="u-url u-uid p-nickname">walkah</a>.</p>
<p class="p-note">
I am a free software developer in <span class="p-locality">Toronto</span>, <span class="p-country-name">Canada</span>.
I'm currently the <span class="p-role">VP of Engineering</span> at <a class="p-org" href="https://fission.codes/">Fission</a> where we're building tools for a <span class="p-category">decentralized</span>, <span class="p-category">open web</span>.
</p>
<p>You can follow my work on <a href="https://github.com/walkah" rel="me">github</a> and <a href="https://twitter.com/walkah" rel="me">twitter</a>, but I prefer the <a href="https://walkah.social" rel="me">fediverse</a> and <a href="https://matrix.to/#/@walkah:walkah.chat" rel="me">matrix</a>.</p>
</section>