style: update homepage post list to use flexbox for better mobile support
This commit is contained in:
parent
b107fe7299
commit
d69cc8eec2
|
@ -14,5 +14,5 @@
|
|||
{% endif %}
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
@ -4,11 +4,11 @@ title: Home
|
|||
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 %}
|
||||
<li>
|
||||
<a style="display:inline-block;width:60%;" 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>
|
||||
<li style="align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px;">
|
||||
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
|
||||
<time style="font-size:90%;" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
Loading…
Reference in a new issue