Wrapped my frontpage up as an h-feed

voxpelli · Sep 7, 2014 · b12f4a9 · b12f4a9
1 parent e10436d
commit b12f4a9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -15,7 +15,7 @@
   {% if page.webmentionable != null %}<link rel="webmention" href="https://webmention.herokuapp.com/api/webmention" />{% endif %}
 </head>
 <body>
-  <div class="page">
+  <div class="page{% if page.frontpage != null %} h-feed{% endif %}">
     <header>
       <h1><a href="/">Pelle Wessman</a></h1>
       <div class="subtitle">Things <a {% if page.frontpage != null %}rel="me"{% endif %} href="/about">about me</a> and the world around us</div>

diff --git a/css/style.css b/css/style.css
@@ -25,7 +25,9 @@ ul.posts time,article footer,.webmention-published{color:#aaa;font-size:.8em}
 .indie-actions > indie-action {margin:0 0 -1px 6px;float:right}
 .indie-actions a{text-decoration: none}
 .subtome{text-align:center}
-.u-photo{width:20px;border-radius:20px;vertical-align:middle;position:relative;top:-2px;}
+.h-entry .u-photo{width:20px;border-radius:20px;vertical-align:middle;position:relative;top:-2px;}
+.h-feed .u-photo{width:80px;border-radius:80px;float:left;margin-right:20px;}
+.h-feed .h-card{overflow:hidden;padding-bottom:0;}
 
 .webmention-mention{padding-left: 60px;position: relative}
 .webmention-mention:last-child{margin-bottom:0}

diff --git a/index.html b/index.html
@@ -9,16 +9,24 @@ <h2>Blog Posts</h2>
 
   <ul class="posts">
     {% for post in site.posts %}
-      <li>
-        <a {% if post.lang == null %}lang="se"{% endif %} href="{{ post.url }}">{{ post.title }}</a>
-        <time datetime="{{ post.date | date_to_xmlschema }}" pubdate>
+      <li class="h-entry">
+        <a {% if post.lang == null %}lang="se"{% endif %} class="p-name" href="{{ post.url }}">{{ post.title }}</a>
+        <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}" pubdate>
           - {{ post.date | date_to_string }}
         </time>
       </li>
     {% endfor %}
   </ul>
 </nav>
 
+<section class="p-author h-card">
+  <img class="u-photo" src="/avatar.jpg" alt="" />
+  <p>
+    Hi, I'm <a class="p-name u-url" rel="me" href="/">Pelle Wessman</a> and this is my blog.<br />
+    Here I post whatever stuff I'm currently interested in, may it be coding, knitting, cooking – the future will tell.
+  </p>
+</section>
+
 <section>
   <h2>Subscribe</h2>
   <p>If you want to follow my blog in a feed reader then I've an <a href="/english.xml" type="application/atom+xml">english only</a> version of my feed as well as a feed with <a href="/all.xml" type="application/atom+xml">all posts</a>.</p>