on master help sign in
essays/list.html: add images
1977a60Matilde Park
sass/_main.scss+6
@@ -97,6 +97,12 @@ figcaption.home {
97 margin: 0 auto;
97 margin: 0 auto;
98}
98}
99
99
100+// obj-fit contain util
101+
102+.obj-cover {
103+ object-fit: cover;
104+}
105+
100a {
106a {
101 color: inherit;
107 color: inherit;
102 text-decoration: none;
108 text-decoration: none;
templates/essays/list.html+20−15
@@ -1,17 +1,17 @@
1{% extends "base.html" %}
1{% extends "base.html" %}
2
2
3−{% block title %}
3+{% block title %}
4− <meta name="og:title" content="Blog - {{ config.title }}">
4+<meta name="og:title" content="Blog - {{ config.title }}">
5− <title>Blog - {{ config.title }}</title>
5+<title>Blog - {{ config.title }}</title>
6{% endblock title %}
6{% endblock title %}
7
7
8−{% block description %}
8+{% block description %}
9− <meta name="og:description" content="Directory for the Urbit Blog.">
9+<meta name="og:description" content="Directory for the Urbit Blog.">
10− <meta name="description" content="Directory for the Urbit Blog.">
10+<meta name="description" content="Directory for the Urbit Blog.">
11{% endblock description %}
11{% endblock description %}
12
12
13{% block image %}
13{% block image %}
14− <meta name="twitter:image" content="https://media.urbit.org/logo/urbit-logo-card.png">
14+<meta name="twitter:image" content="https://media.urbit.org/logo/urbit-logo-card.png">
15{% endblock image %}
15{% endblock image %}
16
16
17{% block content %}
17{% block content %}
@@ -29,14 +29,19 @@
29 <ul class="posts measure-wide">
29 <ul class="posts measure-wide">
30 {% set posts = get_section(path="blog/_index.md") %}
30 {% set posts = get_section(path="blog/_index.md") %}
31 {% for page in posts.pages %}
31 {% for page in posts.pages %}
32+ <a class="bb-0" href="{{ page.permalink }}">
32− <li class="mb4">
33+ <li class="mb4">
33− <h2 class="f5 fw6 mt0 mb1"><a class="bb-0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
34+ <h2 class="f5 fw6 mt0 mb1">{{ page.title }}</h2>
34− <p class="mt0">{{ page.description }}</p>
35+ <p class="mt0">{{ page.description }}</p>
36+ {% if page.extra.image %}
37+ <img class="pv2 obj-cover h5 w-100" src="{{ page.extra.image }}"/>
38+ {% endif %}
35− <time class="mono f6">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>
39+ <time class="mono f6">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>
36− <span class="mono f6">
40+ <span class="mono f6">
37− {% if page.extra.ship %}<address class="mono f6 ml2">{{ page.extra.ship }}</address> {% endif %}
41+ {% if page.extra.ship %}<address class="mono f6 ml2">{{ page.extra.ship }}</address> {% endif %}
38− </span>
42+ </span>
39− </li>
43+ </li>
44+ </a>
40 {% endfor %}
45 {% endfor %}
41 </ul>
46 </ul>
42</article>
47</article>