Home Explore Help
Sign In
likho
/
microblog.py
Watch 1
Star 0
Fork 1

3 Commits 2d302bfec9 ... 575bf336f9

Author SHA1 Message Date
  likho 575bf336f9 squash merge semantic2 5 months ago
  Tarry_Dan bb0d20bd09 Updated to use semantic elements; replaced <center>; added a lang tag 1 year ago
  Tarry_Dan 7fba705bc6 Post exports as an <article> not a <div>, for better accessibility 1 year ago
3 changed files with 99 additions and 69 deletions
Split View Show Diff Stats
  1. 29 27
      example/default.tpl
  2. 18 15
      example/settings.toml
  3. 52 27
      example/timeline.css

+ 29 - 27
example/default.tpl
View File 

@@ -1,42 +1,44 @@
 
 <!DOCTYPE html>
 
-<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>
 
-<div class="content"> 
-
 
 
-<h1>A Microblog in Plain HTML</h1>
 
+<header>
 
+    <h1>A Microblog in Plain HTML</h1>
 
+</header>
 
 
-<div class = "row"> <div class = "column">
 
-    <div class="profile">
 
-        <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>
 
-        </div>
 
-    </div>
 
-</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>
 
 
-    <div class = "timeline">
 
+<main class="timeline">
 
     {timeline}
 
-    </div>
 
-</div>
 
+</main>
 
 
-<center>
 
-<a href="https://notabug.org/likho/microblog.py">microblog.py</a>
 
-</center>
 
+<footer>
 
+    <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
 
+</footer>
 
 
-</div>
 
 </body>
 
 </html>
 
+

+ 18 - 15
example/settings.toml
View File 

@@ -18,13 +18,14 @@ tag_paragraphs=true
 
 inline_tags = ["i", "em", "b", "strong","u", "s", "a", "span"]
 
 date_format="%d %B %Y"
 
 format="""
 
-<div class="postcell" id="{__num__}">
 
-    <div class="timestamp">{__timestamp__}
 
+<article id="{__num__}">
 
+    <h4>
 
+        <time>{__timestamp__}</time>
 
         <a href=#{__num__}>(#{__num__})</a>
 
-    </div>
 
-    <div class="message">{__msg__}</div>
 
+    </h4>
 
+    {__msg__}
 
     {__btn__}
 
-</div>
 
+</article>
 
 """
 
 
 [post.buttons]
 
@@ -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

+ 52 - 27
example/timeline.css
View File 

@@ -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;
 
 }
 
+