diff options
| -rw-r--r-- | _includes/jekyll-theme/posts/feed.html | 8 | ||||
| -rw-r--r-- | assets/css/jekyll-theme/posts.css | 35 |
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> <a class="category" href="{{ '/' | relative_url }}{{ post.category | slugify: 'pretty' }}/">{{ post.category }}</a> + <span class="glyphicon glyphicon-folder-open"></span> <span class="category">{{ post.category }}</span> {% endif %} <span class="glyphicon glyphicon-time"></span> {{ post.date | date: '%-d %b %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; +} |