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

Compare commits

base: likho:master
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:v0.3.0
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

No commits in common. "master" and "v0.3.0" have entirely different histories.
master ... v0.3.0

3 changed files with 69 additions and 99 deletions
Show Stats Expand all files Collapse all files

56
example/default.tpl
View File

@ -1,44 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="initial-scale=1.0">
<title>Microblog</title> <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"> <link href="./timeline.css" rel="stylesheet" type="text/css" media="all">
</head> </head>
<body> <body>
<div class="content">
<header>
<h1>A Microblog in Plain HTML</h1>
</header>
<aside class="column profile"> <h1>A Microblog in Plain HTML</h1>
<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>
<main class="timeline"> <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">
{timeline} {timeline}
</main> </div>
</div>
<footer> <center>
<a href="https://notabug.org/likho/microblog.py">microblog.py</a> <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
</footer> </center>
</div>
</body> </body>
</html> </html>

33
example/settings.toml
View File

@ -18,14 +18,13 @@ tag_paragraphs=true
inline_tags = ["i", "em", "b", "strong","u", "s", "a", "span"] inline_tags = ["i", "em", "b", "strong","u", "s", "a", "span"]
date_format="%d %B %Y" date_format="%d %B %Y"
format=""" format="""
<article id="{__num__}"> <div class="postcell" id="{__num__}">
<h4> <div class="timestamp">{__timestamp__}
<time>{__timestamp__}</time>
<a href=#{__num__}>(#{__num__})</a> <a href=#{__num__}>(#{__num__})</a>
</h4> </div>
{__msg__} <div class="message">{__msg__}</div>
{__btn__} {__btn__}
</article> </div>
""" """
[post.buttons] [post.buttons]
@ -56,19 +55,17 @@ short-bio= "Your self-description. Anything longer than 150 characters is trunca
list= ["https://likho.neocities.org/microblog/meta.json"] list= ["https://likho.neocities.org/microblog/meta.json"]
date_format = "%Y %b %d" date_format = "%Y %b %d"
format=""" format="""
<article> <div class="postcell">
<figure> <img src="{__avatar__}" alt="Avatar" class="avatar">
<img src="{__avatar__}" alt="Avatar" class="avatar"> <span class="wrapper"">
<figcaption> <div class="handle">
<ul> <a href="{__url__}">{__handle__}</a>
<li><a href="{__url__}" title="microblog of {__handle__}">{__handle__}</a></li> </div>
<li><time>Last Update: {__lastupdated__}</time></li> <div class="last-updated">Last Update: {__lastupdated__}</div>
<li>Posts: {__post_count__}</li> <span class="post-count">Posts: {__post_count__}</span>
</ul> </span>
</figcaption>
</figure>
<p class="short-bio">{__shortbio__}</p> <p class="short-bio">{__shortbio__}</p>
</article> </div>
""" """
# internally link avatars - avoids hotlinks # internally link avatars - avoids hotlinks

79
example/timeline.css
View File

@ -1,76 +1,61 @@
body {
max-width:95%;
margin:auto;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.column { .column {
float: left; float: left;
width: 30%; width: 32%;
} }
.timeline { .timeline {
float: right; float: right;
width: 67%; width: 67%;
} }
} }
.postcell {
/* POSTING */
/* .postcell */
.timeline article {
border: 1px solid red; border: 1px solid red;
text-align: left; text-align: left;
margin: 0.25em 0 margin: 0.25em 0
} }
.timeline article h4 { .message {
text-align: right;
margin: 0.5em
}
.timeline article h4 ~ * {
margin: 1em 1em 1em 3em; margin: 1em 1em 1em 3em;
white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
.buttons { .buttons {
margin-left: 1em; margin-left: 1em;
margin-bottom:0.5em; margin-bottom:0.5em;
} }
.timestamp {
text-align: right;
margin: 0.5em
}
.hashtag { .hashtag {
color: green; color: green;
font-weight: bold; font-weight: bold;
} }
/* PROFILE */
.column figure {
margin-left: 3%;
}
.avatar { .avatar {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.column { .column .profile {
border:1px solid blue; vertical-align: middle;
padding-left: 10px; padding-left: 10px;
padding:1%; padding:1%;
border:1px solid blue;
} }
.profile .handle{ .column .profile .handle{
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.profile .email{ .column .profile .email{
font-size: 0.8em; font-size: 0.8em;
text-align:left; text-align:left;
text-decoration:none; text-decoration:none;
} }
.profile .bio { .column .profile .bio {
font-size: 0.9em; font-size: 0.9em;
vertical-align: middle; vertical-align: middle;
margin: 1em margin: 1em
} }
/* IMAGES */
.gallery { .gallery {
margin:auto; margin:auto;
display: flex; display: flex;
@ -89,41 +74,31 @@ body {
border: 1px solid #777; border: 1px solid #777;
filter: invert(100%); filter: invert(100%);
} }
.postcell .avatar {
/* WEBRING */
.timeline article figure img {
margin-left:3%; margin-left:3%;
margin-top:2%; margin-top:2%;
height: 4em; height: 4em;
width:auto; width:auto;
vertical-align:top; vertical-align:top;
} }
.timeline article figure { .postcell .wrapper {
display:flex; margin-top:2%;
margin-left:0;
}
.timeline article figcaption {
margin-left: 3%;
display: inline-block; display: inline-block;
font-size: 0.85em;
} }
.timeline article figcaption ul { .postcell .wrapper .last-updated,
list-style-type:none; .postcell .wrapper .post-count {
padding-left:0; font-size: 1em;
color:grey;
} }
.timeline article figcaption p { .postcell .short-bio{
margin-top:0;
margin-bottom:0;
}
.timeline article .short-bio{
padding-left: 3%; padding-left: 3%;
padding-right: 2%; padding-right: 2%;
font-style: italic; font-style: italic;
word-wrap: break-word; word-wrap: break-word;
} }
/* Clear floats after the columns */
footer { .row:after {
text-align:center; content: "";
display: table;
clear: both;
} }