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

squash merge semantic2

Browse Source
This commit is contained in:
likho 2024-07-06 14:22:21 -07:00
parent bb0d20bd09
commit 575bf336f9
3 changed files with 89 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
example/default.tpl
View File

@ -1,51 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="initial-scale=1.0"> <meta name="viewport" content="width=device-width, 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>
<header> <header>
<h1>A Microblog in Plain HTML</h1> <h1>A Microblog in Plain HTML</h1>
</header> </header>
<div class="primary"> <aside class="column profile">
<figure>
<div> <img src="images/avatar.jpg" alt="(Avatar)" class="avatar">
<span>Your Name Here</span>
<aside> </figure>
<img src="./images/avatar.jpg" alt="Avatar" class="avatar"> <p>
<span class="handle">Your Name Here</span> <a href="mailto:user@host.tld">user@host.tld</a>
<p><span class="email"><a href="mailto:user@host.tld">user@host.tld</a></span></p> </p>
<div class="bio">Description <h2>About Me</h2>
<h4>{postcount} total posts</h4> <p>Your self-description here.</p>
<p>{postcount} total posts</p>
<h3>Tags</h3> <h3>Tags</h3>
<p>{tags}</p> <nav>{tags}</nav>
<h3>Pages</h3> <h3>Pages</h3>
<p>{pages}</p> <nav>{pages}</nav>
</aside> </aside>
</div> <main class="timeline">
<main>
{timeline} {timeline}
</main> </main>
</div>
<footer> <footer>
<a href="https://notabug.org/likho/microblog.py">microblog.py</a> <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
</footer> </footer>
</body> </body>
</html> </html>

27
example/settings.toml
View File

@ -19,10 +19,11 @@ 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__}"> <article id="{__num__}">
<time>{__timestamp__} <h4>
<time>{__timestamp__}</time>
<a href=#{__num__}>(#{__num__})</a> <a href=#{__num__}>(#{__num__})</a>
</time> </h4>
<div class="message">{__msg__}</div> {__msg__}
{__btn__} {__btn__}
</article> </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"] list= ["https://likho.neocities.org/microblog/meta.json"]
date_format = "%Y %b %d" date_format = "%Y %b %d"
format=""" format="""
<div class="postcell"> <article>
<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>
</div> </article>
""" """
# internally link avatars - avoids hotlinks # 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) { @media only screen and (min-width: 768px) {
.column { .column {
float: left; float: left;
width: 32%; width: 30%;
} }
.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
} }
.message { .timeline article h4 {
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 .profile { .column {
vertical-align: middle; border:1px solid blue;
padding-left: 10px; padding-left: 10px;
padding:1%; padding:1%;
border:1px solid blue;
} }
.column .profile .handle{ .profile .handle{
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.column .profile .email{ .profile .email{
font-size: 0.8em; font-size: 0.8em;
text-align:left; text-align:left;
text-decoration:none; text-decoration:none;
} }
.column .profile .bio { .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;
@ -74,31 +89,41 @@
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;
} }
.postcell .wrapper { .timeline article figure {
margin-top:2%; display:flex;
margin-left:0;
}
.timeline article figcaption {
margin-left: 3%;
display: inline-block; display: inline-block;
font-size: 0.85em;
} }
.postcell .wrapper .last-updated, .timeline article figcaption ul {
.postcell .wrapper .post-count { list-style-type:none;
font-size: 1em; padding-left:0;
color:grey;
} }
.postcell .short-bio{ .timeline article figcaption p {
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 */
.row:after { footer {
content: ""; text-align:center;
display: table;
clear: both;
} }