aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
-rw-r--r--_includes/jekyll-theme/posts/feed.html8
-rw-r--r--assets/css/jekyll-theme/posts.css35
2 files changed, 36 insertions, 7 deletions
diff --git a/_includes/jekyll-theme/posts/feed.html b/_includes/jekyll-theme/posts/feed.html
index 9e9e268..4fe4a29 100644
--- a/_includes/jekyll-theme/posts/feed.html
+++ b/_includes/jekyll-theme/posts/feed.html
@@ -2,20 +2,20 @@
<p class="h3">Sorry, no posts have been added yet.</p>
{% else %}
{% for post in paginator.posts %}
- <div class="feed-entry">
+ <a href="{{ post.url | relative_url }}" class="feed-entry">
<div class="post-header">
- <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
+ <h3>{{ post.title }}</h3>
<div class="post-date">
<p class="text-muted">
{% if post.category %}
- <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<a class="category" href="{{ '/' | relative_url }}{{ post.category | slugify: 'pretty' }}/">{{ post.category }}</a>
+ <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<span class="category">{{ post.category }}</span>
{% endif %}
<span class="glyphicon glyphicon-time"></span>&nbsp;{{ post.date | date: '%-d&nbsp;%b&nbsp;%Y' }}
</p>
</div>
</div>
{{ post.excerpt | markdownify }}
- </div>
+ </a>
{% endfor %}
{% include jekyll-theme/posts/paginator.html %}
{% endif %}
diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css
index bf10e90..59082d1 100644
--- a/assets/css/jekyll-theme/posts.css
+++ b/assets/css/jekyll-theme/posts.css
@@ -11,7 +11,7 @@
.post-date {
flex: none;
}
-.post-date a.category {
+.post-date .category {
margin-right: .5em;
}
@@ -23,8 +23,37 @@
column-gap: 1em;
}
-/* Don't use an actual <hr>, it's margins are too big, use a border instead. */
.feed-entry {
- /* The color of <hr>. */
+ /* The entire feed entry is a link now. */
+ display: block;
+ position: relative;
+ color: inherit !important;
+ /* Don't use an actual <hr>, it's margins are too big, use a border instead.
+ * The color of <hr>. */
border-bottom: 3px solid #eee;
}
+@media (min-width: 480px) {
+ /* If the screen width allows for it, add some padding on the sides. */
+ .feed-entry {
+ padding: 0 11px;
+ }
+}
+.feed-entry:hover, .feed-entry:focus {
+ /* Obviously, don't underline anything. The :focus case can be reproduced by
+ * long-pressing the link on Android, then dismissing the popup and long-
+ * pressing another link. */
+ text-decoration: none;
+}
+.feed-entry:hover {
+ /* This is the .list-group-item:hover background color. */
+ background-color: #f5f5f5;
+}
+
+.feed-entry h3 {
+ /* This is pretty funny and tragic, as is always the case with CSS.
+ * Android's Chrome thinks that it's not necessary to highlight the top
+ * margin (reproducible by long-pressing the link), _but_ it does highlight
+ * the top padding. This is obviously a browser bug. */
+ margin-top: 0;
+ padding-top: 22px;
+}