writing: style accordion

This commit is contained in:
desmukh 2022-12-27 12:21:49 +05:00
parent 9135a41cd6
commit eede62d12d
3 changed files with 51 additions and 18 deletions

View File

@ -1,8 +1,19 @@
<button class="accordion">{{ .year }}</button> <div class="level accordion">
<div class="acc-panel"> <div class="level-left">
{{ range where .essays "year" .year }} <div class="level-item">{{ .year }}</div>
<div class="writing-item">
<p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
</div> </div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa-sharp fa-solid fa-circle-arrow-down"></i>
</span>
</div>
</div>
</div>
<div class="acc-panel">
<div class="acc-panel-content">
{{ range where .essays "year" .year }}
<p><a href={{ .url }}><strong>{{ .title }}</strong></a>, {{ .publication }}, {{ .date }}.</p>
{{ end }} {{ end }}
</div> </div>
</div>

View File

@ -13,25 +13,47 @@
{{ if eq .Title "Writing" }} {{ if eq .Title "Writing" }}
<style> <style>
.accordion { .accordion {
background-color: transparent;
color: #444;
cursor: pointer; cursor: pointer;
padding: 18px; margin-bottom: 0 !important;
width: 100%; padding: 8px 0 8px 0;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
} }
.acc-panel { .acc-panel {
padding: 0 18px;
background-color: white;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out;
border-bottom: 1px solid;
font-weight: 600;
} }
.acc-panel-content {
padding-bottom: 20px;
}
.acc-panel p{
padding-bottom: 8px;
}
.acc-panel a {
color: #0C84DC;
}
#writing-page .thead {
font-family: IBMPlexSans;
}
.accordion .level-item {
font-family: IBMPlexSans;
}
.accordion .icon {
font-size: 1.5rem;
}
.writing-section {
padding-bottom: 28px;
}
</style> </style>
<script src="https://kit.fontawesome.com/a42e899e51.js" crossorigin="anonymous"></script>
{{ end }} {{ end }}
</head> </head>

View File

@ -1,5 +1,5 @@
{{ define "main"}} {{ define "main"}}
<div id="content" class="section writing"> <div id="writing-page" class="section writing">
<div> <div>
<div class="writing-section"> <div class="writing-section">
<div class="columns"> <div class="columns">