Commit e5d931a4 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Make home HTML more semantic. Line up latest photo and note side-by-side on homepage

parent e4b9a7ff
{{ define "main" }}
<article>
<div class="entry-content">
{{ .Content }}
</div>
</article>
<section class="intro entry-content">
{{ .Content }}
</section>
{{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
{{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
{{/* Create a variable with that section to use in multiple places. */}}
......@@ -36,21 +34,27 @@
</section>
{{ end }}
{{ range first 1 (where .Data.Pages "Section" "notes") }}
<h2>Latest Note</h2>
<div class="notes-list note-post">
<h3>
<a href="{{ .URL }}">
{{- .Title -}}
</a>
</h3>
{{ partial "summary.html" . }}
</div>
{{ end }}
{{ range first 1 (where .Data.Pages "Section" "photos") }}
<h2>Latest Photo</h2>
<div class="photos-list photo-post">
{{ partial "summary-photo.html" . }}
</div>
{{ end }}
<div class="latest">
<section class="latest-note">
{{ range first 1 (where .Data.Pages "Section" "notes") }}
<h2>Latest Note</h2>
<div class="note">
<h3>
<a href="{{ .URL }}">
{{- .Title -}}
</a>
</h3>
{{ partial "summary.html" . }}
</div>
{{ end }}
</section>
<section class="latest-photo">
{{ range first 1 (where .Data.Pages "Section" "photos") }}
<h2>Latest Photo</h2>
<div class="photo">
{{ partial "summary-photo.html" . }}
</div>
{{ end }}
</section>
</div>
{{ end }}
......@@ -595,6 +595,26 @@ body.contact-me .navigation-menu a[href="/"] {
/* - - - - - - - - VIEW-SPECIFIC
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - HOME
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (min-width: 70em) {
/* make latest note and photo on homepage split into two columns on wider views */
body.home .latest {
display: grid;
grid-template-columns: auto 50%;
}
}
body.home .note {
margin-left: 0;
}
body.home .latest-note h3 {
margin-top: 1.2em;
}
/* - - - - - - - - BLOG
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment