💄 new design (with microformats)
This commit is contained in:
parent
7029850f65
commit
bc4063d2ae
@ -1,4 +1,4 @@
|
|||||||
<article class="list">
|
<article class="h-entry">
|
||||||
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
|
<time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
|
||||||
<a href="{{ post.url }}">{{post.title}}</a>
|
<a href="{{ post.url }}" class="u-url p-name">{{post.title}}</a>
|
||||||
</article>
|
</article>
|
||||||
|
@ -1,22 +1,22 @@
|
|||||||
<article class="hentry" role="article">
|
<article class="h-entry prose lg:prose-lg" role="article">
|
||||||
<header>
|
<header>
|
||||||
<h1 class="entry-title">{{ post.title }}</h1>
|
<h1 class="p-name">{{ post.title }}</h1>
|
||||||
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
|
<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>
|
||||||
{% 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 %}
|
|
||||||
</header>
|
</header>
|
||||||
<div class="entry-content">
|
{% if post.image %}
|
||||||
{{ content }}
|
<figure class="-mx-12">
|
||||||
</div>
|
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.image }}" alt="{{ post.title }}">
|
||||||
<footer class="meta">
|
{% if post.image_source %}
|
||||||
<p><i class="fa fa-tags"></i> {{ post.tags | tag_links }}</p>
|
<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>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<div class="vcard">
|
<div class="vcard">
|
||||||
<img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="photo left" alt="James Walker" >
|
<p> <img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="inline-block" 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>
|
<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>
|
<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>
|
</div>
|
||||||
|
@ -3,35 +3,16 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
|
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
|
||||||
{% include meta.html %}
|
{% include meta.html %}
|
||||||
|
<link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css">
|
||||||
<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="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
|
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
||||||
<div class="container">
|
<div class="container max-w-2xl mb-24 mt-8 mx-auto">
|
||||||
<div id="header">
|
<div class="px-5 md:px-8">
|
||||||
<header>
|
<main id="main">
|
||||||
<h1 id="title"><a href="/">{{ site.title }}</a></h1>
|
{{ content }}
|
||||||
</header>
|
</main>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<section id="main">
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
<footer>
|
|
||||||
© 2002-{{ site.time | date:"%Y" }} {{ site.author }}
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
{% include google_analytics.html %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
<header>
|
<section class="prose dark:prose-invert my-8">
|
||||||
<h1>{{ page.title }}</h1>
|
<header>
|
||||||
</header>
|
<h1>{{ page.title }}</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
</section>
|
||||||
|
@ -1,13 +1,30 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
{% assign post=page %}
|
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
|
||||||
{% include post.html %}
|
<header>
|
||||||
|
<h1 class="p-name">{{ page.title }}</h1>
|
||||||
{% include vcard.html %}
|
<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>
|
||||||
<h3>related posts</h3>
|
{% if page.image %}
|
||||||
{% for post in site.related_posts limit:5 %}
|
<figure class="md:-mx-12">
|
||||||
{% include article_list.html %}
|
<img class="u-featured rounded-md shadow-md w-full" src="{{ page.image }}" alt="{{ page.title }}">
|
||||||
{% endfor %}
|
{% 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>
|
||||||
|
|
||||||
|
@ -75,7 +75,7 @@ module Jekyll
|
|||||||
def tag_links(tags)
|
def tag_links(tags)
|
||||||
tags = tags.sort!.map do |item|
|
tags = tags.sort!.map do |item|
|
||||||
item.tr!(' ', '-')
|
item.tr!(' ', '-')
|
||||||
"<a class='tag' href='/tag/#{item}/'>#{item}</a>"
|
"<a class='p-category' href='/tag/#{item}/'>#{item}</a>"
|
||||||
end
|
end
|
||||||
tags.join(', ')
|
tags.join(', ')
|
||||||
end
|
end
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: page
|
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 %}
|
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||||
{% unless year == this_year %}
|
{% unless year == this_year %}
|
||||||
{% assign year = this_year %}
|
{% assign year = this_year %}
|
||||||
@ -10,3 +11,4 @@ title: Blog Archive
|
|||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% include article_list.html %}
|
{% include article_list.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
BIN
images/walkah-avatar.png
Normal file
BIN
images/walkah-avatar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 266 KiB |
16
index.html
16
index.html
@ -3,10 +3,12 @@ layout: default
|
|||||||
title: James Walker
|
title: James Walker
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include vcard.html %}
|
<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">
|
||||||
<h3>recent posts:</h3>
|
<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>
|
||||||
{% for post in site.posts limit: 5 %}
|
<p class="p-note">
|
||||||
{% include article_list.html %}
|
I am a free software developer in <span class="p-locality">Toronto</span>, <span class="p-country-name">Canada</span>.
|
||||||
{% endfor %}
|
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>
|
Loading…
x
Reference in New Issue
Block a user