diff --git a/example/default.tpl b/example/default.tpl
index 1af8ab4..65c60b5 100644
--- a/example/default.tpl
+++ b/example/default.tpl
@@ -1,51 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
-    <meta content="initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Microblog</title>
 
-    <link href="./style.css" rel="stylesheet" type="text/css" media="all">
+<!--     <link href="./style.css" rel="stylesheet" type="text/css" media="all"> -->
     <link href="./timeline.css" rel="stylesheet" type="text/css" media="all">
-
 </head>
-
 <body>
 
 <header>
     <h1>A Microblog in Plain HTML</h1>
 </header>
 
-<div class="primary"> 
-    
-    <div>
+<aside class="column profile">
+    <figure>
+        <img src="images/avatar.jpg" alt="(Avatar)" class="avatar">
+        <span>Your Name Here</span>
+    </figure>
+    <p>
+        <a href="mailto:user@host.tld">user@host.tld</a>
+    </p>
+    <h2>About Me</h2>
+    <p>Your self-description here.</p>
+    <p>{postcount} total posts</p>
+    <h3>Tags</h3>
+        <nav>{tags}</nav>
+    <h3>Pages</h3>
+        <nav>{pages}</nav>
+</aside>
 
-    <aside>
-        <img src="./images/avatar.jpg" alt="Avatar" class="avatar">
-        <span class="handle">Your Name Here</span>
-        <p><span class="email"><a href="mailto:user@host.tld">user@host.tld</a></span></p>
-        <div class="bio">Description
-            <h4>{postcount} total posts</h4>
-            <h3>Tags</h3>
-            <p>{tags}</p>
-            <h3>Pages</h3>
-            <p>{pages}</p>
-    </aside>
-    
-    </div>
-
-    <main>
+<main class="timeline">
     {timeline}
-    </main>
-
-</div>
+</main>
 
 <footer>
-<a href="https://notabug.org/likho/microblog.py">microblog.py</a>
+    <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
 </footer>
 
 </body>
-
 </html>
 
diff --git a/example/settings.toml b/example/settings.toml
index f9ffb64..3cb0030 100644
--- a/example/settings.toml
+++ b/example/settings.toml
@@ -19,10 +19,11 @@ inline_tags = ["i", "em", "b", "strong","u", "s", "a", "span"]
 date_format="%d %B %Y"
 format="""
 <article id="{__num__}">
-    <time>{__timestamp__}
+    <h4>
+        <time>{__timestamp__}</time>
         <a href=#{__num__}>(#{__num__})</a>
-    </time>
-    <div class="message">{__msg__}</div>
+    </h4>
+    {__msg__}
     {__btn__}
 </article>
 """
@@ -55,17 +56,19 @@ short-bio= "Your self-description. Anything longer than 150 characters is trunca
 list= ["https://likho.neocities.org/microblog/meta.json"]
 date_format = "%Y %b %d"
 format="""
-<div class="postcell">
-    <img src="{__avatar__}" alt="Avatar" class="avatar">
-    <span class="wrapper"">
-        <div class="handle">
-            <a href="{__url__}">{__handle__}</a>
-        </div>
-        <div class="last-updated">Last Update: {__lastupdated__}</div>
-        <span class="post-count">Posts: {__post_count__}</span>
-    </span>
+<article>
+    <figure>
+        <img src="{__avatar__}" alt="Avatar" class="avatar">
+        <figcaption> 
+        <ul>
+            <li><a href="{__url__}" title="microblog of {__handle__}">{__handle__}</a></li>
+            <li><time>Last Update: {__lastupdated__}</time></li>
+            <li>Posts: {__post_count__}</li>
+        </ul>
+        </figcaption>
+    </figure>
     <p class="short-bio">{__shortbio__}</p>
-</div>
+</article>
 """
 
 # internally link avatars - avoids hotlinks
diff --git a/example/timeline.css b/example/timeline.css
index 1894d34..1aab43e 100644
--- a/example/timeline.css
+++ b/example/timeline.css
@@ -1,61 +1,76 @@
 
+body {
+    max-width:95%;
+    margin:auto;
+}
+
 @media only screen and (min-width: 768px) {
     .column {
         float: left;
-        width: 32%;
+        width: 30%;
     }
     .timeline {
         float: right;
         width: 67%;
     }
 }
-.postcell {
+
+/* POSTING */
+
+/* .postcell */
+.timeline article {
     border: 1px solid red; 
     text-align: left;
     margin: 0.25em 0
 }
-.message {
+.timeline article h4 {
+    text-align: right;
+    margin: 0.5em
+}
+.timeline article h4 ~ * {
     margin: 1em 1em 1em 3em;
-    white-space: pre-wrap;
     word-wrap: break-word;
 }
 .buttons {
     margin-left: 1em;
     margin-bottom:0.5em;
 }
-.timestamp {
-    text-align: right;
-    margin: 0.5em
-}
 .hashtag {
     color: green;
     font-weight: bold;
 }
+
+/* PROFILE */
+.column figure {
+    margin-left: 3%;
+}
 .avatar {
     vertical-align: middle;
     width: 50px;
     height: 50px;
 }
-.column .profile {
-    vertical-align: middle;
+.column {
+    border:1px solid blue;
     padding-left: 10px;
     padding:1%;
-    border:1px solid blue;
 }
-.column .profile .handle{
+.profile .handle{
     font-size: 1.1em;
     font-weight: bold;
 }
-.column .profile .email{
+.profile .email{
     font-size: 0.8em;
     text-align:left;
     text-decoration:none;
 }
-.column .profile .bio {
+.profile .bio {
     font-size: 0.9em;
     vertical-align: middle;
     margin: 1em
 }
+
+/* IMAGES */
+
 .gallery {
     margin:auto;
     display: flex;
@@ -74,31 +89,41 @@
     border: 1px solid #777;
     filter: invert(100%);
 }
-.postcell .avatar {
+
+/* WEBRING */
+
+.timeline article figure img {
     margin-left:3%;
     margin-top:2%;
     height: 4em;
     width:auto;
     vertical-align:top;
 }
-.postcell .wrapper {
-    margin-top:2%;
+.timeline article figure {
+    display:flex;
+    margin-left:0;
+}
+.timeline article figcaption {
+    margin-left: 3%;
     display: inline-block;
+    font-size: 0.85em;
 }
-.postcell .wrapper .last-updated,
-.postcell .wrapper .post-count {
-    font-size: 1em;
-    color:grey;
+.timeline article figcaption ul {
+    list-style-type:none;
+    padding-left:0;
 }
-.postcell .short-bio{
+.timeline article figcaption p {
+    margin-top:0;
+    margin-bottom:0;
+}
+.timeline article .short-bio{
     padding-left: 3%;
     padding-right: 2%;
     font-style: italic;
     word-wrap: break-word;
 }
-/* Clear floats after the columns */
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
+
+footer {
+    text-align:center;
 }
+
