kevin
/
semantic-indieweb
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
layouts/_default/baseof.html
View File

@ -30,28 +30,32 @@
</nav>
</header>
<main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind }}class="h-feed"{{ end }}>
<header>
{{- block "content-header" . -}}
{{- end -}}
<div class="content-box">
<header>
{{- 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>
{{- block "content-menu" . -}}
{{- end -}}
</nav>
</header>
<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>
</div>
</main>
<footer>
{{- block "footer" . -}}

25
static/css/layout.css
View File

@ -1,5 +1,6 @@
.box {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
@ -28,3 +29,27 @@ nav.paginator ul {
padding-inline-start: 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";
}
}