Update Writing page to new design #9
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>
|
||||
{{ range where .essays "year" .year }}
|
||||
<button class="accordion">{{ .year }}</button>
|
||||
<div class="acc-panel">
|
||||
{{ range where .essays "year" .year }}
|
||||
<div class="writing-item">
|
||||
<p>{{ .year }}. <a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
|
||||
<p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ 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" 2018)}}
|
||||
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2017)}}
|
||||
{{ partial "accordion-script"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user