likho/microblog.py
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: likho:v0.3.0
Branches Tags
likho:master
likho:rss_1
likho:semantic
likho:syndication
likho:v0.3.1
likho:v0.3.0
likho:v0.2.1
likho:v0.2.0
likho:v0.1.0
..
compare: likho:master
Branches Tags
likho:rss_1
likho:master
likho:semantic
likho:syndication
likho:v0.3.1
likho:v0.3.0
likho:v0.2.1
likho:v0.2.0
likho:v0.1.0

3 Commits
v0.3.0 ... master

Author SHA1 Message Date
likho
575bf336f9 squash merge semantic2 2024-07-06 14:22:21 -07:00
Tarry_Dan
bb0d20bd09 Updated to use semantic elements; replaced <center>; added a lang tag 
* Semantic html is better for screen readers: main, header, footer, aside
* added a lang tag to html (so screenreaders know what language to read it in)
* center tag replaced with footer (center is depreciated)
 2024-07-04 17:58:26 -07:00
Tarry_Dan
7fba705bc6 Post exports as an <article> not a <div>, for better accessibility 2024-07-04 17:56:28 -07:00
3 changed files with 99 additions and 69 deletions
Show Stats Expand all files Collapse all files

56
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">
<header>
<h1>A Microblog in Plain HTML</h1>
</header>
<h1>A Microblog in Plain HTML</h1>
<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 = "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>
<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>

33
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

79
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;
}