style: update homepage post list to use flexbox for better mobile support

This commit is contained in:
Bradley Taunt 2019-08-30 09:00:21 -04:00
parent b107fe7299
commit d69cc8eec2
2 changed files with 5 additions and 5 deletions

View file

@ -14,5 +14,5 @@
{% endif %} {% endif %}
<link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico"> <link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/atom.xml"> <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/atom.xml">
<style>html,body{background:#fffaf7;color:#2d2d2d;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}a,a:visited{color:darkred;text-decoration:none;}a:hover{text-decoration:underline;}main{margin:auto;max-width:38rem;padding:0.8rem;}pre{background:white;overflow:scroll;padding:1rem;}td{border:1px solid #2d2d2d;padding:10px;}img{max-width:100%;}</style> <style>html,body{background:#fffaf7;color:#2d2d2d;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}a,a:visited{color:darkred;text-decoration:none;}a:hover{text-decoration:underline;}main{margin:auto;max-width:38rem;padding:0.8rem;}pre{background:white;overflow:scroll;padding:1rem;}td{border:1px solid #2d2d2d;padding:10px;}img{max-width:100%;}@media(max-width:38rem){.homepage-list li a{width:100%;}}</style>
</head> </head>

View file

@ -4,11 +4,11 @@ title: Home
description: The personal blog of designer and developer Bradley Taunt description: The personal blog of designer and developer Bradley Taunt
--- ---
<ul style="list-style:none;padding:1rem 0;"> <ul class="homepage-list" style="list-style:none;padding:1rem 0;">
{% for post in site.posts %} {% for post in site.posts %}
<li> <li style="align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px;">
<a style="display:inline-block;width:60%;" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a> <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
<time style="float:right;font-size:90%;" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time> <time style="font-size:90%;" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>