squash merge semantic2
This commit is contained in:
parent
bb0d20bd09
commit
575bf336f9
@ -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>
|
||||||
|
<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>
|
<main class="timeline">
|
||||||
|
|
||||||
<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>
|
|
||||||
{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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
<img src="{__avatar__}" alt="Avatar" class="avatar">
|
<figure>
|
||||||
<span class="wrapper"">
|
<img src="{__avatar__}" alt="Avatar" class="avatar">
|
||||||
<div class="handle">
|
<figcaption>
|
||||||
<a href="{__url__}">{__handle__}</a>
|
<ul>
|
||||||
</div>
|
<li><a href="{__url__}" title="microblog of {__handle__}">{__handle__}</a></li>
|
||||||
<div class="last-updated">Last Update: {__lastupdated__}</div>
|
<li><time>Last Update: {__lastupdated__}</time></li>
|
||||||
<span class="post-count">Posts: {__post_count__}</span>
|
<li>Posts: {__post_count__}</li>
|
||||||
</span>
|
</ul>
|
||||||
|
</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
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user