michael/blog
1
0
Fork 0
Code Issues 2 Pull requests Releases Packages 1 Wiki Activity

Change to list so it still reads ok on text-only browsers

Browse source
This commit is contained in:
Michael Zhang 2022-01-24 18:41:57 -06:00
parent 9336875427
commit ad17aefc9c
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/sass/_home.scss
View file

@ -63,20 +63,30 @@
@media screen and (max-width: 520px) {
flex-wrap: wrap;
gap: 6px;
}
@media screen and (min-width: 520px) {
flex-wrap: no-wrap;
gap: 20px;
}
gap: 20px;
list-style-type: none;
padding: 0;
.blog-post-link {
flex-grow: 1;
flex-basis: 100%;
> li {
display: block;
width: 100%;
padding: 8px;
background-color: $faded-background-color;
text-decoration: none;
flex-grow: 1;
flex-basis: 100%;
}
.blog-post-link {
text-decoration: none;
.blog-post {
display: flex;
width: 100%;

8
layouts/home.html
View file

@ -7,19 +7,19 @@
<div id="about">{{ .Content }}</div>
<h2 id="blog-posts-title"><a href="/posts">recent blog posts &raquo;</a></h2>
<div id="blog-posts">
<ul id="blog-posts">
{{ $posts := .GetPage "/posts" }}
{{- range first 3 $posts.Pages -}}
<a href="{{ .RelPermalink }}" class="blog-post-link">
<li><a href="{{ .RelPermalink }}" class="blog-post-link">
<span class="blog-post">
<span class="title">{{ .Title }}</span>
<small class="details">
{{ .Date.Format "Mon Jan 02, 2006" }}
</small>
</span>
</a>
</a></li>
{{- end -}}
</div>
</ul>
</div>
</div>