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

8
layouts/home.html
View file

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