Create two column layout for wide screen browsers

master
Kevin C. Coram 2019-12-11 22:36:32 -05:00
parent ba844bf59a
commit d85b711791
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
2 changed files with 47 additions and 18 deletions

View File

@ -30,28 +30,32 @@
</nav> </nav>
</header> </header>
<main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind }}class="h-feed"{{ end }}> <main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind }}class="h-feed"{{ end }}>
<header> <div class="content-box">
{{- block "content-header" . -}} <header>
{{- end -}} {{- block "content-header" . -}}
{{- end -}}
</header>
<section>
{{- block "content" . -}}
<!-- The part of the page that begins to differ between templates -->
{{ end }}
</section>
<footer>
{{- block "content-footer" . -}}
{{- end -}}
</footer>
</div>
<div class="asides-box">
<aside>
{{ block "author-card" . }}
{{ partial "author-card.html" . }}
{{ end }}
</aside>
<nav> <nav>
{{- block "content-menu" . -}} {{- block "content-menu" . -}}
{{- end -}} {{- end -}}
</nav> </nav>
</header> </div>
<section>
{{- block "content" . -}}
<!-- The part of the page that begins to differ between templates -->
{{ end }}
</section>
<footer>
{{- block "content-footer" . -}}
{{- end -}}
</footer>
<aside>
{{ block "author-card" . }}
{{ partial "author-card.html" . }}
{{ end }}
</aside>
</main> </main>
<footer> <footer>
{{- block "footer" . -}} {{- block "footer" . -}}

View File

@ -1,5 +1,6 @@
.box { .box {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -28,3 +29,27 @@ nav.paginator ul {
padding-inline-start: 1em; padding-inline-start: 1em;
padding-inline-end: 1em; padding-inline-end: 1em;
} }
/* Define grid layout for wide screen browsers */
div.content-box {
grid-area: content;
}
div.asides-box {
grid-area: aside;
}
@media (min-width: 1024px) {
div.asides-box {
max-width: 350px;
border-left: thin solid;
margin: 1em;
}
main {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-areas:
"content aside";
}
}