lynnesbian/bune.city
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvements to the post layout

Browse source
This commit is contained in:
Lynne Megido 2020-04-06 00:06:25 +10:00
parent 0d71757b79
commit 43438ffec3
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
2 changed files with 79 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
_layouts/post.html
View file

@ -5,18 +5,45 @@ layout: default
<h1 id='post-title'>{{ page.title }}</h1>
<main>
<article id='post-content'>
<section id='post-info'><i class='material-icons'>person</i> By {{ page.author }} <i class='material-icons'>access_time</i> Published {{ page.date | date_to_long_string: "ordinal" }}</section>
<section id='post-info'>
<i class='material-icons'>person</i> By {{ page.author }} <br>
<i class='material-icons'>access_time</i> Published {{ page.date | date_to_long_string: "ordinal" }} <br>
<i class='material-icons'>group_work</i> Categories:
{{ " " }}{%- for category in page.categories -%}
<a href='/categories/{{ category }}'>{{ category }}</a>
{%- unless category == page.categories.last %}, {% endunless %}
{%- endfor %} <br>
<i class='material-icons'>label</i> Tags:
{{ " " }}{%- for tag in page.tags -%}
<a href='/tags/{{ category }}'>{{ tag }}</a>
{%- unless tag == page.tags.last %}, {% endunless %}
{%- endfor %}
</section>
<section id='post-body'>
{{ content }}
</section>
<!-- <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> -->
<hr>
<section id='post-related'>
<h2 id='related'>Posts like this</h2>
<div id='post-related-posts'>
{% for post in site.related_posts | limit: 3 -%}
<div class='related-post'>
<div class='related-title'>{{ post.title }}</div>
<p>
{% if post.summary %}{{ post.summary }}{% else %}{{ post.excerpt | summarise }}{% endif %}
</p>
<a href='{{ post.url }}'>Read more</a>
</div>
{%- endfor %}
</div>
</section>
<section id='post-share'>
<h2>Share this post</h2>
<h2 id='share'>Share this post</h2>
coming soon uwu
</section>
<section id='post-comments'>
<h2>Leave a comment</h2>
<h2 id='comments'>Leave a comment</h2>
coming soon uwu
</section>
</article>

62
assets/style.css
View file

@ -1,6 +1,7 @@
body {
font-family: "Liberation Sans", "Nimbus Sans", "Arial", "Helvetica", sans-serif;
margin: 0;
margin-bottom: 20px;
}
h1 {
@ -47,25 +48,31 @@ main {
a {
color: #222;
text-decoration-style: dotted;
text-decoration-thickness: 3px;
text-decoration-skip-ink: none;
text-decoration-color: #9fc;
}
h1 a,
h2 a {
h2 a,
nav a {
text-decoration: none;
}
.post h2 {
margin-bottom: 5px;
}
.post-excerpt h2 {
display: none;
}
p, li {
line-height: 1.6em;
}
/* post view */
#post-title {
font-family: serif;
margin-bottom: 1rem;
}
#post-content h2 {
@ -80,29 +87,33 @@ h2 a {
color: #333;
}
.post-nav-link {
margin-left: 5px;
}
/* the content of the posts */
#post-body {
line-height: 1.6em;
#post-body > p {
text-align: justify;
}
#post-body img {
margin: 5px auto;
max-width: 800px;
display: block;
box-shadow: 0 0 10px grey;
/* box-shadow: 0 0 10px grey; */
}
#post-body img,
#post-body video {
max-width: 800px;
}
#post-body figure.video {
text-align: center;
display: flex;
flex-direction: column;
width: min-content;
margin: 0 auto;
padding: 10px;
width: 80%;
}
#post-body figure.video video {
max-width: max-content;
margin: 0 auto;
max-width: 100%;
}
#post-body figure.video figcaption {
font-style: italic;
@ -140,6 +151,31 @@ h2 a {
border: none;
}
/* related posts */
.related-post {
border: thin black solid;
border-radius: 2px;
}
#post-related-posts {
display: flex;
justify-content: space-between;
}
.related-post {
flex: 1;
margin: 5px;
padding: 10px;
}
.related-title {
text-align: center;
font-family: serif;
font-size: 1.3em;
}
/* material icons */
.material-icons {
font-family: 'Material Icons';