writing: add accordion functionality
This commit is contained in:
parent
5207ecca45
commit
9135a41cd6
16
layouts/partials/accordion-script.html
Normal file
16
layouts/partials/accordion-script.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
var acc = document.getElementsByClassName("accordion");
|
||||||
|
var i;
|
||||||
|
|
||||||
|
for (i = 0; i < acc.length; i++) {
|
||||||
|
acc[i].addEventListener("click", function() {
|
||||||
|
this.classList.toggle("active");
|
||||||
|
var panel = this.nextElementSibling;
|
||||||
|
if (panel.style.maxHeight) {
|
||||||
|
panel.style.maxHeight = null;
|
||||||
|
} else {
|
||||||
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
@ -1,6 +1,8 @@
|
|||||||
<h2>{{ .year }}</h2>
|
<button class="accordion">{{ .year }}</button>
|
||||||
{{ range where .essays "year" .year }}
|
<div class="acc-panel">
|
||||||
<div class="writing-item">
|
{{ range where .essays "year" .year }}
|
||||||
<p>{{ .year }}. <a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
|
<div class="writing-item">
|
||||||
</div>
|
<p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
|
||||||
{{ end }}
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
37
layouts/partials/head.html
Normal file
37
layouts/partials/head.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
{{ $title := print .Site.Title " | " .Title }}
|
||||||
|
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
|
||||||
|
{{/* scss compiling */}}
|
||||||
|
{{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed") }}
|
||||||
|
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
|
||||||
|
{{ template "_internal/twitter_cards.html" . }}
|
||||||
|
<link href='{{ $style.RelPermalink }}' rel="stylesheet">
|
||||||
|
<title>{{ $title }}</title>
|
||||||
|
{{- partial "octocss.html" . -}}
|
||||||
|
{{ if eq .Title "Writing" }}
|
||||||
|
<style>
|
||||||
|
.accordion {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #444;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 18px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
outline: none;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acc-panel {
|
||||||
|
padding: 0 18px;
|
||||||
|
background-color: white;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.2s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{{ end }}
|
||||||
|
</head>
|
@ -13,6 +13,7 @@
|
|||||||
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2019)}}
|
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2019)}}
|
||||||
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2018)}}
|
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2018)}}
|
||||||
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2017)}}
|
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2017)}}
|
||||||
|
{{ partial "accordion-script"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user